[VUE.JS] VUE[뷰] 시작해보기





요새 프론트 엔드 라이브러리로 핫하다는 vue를 접해 보았다.


접했다는게 정말 손끝으로 살짝 건들여본 정도 ㅋㅋㅋ



얼마전 node.js 와 react.js를 하고 아주아주 기초적인 파이썬을 해보고


이번엔 vue를 건들여 본다 ㅋㅋ





react를 공부해놓고 왜 이번엔 vue 를 사용하는가 라는 물음에 대한 대답은


"그냥! 개발자라면 새로 나왔다는거 한번쯤 건들여 봐야지!"


라고 할수 있겠지만;;;



일단 문서상으론 react보다 뛰어나다고 하니 한번 해보는게 나쁘진 않을 것 같은데


스택오버플로우에서 참고할 레퍼런스들이 아주 적고


react나 angular에 비해서 실제 업무에 적용된 사례가 적기도 해서


현업에서 바로 실서비스에 적용 하는건 아직 무리라고 보고


그냥 한번쯤 해보는건 좋을 것 같다.



이번에 하는 포스팅은 뭔가 대단하게 셋팅을 하고 설정파일들을 만지작 거리는게 아니라


정말 아주 간단하게



CDN으로 불러와서 마치 제이쿼리 쓰듯 사용해 보는 것에 대해서 포스팅 해보도록 한다.







일단 뭐 프로젝트 만들 필요도 없이 맛만 볼거니까


jsBIn 이나 jsfiddle 에서 사용해 보는 것만 테스트 해보도록 하자




jsbin


https://jsbin.com/xojatohopi/edit?html,js,output





jsbin 의 기본적인 화면이다.


여기서 아주아주 간단하게


제이쿼리 집어넣듯



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


한줄을 추가해 주도록 하자



1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 hello
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




이렇게 한줄을 추가 해주면


우린 vue.js 를 사용할 준비가 끝난 것이다.



그럼 이제 body 안에


간단한 문장을 써보도록 하자




.








<h1>hello, yamea</h1>


이라는 한줄을 추가 했는데


이것만 가지고는 vue의 어떤 뭘 사용하는지 모르겠다



여기서 살짝만 변형 시켜 보자



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
 
</head>
<body>
  <div id="app">
    <h1>hello, {{name}}</h1>
  </div>
  
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




이렇게 작성 하면




이렇게 나온다



이제 vue의 기능을 이용해 저 {{name}} 의 텍스트를 바꿔 보도록 하자



자바스크립트에 아래 코드를 추가 해준다



1
2
3
4
5
var app = new Vue({
  el:'#app',
  data:{name:"cheesu's yamea"}
  
});
cs




이런 스크립트 코드를 추가 해주면





짠!


이렇게 된다


마치 EL태그의 jstl 을 스크립트로 사용하는 것 같은 기분이 든다



그럼 여기서 추가로 한가지만 더 해보도록 하자



위의 콘솔 버튼을 클릭해서





app.name = "추천 눌러줘"


를 입력하고 엔터를 누르면 {{name}}의 내용이 바뀐다!





기본적인 기능은 여기까지다



아주 쉽지 않은가?


와.. 이정도면 그냥 써먹어도 되겠다


react를 처음 접할때보다 뭔가 장벽이 어마무시하게 낮아진 기분이다.


react보다 vue의 러닝커브가 훨씬 작다고 하니


간단하게 사이드 프로젝트 정도는 해볼만 한 것 같다.



나도 여기까지 밖에 안해봤으니


다음 포스팅에선 조금더 심화적인 단계로 넘어가 보도록 하자.

저작자표시 비영리

'Yame Programmer > VUE.JS' 카테고리의 다른 글

[VUE.JS] 뷰 디렉티브 v-for [반복] 사용하기  (1) 2018.02.28
[VUE.JS] 뷰 디렉티브 v-bind 사용하기  (2) 2018.02.26
[VUE.JS] 뷰 디렉티브 사용해보기  (0) 2018.02.22

얼마전 쿠팡에서 서류 합격 메일이 날아왔다. 구글링을 해보니 쿠팡같은 경우 서류는 거의다 통과시켜 놓고 


problem solving test를 통해서 엄청나게 걸러버리는 듯 하다.


개발자로 취직해서 일한지 2년이 가까워 지면서 웹쪽 HTML CSS JS는 많이 해봤지만


순수 자바 쪽은 거의 건들이지 않았다는 것에서 불안감이 엄청나게 느껴졌다.


학교에서 전공수업 잘 듣고 자료구조나 알고리즘 공부 열심히 했으면 붙을 수 있다고 하는데


난 전공자가 아니다;; 학교에서 기초적인걸 배우긴 했지만 자바 클래스 만들고 'Hello word' 띄우는 수준?


안드로이드로 인텐트 날려서 화면 전환하는 정도 까지만 배웠고 이론적인건 소프트웨어공학 원론쯤?


그 외엔 죄다 마케팅이나 경영, 혹은 발표과제로 점수먹는 수업이라든지 실음과 전공수업이나 들었지 ㅋ


말하자면 전공이라기 보단 반공(?)이라고 말하는게 어울릴 듯 하다.



아무튼 자료구조는 스택과 큐밖에 모르고 정렬 알고리즘은 버블정렬 밖에 모르는 상태에서


어렵다고 소문난 쿠팡 테스트를 통과하려면 짧은 시간동안 공부를 많이 해야 겠다 싶었다.


면접 후기라던지 자료구조 기초라던지 알고리즘을 어떻게 공부해야 하는지 찾아 보면서


퀵정렬이라는 것이 있다는걸 태어나서 어제 처음 알게 되었다.



버블정렬만 있으면 만사 오케이인줄 알았고 심지어 프로젝트중에선 DB에서 불러올때 ORDER BY만 떄려버리면 해결이니


정렬 알고리즘을 사용할 필요성도 못느끼고 있었는데....  좀 충격이었다.



심지어 아래 동영상을 보고 가장 먼저 들었던 생각은


"버블정렬 개쓰레기였네??"


일단 정렬의 종류는 여러가지 있는데 아래 영상을 보도록 하자. 가운데 표시된 퀵정렬이 대체로 가장 빠른 결과를 보여준다. <출처: Viktor Bohush, 유튜브>






그리고 퀵정렬에 대해서 좀더 큰화면으로 보자면 <출처: Timo Bingmann / 유튜브>




이렇게 보여질 수 있다.



해당 내용을 직접 포스팅 하려 해보았으나 알고리즘이나 기초지식이 1도 없는 상태에서 이해 할 수 있는 포스팅 만드는데


시간이 너무 오래 걸린다. 퀵정렬이 무엇인지 이곳 저곳 둘러보던중


아주아주아주 설명을 잘 해놓은 게시글을 발견했다.


허접하게 내가 만드는 것 보다는 정말 잘 만든 다른사람의 글을 보는 것이 더 나을 것이라고 판단 했다.



http://navercast.naver.com/contents.nhn?rid=2871&contents_id=90163


위 주소로 들어가보면 퀵정렬에 대해 아주 잘 설명해 놓은 글이 있다.


한번 쭉 읽어 보고 이해가 좀 되겠다 싶다면 슈도코드 부분은 스킵하고 다음 소스를 보도록 하자



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// 값을 비교하고 로우와 하이를 이동시키면서 값의 교환이 이루어지는 함수
public static int partition(int arr[], int left, int right) {
 
    int pivot = arr[(left + right) / 2];
 
    while (left < right) {
        while ((arr[left] < pivot) && (left < right))
            left++;
        while ((arr[right] > pivot) && (left < right))
            right--;
 
        if (left < right) {
            int temp = arr[left];
            arr[left] = arr[right];
            arr[right] = temp;
        }
    }
 
    return left;
}
 
 
public static void quickSort(int arr[], int left, int right) {
 
    if (left < right) {
        // 값을 비교하고 로우와 하이를 이동시키면서 값의 교환이 이루어지는 함수
        int pivotNewIndex = partition(arr, left, right);
        // quick sort의 설명중
        // 자주 나오는 '재귀', '분할' 이라고 설명되어지는 부분이다.
        quickSort(arr, left, pivotNewIndex - 1);
        quickSort(arr, pivotNewIndex + 1, right);
    }
 
}
 
// 
public static void main(String[] args) {
    int[] arrs = { 69, 10, 30, 2, 16, 8, 31, 22 };
    quickSort(arrs, 0, arrs.length - 1);
    System.out.println("결과");
 
    for (int i : arrs) {
        System.out.print(i + " ");
    }
}
cs


<참조: http://creatordev.tistory.com/70>



처음 올린 링크의 글을 정독했다면 위 소스를 보면서 직접 소스를 디코딩 해보도록 하자.

소스의 처음부터 정렬이 종료될때까지 직접 소스를 따라가면서 정렬을 해보는 것이 이해하는데 가장 큰

도움이 될 것이다.



요즘 웹쪽엔 내가 아는 지식이 후달려서 더 포스팅하기 힘들었는데 노드js나 리엑트js 해보기 전까진


자료구조와 정렬에 대해서 포스팅을 해봐야 겠다. 나에게도 큰 도움이 되는듯 하다.

저작자표시 비영리

'Yame Programmer > 자료구조&알고리즘' 카테고리의 다른 글

야매 개발자 자료구조 가이드[이진트리(binary)의 순회(traversal)]  (0) 2016.10.19
야매 개발자 자료구조 가이드[트리(tree)]  (0) 2016.10.18
야매 개발자 알고리즘 가이드[이진 탐색(Binary Search)]  (0) 2016.10.18
야매 개발자 알고리즘 가이드[순차탐색(Sequential Search)]  (0) 2016.10.18

스프링 관련해서 여기저기 코드를 끌어다 쓰다보면 프로퍼티를 추가 해 주어야 하는 경우가 있다.


기본적으로 전자정부 프레임워크의 기본 샘플 프로젝트에서는 메세지 프로퍼티가 있지만


그건 메세지 소스에 추가 되어 있고 (사실 나도 잘 모름)


그냥 노멀하게 프로퍼티를 추가 하고 싶다 라고 하면 생각보다 굉장히 간단하니 아래 코드를 참고 하여 배워보자




1. 프로퍼티 생성


일단 main 폴더 아래에 resources 폴더 밑에 프로퍼티를 넣어놓을 폴더를 생성하고 그 안에


프로퍼티를 넣는다.


간략히 resources 폴더 밑에 property 라는 폴더를 만들어 file.properties 라는 프로퍼티를 넣어 놓았다.


(이름이 똑같은 필요는 없으니 알아서 하시길)



2. 프로퍼티 추가 등록


전자정부프레임워크의 spring 폴더 밑에 


context-common.xml 이라는 파일이 있다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:util="http://www.springframework.org/schema/util" 
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd">
 
    <context:component-scan base-package="egovframework">
       <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller" />
    </context:component-scan>
 
    <bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
        <property name="basenames">
            <list>
                <value>classpath:/egovframework/message/message-common</value>
                <value>classpath:/egovframework/rte/fdl/idgnr/messages/idgnr</value>
                <value>classpath:/egovframework/rte/fdl/property/messages/properties</value>
            </list>
        </property>
        <property name="cacheSeconds">
            <value>60</value>
        </property>
    </bean>
    
    <bean id="leaveaTrace" class="egovframework.rte.fdl.cmmn.trace.LeaveaTrace">
        <property name="traceHandlerServices">
            <list>
                <ref bean="traceHandlerService" />
            </list>
        </property>
    </bean>
 
    <bean id="traceHandlerService" class="egovframework.rte.fdl.cmmn.trace.manager.DefaultTraceHandleManager">
        <property name="reqExpMatcher">
            <ref bean="antPathMater" />
        </property>
        <property name="patterns">
            <list>
                <value>*</value>
            </list>
        </property>
        <property name="handlers">
            <list>
                <ref bean="defaultTraceHandler" />
            </list>
        </property>
    </bean>
    
    <bean id="antPathMater" class="org.springframework.util.AntPathMatcher" />
    <bean id="defaultTraceHandler" class="egovframework.rte.fdl.cmmn.trace.handler.DefaultTraceHandler" />
</beans>
 

cs


기본적으로 이런 모양새 인데 


 

먼저 가장 위에 beans 설정하는 schemaLocation 부분에 


 http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.1.xsd


이 주소를 추가해주자


1
2
3
4
5
6
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:util="http://www.springframework.org/schema/util" 
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
        http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.1.xsd">
cs



이렇게 되도록



그리고 


<util:properties id="fileProperties" location="classpath:/프로티 경로" />


를 beans 안에 추가 해 주도록 한다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:util="http://www.springframework.org/schema/util" 
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
        http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.1.xsd">
 
    <context:component-scan base-package="egovframework">
       <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller" />
    </context:component-scan>
 
    <bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
        <property name="basenames">
            <list>
                <value>classpath:/egovframework/message/message-common</value>
                <value>classpath:/egovframework/rte/fdl/idgnr/messages/idgnr</value>
                <value>classpath:/egovframework/rte/fdl/property/messages/properties</value>
            </list>
        </property>
        <property name="cacheSeconds">
            <value>60</value>
        </property>
    </bean>
    
    <bean id="leaveaTrace" class="egovframework.rte.fdl.cmmn.trace.LeaveaTrace">
        <property name="traceHandlerServices">
            <list>
                <ref bean="traceHandlerService" />
            </list>
        </property>
    </bean>
 
    <bean id="traceHandlerService" class="egovframework.rte.fdl.cmmn.trace.manager.DefaultTraceHandleManager">
        <property name="reqExpMatcher">
            <ref bean="antPathMater" />
        </property>
        <property name="patterns">
            <list>
                <value>*</value>
            </list>
        </property>
        <property name="handlers">
            <list>
                <ref bean="defaultTraceHandler" />
            </list>
        </property>
    </bean>
    
    <bean id="antPathMater" class="org.springframework.util.AntPathMatcher" />
    <bean id="defaultTraceHandler" class="egovframework.rte.fdl.cmmn.trace.handler.DefaultTraceHandler" />
     
 
    <util:properties id="fileProperties" location="classpath:/property/file.properties" />
</beans>
 
cs



이렇게 추가를 하면 된다.



3. JAVA에서 사용 하기.



사용할 클래스에 


@Resource(name = "fileProperties")

private Properties fileProperties;


이런 코드를 추가 하여 준다. 어노테이션을 사용 하여 빈즈에서 끌어다 쓰는 것 같은데


저 위에 추가한 부분 id 를 이름으로 가져 오는 듯 하다.



그리고 메소드 내부에서 사용 할땐 아래 코드를 추가 하여 사용하고


String uploadPath = fileProperties.getProperty("가져올 데이터 이름");


간략히 코드를 구현하자면 아래와 같은 코드로 사용 하면 된다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
@Service("commonFileService")
public class CommonFileServiceImpl implements CommonFileService {
    // 이렇게 어노테이션을 이용하여 불러오도록 준비하고
    @Resource(name = "fileProperties")
    private Properties fileProperties;
 
    @Override
    public 반환 fileUpload(MultipartHttpServletRequest mRequest) {
        // 저장되는 파일 리스트
        List<String> fileNameArray = new ArrayList<String>();
        
        // 이렇게 사용 한다.
        String uploadPath = fileProperties.getProperty("file.image.winPath");
 
 
        return 반환;
    }
    
 
}
 
cs



저작자표시 비영리

'Yame Programmer > 전자정부프레임워크' 카테고리의 다른 글

[JSTL] if문 else(choose)문 사용하는 방법  (2) 2016.07.04
Exception sending context initialized event to listener instance of class org.springframework.web.context.ContextLoaderListener  (1) 2016.06.02
전자정부 프레임워크 Interceptor[인터셉터] 설정 하기  (1) 2016.05.25
서버[tomcat] 실행시 클래스 실행  (0) 2016.05.24
톰캣[tomcat] context간 세션 공유  (0) 2016.05.24

+ Recent posts

티스토리툴바