후니후니

✏️Nuxt에 빌드/배포 분기를 여러곳으로 나눠보자. 실무에서는 여러 개발자가 함께 개발하기 때문에 코드를 합쳐야 하는 순간이 온다. 내가 있는 곳은 각각 개발한 코드를 합쳐서 테스트 해볼 수 있는 개발 서버와, 실제 배포되는 리얼 서버와 동일한 환경에서, 실제 서버에 배포 나가기 직전에 테스트를 진행해볼 수 있는 스테이징 서버, 그리고 실제 유저가 사용하는 리얼 서버로 운영이 되고있다. 이를 위해 환경 변수를 development, stage, production에 맞춰서 따로 처리를 해줘야 하는데, 넉스트에 적용해야 되기도 하고, 알아보는 과정에서 많이 헤맸기 때문에 (Nuxt는 문서가 잘 정리되어 있긴 한데...) 다른 분들도 혹시 나와 같은 상황에 겪지 않도록 오늘 헤맸던 내용을 공유해보려고 한다..

✏️Nuxt에 vee-validation을 적용해보자. Nuxt 프로젝트에 로그인 기능을 추가할 일이 생겼고, 로그인하면 또 검증 로직을 실행해줘야 하기 때문에 vee-validation을 이용하여 검증을 하려고 한다! 현재 프로젝트에서는 vee-validation 2버전대로 사용 중이라서, 현재 3버전대와는 조금 차이가 있어서 새로 조사를 하게 됐다. 가이드 글이 잘 되어 있긴 하지만 영어라서.. 한글로 정리된 글은 별로 없어서 아쉬웠다. Next말고 Nuxt라서 인기가 없나... 우선 vee-validation을 설치해보자. npm install vee-validate --save 설치 후 플러그인으로 사용하기 위해 plugins 폴더에 validation.js 파일을 생성하자. // plugins/..

✏️Nuxt를 사용해보자 2탄. 2탄에서는 라우팅에 대해서 알아보려고한다. Vue.js에서는 만약 localhost:8080/profile 로 가기 위해서는 Router를 등록하고, Router.js에 name, path, component 등을 추가해줘야 정상적으로 localhost:8080/profile로 접근할 수 있다. Nuxt.js에서는 어떻게 해줘야 할까? 위의 번거로운 과정이 모두 사라졌다. pages 폴더에 profile.vue를 생성해주면 끝. 정말 끝..? profile.vue를 추가해주고 localhost:3000/profile로 접속하면? 짠. 정상적으로 접근도 되고 데이터도 확인할 수 있다. .nuxt 폴더에 route에 보면 자동으로 nuxt가 라우터에 추가해줬다. 이렇게 편리해..

✏️Nuxt를 사용해보자 1탄. 현재 진행 중인 프로젝트 특정 페이지에 SSR(SEO 고려로 인한)로 새로 페이지를 제작할 일이 생겨 Nuxt.js를 사용하게 되었다. Vue.js를 그동안 사용해왔지만 Nuxt.js는 이전에 잠깐 맛보기만 했지 제대로 사용해본 적이 없어서 공식 문서를 기반으로 Nuxt.js를 경험해보려고 한다. - Nuxt를 설치해보자 터미널에 명령어를 입력하여 간단하게 Nuxt를 설치할 수 있다. Vue Cli처럼 쉽게 시작할 수 있도록 거의 셋팅을 해준다. npx create-app-nuxt "Project name" 위 명령어로 설치가 가능하고, 설치 전에 여러 옵션을 선택할 수 있다! UI 프레임워크, 서버 프레임워크, Eslint, Prettier, Axios.. 등등을 선택하..