mobssie

beforeCreate: Vue 인스턴스가 생성되기 전 create: Vue 인스턴스가 생성된 후 beforeMount: Vue 인스턴스가 마운트되기 전 mounted: Vue 인스턴스가 마운트된 후 beforeDestroy: Vue 인스턴스가 파괴되기 전 destroyed: Vue 인스턴스가 파괴된 후 beforeUpdate: Vue 인스턴스의 데이터가 변경되어 다시 렌더링하기 전 updated: Vue 인스턴스의 데이터가 변경되어 다시 렌더링한 후

typescript variables // There are 3 basic types in Typescript var isDone: boolean = false; var age: number = 42; var myname: string : "Anders"; chcek console.log(isDone) console.log(age) console.log(myName) null vs undefined //print null var emptyVariable = null; console.log(emptyVariable); // prints undefined var newVariable; console.log(newVariable); collection // list var list: number[] = [1,..

순서대로 실행하기 npm init npm i typescript npm i react react-dom npm i webpack webpack-cli -D npm i awesome-typescript-loader -D npm i @types/react @types/react-dom 여기까지 설치 후 script 실행 부분 변경 "scripts": { "dev": "webpack" }, { "name": "react-typescript-webpack-init", "version": "1.0.0", "description": "react typescript webpack init", "main": "index.js", "scripts": { "dev": "webpack" }, "repository": { "..

doc : vuex.vuejs.org/kr/ 상태관련 라이브러리 VueX 모든 컴포넌트가 공유할수있는 집중식 저장소. 상태는 앱을 작동하는 원본 소스 뷰는 상태의 선언적 매핑 액션은 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법 액션이 바뀌면 상태가 바뀌고 매핑되어있는 뷰가 바뀌는 단방향 데이터가 흐르고있다. 여러개의 컴포넌트가 있을경우, 또는 중첩되는 컴포넌트가 깊어질수록 prop가 장황해질수있음. 그래서 중앙에서 관리할수있는 전역 저장소가 있다면 이 문제를 해결 할 수 있음. 1. 상태 (State) VueX는 단일 상태 트리를 사용. mapState : 컴포넌트가 여러 저장소 상태 속성이나 getter를 사용해야 하는경우에 사용 import {mapState} from 'vuex' com..

curl -X POST localhost:3000/login -d 'email=test@test.com&password=123123' curl -X POST localhost:3000/login -d 'email=test@test.com&password=123123' -vs | jq json형식으로 토큰값을 알아 낼 수 있음. API 에서 사용되는 토큰 정보는 클라이언트(브라우저)측에서 저장이 필요하다. 로그인 정보를 LocalStorage에서 저장하고, 로그아웃을하면 삭제하는 방식. 모든페이지에서 적용 할 수 없으니 라우터 로직을 사용하도록 네비게이션에 함수를 만든다. const requireAuth = (to, from, next) => { const isAuth = localStorage.getIt..

코드가 복잡해지고 많아지면, api요청이 많아지면 매 코드 마다 라이브라리에 의존하게 된다. 상황이 바껴서 라이브러리를 바꿀때에는 하드코딩된 부분을 바꿔야 하게 되기 때문에 의존적인 코드를 최소화하자. axios를 호출하는 코드를 별도로 만들어 주는 방법을 사용해 보자. import axios from 'axios'; const DOMAIN = 'http://localhost:3000'; const UNAUTHORIZED = 401; const onUnauthorized = () => { router.push('/login') } const request = (method, url, data) => { return axios({ method, url: DOMAIN + url, data }).then(re..

서버라우팅 : 매번 주소를 요청하면 화면이 바뀜. ex) 네이버나 구글 브라우저라우팅 : 매번 주소를 요청하더라도 화면이 바뀌지 않는다. 좀 더 효율적 화면을 갱신한다. 주소요청시 라우팅을 브라우져에서 처리하고 데이터는 백엔드 api를 통해서 서버로 부터 받아온 뒤에 마지막으로 데이터를 이용해 화면에 내려주는 것. = 싱글페이지라우팅(SPA) ex) 구글맵, 트렐로

Remote Repository : 원격 저장소로, GitHub같은 원격 저장소 전용 서버 Local Repository : 로컬 저장소로, 로컬 pc에서 git의 제어를 받는 directory를 가르킴

브라우저 저장소 : 로컬스토리지, 세선스토리지, 쿠키 ▶ HTML5에서 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할수있는도록 제공하는 기능. ▶ 로컬스토리지는 브라우저를 닫고 다시 열어도 유지, 영구적으로 보관이 가능 ▶ 세선스토리지는 브라우저 리로딩시에는 유지되나 닫으면 유지안됨. 브라우저 컨텍스트가 다르기 때문에 브라우저가 다르면 다른 영역이 된다. ▶ 쿠키는 방문자의 정보를 컴퓨터 메모리에 저장 Web Storage와 Cookie 차이 - Cookie는 매번 서버로 전송되고, 문자열만 저장이 가능하며, 용량에 제한이 있고, 만료 일자가 존재. Web Storage는 데이터를 클라이언트에 저장만 할 뿐 서버로 전송되지는 않는다. polyfill ..

자바스크립트 기능 : 기본적인 객체와 데이터 유형으로 구분한다. 문자열, 숫자, 불리언 데이터유형은 문자열, 숫자, 불리언과 연관된 기능을 제공한다. 내장 RegExp, 날짜(Date), Math객체는 각각 정규표현식, 날짜, 필수적인 수학 연산과 같은 기본 기능을 제공 자바스크립트의 기본적인 구성 요소는 시간이 지나면서 변했다. 자바스크립트 객체(object), 원시(primitive), 리터럴(literal) 구분 자바스크립트 리털럴은 인용 문자열(String), 부동 소수점수(Number), 불리언(Boolean)과 같은 특정한 형식의 값을 나타냄. 자바스크립트 원시(primitive)는 데이터 유형의 인스턴스를 나타내며 문자열, 숫자, 불리언, null, undefined 등 다섯 가지 형식이 있..