23.01.16) Typescript기초와 후발대강의를 들은 55일차

TS는 JS의 슈퍼셋(JS의 모든기능을 포함한)이다.

 

Typescript는 정적 타입

Javascript는 동적 타입

TS를 사용하는 이유?

JS의 경우 예시로 let a = 3; a='삼'이라 했을때도 결과를 출력해주는데 TS는 JS의 수식에도 오류를 출력한다. 문자열과 숫자열은 같이 사용할 수 없기 떄문이다.

 

Time

Typescript는 변수의 타입이 컴파일타임(작성한 소스코드가 어떠한 것(js)으로 변환되는 과정)에 결정된다

Javascript는 변수의 타입이 런타임(프로그램이 실행되는 과정)에 결정된다

==그래서 TS의 경우 vscode같은 곳에 코드를 작성하면 바로 오류가 출력되어 유지보수가 편하다.

JS의 단점 : 런타임 시 오류가 검출, 프로젝트 사이즈가 커지면 유지보수가 어렵다

 

TS유지보수가 JS보다 유리하다.

TS는 왜 유지보수가 유리할까 ? JS는 동적 타입언어니까 없는 프로퍼티를 쳐도 출력하기 전까지는 결과를 알 수가 없는데 TS의 경우 없는 프로퍼티를 친다면 오류를 발생한다.

 

 

 

TS(TypeScript)설치

//프로젝트 설정(packge.json이 생성된다)
npm init -y
//해당폴더에서만 사용가능하다.전역적으로 설치하고 싶을땐 --g추가하기
npm install --g typescript
//타입 스크립트 컴파일러.tsc모듈로 초기화하는데 한번만쓰고 없애겠다.
npx tsc --init

tsconfig.json에서 target과 modules를 확인한다.

Target은 config.json의 주석에 적혀있는  js버전을 의미한다. shift + space를 누르면 어떤 버전이 있는지 확인이 가능.

modules은 TS에서 JS로 전환될 때 import를 어떻게 변환할지 정하는 곳.

common.js는 임포트문법을 리콰이어 문법으로/ ex2015는 임포트 문법 그대로

 

TS에서 JS로 변환하는 과정을 트랜스파일 == 컴파일러.

 

 

 

#후발대

면접질문타임

SPA와 MPA 차이

DOM과 가상DOM의 대해 설명하기

가상 DOM - 실제 DOM에서 속성 등의 모든것을 공유하는 복사본이다. 대신 api가 없다.(ex: getElementById나 Create같은)그래서 JS의 오브젝트처럼 키와 값으로 나눈다. if initialState같다..

 

 

버추얼 dom의 예시 ..완전 initialstate같다.

root.render를 하는데 한번만 하니까 spa인데 여기서 root를 가져오는 과정을 왼쪽의 형태로 진행한다.

리액트는 batch update를 하기때문에 딱 한번만 렌더한다.

 

비동기의 배치성 업데이트니까 state변경시 렌더링하는건데..그냥 setState으로만 지정해버리면 undefined가 출력된다. ※setState의 비동기 해결로 확인해보자.

 

 

 

 

 

 

 

 

 

 

자바스크립트의 런타임 환경?

노드 브라우저

 

불변성은 무엇이며, 리액트에서 왜 중요한가요?

메모리에 있는값인데 이제 못 바꾸는 값...대전제가 메모리에 있는값이 바뀌지 않았으면 안바뀐거다..라고 정의했기 때문에 리액트에서 중요하다 . 불변성 함수(배열과 obj, map, filter를 추가하면 더 좋다)

 

일반 함수와 화살표 함수의 가장 큰 차이점은 무엇인가?

this 바인딩을 안해요.근데 일반함수는 바인딩 해. 가리킨것을 묶는거 = 새로운 것을 할당하는데 화살표함수는 그걸 안한다.

 

export와 export default는 ?

export 할 경우에는 import { 함수명 } from * 으로 사용하는데, export default 하실 경우에는 import 함수명 from.

export는 여러 함수를 가져올 수 있지만 export default는 대표적인 것 하나만 가져옴

 

프롭 드릴링 ? 

자식컴포넌트에게 부모 컴포넌트가 가진 속성을 내려주는 것, 하지만 프롭스드릴링이 반복되면 에러가 나도 해당 프롭스가 어디서 온지 모르기 때문에 유지보수가 어려워진다.

그래서 프롭드릴링을 대신 콘텍스트 api 그 다음은 리듀서를 사용한다.

 

순수함수?

개입이 전혀 없는 함수..리액트가 바로 순수함수이기 때문이다.

 

CSR과 SSR을 SEO관점에서 얘기해보자..

CSR 클라이언트(ex:리액트)를 쪼개서 렌더링 하다.  리액트에서 필요한 div를 찾는다.얘는 html밖에 없으니까 seo에 불리..

SSR은 index.html 하나뿐이라 크롤링 봇이 가져갈 게 없어서 seo 취약함. 오가닉제이션. seo관점에서는 이게 더 유리하다. 이게 next.js다..으아악...