본문 바로가기
웹프로그래밍/Nuxt

[Nuxt3] 프로젝트 생성하여 시작하기

요즘 react를 주로 이용하다가 새롭게 vue를 시작했습니다. vue를 접하면서 느낀점은 심플하고 프레임워크와 비슷하다는 점입니다. 실제로도 react는 라이브러리에 vue는 프레임워크에 비교하여 이야기하는 사람들이 많은것 같습니다.

 

결과적으로는 저에게는 vue가 더 잘 맞는거 같습니다. react는 아무래도 라이브러리에 가깝다보니 개발하는 방법이 너무나도 자유로워 개발자의 스타일에 따라 구현방법에 차이가 크고, vue에서는 기본으로 제공하는 기능들을 react는 외부의 라이브러리에 의존하는 경우가 상대적으로 더 많다보니 프로젝트마다 스타일의 차이가 너무크고 내가 개발하는 방식이 좋은 방식일까? 라는 의구심이 자주 드는 반면 vue는 정해진 가이드대로 개발이 강제되는 경우가 많아 코드들이 서로 비슷하여 서로 다른 프로젝트의 다른사람이 개발한 코드라 할지라도 어느정도 일관성이 유지되며 vue에서 가이드된 방식대로 개발하다보니 내 코드에 좀더 확신이 서는 느낌입니다.

 

그렇다고 react에서 되는 것이 vue에서 안되는 경우도 없고, 속도도 더 빠르다는 점을 생각한다면 vue는 더욱 매력적인 개발도구라고 생각됩니다. 이런 vue에서도 한단계 더 나아가 리액트의 next에 대응되는 nuxt라는 프레임워크가 있는데 최근 nuxt3의 rc버전(정식출시 직전상태의 버전이 출시되어 한번 정리해보고자 합니다.

 

 

 

 

 

Nuxt 란?

Nuxt는 vue.js를 기반으로한 웹어플리케이션 프레임워크입니다.

vue.js자체도 이미 자바스크립트의 프레임워크인데 이러한 vue를 다시 프레임워크로 만든이유는 서버사이드랜더링(SSR)을 쉽게 하기 위해서 입니다. 물론 서버사이드랜더링 이외에도 다양한 기능들을 제공하지만 이 포스팅에서는 Nuxt3 설치에 대한 이야기를 다루다보니 자세한 내용은 생략하도록 하겠습니다.

 

 

 

 

 

프로젝트 생성

프로젝트 생성은 아래 명령어를 이용하면 쉽게 만드실수 있습니다.

만약 node가 설치되어 있지 않다면 node를 설치해야지만 아래의 명령어를 실행할수 있습니다. 

해당명령어를 실행시 프로젝트 이름과 동일한 디랙토리가 생성되며 생성된 디랙토리에는 nuxt3의 기본파일이 생성되어집니다.

npx nuxi init [프로젝트 이름]

 

nuxt2를 해보신분은 알겠지만 생성된는 파일이 무척 간소화 되었습니다.

rc버전이여서 그런건지 아니면 정식버전에서도 이렇게 출시되는지는 기다려봐야 알 수 있을듯 합니다.

 

 

 

 

 

라이브러리 다운

프로젝트가 생성되었다면 package.json에 기술되어 있는 라이브러리를 다운로드 받아야 합니다.

npm을 사용한다면 npm install을 yarn을 사용한다면 yarn install을 입력해 주시면 됩니다.

 

 

 

 

 

프로젝트 실행

npm run dev
yarn run dev

Nuxt3의 깔끔한 시작화면이 반겨주네요

추가적으로 궁금한 내용이 있다면 다음의 공식페이지를 참조하면 좋을것 같습니다. https://v3.nuxtjs.org/ 

댓글