Vue.js 게시판 만들기 1 - Frontend 프로젝트 생성
위 링크 게시물을 기반으로 프로젝트 생성을 한다.
개발환경 설정
FE 프로젝트 생성을 위해 VS Code에서 적당한 폴더를 생성해서 열고 Node, npm, vueCli 등을 설정한다.
기존에 Node.js 등이 깔려 있어서 버전 확인하고 변경 등만 해준다.
nvm install lts
현재(2023-01) lts 버전은 18.13.0이다.
나중에 문제 생기면 바꾸도록 하고 지금은 일단 최신 버전으로 써보자.
nvm use 18.13.0
하는 김에 npm 버전도 확인해봤다. npm도 Node.js 패키지인건지 npm에서 npm을 관리하나보다.
npm i -g npm
npm install -global npm 인가본데 글로벌 옵션 안넣을까 하다가 그냥 넣었다. npm 버전 높아서 충돌나는 경우는 잘 못 것 같아서...
이어서 Vue-cli도 업데이트 해본다. 나중에 인프런 강의보고 따라하는거 충돌나면 버전변경 해야지...
npm i -g @vue/cli
설치되면 vue 명령어가 먹혀서 vue --version으로 버전 확인이 가능하다.
nodeJS는 18.13.0, npm은 9.4.0, vue/cli는 5.0.8 버전이다.
VueJS 프로젝트 생성
아래 명령어로 프로젝트를 생성할 수 있다.
vue create vue-front
vue-front 부분은 프로젝트 이름이다.
설치하고나서 선택해야 할 vue 버전을 어떻게 할지 고민했는데(실무에선 2 버전이 더 많이 쓰인다고 하니) 그래도 최대한 최신화해서 하는만큼 그냥 3 버전으로 했다. 타입스크립트 문제도 있고...
자동으로 yarn 쓰고 이것저것 많이 깔리는데 세부사항에 대해서는 추가적으로 공부가 필요하려나 싶다.
Vue 2와 3 버전의 차이에 대해서는 아래 링크들을 참고했다.
vue 3, 기본 버전이 되다(캡틴판교)
Vue2 & Vue3 차이점
설치가 완료되면 마지막 부분에 이런 메시지가 뜬다.
🎉 Successfully created project vue-front.
👉 Get started with the following commands:
$ cd vue-front
$ yarn serve
vue-front 폴더가 생성됐으니 거기 가서 yarn serve 해서 구동시켜보라고 한다.
DONE Compiled successfully in 7775ms > > 오후 1:41:09
App running at:
Local: http://localhost:8081/
Network: http://172.30.1.69:8081/
Note that the development build is not optimized.
To create a production build, run yarn build.
기본 포트가 8080인데 오라클 포트가 8080이라 자동적으로 8081 포트를 쓰는 것 같다. 사실 아무 포트나 써도 상관은 없는데 무슨 포트가 나올줄은 알아야 하니까 포트 번호 설정하는 법을 확인해보면, package.json의 serve 명령어 정의에 포트 번호 옵션을 넣어주면 되는 것 같다.
"serve": "vue-cli-service serve --port 9090"
해보면 지정한 포트로 열리는 걸 알 수 있다.
8080으로 지정했다고 하면 그냥 8081로 열리는데 주의해야할 부분 같다.
