1. import React from 'react' JSX 문법을 사용하면 우리는 import React from 'react'를 항상 사용한다. 하지만 실제로 해당 모듈을 우리가 사용한다는 느낌은 들지 않는다. Babel이 JSX 문법을 React.createElement 코드로 변환하기 때문에 우리가 실제로 사용을 하지 않지만 컴파일된 후 코드에는 React가 쓰이고 있다. 그렇기 때문에 우리가 사용한다고는 느끼지 못하지만 Babel을 통해서 React 모듈을 사용하고 있던 것이다.

변수에 타입 선언하기 타입스크립트는 변수를 만들 때 변수의 타입을 선언할 수 있다. let 이름: string = 'seo' ' 변수명: 타입 ' 으로 선언이 가능하다. 변수에 타입을 지정한 경우 해당 변수에 다른 타입을 할당하면 에러가 발생한다. var 이름 = "seo"; // 이름 = 123; --- 에러 기본 타입 종류 자주 쓰는 타입으로 string, number, boolean이 있다. let 이름 :string = 'seo'; let 나이 :number = 200; let 결혼 :boolean = false; 외에도 null, undefined 등이 있지만 자주 사용하는 타입은 아니다. array or object 타입 선언 여러 가지 자료를 한번에 저장할 때 array 또는 object 자..

1. tsconfig.json 기본적으로 TypeScript 프로젝트에는 tsconfig.json이 존재한다. 여기선 ts 파일들을 js 파일로 어떻게 변환할 것인지 세부 설정이 가능하다. { "compilerOptions": { "target": "es5", "module": "commonjs", } } target은 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이다. es5 외에도, es2016, esnext 등 원하는 자바스크립트 버전을 설정할 수 있다. module은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 사용할 지 정하는 곳이다. commonjs는 require 문법, es2015, esnext는 import 문법을 사용한다. 일반적으론 IE 호환성을..

1. Nodejs와 VScode 에디터를 설치한다. 해당 과정은 React 세팅을 통해서 이미 진행한 과정이기 때문에 패스 2. VScode 에디터에서 패키지를 설치한다. npm install -g typescript 3. 작업할 폴더를 만들고 tsconfig.json 파일을 만들어준다. { "compilerOptions": { "target": "es5", "module": "commonjs" } } 4. js 파일로 변환 터미널창에서 tsc -w를 입력하면 ts 파일을 js 파일로 변환해준다.

0. 준비물 블랙 네일은 원래는 잭다니엘, 드람브이와 콜라, 레몬이 들어가는 칵테일이지만, 잭다니엘은 가성비 위스키 블랙엔 화이트, 드람브이는 직접 만든 미드로 대체! 1. 제작 얼음에 블랙엔화이트 위스키(잭다니엘) 1oz 넣어준다. 미드(드람브이) 1oz 넣어준다. 레몬 0.5oz 넣어준다. 콜라를 넣어서 마무리! 2. 시음 후기 콜라맛이 많이 나긴 하지만, 위스키와 미드 맛이 아에 안나는 것이 아닌 은은하게 나는 칵테일이였다.

1. 이미 있는 React 프로젝트에 설치하기 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 패키지를 설치하고 .js 파일을 .ts로 바꿔서 사용하면 된다. 2. React 프로젝트를 새로 만들 경우 npx create-react-app my-app --template typescript 명령어를 통해서 프로젝트를 만들면 TypeScript가 적용되어 있다.

0. Webpack? 웹팩은 모듈 번들러이다. 여기서 모듈은 각 리소스 파일을 말하고, 번들은 Webpack 실행 후 나오는 결과 파일이다. 하나의 번들 파일은 여러 모듈로 만들어진다. 즉, Webpack을 이용하면 우리가 제작한 여러 가지 리소스(js, css, ... )를 사용자에게 전달하기 좋은 형태로 만들 수 있다. 필요 이유? 초기 웹 페이지는 페이지가 바뀔 때마다 새로운 HTML을 요청해서 화면을 그리는 방식이었다. 자바스크립트는 돔을 간단하게 조작하는 역할만 했고, Ajax가 유행했을 때는 자바스크립트의 비중이 더 커졌지만 페이지당 자바스크립트 파일 몇 개면 충분했다. 하지만 SPA가 나오면서 하나의 HTML에 수십, 수백 개의 자바스크립트 파일을 포함하기 때문에 기존 방식이 통하지 않았다...

1. 브라우저 캐싱? 사용자와 서버간 응답 속도를 높이기 위해서 사용하는 방법이다. 웹 페이지 구성요소 ( CSS, 이미지 파일 등)를 사용자의 PC에 저장했다가 다시 방문 시 PC에 저장된 요소를 꺼내 보여줌으로 속도를 빠르게 하고 트래픽 절감 효과를 주는 기법