Pusher 를 이용한 실시간 채팅 웹앱 만들기 #4 (w/ Laravel, Nuxt)

이번 글에서는 가장 간단한 형태의 채팅 앱 프론트엔드 코드를 작성하기 전에, Nuxt(or Vue) 개발환경을 설정해보겠습니다.

정보

로컬 개발 환경에 최신 LTS 버전의 Node + NPM 이 설치되어있다고 가정하겠습니다. 설치되어있지 않은 경우 Node 사이트 에서 자신의 플랫폼에 맞게 설치하거나 Window인 경우 Chocolatey 패키지 매니저를 사용하여 설치할 수도 있습니다.

Nuxt?

시리즈의 처음에서 우리는 프론트엔드에서 Nuxt를 사용한다고 했었습니다.

Nuxt는 Vue를 감싼 프레임워크입니다. SEO와 사용자 경험을 위한 SSR을 별도의 까다로운 설정/설계 없이 가능하게 해주고, 기타 Vue 개발에 필요한 여러가지를 프레임워크 차원에서 제공해줍니다.

다음 시리즈에 만들 가장 간단한 형태의 채팅 앱은 사실 그냥 Vue만 사용해도 더 가볍고 쉽게 만들 수 있습니다.

그렇지만 앞으로 추가할 많은 기능들의 구현에서의 개발 편의성과 실제 배포시에 검색엔진 최적화 등을 생각하면 처음부터 Nuxt로 진행하는 것이 더 나은 듯 해서 현재는 오버헤드가 크긴 하지만 Nuxt로 시작하겠습니다.

Nuxt 개발 환경 설정

정보

Nuxt는 Node + NPM(or Yarn) 환경을 필요로 합니다. Node와 NPM이 개발 환경에 설치되어 있다고 가정하고 진행합니다.

새 Nuxt 프로젝트 생성

Laravel에서와 같이, Nuxt도 패키지 매니저를 통해 한 줄의 명령으로 새로운 프로젝트 구조를 만들어낼 수 있습니다.

아래 명령을 사용하면 현재 디렉토리에 지정한 이름의 디렉토리를 만들고 그 안에 Nuxt 프로젝트 구조를 만들어줍니다.

npm init nuxt-app <YOUR_APP_NAME>

위 명령을 치면, 여러가지 프로젝트에 대한 정보를 물어봅니다. 하나하나 살펴보겠습니다.

프로젝트의 이름을 물어봅니다. 그냥 엔터를 누르면 소괄호 안에 있는 값이 선택됩니다.

프로젝트에서 JS를 사용할지, TS를 사용할지 물어봅니다. TS는 사용할 계획이 없으므로 JS를 선택합니다.

프로젝트의 패키지매니저로 Yarn을 사용할건지, NPM을 사용할건지 물어봅니다. NPM을 사용했으므로 NPM을 선택합니다.

프로젝트에서 사용할 UI 프레임워크를 물어봅니다. 이 시리즈에서는 Tailwind CSS를 사용하겠습니다.

추가로 적용할 Nuxt Module을 물어봅니다. 서버로 요청을 보낼 때 Axios를 사용할 것이므로 Axios에만 체크(스페이스바)하고 넘어갑니다.

프로젝트에서 사용할 JS Lint 툴을 선택합니다. 저는 개인적으로 ESLint와 Prettier를 VSCode와 연동해서 사용합니다. 개인 취향껏 고르면 됩니다.
(사용하지 않으시려면 그냥 넘어가주세요.)

프로젝트에서 사용할 테스트 프레임워크를 물어봅니다. 이 시리즈에서는 테스트는 하지 않을 예정입니다. None을 선택해주세요.

Nuxt의 렌더링 모드를 선택합니다. 우리는 편리한 SSR을 위해 Nuxt를 사용하는 것이므로.. Universal을 선택합니다. 이후에 자유롭게 변경 가능합니다.

이전과 연결되는 선택지입니다. SSG가 아닌 SSR을 원하므로 Server를 선택합니다.

개발 편의에 도움을 주는 추가 툴을 선택합니다. 취향껏 선택하면 됩니다.

사용할 CI 툴을 선택합니다. 사용 안할 예정이므로 None을 선택합니다.

마지막으로 프로젝트에서 사용할 버전관리 툴을 선택합니다. Git을 사용할 것이므로 Git을 선택하고 넘어갑니다.

긴 질의응답을 마치면 Nuxt구조가 만들어지기 시작합니다. 환경에 따라 다르지만 금방 걸립니다.

Nuxt 구조 둘러보기

새롭게 완성된 Nuxt 프로젝트 내부로 들어가보겠습니다.

가장 먼저 눈에 띄는건 nuxt.config.js 파일입니다. 이 파일은 Nuxt에서 가장 중요한 파일입니다. 이 파일에서 Nuxt Module 적용 등 Nuxt와 관련된 여러가지 설정을 할 수 있습니다. 자세한 내용은 Nuxt 공식 문서를 참고해주세요.

프로젝트 루트에는 여러개의 폴더들이 존재합니다. 몇몇 디렉토리들은 특수한 기능을 가지고 있습니다. pages 디렉토리에 있는 Vue 컴포넌트들은 각각 페이지로 취급되어 파일명에 해당하는 route(vue-router 사용)가 자동으로 생성됩니다. store 디렉토리에는 Vuex 모듈을 파일로 구분하여 넣어두면 각 파일명에 맞게 모듈화되어 사용됩니다.

기타 폴더들과 모든 기능들은 이 시리즈에서 다루기는 너무 많아서, 공식문서를 참고해주세요.

완료

새로운 Nuxt 프로젝트를 만들었습니다. 다음 포스트부터 Laravel Echo 라이브러리를 사용해 Pusher와 이전 포스트에서 만든 우리의 Laravel 백엔드와 연결해보고 동작을 테스트해보겠습니다.