할수있다!긍정왕

-전자정부 프레임워크 다운로드

https://www.egovframe.go.kr/cop/bbs/selectBoardArticle.do?bbsId=BBSMSTR_000000000002&nttId=1523&menu=3&submenu=2&leftsub=2

설치한 전자정부 프레임워크 이클립스를 실행하면 아래의 화면 처럼 나옵니다.

welcome탭을 닫아주시고 프로젝트를 생성합니다.

- 프로젝트 생성

오른쪽상단에서 표(Open Perspective)처럼 되있는 것을 클릭하시고eGovFrame 을 클릭하세요.

 File - New - eGovFrame Web Project 를 클릭

그룹아이디는 자유롭게 적으셔도 됩니다.

생성된 프로젝트 모습입니다.

-tomcat설치 

tocat를 깔고 실행시켜 주면 아래와 같이 전자정부프레임워크 샘플게시판이 나옵니다.

* 뷰 라우터 

뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리

* https://router.vuejs.org/kr/installation.html

* 뷰 라우터 설치

# CDN방식

<script src = "https://unpkg.com/vue-router/dist/vue-router.js">

#NPM방식

npm install vue-router

* router 파일 생성 후 작성해 주세요 

* 스크립트 순서 중요합니다!

====================뷰 라우터 인스턴스 연결 및 초기상태 안내===============

# 알려드리기 위한것이니 따라 하지 않으셔도 됩니다.

---------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------

실습문제 : url 은 main으로 컴포넌트 이름은 MainComponent

-------------답 ------------------------------------------------------------------------------------------------------------------

문제 설명

프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다.

또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다.

먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요.

제한 사항

• 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다.
• 작업 진도는 100 미만의 자연수입니다.
• 작업 속도는 100 이하의 자연수입니다.
• 배포는 하루에 한 번만 할 수 있으며, 하루의 끝에 이루어진다고 가정합니다. 예를 들어 진도율이 95%인 작업의 개발 속도가 하루에 4%라면 배포는 2일 뒤에 이루어집니다.

입출력 예

progressesspeedsreturn

입출력 예 설명

첫 번째 기능은 93% 완료되어 있고 하루에 1%씩 작업이 가능하므로 7일간 작업 후 배포가 가능합니다.
두 번째 기능은 30%가 완료되어 있고 하루에 30%씩 작업이 가능하므로 3일간 작업 후 배포가 가능합니다. 하지만 이전 첫 번째 기능이 아직 완성된 상태가 아니기 때문에 첫 번째 기능이 배포되는 7일째 배포됩니다.
세 번째 기능은 55%가 완료되어 있고 하루에 5%씩 작업이 가능하므로 9일간 작업 후 배포가 가능합니다.

따라서 7일째에 2개의 기능, 9일째에 1개의 기능이 배포됩니다.

/* 
* Queue 
 - Queue에서는 Queue로 인스턴스화 하지 않는다. 
 왜냐하면 Queue인터페이스란 것으로 다양한 클래스들을 만들었는데 그중에 LinkedList클래스로 Queue를 인스턴스화 한다.
 - Queue의 다양한 메서드 
 boolean isEmpty() : Queue 에서는 empty 대신 isEmpty 으로 사용한다.
 boolean offer(Object obj); //값을 입력받는다.
 Object peek(); //stack에서 peek과 같은 역할
 Object poll(); //값을 반환
 

*/
/* 반복문을 이용해 삭제하는 작업에서는  Queue,Stack >= List */

1. HashMap은 어떤 순서도 유지하지 않습니다.

즉, HashMap 은 최초로 삽인된 요소가 최초로 인쇄되는 것을 보증하지 않습니다.

TreeSet와 같이, Treemap요소도 요소의 자연순서 부에 따라 소트됩니다.

2. 내부 HashMap구현은 Hashing을 사용하고 TreeMap은 Red-black트리 구현을 내부적으로 사용합니다.

3. HashMap은 하나의 nulll키와 많은 null values를 저장할수 있습니다.

  TreeMap은 Null키를 포함할수 없지만 많은  null값을 포함할 수 있습니다.

4. HashMap은 O(1)과 같은 get과 put 같은 기본 연산에 대해 일정한 시간 성능을 나타냅니다.

오라클 문서에 따르면  TreeMap은 get 및 put 메소드에 대한 log(n) 시간 보장 비용을 제공합니다.

5. HashMap의 성능 시간은 대부분의 작업에서 TreeMap에 대해 일정하므로 HashMap은 TreeMap보다 훨씬 빠릅니다.

6. HashMap은 비교해서 equals() 메소드를 사용하지만

TreeMap은 ordering 을 유지하기 위해 compareTo() 메소드를 사용합니다..

7. HashMap은 Map 인터페이스를 구현하고 TreeMap은 NavigableMap인터페이스를 구현합니다.

==================컴포넌트 통신방법-응용==========================================

-------------------------------컴포넌트 같은 레벨 간의 통신방법 구현 -------------------------------------------------------

새로운 파일을 생성 component-same-level.html

아까 처럼 길이 쭉 갈수가 없을 경우 돌아서 가야하는 돌아서 가야할 경우를 보여드리는 것임

/*  참고 사이트 부분을 정리 */

생성자 함수 사용하기 

1. 생성자 함수를 작성함으로써 개체를 정의

2. new키워드를 사용하여 개체의 인스턴스를 만듬

=====================컴포넌트 통신방법 ==========================================

------------------------------------기본컴포넌트 통신-------------------------------------------------------------------------

* 컴포넌트 통신방식 (Componets Communication)

뷰 컴포넌트는 각각 고유한 데이터 유효범위를 갖음 .

따라서 컴포넌트 간에 데이터를 주고 받기 위해서는 규칙을 따라야함 

* 상위에서 하위로 데이터를 내려줌 , 프롭스 속성

* 하위에서 상위로 이벤트를 올려줌, 이벤트 발생 

------------------------------------기본컴포넌트 통신방법(통신규칙이 필요한 이유)----------------------------------------

데이터의 흐름을 추적할 수 있음 

------------------------------------기본컴포넌트 통신방법(기본_Props속성)-------------------------------------------------

------------------------------------기본컴포넌트 통신방법(기본_Props속성의 특징)-------------------------------------------

message 부분을 고치고  AppHeader 부분으로 내려왔을 경우

AppHeader의 data 부분도 바뀌는 것을 볼수 있습니다.  Reactivity의 것임을 알 수 있습니다.

---------------------------------------------------기본컴포넌트 실습-----------------------------------------

#문제 :  props를 이용하여 10이 나올수 있도록 하기 

-------------수업 답안-------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------

결과 

이렇게 나오는 것을 볼 수 있습니다.

------------------------------------기본컴포넌트 통신방법(기본_event emit)-------------------------------------------

새로운 파일을 생성하기

이런식으로 화면이 나온것을 보실수 있습니다.

버튼에 이벤트를 주는 것임

이런식으로 click me를 클릭을 하게  되면 event 창에서 보면 어떻게 나오는지 알수 있습니다. 

지금 이벤트를 두번을 눌러서 두개가 나온 상황입니다.

------------------------------------기본컴포넌트 통신방법(기본_event emit 콘솔 창에 출력하기)----------------------------

------------------------------------기본컴포넌트 통신방법(기본_event emit 실습)-------------------------------------------

# num의 값을   2를 증가시키는 것을 해보십쇼

------------------------------------답--------------------------------------------------------------------------------------------

2씩 증가하는 것을 보실수 있습니다.

add를 클릭하였을 경우 

------------------------------------컴포넌트 통신방법(기본뷰 인스턴스에서의 this)-------------------------------------------

Console창에서 실행합니다.  console에서 한칸 뛰기는 shift+ enter누르시면 됩니다.

저장한 뒤 console창에 들어가서 찍어보면 Num이 나오는 것을 볼수 있습니다.

this.num 은 data의 num을 볼 수 있다.

/*

생성자 공부를 위한 링크 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function

*/

문제 설명

스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다.

예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다.

종류이름

스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요.

제한사항

• clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다.
• 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다.
• 같은 이름을 가진 의상은 존재하지 않습니다.
• clothes의 모든 원소는 문자열로 이루어져 있습니다.
• 모든 문자열의 길이는 1 이상 20 이하인 자연수이고 알파벳 소문자 또는 '_' 로만 이루어져 있습니다.
• 스파이는 하루에 최소 한 개의 의상은 입습니다.

입출력 예

clothesreturn

입출력 예 설명

예제 #1
headgear에 해당하는 의상이 yellowhat, greenturban이고 eyewear에 해당하는 의상이 blue_sunglasses이므로 아래와 같이 5개의 조합이 가능합니다.

1. yellow_hat 2. blue_sunglasses 3. green_turban 4. yellow_hat + blue_sunglasses 5. green_turban + blue_sunglasses

예제 #2
face에 해당하는 의상이 crowmask, bluesunglasses, smoky_makeup이므로 아래와 같이 3개의 조합이 가능합니다.

1. crow_mask 2. blue_sunglasses 3. smoky_makeup