728x90
반응형

바이너리 서치와 바이너리 서치 트리는 차이가 있습니다. 이중 오늘 공부할 내용은 바이너리 서치(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
 

이진 검색 알고리즘 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 이진 검색 알고리즘(binary search algorithm)은 오름차순으로 정렬된 리스트에서 특정한 값의 위치를 찾는 알고리즘이다. 처음 중간의 값을 임의의 값으로 선택하여,

ko.wikipedia.org

 

기본코드

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();        
    }
}
728x90
반응형
저작자표시
728x90
반응형

◎ 개발 환경 설정

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

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

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

 

- 크롬 브라우저 설치

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

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

Chrome 웹브라우저

더욱 스마트해진 Google로 더 심플하고 안전하고 빠르게.

www.google.com

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

 

 - 아톰 설치

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

https://atom.io/
 

A hackable text editor for the 21st Century

At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.

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/
 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

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
 

Vue.js devtools

Chrome and Firefox DevTools extension for debugging Vue.js applications.

chrome.google.com

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

 

◎ 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의 값이라는 것을 알 수있습니다. 

 

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

728x90
반응형
저작자표시
728x90
반응형

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

 

동작과정

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

시간복잡도

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

참고사이트

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

17. Union-Find(합집합 찾기)

Union-Find(유니온-파인드)는 대표적인 그래프 알고리즘입니다. 바로 '합집합 찾기'라는 의미를 가진 알...

blog.naver.com

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
 

서로소 집합 자료 구조 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 메이크셋은 8개의 개체를 생성한다. 유니온 연산을 여러 번 수행하면 여러 집합들이 합쳐진다. 컴퓨터 과학 분야 에서 서로소 집합(disjoint-set) 자료 구조, 또는

ko.wikipedia.org

 

기본코드

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();
    }
}
728x90
반응형
저작자표시
728x90
반응형

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

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

 

동작과정

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

시간복잡도

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

참고 사이트

 

데이크스트라 알고리즘 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 컴퓨터 과학에서, 데이크스트라 알고리즘(영어: Dijkstra algorithm) 또는 다익스트라 알고리즘은 도로 교통망 같은 곳에서 나타날 수 있는 그래프에서 꼭짓점 간의

ko.wikipedia.org

 

기본코드

아래와 같은 그래프가 존재한다고 합시다. 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 입니다.

 

728x90
반응형
저작자표시
728x90
반응형

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();
	}
}
728x90
반응형
저작자표시
728x90
반응형

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

728x90
반응형
저작자표시
728x90
반응형

오랫만에 블로그에 글을 남깁니다.
Flex에서 AMF통신을 이용할때 사용하는 RemoteClass 메타데이타 태그를 만들때, 너무 귀찮아서 프로그램으로 만들어 보았습니다. 왜  RemoteClass 메타데이타 태그를 사용해야만 하나...?? 정확한 답은 지돌스타님 블로그 "[ActionScript 3, Flex]되도록이면 직접적인 Object 클래스 사용을 지양해야하는 이유"를 참고 하면 될것 같습니다. 저는 시간적인 것 보다도...코딩을 하면서 Object로 받아서 사용하는것 보다 더 명료하게 사용할수 있기 때문이라고 말하고 싶습니다. 그래야 코딩하기도 편하고, 코딩 속도도 올라가는 느낌이라..;;

ActionScript3_VO_Generator_v102.air



[프로그램 사용법]
기본적인 프로그램은 아래와 같습니다. 보시면 알겠지만 사용법은 간단합니다.



우선 RemoteObject로 넘겨 받을 JAVA 클래스 파일이 있다고 전제를 두고 개발을 하였습니다. '*'는 필수 입력입니다. 

 - VO java file :  RemoteObject로 넘겨 받을 JAVA 클래스 파일 
 - AS3 VO file Path : 생성될 VO 클래스 의 위치를 지정
 - AS3 VO file name : 생성될 VO 클래스 의 파일명 지정
 - AS3 VO package : 생성될 VO클래스의 패키지 지정
 - File charSet : "VO java file"의 문자셋 설정 (현재, UTF-8 , EUC-JP 지원)




위와 같이 입력후 [VO Generate] 버튼을 클릭하면 아랫부분의 생성될 VO클래스가 나타납니다.


 
필요한 부분을 수정하시고 [Copy to Clipboard]를 누르면 클립보드에 내용이 복사됩니다. 파일로 만들기를 원하신다면 [Save as File] 을 누르시면 됩니다. 파일은 "AS3 VO file Path"에 지정된 경로에 저장됩니다.

[참고]
1. JAVA파일의 주석은 되도록이면 모두 가져오겠끔 개발했습니다. (함수, 변수의 설명을 가지고 오고 싶었음)
    - "//" 로 시작하며 "*/" 문자가 들어있는 라인 --> 설명 주석으로 생각함
    - 처음 문자가 "*", "/*" 로 시작되는 라인 --> 함수의 설명이나 변수의 설명으로 생각함
2. JAVA파일에서 제외되는 라인
    - serialVersionUID 가 들어있는 라인
    - 라인의 문자길이가 0인  라인
    - "\r"만 존재하는 라인 
3. setter/getter 함수의 설명은 주석부분과 함수부분이 따로따로 되어있습니다. 이부분은 각자 에디터에서 처리 하세요. 지금은 고치기 귀찮네요..;;; ㅡ.ㅡ;;; 



아직은 좀 더 수정을 해야되는 부분이 있습니다. 저도 직접 사용하면서 불편한 부분이나 필요한 부분이 있으면 수정해 다시 이곳에 올리겠습니다.  

부족한 부분이 있으면 댓글로 달아주세요. 그럼..이만..;; 
728x90
반응형
저작자표시 비영리 변경금지
728x90
반응형

AIR로 개발을 진행하면서 참고해야할 로컬 데이터베이스의 URL입니다. 
로컬에 데이터베이스 파일을 만들어 실제 데이터베이스를 사용하는 것과 같이 SQL을 날려서 사용하는 아주 편리한 놈입니다. 따로 데이터베이스를 설치해줄 필요도 없고, 파일로 관리할수도 있고...;;
단, 서버-클라이언트간 통신프로그램을 만든다고하면 유용하지 않습니다.;;;

사이트는 아래를 참고해주세요.


 AIR를 공하는데 도움이 됩니다. 
728x90
반응형
저작자표시 비영리 동일조건
728x90
반응형

얼마전에 아래와 같은 화면이 가능할지 요구가 들어왔다.

http://www.hotpepper.jp/A_20500/strJ000026604.html

화면의 로딩이 끝나고 버튼을 누르면 Fullscreen으로 전환된다. 그리고 음식사진이 나오는데, 이 사진을 아래있는 컨트롤바의 조작으로 바꿀수도 있고, 여러 이벤트 처리가 가능한다.
잘 아시다시피, Fullscreen 화면에서는 키보의 이벤트가 ESC만 적용이된다. (운영체제에 따라서 약간은 다름) 그렇기 때문에 제약 상항이 많아진다. 이를 해결하기 위해서 위 사이트처럼 아래 마우스로 조작이 가능한 컨트롤바를 넣어서 해결을 하는 방법을 생각해 보았다.

일단 아래 화면을 보자.


위 화면을 Fullscreen일 경우에만 보여준다고 생각을 하면, 어떨까? 그러니깐 FullScreen 화면과 일반화면에 보여지는 것이 전혀 다르게 하는것이 목적이다. 굳이 이렇게 작업할 필요는 없지만, 사용자 입장에서는 풀화면으로 전환시 다른 화면이 나왔다고 느끼게 하기 위해서 이다.

일반 화면은 아래와 같은 화면으로 한다.


이 화면은 Flex 예제사이트를 참고했다.

일반 부분의 소스를 보면...fullScreenHandler라는 함수를 주목하자. 이부분이 중요하다. 이부분에 Fullscreen 화면과 일반화면의 전환시 동작해야하는 기능들을 넣어주면 된다.
<<FullScreen.mxml>>


그리고 Fullscreen의 경우의 화면 소스
<<FullDisplay.mxml>>

item 이라는 ArrayCollection변수를 생성하여 이곳에 이미지가 있는 주소 데이터를 만들어준다. MenuBar라는 새로만든 컨포넌트의 데이터이기도 하다.

<<MenuBar.mxml>>


MenuBar에서 HorizontalList 컨포넌트안에 들어가는 item을 itemRenderer를 이용하도록 만들었다.
<<CustomItemRenderer.mxml>>


이것들을 이용해서 Fullscreen 모드에서만 동작하도록 만들어보았다. (좀더 응용을 해보았다.)


소스를 보면 Fullscreen 모드일때 숨겨두었던 컴포넌트를 보여주고, 일반화면일때 보이던 컴포넌트를 숨기는 단순한 방법을 선택하였다. 더좋은 방법이 있을까??
Fullscreen 모드에 관한 html 설정은 아래 포스트를 참조하길..

참고글
2009/08/05 - [Programe Note/FLEX] - [FLEX] HorizontalList의 스크롤을 버튼으로 만들기
2009/04/14 - [Programe Note/FLEX] - [FLEX] 브라우져 풀스크린 모드 전환

도움이 되셨다면 추천 부탁드립니다.
728x90
반응형
728x90
반응형

HorizontalList를 이용하여 화면을 하나 만들어 보았다.

소스

결과


위처럼 만들면 스크롤바가 눈에 거슬린다. 아니 차라리 없는편이 더 나을지도 모르겠다. HorizontalList을 어떻게 적용하느냐의 문제겠지만, 일단 지저분에 보이는것은 사실.

그래서 어떻게 만들면 보기좋게 만들까 고민을 하다가 버튼을 이용해서 스크롤의 기능을 대신하면 어떨까 라는 생각을 하게되었다.

일단 결과먼저..


보기에도 훨씬 깔끔하고 기존 스크롤보다 사용하기도 편해졌다. (물론 개인적인 생각...)
마우스 오버와 마우스 아웃 이벤트를 사용하였고, 여기에 Timer 이벤트로 지속적으로 마우스 오버이벤트를 발생 시켰다.

소스


간단하게 요약하자면, 마우스가 해당 버튼으로 이동시 마우스 오버 이벤트를 발생하고, 마우스 오버 이벤트에서는 Timer 이벤트를 동작시켜 scrollNextFunction, scrollPreviousFunction 를 호출한다. 호출된 각각의 함수에서는 horizontalList의 dataProvider 갯수안에서만 움직이도록 코딩해주었다.

위 소스의 전체는 아래에...
HorizontalListScrollBtn.zip

소스를 가져가실땐, 댓글을 달아주세요..
728x90
반응형

+ Recent posts

티스토리툴바