후니후니

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

✏️Nuxt를 사용해보자 3탄. Nuxt를 사용하는 이유는 seo (검색엔진최적화) 때문이다. 이번 편에서는 seo와 비동기 데이터 처리에 대해 알아보려고 한다. SEO를 위한 Meta Tag 설정하기 nuxt.config.js 위 파일을 보면 상단에 head라는 영역이 있고, 그 안에 title과 meta 태그가 있다. export default { head: { title: 'nuxt.js', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'og:description', content: '소개 문구', }, { name:..

✏️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.. 등등을 선택하..

✏️React를 경험해보자 1탄 신입 시절, 아니 신입도 아닌 취준생 시절.... 자바스크립트 프레임워크/라이브러리는 Vue.js, Angular.js, React.js 등이 있다는 정도만 아는 상태로 취업을 해버렸다. 취업하고 나니 실무 프로젝트에서는 Vue.js를 사용한다고 하여 몇개월동안 죽어라 Vue.js만 공부하고, 일을 하다 보니 벌써 Vue.js를 사용한지는 1년이 다 되어간다. Vue.js 3이 은근 인기가 있는 것 같은데, 요즘 채용 공고들을 보면 React.js 사용을 하는 회사들이 Vue.js를 사용하는 곳보다 훨씬 많다는 것을 정말 알게되었다. Vue.js도 참 좋은데... Vue.js 밖에 안 써봐서 뭐라 설명할 수가 없네... 그래서...!! React를 공부하려고한다! 우선, ..

MVVM = Model View ViewModel의 약자입니다. Vue.js 에서는 이 패턴을 사용하고 있음을 아래의 사진으로 알 수 있습니다. 사진의 ViewModel이 양방향 데이터 바인딩을 가능하게 해줍니다. M(모델) : 프로그램에서 실제 사용하는 데이터를 다루는 부분. V(뷰) : 사용자에게 데이터를 보여주는, 사용자가 눈으로 볼 수 있는 부분. VM(뷰모델): View와 Model 사이의 인터페이스 역할, 모델의 데이터를 뷰에 바인딩하고, 뷰에 보여질 동작들을 제어한다. var vm = new Vue ({ }) // Vue instance Create 이렇게 생성된 Vue instance는 VM이 됩니다. $el 은 MVVM 에서 View로 볼 수 있고, $data는 MVVM에서 Model로 ..

기본적으로 Vue-cli는 npm run build를 통해 dist 폴더가 생성되고, HTML,CSS,JS가 압축되어 들어간다. Netlify를 통해 배포하기 전에, /public 폴더 아래 _redirects 파일을 생성 후 , 아래의 코드를 넣어주어야 한다. # Netlify settings for single-page application /* /index.html 200 위 파일을 넣어야 URL에 router 값을 넣어도 not-found가 뜨지 않는다. 파일을 넣고 Github Repository에 푸쉬한다. Netlify에 접속 후 New site from git을 눌러 Repository를 연결한다. Netlify에 연결된 저장소를 클릭하고, Settings을 누른 후 좌측 메뉴의 Build..