- 서버 사이드 렌더링 vs 클라이언트 사이드 렌더링 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)은 웹 개발에 있어 주요한 접근 방식이며, 각각의 방법은 웹 애플리케이션을 구축하고 렌더링하는 방식에 있어 서로 다른 접근을 제공한다. 1. 서버 사이드 렌더링(SSR) 웹 애플리케이션의 초기 요청 시 서버 측에서 HTML을 생성하여 클라이언트에 전달하는 방식이다. 이후에는 클라이언트 측에서 JS 파일을 다운로드하고 초기 렌더링을 받은 HTML을 해당 스크립트로 인터랙티브하게 만든다. SEO(검색 엔진 최적화)에 유리하며, 초기 로딩 시간이 짧은 것이 특징이다. - SSR 장점 SEO에 유리하며, 초기 로딩 시간이 짧음 일부 장치에서는 클라이언트 사이드 렌더링보다 더 나은 성능을 보임 - ..

[Vue.js] 웹팩(webpack)으로 빌드하기 [npm 활용하여 모듈 가져오기] - 웹팩(webpack)으로 빌드하기 1. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. npm으로 모듈 설치하기 #npm 초기화 npm init #vue 설치 npm install vue #개발자모드로 web yermi.tistory.com - 웹팩(webpack) 빌드 자동화하기 코드 수정할 때마다 webpack을 build 해주는 건 매우 번거로운 일이다. webpack 뒤에 '--watch'만 추가해주면 자동으로 build를 해준다. "build": "webpack --wa..

- 웹팩(webpack)으로 빌드하기 1. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. npm으로 모듈 설치하기 #npm 초기화 npm init #vue 설치 npm install vue #개발자모드로 webpack, webpack-cli 설치 npm i webpack webpack-cli -D 3. webpack.config.js 세팅 const path = require('path'); module.exports = { entry: { app: path.join(__dirname, 'main.js') }, module: { rules: [{ }] }, plu..

- 뷰 컴포넌트(component) 활용하기 - 결과물 HTML 삽입 미리보기할 수 없는 소스 - 참고자료 [무료] 웹 게임을 만들며 배우는 Vue - 인프런 | 강의 간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다., - 강의 소개 | 인프런... www.inflearn.com

- Elements in iteration expect to have 'v-bind:key' directives Vue에서 반복문을 사용하려는데 에러가 발생하였다. 에러 코드가 말해주는 대로 'v-bind:key'를 추가해 주면 된다. {{t.try}} {{t.result}} - 참고자료 [vue.js] Elements in iteration expect to have 'v-bind:key' directives [개요] '개발 레시피'라는 유튜브 채널의 Todolist 강좌를 따라 개발을 진행하는 도중 v-for에서 아래와 같은 에러가 발생했습니다. Elements in iteration expect to have 'v-bind:key' directives 강좌에서는 vue CLI jaimemin.tis..