삶을 코딩하다, 필드를 걷다

넥사크로의 경우 사설 인증서의 통신을 허용하지 않아서 runtime 구동시 에러가 나타납니다. 그렇다고 개발환경을 위해서 ssl을 구매할 수 없습니다. 이럴때 아래의 설정을 통하여 사설 인증서의 통신을 허용할 수 있습니다.

1. 내 컴퓨터에서 "C:\[사용자계정]\AppData\LocalLow\nexacro\17\nexacro.xml 파일을 메모장으로 열기합니다.
2. setting 항목중에 SSLUnlock 항목을 "true"로 설정합니다.

간단한 설정으로 개발환경에서 사설인증서로 등록하여 통신할 수 있도록 세팅이 가능합니다.

넥사크로에서 그리드 셀에서 정보가 많을 경우 줄바꿈을 하여 표시를 해주는 경우가 종종 있습니다. 그리드 셀 안에서 줄바꿈(개행)을 할 수 있는 방법은 아래와 같습니다.

* Query 에서 줄바꿈 문자

select
    'aaaaa' || chr(10) || char(13) || 'bbbbbb' as cell 1
from dual

위 방법은 chr(10) 과 chr(13) 을 이용하여 데이터 자체에 개행문자를 삽입하여 주는 방식입니다.

* xfdl 에서 줄만꿈 문자

var newLine = String.formCharCode(13) + String.formCharCode(10);

var data = "aaaaa" + newLine + "bbbbb";

위 방법은 xfdl 에서 String.formCharCode 함수를 이용하여 10, 13 코드드를 불러내 개행문자를 넣어 주는 방식입니다.

파라매트릭 서치(Parametric Search)는 바이너리 서치와 매우 유사합니다. 차이점은 최적화 문제를 결정문제로 바꾸어 푸는 것입니다. 원하는 조건을 만족하는 가장 알맞는 값을 특정한 오차범위 이내에서 알고 싶은 경우에 사용을 합니다.

• 바이너리 서치 : 배열에서 중앙값이 가리키는 값이 내가 찾는 값인지가 중요
• 파라매트릭 서치 : 원하는 조건을 만족하는 가장 알맞는 값을 찾는 것

동작과정

1. 데이터를 정렬한다.
2. 범위를 반씩 좁혀간다.
3. S 와 E 가 같을때 까지 진행한다.

시간복잡도

바이너리 서치와 같은 O( log N ) 입니다.

참고사이트

https://www.crocus.co.kr/1000

https://en.wikipedia.org/wiki/Parametric_search

기본코드

'#' 의 개수를 알아내는 문제

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;


class Main {
    static BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
    static BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

    static char[] arr;
    
    static int parametricSearch(int s, int e){
    	
    	int maxIndex = -1;
    	
    	while(s<=e){
    		int mid = (s+e)/2;
    		char mVal = arr[mid];
    		
    		if (mVal == '#') {
                if (maxIndex < mid) maxIndex = mid;
                s = mid + 1;
            }
            else {
                e = mid - 1;
            }
    	}
    	
    	return maxIndex;
    	
    }
    
    public static void main(String[] args) throws IOException {      
    	
    	String str = "#######___";
   		arr = str.toCharArray();
  		
   		int cnt = parametricSearch(0, arr.length-1) + 1;
    		
   		bw.write(cnt+"\n");
    	
        br.close();
        bw.close();        
    }
}

바이너리 서치와 바이너리 서치 트리는 차이가 있습니다. 이중 오늘 공부할 내용은 바이너리 서치(Binary Search) 입니다. 자료구조가 아니라 알고리즘입니다. 바이너리 서치는 정렬되어있는 상태에서 내가 원하는 값을 찾고 싶을때 찾는 알고리즘 입니다. 여기서 정렬되어있는 상태가 중요합니다. 이것이 기본조건입니다. 데이터를 빨리 찾기 위한 방법입니다.

동작과정

1. 데이터를 정렬한다.
2. 범위를 반씩 좁혀가며 데이터를 찾는다.

시간복잡도

한번 탐색할때 마다 크기를 반으로 줄이기 때문에 시간복잡도는 O( log N ) 이 됩니다.

참고사이트

https://ko.wikipedia.org/wiki/%EC%9D%B4%EC%A7%84_%EA%B2%80%EC%83%89_%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98

기본코드

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.util.Arrays;


class 바이너리서치_기본코드 {
    static BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
    static BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

    static int[] arr = {50,30,1,2,5,7,9,10};
    static int tar = 7;
    
    static void bSearch(int s, int e){
    	while(s<=e){
    		int mid = (s+e)/2;
    		int mVal = arr[mid];
    		
    		if(mVal == tar){
    			System.out.println("발견");
    			return;
    		}
    		
    		if(mVal < tar) s= mid + 1;
    		else e = mid - 1;
    	};
    	
    	System.out.println("미발견");
    }
    
    public static void main(String[] args) throws IOException {      
    	
    	// 바이너리 전제조건 => 정렬이 필수
    	Arrays.sort(arr);
    	
    	bSearch(0,arr.length-1);
    	
        br.close();
        bw.close();        
    }
}

◎ 개발 환경 설정

Vue.js 를 실행하기 위한 개발 환경 설정을 진행해 보도록 하겠습니다. 참고로 저는 제가 구매한 책을 기준으로 따하는데, 책에 나온 버전이 오래되어서 방법만 따라하고 버전은 되도록 최신 버전으로 설정을 하도록 하겠습니다.

일단, 필요한 도구는 아래와 같습니다.

• 크롬 브라우저
• 아톰(Atom) 텍스트 에디터
• 노드제이에스(Node.js)
• 뷰 개발자 도구(Vue.js devtools, 크롬 확장 플러그인)

- 크롬 브라우저 설치

크롬 브라우저는 웹 앱을 개발할때 좋은 브라우저로, 최신 웹 트렌드와 문법을 빠르게 반영하고 있는 브라우저 입니다. 웹 개발 시 편리한 기능을 제공하는 크롬 개발자 도구를 지원합니다. 공식사이트는 아래와 같습니다. 크롬 브라우저를 설치하여 줍니다.

https://www.google.co.kr/chrome/?brand=IBEF&gclid=CjwKCAjwiLGGBhAqEiwAgq3q_iYawp_Tue4teYkbz64iXJSD8JYImionS5TjwIUJuGKSJOom38uZ7BoCDpsQAvD_BwE&gclsrc=aw.ds 

다음으로 아톰 에디터를 설치합니다. 아톰은 깃허브에서 제작한 무료 텍스트 에디터 입니다. 또한, 확장 플러그인들을 이용하여 유용한 기능들을 추가할 수 있기 때문에 기능 면에서도 우수합니다. 

 - 아톰 설치

1. 아톰사이트에서 최신버전을 다운로드합니다.

https://atom.io/

2. 다운받은 파일을 실행하여 아톰을 설치한 후 실행하면 아래와 같은 화면이 나타납니다.

3. 편한 코딩을 위하여 테마를 설치합니다. 메뉴의 [File -> Setting] 을 선택하여 "Install" 탭을 클릭하면 테마를 설치할 수 있는 탭이 나타납니다. 검색하는 부분을 부면 "Themes" 버튼이 있습니다. 이 버튼을 클릭하고 검색창에 "seti-ui"를 입려하면 검색 결과나 나타납니다. 아래 화면에 표시된 "Install" 버튼을 클릭하여 테마를 설치합니다.

seti-ui 는 직관적인 파일의 아이콘을 제공하여 파일 구분이 쉽게합니다.

같은 방법으로 "atom-material-syntax-dark" 를 검색하여 설치합니다. 이 테마는 자바스크립트 코드 구문 강조색의 조합이 잘 되어 있어 코드의 가독성을 높여줍니다.

4. 설치한 테마를 적용하여 봅니다. [File->Setting] 에서 나오는 탭에서 "Themes" 을 눌러 UI Theme 드롭 다운 박스를 선택하여 설치한 "Seti"를 석탠합니다.  

마찬가지로 Syntax Theme 드롭 다운 박스를 클릭하여 "Atom Material Dark" 를 선택하여 적용합니다.

5. 아톰 패키지를 설치하여 개발에 유용한 기능들을 추가적으로 설치합니다. [File -> Setting]에서 Install 탭에 패키지 부분에 "language-vue" 로 검색하여 아래 보이는 것과 같은 것을 설치합니다. 패키지는 별도의 적용은 없으나 아톰 에디터를 재실행하여야 적용이 됩니다.

아톰 에디터를 재실행하고 새로운 파일 'Main.vue' 를 만듭니다. 그리고 생성된 파일에 tem을 입력하면 아래와 같이 자동 완성 기능이 표시됩니다. 이것을 선택하면 자동으로 기본 코드구조가 갖춰집니다.

- Node.js 설치

Node.js는 서버 사이드 자바스크립트로, 서버 측에서 실행되는 자바스크립트 실행 환경을 의미합니다. 뷰 CLI(Command Line Interface)를 이용하여 쉽게 뷰 프로젝트를 구성하려면 Node.js가 설치되어 있어야 합니다.

1. Node.js 사이트에서 설치파일을 다운로드 합니다. LTS 버전으로 다운을 합니다. Current 버전보다 안정적인 버전이라고 합니다.

https://nodejs.org/en/

2. 다운로드한 파일을 실행하여 설치를 진행하면 Node.js 와 Node 패키지 매니저(NPM, Node Package Manager)가 컴퓨터에 설치됩니다. 설치가 완료되었으면 명령 프롬프트에서 node -v 를 실행합니다. 정상적으로 설치가 되었다면 아래와 같이 Node.js 의 버전이 표시됩니다.

- 뷰 개발자 도구 설치하기

뷰 개발자 도구는 크롬 프러그인 입니다. 뷰로 개발할 때 도움을 주는 유용한 도구로, 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있습니다. 

1. 구글에서 vue.js devtools 를 검색하여 Chrome 웹스토어 확장프로그램 "Vue.js devtools" 로 이동합니다. 화면에 보이는 "Chrome에 추가" 버튼을 클릭하여 설치합니다.

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

프로그램을 설치하고 크럼 브라우저 주소창 오른쪽에 퍼즐 모양을 클릭하면 설치된 플러그인이 나타납니다.

◎ Hello Vue.js 프로젝트 만들기

개발 환경을 구성하였으면 뷰를 사용하여 간단한 메시지를 출력하는 프로젝트를 만들어 보겠습니다. 작업 순서는 아래와 같습니다. 

1. HTML 파일 생성
2. 뷰 소스 코드 추가
3. 브라우저로 실행

아톰 에디터에서 편한 폴더 위치에 index.html 파일을 생하여 아래와 같이 코딩합니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue smaple</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message : 'Hello Vue.js!'
        }
      });
    </script>
  </body>
</html>

위 코드는 html 기본 구조에 <div> 태그를 하나 추가하고, 뷰 라이브러리를 로딩한 후 뷰로 Hello Vue.js! 라는 간단한 메시지를 출력하는 코등입니다. index.html 을 브라우저로 실행하면 아래와 같은 화면이 나타납니다.

개발자 도구를 실행하여 코드를 확인하도록 합니다. 크롬에서 개발자 도구는 F12 키를 누르면 아래와 같이 나타납니다. 개발자 도구의 Console 탭을 클릭하면 두개의 로그가 나타납니다. 첫번째로그는 "뷰 크롬 익스텐션을 다운로드하라는 로그"입니다. 서버에서 띄운 것이 아니라 파일 시스템에서 접근하여 브라우저로 실행했기 때문에 나타나는 것이라고 합니다. 

이 부분을 해결하기 위하여 크롬 확정 플러그인 설정을 변경해야합니다. 크롬 브라우저의 메뉴에서 아래 경로의 [확장 프로그램]을 선택합니다.

아래와 같은 새로운 페이지가 열리고 설치된 확장 플러그인 목록이 표시됩니다. Vue.js devtools 의 세부 정보 버튼을 클릭합니다.

세부정보창에 나오는 메뉴중 "파일 URL에 대한 엑세스 허용"을 활성화 하여 줍니다.

그리고 다시 페이지를 실행하면 첫번째 로그가 사라져 있습니다.

개발자 도구에서 Vue 탭을 확인합니다. 페이지 가운데에 보이는 '<Root>=$0'을 클릭하면 왼쪽의 'Hello Vue.js!' 텍스트가 강조되면서 오른쪽에 루트 컴포넌트에 대한 상세 내용이 표시됩니다. 

화면상으로 표시된 'Hello Vue.js!' 텍스트는 최상위 컴포넌트의 data 속성인 message의 값이라는 것을 알 수있습니다. 

지금까지 개발 환경 설정 및 간단한 프로젝트까지 만들었습니다. 

Union-Find는 자료 구조입니다. 그래프 알고리즘에서 사용하는 대표 알고리즘입니다. 여러개의 노드가 존재할 때 두 개의 노드를 선택해서, 현재 이 두 노드가 서로 같은 그래프에 속하는지 판별하는 알고리즘입니다. Union-Find 알고리짐은 다른 고급 그래프 알고리즘의 베이스가 되니 반드시 학습하셔야 합니다.

동작과정

• 파인드(Find) : 어떤 원소가 주어졌을 때 이 원소가 속한 집합을 반환한다. 파인트는 일반적으로 어떤 원소가 속한 집합을 '대표'하는 원소를 반환하는데, 이를 위해서 어떤 원소와 각 대표 원소들 간의 파인드 결과를 비교하여 같은 집합임을 판단한다.
• 유니온(Union) : 두 개의 집합을 하나의 집합으로 합친다.

시간복잡도

평균적으로 트리의 높이마큼 탐색하는 O(logN) 입니다.

참고사이트

https://m.blog.naver.com/ndb796/221230967614

https://ko.wikipedia.org/wiki/%EC%84%9C%EB%A1%9C%EC%86%8C_%EC%A7%91%ED%95%A9_%EC%9E%90%EB%A3%8C_%EA%B5%AC%EC%A1%B0

기본코드

import java.io.*;
import java.util.Arrays;
import java.util.StringTokenizer;

class UnionFind_기본코드 {
    static BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
    static BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

    static char[] uArr = new char[100];

    static char getFind(char tar) {
        //최종보스가 누군지 리턴하는 함수        
        if (uArr[tar] == 0) return tar;        
        char ret = getFind(uArr[tar]);
        uArr[tar] = ret; //현재 보스를 최종보스로 교체
        return ret;        
    }

    static void setUnion(char t1, char t2)
    {
        char a = getFind(t1);
        char b = getFind(t2);
        if (a == b) return;
        uArr[b] = a;
    }

    public static void main(String[] args) throws IOException {        

        setUnion('A', 'B');
        setUnion('B', 'C');
        setUnion('E', 'D');        
        setUnion('F', 'E');        
        setUnion('G', 'H');        
        setUnion('I', 'J');        

        System.out.println("A:"+getFind('A'));
        System.out.println("B:"+getFind('B'));
        System.out.println("C:"+getFind('C'));
        System.out.println("D:"+getFind('D'));
        System.out.println("E:"+getFind('E'));
        System.out.println("F:"+getFind('F'));
        System.out.println("G:"+getFind('G'));
        System.out.println("H:"+getFind('H'));
        System.out.println("I:"+getFind('I'));
        
        //활용, A랑 E랑 같은 조직인지 확인하는 코드
        if (getFind('E') == getFind('D')) {
            System.out.println("같은조직");
        }
        else {
            System.out.println("다른조직");
        }

        br.close();
        bw.close();
    }
}

그래프 문제에서 대표적인 최단 경로를 구하는 알고리즘입니다. 인공위성 GPS 소프트웨어 등에서 가장 많이 사용된다고 알려져 있습니다. 하나의 정점에서 모든 정점으로 가는 최단 경로를 알려줍니다. (단, 음의 간선을 포함할 수 없음)

응용이 많은 부분이라 기본적인 내용을 확실히 숙지하여야 합니다.

동작과정

1. 출발 노드를 설정
2. 출발노드 기준으로 각 노드의 최소비용을 저장
3. 방문하지 않은 노드 중에서 가장 비용이 적은 노드를 선택
4. 해당 노드를 거쳐서 톡정한 노드로 가는 경우를 고려하여 최소 비용을 갱신
5. 위 과정에서 3~4 과정을 반복

시간복잡도

• 힙의 구조를 활용하면 : O(N * log N)

참고 사이트

• 동빈나 : https://blog.naver.com/ndb796/221234424646
• 위키백과 : https://ko.wikipedia.org/wiki/%EB%8D%B0%EC%9D%B4%ED%81%AC%EC%8A%A4%ED%8A%B8%EB%9D%BC_%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98

기본코드

아래와 같은 그래프가 존재한다고 합시다. 0에서 시작하여 각 노드까지의 최단 거리를 구하는 코드입니다.

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.util.ArrayList;
import java.util.PriorityQueue;

class Node implements Comparable<Node>{
    int n;
    int dist;

    Node(int a, int b) {
        n = a;
        dist = b;
    }

    @Override
    public int compareTo(Node tar) {
        if (tar.dist < this.dist) return 1; 
        if (tar.dist > this.dist) return -1; 
        return 0;
    }    

}

class 다익스크라_기본코드_단방향 {
    static BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
    static BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

    static ArrayList<ArrayList<Node>> alist = new ArrayList<ArrayList<Node>>();
    static PriorityQueue<Node> q = new PriorityQueue<Node>();

    static int[] best;
    static int[] used;

    public static void main(String[] args) throws IOException {        

        int n = 5;
        best = new int[n];
        used = new int[n];

        for (int i = 0; i<n; i++) {
            alist.add(new ArrayList<>());
        }

        alist.get(0).add(new Node(2, 70));
        alist.get(0).add(new Node(1, 10));
        alist.get(0).add(new Node(4, 170));        
        alist.get(1).add(new Node(2, 50));
        alist.get(1).add(new Node(3, 20));
        alist.get(2).add(new Node(4, 60));    
        alist.get(3).add(new Node(2, 15));

        //다익스트라 초기세팅
        q.add(new Node(0, 0));
        for (int i = 0; i<n; i++) best[i] = Integer.MAX_VALUE;
        best[0] = 0;

        while(!q.isEmpty()) {
            Node via = q.poll();
            if (used[via.n] == 1) continue; //이미 했었던 경유지면 탈락
            if (best[via.n] != via.dist) continue; //예전정보면 탈락

            used[via.n] = 1;             

            for (int i = 0; i<alist.get(via.n).size(); i++) {
                Node tar = alist.get(via.n).get(i);

                //지금까지 구했던 최고의 비용보다, 더 저렴한 비용이 발견되면 
                if (best[tar.n] > via.dist + tar.dist) {
                    best[tar.n] = via.dist + tar.dist; //갱신 
                    q.add(new Node(tar.n, best[tar.n]));
                }
            }
        }

        System.out.println(best[4]);

        br.close();
        bw.close();
    }
}

0에서 시작하여 각 노드들의 최단 거리는 아래와 같이 빨강색 경로로 이동을하여 4까지 가는 최단경로의 거리는 105 입니다.

BufferedReader / Writer 예제

10만개가 넘어가는 Data를 빠른 속도로 입력 / 출력 받기 위해서는 BufferedReader / BufferedWriter 를 사용해야합니다.

입력예시
5 3
5 4 3 2 1
1 3
2 4
5 5

출력예시
N : 5
K : 3
numbers : 5 4 3 2 1 
questions : (1, 3) (2, 4) (5, 5) 

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.util.StringTokenizer;

public class Main {

	static int[] numbers;
	static int[][] questions;
	static int N;
	
	
	public static void main(String[] args) throws IOException {
		// 파일에 이별된 예제를 사용.. 시험에서는 아래 한줄을 주석 처리
        System.setIn(new FileInputStream("input\\rsq.txt"));
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

        StringTokenizer st = new StringTokenizer(br.readLine());
        N = Integer.parseInt(st.nextToken());
        int K = Integer.parseInt(st.nextToken());
        
        numbers = new int[N+1]; // 0은 사용하지 않으니까 1부터 N까지
        questions = new int [K+1][2];
        
        st = new StringTokenizer(br.readLine());
        for(int i=1; i<=N; i++){
        	numbers[i] = Integer.parseInt(st.nextToken());
        }
        
        
        for(int i=1; i<=K; i++){
        	st = new StringTokenizer(br.readLine());
        	questions[i][0] = Integer.parseInt(st.nextToken());
        	questions[i][1] = Integer.parseInt(st.nextToken());
        }
        
        bw.write("N : " + N + "\n");
        bw.write("K : " + K + "\n");
        bw.write("numbers : ");
        for(int i=1; i<=N; i++){
        	bw.write(numbers[i] + " ");
        }
        bw.write("\n");
        
        bw.write("questions : ");
        for(int i=1; i<=K; i++){
        	bw.write("(" + questions[i][0] + ", " + questions[i][1] + ") ");
        }
        bw.write("\n");
        
        br.close();
        bw.close();
	}
}

 웹프로그램 개발자로 15년 정도 일을 했는데 가장 힘든 것이 신기술의 등장이라고 생각합니다. 30대 때는 입문 서적 보고 어느 정도 흐름 파악하고 맨몸으로 부딪혀 개발을 하며 익히고 그랬습니다. (그리운 나의 30대 ㅜㅜ) 40대가 되어서 그런지 기억력도 가물가물하고, 무서운게 점점 많아져서 인지, 이제는 맨몸으로 부딪혀가며 개발을 하면 이해력도 떨어지고 함수나 문법도 기억이 안나는 경우가 상당합니다. 그래서 앞으로 이 작은 공간에 개인적으로 공부하고 익힌것은 정리하여 두도록 하겠습니다.

○ Front-End, Back-End, Full Stack ???

 몇 년 전까지만 하더라도 웹프로그램 개발자는 전천후 파이터와 같았습니다. 회사생활 초기에는 Front-End, Back-End라는 개념도 그다지 없었고 사용자 화면부터 WEB/WAS/DB서버 설정 및 세팅 모든 부분을 두루두루 알아야 했었습니다. 또, 그렇게 사수한테 배웠고 그래야만 문제가 발생해도 빠른 대응이 되었으니까요. 하지만 점점 분야가 나눠지는 추세인것 같습니다. 서론이 너무 길었고, 웹프로그램 개발영역의 차이를 알아보고 어느 영역인지 확인해 보도록 하겠습니다.

• Front-End : 사이트 이용자가 보는 부분(HTML/CSS/JAVASCRIPT 등등)을 개발 합니다. 즉, 뷰(View) 부분을 개발하는 사람을 이야기합니다.
• Back-End : 사이트 이용자가 눈으로 보지 못하는 부분(서버코딩, DB활용, API제작, User Interface 등등)을 개발 합니다. 주로 서버단에서 비즈니스 로직을 짜거나 데이터를 처리하는 부분을 담당하는 사람을 이야기합니다.
• Full Stack : 다양한 환경 및 플랫폼을 이해하고 사용되는 대부분의 언어와 지식을 갖춘 인재를 얘기합니다. Front-End와 Back-End를 다 한꺼번에 다 하는 사람입니다. (나네...나!! ㅋㅋ)

 그렇다면 Full Stack 개발자가 가장 잘하는 거 아니냐?? 라는 생각을 하시겠지만, 그건 아닙니다.  업무분담이 어떻게 나누어 지는지의 차이이고, 업무 체계가 잘 잡혀있는 회사는 이러한 업무분담이 잘 나누어져 있는 경우가 많습니다. 그리고 개발자도 한쪽만 집중해서 하는 것이 이것저것 다 하는 것보다 편합니다. 

 (소규모 프로젝트 혹은 프로젝트 초창기에는 Full Stack 개발자를 더 선호한다는 개인적인 의견입니다.)

○ Vue.js 를 선택하고 공부하게 된 이유

 2~3년전에 같은 동호회를 하는 사람이 Vue.js로 프로젝트를 하며 처음 용어를 접하게 되었고, 요즘 회사에서 Front-End 프레임워크로 Vue.js 를 사용한다는 이야기를 들었습니다. 그래서 Vue.js를 공부해야 겠다고 생각을 했습니다. (그래.. 이제 넥사크로는 버리자.. ) 개인적으로 Vue.js 입문 서적을 구매하여 공부하며 이곳에 요약을 하고 나름의 공부를 시작하려 합니다.

○ Vue.js 란 무엇인가?

 빠르게 변화하는 Front-End 시장에서 요즘 가장 주목 받고 있는 것이 Vue.js 가 아닐까 생각이 듭니다. Vue.js 가 무엇인지 하나씩 정리를 해보겠습니다.

• 창시자 : 에반 유(Evan You)
• 공식 사이트 : https://vuejs.org/
• 공식 배포 : 2014년 2월
• 웹 페이지 화면을 개발하기 위한 Front-End 프레임워크 (점진적인 프레임워크)
• 탄생 : 앵귤러의 명시적 데이터바인딩과 같은 필수적인 요소들만 가지고 화면을 구현하기 시작했고, 오픈 소스화하면서 많은 사람들이 참여하여 프레임워크의 기능을 붙이기 시작
• 장점
  . 배우기가 쉽다.
  . 리액트와 앵귤러에 비해 성능이 우수하고 빠르다.
  . 리액트와 앵귤러의 장점을 가지고 있다.
• 특징
  . MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리
  . 컨포넌트 기반의 프레임워크
  . 리액트와 앵귤러의 장점을 가진 프레임워크

 간단하게 Vue.js 가 무엇인지 정리하였습니다. 근데 "리액트, 앵귤러가 뭐야?", "이런거 안해봤는데.. " 라고 생각을 하시는 분이 있을지 모르겠습니다. 괜찮습니다. 저도 잘 모릅니다. (저런 기술이 있다는 것을 듣기만 했습니다.) 리액트, 앵귤러를 지금 배울것도 아니니까요. 그럼 다음에는 환경설정과 간단한 프로젝트를 만들어 보도록 하겠습니다.