web/Vue7 Nuxt 구조 Nuxt 프로젝트를 최초로 생성하면 아래와 같은 폴더구조로 생성이 된다. 각 폴더별로 어떤 기능을 하는지 알아보자. 위에 나와있지 않더라도 필요에 의해 직접 생성하면 된다. ▪️ components : 재사용이 자주되는 뷰 파일들을 관리한다. ▪️ node_modules : nuxt에 필요한 package들이 있고, npm이나 yarn으로 설치하는 lib 들이 여기에 들어간다. ▪️ pages : 애플리케이션의 view 디렉토리다. 언더바(_)로 파일명이 시작할 경우 동적으로 라우팅된다. 예를들어 특정 id 값을 가진 todo를 보고 싶다면 pages/todo/_id.vue 형태로 구성하면 localhost/todo/1로 접근하면 된다. ▪️ static : 서버 루트에 직접 매핑되어 바뀌지 않을 파일을.. 2023. 9. 1. Nuxt 로 Vue 환경세팅 Spring Boot 로 RESTful API 서버는 간단히 구축을 했으니, Front단 구성은 Nuxt 를 이용하여 구현하겠다. React(Next.js) 도 있는데 왜 Vue 를 쓰냐고? 그야 간단하다. 걍 React 보다 쉬워서 ㅋㅋㅋㅋ ES6 문법이 능숙하지 않은 나는 Vue 가 러닝커브가 훨씬 낮았고, .ts(typescript) 같은 경우도 Vue3 가 나오면서 호환성이 훨씬 좋아졌다. 꾸준히 업데이트도 되고있고 랜더링도 빠르다. 그러니 안쓸 이유가 없지! ✔ MAC OS 기준 ✔ Tool : VsCode Vue.js는 프로젝트를 생성하고 관리하는 과정에서 npm(Node Package Manager)을 사용하여 의존성 패키지를 설치하고 관리하기 때문에 Node.js 설치는 필수다. 1. No.. 2023. 8. 31. Nuxt 란 Nuxt.js는 Vue.js 기반의 프레임워크로서, 웹 애플리케이션을 개발하기 위한 도구다. Nuxt.js는 서버 사이드 렌더링(SSR) 및 유니버설 앱(Universal App)을 지원하며, Vue.js의 기능을 보완하여 더 나은 SEO 및 사용자 경험을 제공하도록 설계되었다. Universal Mode 유니버설모드가 등장한 이유는 서버사이드 렌더링(SSR)이 가지고 있는 단점 때문인데, 가장 큰 단점은 아무래도 서버에서 렌더링을 하다 보니 발생하는 "화면의 깜빡임"이라고 할 수 있다. 하지만 이런 단점을 가지고도 SSR만의 장점을 포기할 수 없었는데, 그래서 나온 게 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 모두 선택하여 새롭게 만들어낸 모드가 유니버설 모드이다. Nuxt 앱을 첫 방문할 때는.. 2023. 8. 31. 이전 1 2 다음
