• 목록
  • 아래로
  • 위로
  • 2
  • YGL
  • 조회 수 304

** 이전글 **

기존에 작성했던 글이 있었으나.. 처음부터 다시 작성하도록 하겠습니다.       ************************       - 머릿글 -   안녕...
YGL | 2020.12.11

 

 

 

 

Node.js를 설치하셨다면, 이제 본격적으로 NPM(Node Package Manager)을 이용하여 개발환경을 세팅해보도록 하겠습니다.

 

우선 새 폴더를 하나 만들어주도록 하겠습니다.

image.png.jpg

 

저는 C드라이브에 ygl이라는 이름의 폴더를 생성하였습니다.

VSCode를 열어 방금 만든 폴더를 열어주시고, Ctrl+` 키를 누르시면 하단에 터미널이 올라올겁니다.

 

Vue.js를 설치하기 위해 CLI를 글로벌로 설치해줍니다.

 

npm install -g @vue/cli

 

NPM TIP

https://npmjs.com에서 패키지를 검색할 수 있습니다.

 

npm install 패키지 - 현재 디렉토리에 '패키지'라는 이름의 모듈을 설치

npm uninstall 패키지 - 현재 디렉토리에서 '패키지'라는 이름의 모듈을 제거

 

* 옵션

-g  =>  모듈 설치/제거시 현재 디렉토리 대상이 아닌 전역 대상으로 함 (주로 CLI 패키지를 글로벌로 설치하여 어느 디렉토리에서든 CLI 명령어를 사용할 수 있게 사용함)

--save  =>  모듈을 설치/제거시 해당 모듈을 package.json의 dependencies에 포함시킴

--save-dev  =>  모듈을 설치/제거시 해당 모듈을 package.json의 devDependencies에 포함시킴

 

프로젝트에 사용되는 모듈 정보는 package.json에 저장합니다.

package.json에서 dependencies에는 프로젝트 빌드 후 런타임에 사용되는 모듈을 포함하고,

devDependencies에는 빌드 과정에서 사용되는 모듈을 포함시킵니다.

 

조금 기다리시면 설치가 완료되고, 이제 Vue CLI 명령어를 이용해 Vue.js 프로젝트를 쉽게 생성할 수 있습니다.

 

 

vue create frontend

위 커맨드를 입력하시면 터미널이 몇가지를 물어볼겁니다.

 

키보드의 화살표 키를 이용하여 위아래로 움직이고, 여러가지를 선택하는 질문엔 스페이스바를 눌러 선택/해제가 가능합니다.

엔터키를 누르면 다음 스탭으로 넘어갑니다

 

  1. Please pick a preset:
    Manually select features (필요한 것들만 골라서 설치해줍시다.)
  2. Check the features needed for your project:
    Choose Vue version (Vue 버전 선택)
    Babel (ES6 최신 문법을 사용하여 개발할겁니다.)
    Router (페이징을 위한 라우터)
    Vuex (전역 변수 등을 사용하기 위한 저장소)
    CSS Pre-processors (SCSS를 사용합니다)
    (스페이스바로 이 다섯가지를 체크하고 엔터키를 눌러 다음으로 넘어갑니다)
  3. Choose a version of Vue.js that you want to start the project with
    2.x (vue 2 버전을 사용합니다)
  4. Use history mode for router?
    Y (n을 입력하실 경우 라우터에서 hash모드를 사용하게 되며, domain.com/#/main 과 같은 주소로 사용하게 됩니다)
  5. Pick a CSS pre-processor
    Sass/SCSS (with node-sass) (기본 CSS를 작성하지 않고, node-sass를 이용한 SCSS를 작성하여 사용할겁니다.)
  6. Where do you prefer placing config for Babel, ESLint, etc.?
    In package.json (package.json 파일을 프로젝트 설정 파일로 사용합니다.)
  7. Save this as a preset for future projects?
    이 설정을 저장하여 추후 프로젝트 생성시 프리셋으로 사용하겠느냐는 질문입니다.
    저는 프로젝트마다 필요한 것들만 설치하여 사용하기 때문에 N을 선택했습니다.

 

 

이 질문에 답하고 나면, 터미널에서 필요한 모듈들을 자동으로 설치해줍니다.

설치가 끝난 뒤 좌측 파일트리 패널을 보시면 frontend 폴더가 생성된걸 확인하실 수 있습니다.

 

내용물 간략 설명

 

image.png.jpg

node_modules/ - 프로젝트에 설치된 모듈들이 들어있는 폴더입니다. package.json 파일에 명시된 모듈들이 설치되어 있습니다.

public/ - 프로젝트 빌드 시 사용되는 파일입니다. index.html  파일이 들어있을텐데, 그 html 파일을 베이스로 빌드가 됩니다.

src/ - 우리가 본격적으로 개발할 리소스는 대부분 src 폴더에 있다고 생각하시면 됩니다.

babel.config.js - 바벨 설정 파일입니다. 우리는 ES6 최신 문법으로 JS 코드를 작성할것이고, 바벨은 이 JS 코드를 구버전/모든 브라우저에서 작동하도록 해줍니다.

package.json - 프로젝트의 정보가 담긴 파일입니다. 프로젝트명, 설명, 작성자, 버전, 사용된 모듈 등의 정보가 담겨있습니다.

 

 

설치가 끝나셨다면, 터미널에서 다음 명령어를 입력하여 화면을 띄워보도록 하겠습니다.

cd frontend
npm run serve  // package.json의 scripts에서 사용할 수 있는 스크립트 목록을 확인하실 수 있습니다.

 

조금 기다리시면 서버가 구동되고, 기본적으로 8080 포트로 열릴겁니다.

만약 8080포트를 이미 사용중이라면 8081, 8082와 같이 다른 포트로 서버가 열립니다.

 

브라우저에서 http://localhost:8080/로 접속해 봅시다.

image.png.jpg

상단의 Home | About 링크를 클릭해보시면 페이지가 바뀌는 것을 확인할 수 있습니다.

 

우리는 이 페이지를 바꿔야하고, 링크도 직접 다뤄야 합니다.

어떻게 관리가 되고 있는지 살짝 알아야겠죠?

 

src 폴더를 보시면 App.vue 파일이 있습니다.

이 파일은 vue에서 가장 첫 번째로 렌더링 되는 부분입니다.

 

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

 

template은 실제로 렌더링 되지 않고, template 내부의 내용이 실제 렌더링 되는 부분입니다.

template은 자식을 한 녀석만 가질 수 있습니다. (손자는 많아도 됩니다.)

(이 설명은 vue.js 2.x 버전을 기준으로 설명입니다. 3.x버전에서는 여러개의 루트 엘리먼트가 허용된다고 하는데, 여기서는 2.x버전을 설치했기 때문에 한 개의 루트 엘리먼트를 사용할 수 있습니다.)

 

4번, 5번 라인을 보시면 router-link라는 태그가 있고, 7번 라인에는 router-view 라는 태그가 있습니다.

이 부분은 vue의 라우터가 관리해주는데, router-view 부분에는 현재 보고 있는 라우터 패스의 컴포넌트가 렌더링됩니다.

router-link는 렌더링 시 a 태그로 변환이 되며, 라우터 링크를 걸어줄 수 있습니다.

라우터 링크를 클릭하여 라우터 주소가 바뀔 경우, router-view 부분에 해당 라우터 주소에 할당된 컴포넌트(페이지)가 보여지게 됩니다.

 

 

 

이렇게 Vue.js의 설치를 마치겠습니다.

어떻게 동작하는지 이해가 조금 되셨나요?

 

다음 글부터는 본격적으로 페이지를 구성하고 vue.js의 스크립트 사용법에 대해 알아보게 될 것 같습니다.

 

설명이 부족했다면 vue.js 공식 한글 문서를 참고해주시기 바랍니다..

Vue.js - 프로그레시브 자바스크립트 프레임워크

 

이것저것 수정해보며 이해해 보시는 것도 좋은 방법인 것 같습니다 :)

 

문서를 찾기 귀찮아 질문을 하고 싶으시거나, 개선해야 할 부분이 있다면 댓글로 알려주시면 감사하겠습니다.

 

이런 글을 쓰는게 처음이라 많이 부족하다고 느끼고 있습니다.

NUBE님 NUBE 포함 4명이 추천

댓글 2

YGL 작성자
고심하며 한참 썼는데 내용이 없네요
comment menu
2020.12.18. 22:33

신고

"YGL님의 댓글"

이 댓글을 신고 하시겠습니까?

title: 크롬NUBE → YGL
profile image
+1
대부분 '이 정도는 알지?' 식으로 글을 쓰는데, 기본적인 것들부터 설명해주시니 이해하기 쉽네요^~^
다음 편도 기대하겠습니다!
comment menu
2021.03.23. 07:51

신고

"NUBE님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
272 프로그램없이 막힌사이트 우회 하는 초간단 꿀팁 하루살이 title: 황금 서버 (30일)하루살이 16.10.24.18:18 46964
271 구글 뮤직을 한국에서 사용하는 방법 7 image 하루살이 title: 황금 서버 (30일)하루살이 16.10.24.18:21 12497
270 27. 멘델의 유전법칙이였츄 (부제: 파란 장미는 어떻게 교배해야 나오나요) 1 image 허니버터라이츄 title: 피카츄 마우스허니버터라이.. 20.05.31.03:29 12321
269 110V와 220V를 사용하는 국가와 그 비교 1 image 하루살이 title: 황금 서버 (30일)하루살이 16.07.13.23:55 10809
268 윈도우 10 정품을 싸게 구매해보자! 31 image Dobob title: 도밥위키!Dobob 17.07.08.12:59 10644
267 카카오톡 폰트 변경 하는방법 (카카오톡 글씨체 변경 하는 방법) image 막시모 막시모 16.07.26.17:27 8435
266 SSH 암호 없이 로그인 하기 4 image NoYeah title: 인스타그램NoYeah 17.11.02.02:02 7984
265 3.디스코드 봇을 만들어보자 (준비 편) 5 image Doge아시다시피 Doge아시.. 18.02.23.20:57 5809
264 크롬 [시크릿모드]를 기본으로 사용해보자. 4 image 하루살이 title: 황금 서버 (30일)하루살이 16.09.25.13:26 5453
263 첫번째 이야기. 다음 팟 플레이어를 트위치 플레이어로! 9 image TVJ title: 열려라 맛스타의 자물쇠TVJ 17.10.22.00:48 5320
262 [자동응답봇] 카카오톡 자동응답봇을 만들어보자 [2] 9 image humit title: 황금 서버 (30일)humit 16.07.17.20:29 4949
261 네번째 이야기, IDM 으로 파일을 빠르게 다운로드해보자! 9 image TVJ title: 열려라 맛스타의 자물쇠TVJ 18.01.09.22:02 4905
260 윈도우 10의 음질 향상기능 끄는 방법 1 하루살이 title: 황금 서버 (30일)하루살이 16.10.24.18:19 4821
259 [BeautifulSoup] 자식태그를 제거하기 - .decompose() & .extract() 10 image 이니스프리 이니스프리 20.01.16.00:07 4363
258 4. 디스코드 봇을 시작해보자 image Doge아시다시피 Doge아시.. 18.05.08.22:14 4052
257 DNS가 어떻게 작동하는지 알아봅시다: 1. DNS 질의 절차 따라가 보기 3 abnoeh abnoeh 18.03.27.20:48 3918
256 일반 웹 호스팅과 VPS와 서버 구입의 차이점 13 NoYeah title: 인스타그램NoYeah 18.03.08.00:25 3904
255 Windows 10 앱 바로가기 만들기 1 image 하루살이 title: 황금 서버 (30일)하루살이 16.09.25.13:29 3885
254 14. 실험실에서 사용하는 기기에 대해 알아보겠츄 8 image 허니버터라이츄 title: 피카츄 마우스허니버터라이.. 18.02.25.01:42 3865
253 웹호스팅에 쉽게 Let's Encrypt 설치하기 (1) - ZeroSSL 이용하기 6 image YJSoft title: 라이믹스 아이콘YJSoft 17.07.12.12:54 3830