본문 바로가기
반응형

Development/Vue4

[Vue] Nuxt Lifecycle Nuxt SSR 에서 created 에 로그를 찍었는데 두번호출되는것을 보고 라이프 사이클을 찾아봤지만 대부분 아래 이미지만 붙여놔서 찾아보다 공식사이트에 글로 정리된 부분을 보니 이해가 되었다. 라이프사이클이 서버와 클라이언트로 나눠져있고, 당연한 얘기지만 서버가 끝난 후 클라이언트가 진행 된다. Lifecycle Server For SSR, these steps will be executed for every initial request to your app The server starts (nuxt start) When using static site generation, the server steps are only executed on build time, but once for every pa.. 2023. 3. 29.
[Vue] Nuxt에서 serverMiddleware 사용하기(server-middleware) nuxt.config.js 설정 serverMiddleware: [ { path: '/logger', handler: '~/server-middleware/api/logger.js' }, { path: '/api', handler: '~/server-middleware/users.js' } ] 프로젝트 루트 폴더 아래 server-middleware 폴더 생성 후 파일 생성 nuxt.config.js 에 추가된 파일이며, require로 사용되는 라이브러리를 못 찾는 경우 vue에 사용하는 라이브러리를 추가하듯이 npm install을 통해 설치하면 된다. logger.js 더보기 export default function (req, res, next) { // req is the Node.js http.. 2023. 3. 29.
[Vue] input 한글 양방향 바인딩 (v-model ?) input 태그를 사용할때 양방향 바인딩을 많이 사용합니다. 한글의 경우 v-model 을 적용 했을때 글이 완성된 이후 적용이 되기 때문에 별도의 작업을 해줘야 하는데요 :value + @input 을 사용하면 입력 시 바로 업데이트 됩니다. {{ msg }} 2023. 3. 23.
[vue] Vue에 scss 적용하기 scss사용전 의존성을 추가해야 한다. npm i sass sass-loader -D 2022. 7. 5.
반응형