분류 전체보기
-
[Vue.js] Vue의 라이프사이클 (create, mounte, update, destroy)Front-End/Vue.js 2022. 11. 25. 15:01
📑 Vue의 라이프사이클이란? 어떤 vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 된다. 이를 라이프사이클(lifecycle)이라고 한다. 다시 말해, Vue 인스턴스가 생성된 후 우리 눈에 보여지고, 사라지기까지의 단계를 일컫는 말이다. Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 4가지 과정을 거치게 된다. 이 과정에서 Vue는 각각 단계에, Vue를 사용하는 사람들을 위해 Hook을 할 수 있도록 API를 제공한다. 일반적으로 많이 사용하는 종류로 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, be..
-
[IT용어] SSR vs CSR (서버사이드렌더링, 클라이언트사이드렌더링?)IT/CS지식 2022. 11. 25. 11:51
📑 브라우저 렌더링이란? 브라우저 렌더링이란, 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업을 말한다. 즉) 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것이다. 브라우저 렌더링 방식엔 서버사이드렌더링, 클라이언트사이드렌더링 2가지가 있는데 하나씩 알아부도록 하자. 📑 클라이언트 사이드 렌더링(client side rendering) : 클라이언트 사이드 렌더링은 클라이언트인 브라우저가 렌더링을 처리하는 방식이다. 즉) 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면(view)을 그리는 주체가 되는 것이다. 📌 장점 : 네이티브 앱과 비슷한 빠른 인터렉션을 구현할 수 ..
-
[Vue.js] v-model, watcher, TransitionFront-End/Vue.js 2022. 11. 24. 16:17
📑 v-model 값 이용하기 사용자의 입력값 받으려면 v-model을 사용한다. 예를들어 원룸을 판매하는 어플이 있을 때 몇 개월을 살지 입력하면 그에 맞는 가격이 출력되도록! {{month}} 개월 선택함 : {{외부데이터[사용자클릭].price * month}} v-model을 안 쓴다면, @input 이벤트를 통해 사용자가 값을 입력하면 month라는 변수에 $event.target.value 사용자가 입력한 값을 받아오게 만들었다. 그 후 {{ }} 데이터 바인딩을 통해 {{month}}의 값을 출력한다. 만약 데이터 바인딩을 하려면 data()에 month라는 데이터를 선언해줘야한다. 초기값을 1로 출력한다. input 태그에 값이 들어오면 string 형태로 저장되는데 이를 숫자로 변환하기 ..
-
[JavaScript] isNan 함수, 숫자인지 검사하는 함수프로그래밍 언어/JavaScript 2022. 11. 23. 16:07
만약 숫자만 입력해야되는 form에 문자가 들어온다면?? 이를 검증하기 위한 코드가 필요하다. 이럴 때 자주 쓰이는 게 바로 isNan 함수이다. 📑 isNan() isNan( value) 와 같이 사용하며 매개변수가 숫자가 아니면 true, 숫자이면 false를 반환한다. 123.123은 숫자이므로 false를 반환. '123.123'은 따옴표로 감쌌지만, 숫자로 취급하여 false를 반환. 'Not a Number'는 숫자가 아니므로 true를 반환. 123*123은 숫자이므로 false를 반환. '123*123'은 따옴표 안에 문자가 있으므로 숫자가 아닌 것으로 취급하여 true를 반환합니다.
-
[Vue.js] import/export, component 사용해보기Front-End/Vue.js 2022. 11. 23. 10:20
vue 파일에서 < 꺽쇠 하나 친 다음에 엔터 누르면 기본 템플릿이 나온다. 📑 Vue에서 import , export 하기 📌 변수 1개일 때, A파일의 변수 B파일에서 사용하기 A파일 var apple =10; export default apple; B파일 import apple from './assets/data.js' 📌 변수 2개일 때, A파일의 변수 B파일에서 사용하기 A파일 var apple =10; var apple2 =100; export {apple,apple2}; B파일 import {apple,apple2 } from './assets/data.js' 📑 component - 사용해보기 component는 긴 HTML을 한 단어로 줄일 수 있는 문법이다. 컴포넌트를 사용하는 문법은 ..
-
[Vue.js] npm 방식 vue 기본 문법 (on:click, v-html, v-for, 데이터바인딩 ,,)Front-End/Vue.js 2022. 11. 22. 14:06
📌 node_modules : 프로젝트에 쓰는 라이브러리들 📌 src : 소스코드 다 담는 곳 📌 public : html 파일, 기타 파일 보관 📌 package.json : 라이브러리 버전, 프로젝트 설정 기록 📑 vue 데이터 바인딩 {{ }} {{products[0]}} xx원룸 {{price1}}만원 {{products[2]}} xx원룸 {{price2}}만원 📑 v-for 반복문 {{a}} vue 객체 생성을 export default로 진행한다. npm 방식에서는 !! 여기에 배열로 메뉴들 값을 지정해두고 반복문의 in 다음에 메뉴들을 넣으면 이 data 횟수만큼 값이 반복되며 출력된다. export default { name: 'App', data(){ //데이터는 object 자료로 저장..
-
[Vue] Vue.js npm 방식으로 설치하기 , VSCode 프로젝트 생성Front-End/Vue.js 2022. 11. 21. 10:56
📑 Node.js 설치하기 홈페이지에 들어가서 최신 버전 LTS로 다운 받기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 📑 명령 프롬프트 입력 📌 1. node.js를 설치했으면 확인해보자. node -v 📌 2. 폴더 생성하기 mkdir VueProjects 폴더를 만들어 준 후 cd VueProjects 로 해당 폴더로 이동한다. 📌 3. vue 설치하기 npm install vue 📌 4 vue-cli 설치하기 npm install -g @vue/cli 📑 최종 확인 일반 프롬프트 들어가서 npm과 vue 입력해보기 📑 VSCode에서 프..