신기한 연구소

안녕하세요. 신기한 연구소입니다.

최근 vue.js로 프로젝트를 진행했는데 vue.js 설치하고 개발 환경을 세팅하는 방법에 대해 알아봅니다.

우리는 VSCode(Visual Studio Code, 비주얼 스튜디오 코드)에 Vue.js를 설치해 볼 건데요. 먼저 VSCode를 설치합니다.

설치하는 방법은 아래 포스팅을 참조해 봅니다.

2023.05.20 - [Software/Settings] - VSCode 설치하는 방법. (visual studio code, 비주얼 스튜디오 코드)

비주얼스튜디오 코드를 설치했으면 이제 Vue.js를 설치해볼까요?

1. VSCode 실행하고 폴더 지정하기.

먼저 VSCode를 실행한 뒤 파일> 폴더 열기... 를 클릭합니다.

원하는 위치에 폴더를 만들고 선택합니다. workspaceVue> firstVue라고 설정해 봤습니다.

2. 터미널 실행하고 npm과 node.js 설치 준비.

상단 메뉴의 터미널>새 터미널을 클릭합니다. 

우측 하단에 터미널이라는 탭과 현재 위치가 나타납니다. 

vue.js 설치 전 필요한 것이 npm과 node.js입니다.

node.js를 설치하면 npm을 사용할 수 있습니다. npm은 프로그램 패키지를 설치할 때 필요한 명령어입니다.

3. node.js 설치

node.js를 설치해 보겠습니다.

아래 포스팅을 따라서 설치하면 됩니다.

2023.05.21 - [Software/Settings] - Node.js 설치하는 방법. nodejs, 노드 with npm도 같이

4. Vue.js 설치하기

설치 환경은 완료했으니 Vue.js를 설치해 보겠습니다.

터미널에 위 이미지처럼 입력합니다. node.js를 설치했기 때문에 npm 명령이 가능합니다.

npm install -g @vue/cli

이 명령어를 그대로 입력하고 엔터를 칩니다.

위 이미지처럼 설치가 진행되고 정상 종료되면 명령어 창으로 복귀합니다. 

이제 제대로 설치가 되었는지 vue의 버전을 확인해 보겠습니다.

터미널에 다음과 같이 입력합니다.

vue --version

원래는 vue version이 조회되어야 하는데 갑자기 빨간 글씨로 보안 오류가 발생합니다.

이런 메시지가 보인다면 다음과 같이 조치하면 됩니다.

비주얼스튜디오코드(visual studio code)를 종료합니다.

그리고 Visual Studio Code 실행 파일을 선택하고 우클릭을 합니다.

관리자 권한으로 실행을 클릭합니다.

다시 새 터미널을 열고 다음과 같이 입력 후 엔터를 칩니다.

set-executionpolicy  (주의할 점은 - 사이에 공백이 없이 연속으로 입력해야 함)

ExecutionPolict: RemoteSigned로 설정하고 엔터를 칩니다. 그리고 vue --version을 입력하면 해당 vue 버전이 조회됩니다. 성공적으로 설치가 되었습니다.

5. vue 프로젝트 생성하기 vue 프로젝트를 생성하기 위해 다음 명령어를 사용합니다.

vue create fntProj로 입력해서 새로운 프로젝트를 만들어봅니다.

오류가 발생했습니다.

vue프로젝트명은 대문자를 넣으면 안 된다고 경고를 보여줍니다.

vue create myvueproj로 프로젝트 명을 대문자 없이 생성하니 정상 진행이 됩니다.

옵션을 선택하라는 의미인데요.

vue 3, vue 2는 vue의 버전을 의미합니다.

babel은 최신 스트립트를 사용했을 때 구 버전 브라우저에서 호환되지 않더라도 호환 버전으로 변환해 주는 역할을 합니다.

router는 쉽게 설명하면 페이지 이동에 사용하는 라이브러리입니다.

화면을 클릭할 때 다른 화면으로 이동하는 경우로 이해하면 됩니다.

vuex는 데이터를 저장하는 공통 영역이라 보면 됩니다.

목록 조회하고 상세 페이지로 이동할 때 목록의 키 값을 가지고 가야 하는 경우 사용할 수 있겠네요.

페이지 이동시 가지고 갈 값을 저장해 두는 곳이죠.

요즘은 vuex보다 pinia를 더 선호하는 듯합니다.

마지막으로 eslint는 잘못 기입한 코드에 오류 표시를 해주는 기능으로 이해하면 좋습니다.

설치를 기준으로 하기에 vue 3 default로 설치해 보겠습니다.

참고로 fntsmpl은 최근 설치한 옵션을 저장해서 다시 생성 시 재활용할 때 사용할 수 있습니다.

위의 경우는 vue3, babel, router, vuex, eslint로 저장되어 있습니다.

이 옵션을 선택하면 해당 라이브러리들이 설치되는 프로젝트가 만들어집니다.

이제 vue 프로젝트가 생성됩니다. 

프로젝트가 설치되면 위 이미지처럼 터미널 입력부로 커서가 이동합니다.

npm run serve를 실행하면 아래 팝업이 뜰 수 있습니다. 액세스 허용을 하면 됩니다.

npm run serve를 새로 생성한 프로젝트에서 실행하면 node 서버가 실행을 합니다.

App running at:을 보면 Local과 Network는 vue 프로젝트가 서버에 잘 기동 되어 실행이 되는지 확인할 수 있습니다.

지금까지 Vue 설치 및 프로젝트 생성하는 방법에 대해 알아봤습니다.

안녕하세요. 신기한 연구소입니다.

node.js는 자바스크립트(Javascript) 서버로 많이 알고 있는데요. 사실 자바스크립트 런타임 환경(Javascript runtime environment)입니다.

브라우저 없이 바로 자바스크립트 코드를 실행해 볼 수 있는 런타임 환경이라는 의미인데요.

바로 같이 설치해 보겠습니다. (윈도우즈 11, windows 11)

1. node.js 사이트 방문해서 다운로드 하기.

아래 사이트에 방문합니다.

https://nodejs.org/ko

영문 사이트는 /ko 대신 /en으로 바꾸면 됩니다.

해당 사이트에 접속하면 아래와 같은 화면이 나타납니다.

윈도우즈 11에서 설치하기에 알아서 Windows (x64) 설치버전이 나타납니다.

LTS와 현재 버전으로 받을 수 있는데요. 최신 기능을 가진 현재 버전보다는 안정적이고 신뢰도 높은 LTS 버전으로 선택합니다.

LTS는 Long Term Support의 약자로 긴 시간 동안 지원해 준다는 의미입니다. 30개월 정도 버그가 수정되는 것에 보증한다는 의미이기에 추천합니다. 물론 현재 버전을 설치해도 좋습니다.

2. 설치하기

다운로드된 실행 파일을 클릭합니다.

다음과 같은 화면이 나타납니다.

Next를 클릭합니다.

최종 사용자에 대한 라이선스 동의를 합니다.

I accept the terms in the LIcense Agreement에 클릭합니다.

설치 위치가 나타납니다.

기본으로 설정된 위치 그대로 두고 진행할 겁니다.

혹시 다른 위치를 원한다면 Change... 를 누르고 변경하면 됩니다.

수동으로 설치 항목을 설정하는 부분입니다.

npm package manager 도 보입니다.

기본 상태인 그대로 Next를 클릭합니다. (상세 옵션을 잘 아시는 분은 조정해도 됩니다.)

기본 상태로 설치해 보겠습니다. 체크 박스는 체크하지 않습니다.

Next를 클릭합니다.

이제 설정이 끝났으니 node.js를 설치할 수 있습니다.

Install을 클릭합니다.

실행하고 권한을 묻는다면 예를 클릭하세요.

실행바가 움직이고 설치가 진행됩니다.

설치가 끝났습니다.

이제 Finish를 클릭합니다.

중간에 자동으로 툴을 설치할 것에 체크박스를 클릭했다면 이 화면이 나타납니다.

아무 키나 누르면 다음 화면이 나옵니다.

다시 아무 키나 누릅니다.

그러면 Windows powershell을 실행할 건지 묻는 창이 나오고 예를 클릭하면 다음과 같이 쉘이 실행됩니다.

쉘에서 설치는 계속 진행됩니다. 천천히 기다려봅니다.

사실 체크박스를 선택하지 않았다면 Finish에서 설치는 끝납니다.

이제 설치가 잘 되었는지 확인해 봅니다.

비주얼스튜디오코드를 실행합니다.

터미널에 node를 입력하고 엔터키를 누르면 다음과 같이 나옵니다.

18.16.0 버전의 node.js가 잘 설치되었네요.

지금까지 node.js 설치하는 방법에 대해 알아봤습니다.