NOW OR NEVER

Vue.js 작은 화면당 라이브러리 역할부터 큰규모의 웹 애플리케이션 개발을 돕는 프레임워크 역할까지 점진적으로 적용할 수 있는 프런트엔드 프레임워크 특징 컴포넌트 기반 개발 방식 : 화면(웹페이지)을 여러 개의 작은 단위로 쪼개어 개발, 리액트와 같은 방식 MVVM 패턴 : 화면 UI 코드와 백엔드 데이터 처리 코드 분리 리액트와 앵귤러의 장점을 흡수 설치 파일 vue.js devtools 개발자 모드로 할 경우 개발자 도구에서 vue 패널이 보임 vs code 확장 프로그램 : vetur node-v , npm-v 설치 , nvm html body 태그 내에서 - https://kr.vuejs.org/v2/guide/#%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0에서 개발자 모드랑..

Webpack Chunk bundle 파일이 특정 기준을 통하여 몇 개의 파일로 나뉘어진 형태 webpack.config.js에서 optimization{}으로 설정 후 yarn build runtime chunk {} 모듈들에 대한 내용만 남고 분리 vendor chunk {} vendor : 외부 패키지 모듈 ex) jQuery 외부 모듈만 분리하여 관리 hash 값이 바뀌지 않아 hash 값을 통해 효율 관리 가능 chunkhash 나눠진 파일 별로 hash 값 부여 모듈을 제외한 chunk에는 영향을 주지 않음 소스 코드 최적화 최종적으로 사용자에게 전달하는 리소스는 최적화 하여 전달해야 함 모듈을 사용하지 않고 직접 소스 코드 최적화 방법 사용자를 위해 최적화 하는 것이므로 production ..

Webpack web application을 위해 사용하는 bundler(도구) 모듈 해석 -> 의존성 그래프 생성 -> 번들 생성 웹팩 설치 명령어 : yarn add webpack webpack-cli --dev 실행 명령어 : npx webpack npx webpack --target=node Module 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태 한 파일에 쓰여진 큰 코딩 덩어리를 여러 개로 쪼개 사용 할 수 있음 어떤 기준을 통해 코드가 파일 단위로 분리되어있는 형태에서 서로를 참조 js, sass, css, jpg, png 등 module을 사용하기 위해서는 module을 인식하는 module system과 module을 다루는 키워드가 제공되어야 한다.(module이 어떤..

MarkDown 쉽고 빠르게 작성할 수 있는 문법 html로 변환되서 실질적으로 적용 문서의 구조를 만드는 개념으로 꾸미는 개념은 아니다. 장점과 단점 장점 html 문법보다 간단하고 쉬움 확장자가 md 파일을 가지고 문법을 작성하고 이 파일 하나만 관리해도 특정 글들을 쉽게 관리 굉장히 많은 곳에서 활용 됨, 지원되는 환경이 많다 단점 표준화된 문법이 없어 지원되는 환경에서 해석되는 방법이 다를 수 있다. html 문법으로 변환해서 적용되게 되는데 모든 html 태그들을 대신할 순 없다.(마크다운은 문서의 내용을 집중하기 위한 언어이므로) 문법 제목 Header # 제목1 h1 제목1 === ## 제목2 h2 제목2 ------ ### 제목3 h3 #### 제목4 h4 ##### 제목5 h5 #####..

Typescript 복습 고급 타입 Intersection Types 여러 타입을 하나의 타입으로 합쳐진 타입 &로 표현 가능 특정한 타입들을 합쳐줘야 하는 타입이 필요할 때 사용 새로 만들지 않고 기존 타입들을 활용해서 사용하고 싶을 때 사용 Union Types | 로 표현 이타입일 수도 있고 저 타입일 수도 있을 때 사용 단 타입별로 묶어주고 싶을 땐 타입 가드(typeof 활용한 조건문으로)로 반환 값을 달리 해줘야 함 Primitive type이 아닌 인터페이스 타입 등을 가지고도 활용 가능 타입 가드를 member로 확인(변수.do) 사용자 정의 타입가드 만들고(함수로) 조건문의 조건으로 넣고 반환 값으로 (변수).do function 타입가드함수(파라미터 : 인터페이스타입 | 인터페이스타입)..

Typescript 복습 class 클래스 ES6 부터 생겨남 클래스를 통해서 특정 타입의 객체 생성 가능 const 변수이름 = new 클래스이름({parameter}); 클래스로 정의한 인스턴스들을 new 키워드를 통해 변수에 할당할 수 있다 타입스크립트의 경우 안에서 타입을 정의해줘야 한다. 상속하는 클래스 extends 상속받는 클래스 : 상속하는 클래스의 속성을 상속받는 클래스에서도 사용할 수 있게 됨 타입스크립트의 접근 제한자 es6 안엔 없음, private : 선언된 블록 안에서만 접근 가능 기본 값은 public protected : 다른 곳에 상속이 안됨 생성자의 매개변수에 접근제한자 같이 작성시 속성 정의와 동시에 전달받은 인자를 해당 속성에 할당하는 작업을 한번에 할 수 있다. 인터..

Typescript 복습 자바스크립트의 super set(상위집합 : 이전의 자바스크립트, 최신의 자바스크립트 다 해당) 오픈소스 정적인 언어로 자바스크립트와 반대되는 개념 컴파일 시간(작성한 코드가 컴퓨터에서 타입을 검사하는 시간) 가짐 장점 여러 명의 개발자와 협업해서 할 때 실수 방지(강력한 타입이여서) 다양하고 유명한 자바스크립트들은 타입이 다 정의되어 있어 편리하게 사용 가능 프로그래밍 언어로써 모든 자바스크립트 기능을 지원할 뿐만 아니라 최신의 자바스크립트 기능도 지원해서 컴파일을 통해서 자바스크립트를 만들어내는 하나의 언어 컴파일러 설치 : window의 경우 sudo npm install -g typescript 실행 : tsc 타입스크립트 파일 타입스크립트를 컴파일해서 자바스크립트로 만들..

Typescript redux middleware redux-thunk yarn add axios redux-thunk typescript 지원되서 따로 @types로 설치 안해도 됨 quicktype(https://app.quicktype.io/) 받아오는 json 결과물 무슨 타입인지 확인하는 법 json 결과물 복사해서 입력하면 typescript형태로 변환 가능 AxiosError : axios가 에러났을 때 사용하는 에러 객체의 타입 createAsyncAction : 비동기 작업시 사용하기 편한 액션 생성 함수 export const AsyncAction이름= createAsyncAction( 액션이름들 )(); ThunkAction keyof S : 상태가 지니고 있는 key github a..

Typescript React Context API 활용 state context : const context이름 = createContext( null ); dispatch context: const context이름 = createContext( null ); Context 생성 방법 context 안에서 관리할 값을 위한 type alias 선언 const context이름 = createContext(defaultValue값(=보통 null)); Provider 컴포넌트 생성 context 다 작성 provider props를 type alias로 작성 type typeAlias이름 = { children : React.ReactNode;} Provider 컴포넌트 생성, useReducer 선언..

TypeScript 자바스크립트를 알고 있다면 금방 배움 장점 자바스크립트는 weakly type으로 실수를 하게 될 수 있음 코드가 실제로 실행이 되어야만 실수한지 안한지 알 수 있음 타입스크립트 사용시 이런 문제점 보완 가능 VS code 같은 IDE 사용시 많은 도움을 얻을 수 있음 함수 사용시 어떤 파라미터 넣는지 컴포넌트의 props에 어떤 값을 넣는지 실수로 빠뜨린 props 있을 시 에러 감지 사소한 실수 많이 방지 파일 생성 법 디렉토리 생성 : git bash 에서 mkdir 디렉토리명 git bash 에서 cd 디렉토리명 package JSON 생성 : git bash 에서 yarn init -y 해당 디렉토리 에디터로 열기 : git bash 에서 code ./ typescript(t..