<template>
	
	<!-- Start Header/Navigation -->
    <HomeButton />
    <!-- End Header/Navigation -->

	<div class="reveal" ref="revealRef">
      <div class="slides">
  
  
  
<section>
	<!-- <p class="pb-5 mb-5"> -->
		<h1>💻 진로탐색</h1>
	<!-- </p> -->

	<table class="table caption-top table-borderless table-responsive card-1 p-4">
		<caption>고등학생 대상</caption>
		<thead>
			<tr class="border-bottom">
			<th>
				<span class="ml-2">주제</span>
			</th>
			<th>
				<span class="ml-2">부주제</span>
			</th>
			<th>
				<span class="ml-4">Action</span>
			</th>
			</tr>
		</thead>
  <tbody>
    <tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">대학 입학 이후</span>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">관련학과</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">산업분야</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(2)"></i>
			</div>
		</td>
	</tr>
    <tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">프로그래머가 하는 일</span>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">프로그램이 만들어지는 과정</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">프로그래머의 종류</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(3)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(5)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">프로그래머 삶</span>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">내가 진로를 선택했던 순간</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">뛰어난 프로그래머가 되려면..</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">명과 암</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(7)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(8)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(9)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">대학 졸업 이후</span>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">도전적 vs 안정적</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">면접과 자기소개서 꿀 팁</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(10)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(11)"></i>
			</div>
		</td>
	</tr>
	
  </tbody>
</table>

</section>
<section>
	<h2 class="pb-2">1. 대학 입학 이후 - 관련학과 </h2>
	<div class="row justify-content-around">
		<div class="col-md-11">
		<div class="card mb-3 text-left">
			<div class="card-header fs-4 fw-bold bg-success text-white">이공계 전 분야</div>
			<ol class="list-group list-group-flush">
			<li class="list-group-item"><span class="text-danger">'컴퓨터', '로봇', '데이터', 'IT', '정보'</span> 가 들어간 모든 분야는 "전문적"으로 학습</li>
			<li class="list-group-item">산업 공학과, 기계공학과 등의 학과에서도 코딩을 일정수준 학습</li>
			<li class="list-group-item">산업 공학과가 컴퓨터 공학과라는 썰이 있음</li>
			</ol>
		</div>
		</div>
		<div class="col-md-11 ml-auto mt-5">
		<div class="card mb-3 text-left">
			<div class="card-header fs-4 fw-bold bg-success text-white">인문계는 교양</div>
			<ol class="list-group list-group-flush">
			<li class="list-group-item">인문계열 학과는 <span class="text-danger">교양으로 "코딩"을 학습</span></li>
			<li class="list-group-item">융합교육으로 학습을 유도</li>
			</ol>
		</div>
		</div>
	</div>
</section>
<section>
	<h2 class="pb-2">1. 대학 입학 이후 - 산업분야</h2>
	<img src="/school/1.png" height="600px"/>
</section>
<section>
	<h2 class="pb-2">2. 프로그래머가 하는 일 - 프로그램이 만들어지는 과정</h2>
	<div class="row justify-content-around">
		<div class="col-md-4">
		<div class="card mb-3 text-left">
			<div class="card-header fs-4 fw-bold bg-secondary text-white">어플 제작</div>
			<img src="/school/2.png" alt="프로그램이 만들어지는 과정" height="500px"/>
		</div>
		</div>
		<div class="col-md-7 ml-auto">
		<div class="row">
			<div class="card mb-3 text-left">
			<div class="card-header fs-4 fw-bold bg-secondary text-white">데이터 수집</div>
			<ol class="list-group list-group-flush">
				<li class="list-group-item">가맹점 등록 및 관리 페이지
				<br><span class="fs-6 px-3">> 위치정보, 한식/분식 등 분야 등등..</span>
				</li>
				<li class="list-group-item">사용자 관리 페이지</li>
				<li class="list-group-item">국내 지도 정보
				<br><span class="fs-6 px-3">> 위도, 경도, 주소록</span>
				</li>
				<li class="list-group-item">주문 시 사용자 정보를 통해 데이터 가공
				<br><span class="fs-6 px-3">> 연령별, 성별, 지역별 많이 주문하는 사람들의 취향 및 가격 대를 프로그램을 통해 가공</span>
				</li>
			</ol>
			</div>
		</div>
		<div class="row">
			<div class="card mb-3 text-left">
			<div class="card-header fs-4 fw-bold bg-secondary text-white">데이터 보관</div>
			<ol class="list-group list-group-flush">
				<li class="list-group-item">위의 수집 데이터를 데이터 저장소에 저장 및 관리</li>
			</ol>
			</div>
		</div>
		</div>
	</div>
</section>
<section>
	<h2 class="pb-2">2. 프로그래머가 하는 일 - 프로그램이 만들어지는 과정</h2>
	<img src="/school/3.png" height="600px"/>
</section>
<section>
	<h2 class="pb-2">2. 프로그래머가 하는 일 - 프로그래머의 종류</h2>
	<img src="/school/4.png" height="600px"/>
</section>
<section>
	<h2 class="pb-2">2. 프로그래머가 하는 일 - 프로그래머의 종류</h2>
	<img src="/school/5.png" height="600px"/>
</section>
<section>
	<h2 class="pb-2">3. 프로그래머 삶 - 내가 진로를 선택했던 순간</h2>
	<img src="/school/6.jpg" height="600px"/>
</section>
<section>
	<h2 class="pb-2">3. 프로그래머 삶 - 뛰어난 프로그래머가 되려면..</h2>
	<div class="row justify-content-around">
		<div class="col-md-7">
		<div class="row">
			<div class="card mb-3 text-left">
			<div class="card-header fs-4 fw-bold bg-danger text-white">자기주도적 학습이 요구</div>
			<ol class="list-group list-group-flush">
				<li class="list-group-item">대학에서는 앞의 로드맵의 10프로만 학습</li>
				<li class="list-group-item">기업은 '신입 같지 않는 신입' 선호</li>
			</ol>
			</div>
		</div>
		<div class="row">
			<div class="card mb-3 text-left">
			<div class="card-header fs-4 fw-bold bg-danger text-white">성향</div>
			<ol class="list-group list-group-flush">
				<li class="list-group-item">완벽주의 / 꼼꼼함</li>
				<li class="list-group-item">프로그래밍은 중간에 Break할 수 없다.</li>
			</ol>
			</div>
		</div>
		<div class="row">
			<div class="card mb-3 text-left">
			<div class="card-header fs-4 fw-bold bg-danger text-white">연속성</div>
			<ol class="list-group list-group-flush">
				<li class="list-group-item">30세 이후에도 프로그래밍을 할 정도로 좋아해야..</li>
				<li class="list-group-item">새로운 기술에 대한 탐독과 욕심</li>
				<li class="list-group-item">변화에 대응을 잘하는 사람</li>
			</ol>
			</div>
		</div>
		</div>
		<div class="col-md-4 ml-auto">
		<div class="card mb-3 text-left">
			<div class="card-header fs-4 fw-bold bg-danger text-white">경희대 1학년생 작품</div>
			<img src="/school/7.png" alt="프로그램이 만들어지는 과정" height="500px"/>
		</div>
		</div>
	</div>
</section>
<section>
	<h2 class="pb-2">3. 프로그래머 삶 - 명과 암</h2>
	<div class="row justify-content-around pb-2">
		<div class="col-md-11">
		<table class="table table-dark table-striped" style="font-size: 20px;">
			<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col">스타트 업(~10명)</th>
				<th scope="col">중소기업(10~50명)</th>
				<th scope="col">중견 이상 기업</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<th scope="row">임금<br>(100기준)</th>
				<td>70</td>
				<td>80</td>
				<td>100</td>
			</tr>
			<tr>
				<th scope="row">상여금</th>
				<td>있는 곳도 있다.</td>
				<td></td>
				<td>이게 많다.(연 1000~)</td>
			</tr>
			<tr>
				<th scope="row">스톡옵션</th>
				<td>O</td>
				<td>X</td>
				<td>X</td>
			</tr>
			<tr>
				<th scope="row">실력<br>(순위)</th>
				<td>1</td>
				<td>2</td>
				<td>1</td>
			</tr>
			<tr>
				<th scope="row">특징</th>
				<td>한 사람이 다 만들기에 전체적인 흐름을 안다.</td>
				<td>소규모 팀으로 제작하기에 전체 프로그램의 구조를 대략 안다.</td>
				<td>PM이 아니고서는 전체 중 극히 일부만 알고 있기에 시야가 좁아진다.</td>
			</tr>
			<tr>
				<th scope="row">장점</th>
				<td>워라벨 및 스톡옵션, 사장이 직원을 신뢰, 대기업 입사 수월</td>
				<td></td>
				<td>임금</td>
			</tr>
			<tr>
				<th scope="row">단점</th>
				<td>임금, 스톡옵션</td>
				<td>야근</td>
				<td>야근, 중간에 짤릴 우려가 생김</td>
			</tr>
			</tbody>
		</table>
		</div>
	</div>
	<h3 class="fw-3">CI 가 SI보다 워라벨 보장이 잘 되며, 실력향상에 도움이 된다.</h3>
</section>
<section>
	<h2 class="pb-2">4. 대학 졸업 이후 - 도전적 vs 안정적</h2>
	<div class="row justify-content-around">
		<div class="col-md-5">
			<div class="row">
				<div class="card mb-3 text-left">
				<div class="card-header fs-4 fw-bold bg-danger text-white">스타트업 vs 중견이상 기업</div>
				<ol class="list-group list-group-flush">
					<li class="list-group-item">스타트업
					<br><span class="fs-6 px-3 text-danger">> 도전적이며, 진취적인 성향</span>
					<br><span class="fs-6 px-3">> 상위 10프로</span>
					</li>
					<li class="list-group-item">중견이상 기업
					<br><span class="fs-6 px-3 text-danger">> 안정적인 성향</span>
					<br><span class="fs-6 px-3">> 상위 10프로</span>
					</li>
				</ol>
				</div>
			</div>
			<div class="row">
				<div class="card mb-3 text-left">
				<div class="card-header fs-4 fw-bold bg-danger text-white">대학생활</div>
				<ol class="list-group list-group-flush">
					<li class="list-group-item text-danger">로드맵에 맞게 미리 준비</li>
					<li class="list-group-item">알바가 아닌 장학금으로 전공 지식을 깊이있게 학습하는 것이 유리</li>
				</ol>
				</div>
			</div>
		</div>
		<div class="col-md-6 ml-auto">
			<div class="card mb-3 text-left">
				<div class="card-header fs-4 fw-bold bg-danger text-white">공부가 어려운 이유</div>
				<img src="/school/8.png" alt="프로그램이 만들어지는 과정" height="500px"/>
			</div>
		</div>
	</div>
</section>
<section>
	<h2 class="pb-2">4. 대학 졸업 이후 - 면접과 자기소개서 꿀 팁</h2>
	<div class="row justify-content-around">
		<div class="col-md-11">
			<div class="row">
				<div class="card mb-3 text-left">
				<div class="card-header fs-4 fw-bold bg-warning text-danger">No 평범</div>
				<ol class="list-group list-group-flush">
					<li class="list-group-item">모두가 Yes할 때, 나는 No</li>
					<li class="list-group-item">면접준비 시, 모두가 파워포인트로 만들 때, 나는 너튜브 영상과 같은 특이점을 만든다.</li>
					<li class="list-group-item">대학생활 시, <span class="text-danger">다양한 경험(기업 인턴, 해커톤 / 대기업 프로그래밍 과정 등)</span>을 가진다.</li>
				</ol>
				</div>
			</div>
			<div class="row">
				<div class="card mb-3 text-left">
				<div class="card-header fs-4 fw-bold bg-warning text-danger">Yes 사실</div>
				<ol class="list-group list-group-flush">
					<li class="list-group-item">거짓이 없어야 하며, 사실적인 경험을 녹여야 한다.</li>
					<li class="list-group-item">본인이 만들면서 느꼈던 어려움을 얘기한다면, 이는 본질적으로 사실이었다고 인식.</li>
					<li class="list-group-item">심사위원은 <span class="text-danger">'거짓인지 사실인지' 를 판단하는데 노력을 기울인다</span>는 점</li>
					<li class="list-group-item">본인이 만든 내용에 대해서 기술적인 부분을 설명할 시, 별 어려움 없이 술술 나오기에 합격하기 쉽다.</li>
				</ol>
				</div>
			</div>
			<div class="row">
				<div class="card mb-3 text-left">
				<div class="card-header fs-4 fw-bold">Naver 신입 공채 : https://www.naver-recruit.com/</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section>
	<h2 class="pb-2">4. 대학 졸업 이후 - 면접과 자기소개서 꿀 팁</h2>
	<img src="/school/coding_test.png" height="600px"/>
</section>
<section>
	<h2 class="pb-2">4. 대학 졸업 이후 - 면접과 자기소개서 꿀 팁</h2>
	<img src="/school/naver_coding_test.png" height="600px"/>
</section>
<section>
	<h2 class="pb-2">실습</h2>
	<div class="row justify-content-around">
		<div class="col-md-4">
			<div class="row">
				<div class="card mb-3 text-left">
				<div class="card-header fs-4 fw-bold bg-dark text-white">언어선정</div>
				<li class="list-group-item"><a href="https://survey.stackoverflow.co/2022/" target="_blank">Stackoverflow Survey</a></li>
				</div>
			</div>
			<div class="row">
				<div class="card mb-3 text-left">
				<div class="card-header fs-4 fw-bold bg-dark text-white">온라인 에디터</div>
				<li class="list-group-item">구글에서 'Python Online' 검색</li>
				<li class="list-group-item"><a href="https://www.programiz.com/python-programming/online-compiler/" target="_blank">Link</a></li>
				</div>
			</div>
		</div>
		<div class="col-md-7 ml-auto">
			<div class="row">
				<div class="card mb-3 text-left">
				<div class="card-header fs-4 fw-bold bg-dark text-white">Python 문법</div>
				<pre class="text-start">
	a=0
	print(a)

	while a&lt5:
	a=a+1
	print(a)

	b=[1,2,3]
	print(b[0])
	print(b[1])
	print(b[-1])
				</pre>
				</div>
			</div>
			<div class="row">
				<div class="card mb-3 text-left">
				<div class="card-header fs-4 fw-bold bg-dark text-white">퀴즈</div>
				<li class="list-group-item">Q1. [1,2,3,4,5] 리스트의 항목을 차례대로 출력하세요.</li>
				<li class="list-group-item">Q2. [1,2,3,4,5] 리스트의 항목을 거꾸로 출력하세요.</li>
				<li class="list-group-item">Q3. [1,2,3,4,5] 리스트의 항목들을 모두 합산하여 출력하세요.</li>
				</div>
			</div>
		</div>
	</div>
</section>

<section>
	<h1 id="toc_30">👏🏽</h1>
	<h2 id="수고하셨어요-o">수고하셨어요 ^o^</h2>
</section>


</div>
</div>


</template>


<script>
import HomeButton from "@/components/HomeButton.vue";

import Reveal from "reveal.js/dist/reveal.js";
import "reveal.js/dist/reveal.css";
import initializeReveal from "@/assets/js/revealSetup.js";

export default {
	components: {
		HomeButton: HomeButton,
	},
	data() {
		return {
			
		};
	},
	methods: {
		goSlide(number) {
			if (this.deck) {
				this.deck.slide(number);
			} else {
				console.error("Reveal 인스턴스가 초기화되지 않았습니다.");
			}
		},
	},
  	mounted() {
		// ✅ 3. ref로 지정한 DOM 엘리먼트를 넘겨주고, 인스턴스를 this.deck에 저장합니다.
    	this.deck = initializeReveal(this.$refs.revealRef, false);

		// ✅ 4. 전역 Reveal.addEventListener 대신 인스턴스의 on 메서드 사용
    	this.deck.on('slidechanged', (event) => {
			console.log("Slide is now " + event.indexh);
		});
 	},
	unmounted() {
        // ✅ 5. 여기가 핵심! 페이지를 벗어날 때 Reveal 객체를 메모리에서 완전히 파괴합니다.
        if (this.deck) {
            this.deck.destroy();
        }
    }
};
</script>

<style scoped>
/* @import url('@/assets/js/plugins/reveal-js/css/reset.css'); */
@import url('@/assets/js/plugins/reveal-js/css/reveal.css');
@import url('@/assets/js/plugins/reveal-js/css/theme/white.css');
@import url('@/assets/js/plugins/reveal-js/plugin/highlight/monokai.css');
@import url('@/assets/js/plugins/reveal-js/plugin/chalkboard/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/customcontrols/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/menu/menu.css');
@import url('@/assets/css/reveal-lecture.css');


.img-fluid {
    max-width: 100%;
    height: auto;
}
</style>