홍군's 설레는 IT Story

 지난 포스팅에서는 이곳저곳 찾아다니면서 Vue.js를 개발하기 위한 환경설정을 했었다! 그렇다면,,이번엔 프로젝트를 생성하기 위해서 어떻게 해야할지 찾아보면서 또 한번 정리하자!

Vue-CLI를 이용해서 프로젝트 생성하기

     개발환경 

      OS : Mac OS Catalina 10.15.4

      node.js 설치 링크 : https://nodejs.org/ko/download/

    1. homebrew, node.js 설치 

      - 우선, Vue-CLI를 설치하려면 npm이 필요하다.

         npm(Node Package Manager)은 Node.js를 설치하면 자동으로 설치가 되기 때문에 Node.js를 먼저 설치해준다.

      - mac에서는 hombrew로 설치하는게 간편하더라 

      - hombrew 설치 참고 링크 : https://whitepaek.tistory.com/3

     # node 설치 

       => brew install node

     # Node.js 버전 확인
       => node --version
     # npm 버전 확인
       => npm --version

   필자는 확인해보니깐, node.js은 12.16.2이고, npm은 6.14.4을 설치하였다.

   2. Vue-CLI설치하여 로컬서버에서 Vue구동시켜보기  

      # Vue-CLI 설치
        => npm install -g @vue-cli 

          ※ Vue-CLI을 설치중에 위와같은 에러가 발생한다면, 반드시 "sudo" 권한을 주어야한다. 

      # Vue 버전 확인
        => vue --version  

     필자는 버전이 2.9.6 버전이었다 

     이렇게 vue 설치가 마무리됬다. 휴우...

 3. Vue 프로젝트 생성하기 

   # Vue 프로젝트를 만들 경로에 들어간다. 

   => vue create 프로젝트명 

    cd 프로젝트명 으로 이동해서 

    npm run serve를 실행시킨 후 http://localhost:8080/ 확인해 보면 아래와 같은 페이지가 뜨는 것을 통해 확인할 수 있다. 

 회사에서 vue.js를 접할 기회가 생겨 후다닥 스터디를 진행하게 되었다. 요즘 많이 사용한다는 vsCode로 학습을 해볼까 한다.

그동안은 Eclipse환경에서 개발을 하다보니 조금 적응이 안될 수 있지만! 아직 젊기에 도전해볼 수 이싸!! 

그래서 오늘은 vsCode로 vue.js 개발환경을 세팅하는 방법을 정리하려고한다!

  visual studio Code 설치 링크 : https://code.visualstudio.com/

1. Visual Studio Code 한글 적용하기! 

  1.1  처음 에디터를 켜면 영어로 되어 있기 때문에, 우선 한글화를 적용하려고한다. vsCode에서도 패키지 설치가 가능한데,

        Eclipse에서 사용했던 Marketplace에서 플러그인들을 추가해서 사용했던 것처럼 동일한 방식이더라..!

  1.2 "Korean Language Pack for Visual Studio Code"를 검색해서 한국어 패치를 해주자!

  1.3  설치가 다되면 [RestartNow]버튼을 눌러 vsCode를 재실행 시켜준다! 그러면, 한국어 패치가 적용된걸 확인할 수 있다. 

2. Vue.js를 사용하기 위한 Visual Studio Code Plugin Install

  2.1  Vue.js를 효과적으로 사용하기 위해서는 플러그인들을 설치

      - 필자가 지금 설치해본건 아래 세개지만, 이외에도 여러가지가 있기에 출처와 좀 더 좋은 블로그를 찾아서 플러그인을 설치하도록하자! 

        (출처 : https://joshua1988.github.io/web-development/vuejs/boost-productivity/ 

• Prettier - 코드 자동정렬
• vetur - 문법강조 및 자동완성등 기능 제공
• Vue VSCode Snippets - 자동완성기능 제공
• Material Icon Theme - 아이콘 구분기능 제공
• ESLint - JavaScript 코드스타일, 문법기능 제공
• Live Server -  작성한 소스코드의 웹페이지를 바로 확인해볼 수 있는 기능 제공

3. Chrome에서 Extendtion Tool 설치 

   - 크롬웹스토어 에서 확장프로그램 "vue.js devtools"를 추가하자

   - 크롬웹스토어 링크 : https://chrome.google.com/webstore/category/extensions?hl=ko  

필자는 요즘 대기업 프로젝트를 진행 중 인데, 개발 중 VO부분이 너무 많아서 getter와 setter를 간편하게 사용해주는

방법을 알아냈다!!!얏호!! 생각보다 매우 간편해서 놀랬다ㅋㅋ라면끓이는 정도랄까..?ㅎ

1.  이클립스 저장 경로에 "lombok.jar"파일을 저장한다.

2. eclipse.ini 파일을 열어 맨 하단에 추가내용을 입력한다. 

   - 추가내용

      -vmargs
      -javaagent:lombok.jar

3. 간편하게 사용하면 된다:)

   - 준비 : Project에 lombok.jar 파일이 등록되어 있어야 한다.

  example)

     ① Vo 클래스를 선언한다.

     ② 실행방법 : 객체를 선언하고, setter와 getter를 자유자재로 사용할 수 있다!

     ③ 실행결과

안녕하세요!

저는 Si프로젝트에서 Backend-Dev로 있는 직장인입니다! 

최신기술에 많이 늦은 감이 있지만, 요즘 Web 프로젝트를 만들어보면서 개념을 익히고, 습득하는 중인데요!

예전에 공부했었어야 했는데, Mobile(Android)만 한창 공부하다보니.. 허허

아무튼 오늘은 간략하게 공부한 것들을 홍군의 블로그에 올려봤습니다!

1. @Controller와 @RestController의 차이

 - 기존의 MVC @Controller는 View 기술을 사용하지만, @RestController는 객체를 반환할때 객체 데이터는

    바로 JSON/XML 타입의 HTTP 응답을 직접 리턴하게 된다. 

  1.1 @Controller를 사용하여 View와 연결하는 방식.

     - 참조블로그를 확인해주시면 감사하겠습니다..ㅜㅜ

  1.2 @RestController를 사용하여 바로 JSON 타입의 HTTP 응답을 리턴하는 방식 

       Controller(MailController)

         - 저는 현재 DataBase와 연결하는 방식을 JPA로 하고 있어서 Mapping부분은 신경쓰지 말아주세요~ㅎㅎ

           (확인하려고 테스트했던 부분이라..ㅠㅜ)

       브라우저 화면.

1.3 @Controller와 @RestController 실행의 흐름

   1.3.1 @Controller 

       - Client -> Request -> Dispatcher Servlet -> Handler Mapping -> Controller -> View -> Dispatcher Servlet ->

          Response -> Client 

    1.3.2 @RestController

        - Client -> HTTP Request -> Dispatcher Servlet -> Handler Mapping -> 

             RestController(자동 ResponseBody 추가)-> HTTP Response -> Client

2. 참조 블로그 

  -  http://doublesprogramming.tistory.com/105