프리온보딩 프론트엔드 챌린지 1차

프리온보딩 프론트엔드 챌린지 1차 수강 도중 애매하게 알고 있었거나 새로이 알게된 정보 정리

---

 

1. map 등 메서드를 사용할 때, number[]를 썼다면 number 관련 method가 추론된다. num 위에 커서를 올리면 타입추론이 되고 있는 것을 확인할 수 있다.

https://www.typescriptlang.org/play?#code/MYewdgzgLgBAhgJwXAnjAvDA2gRgDQwBMBAzALoDcAUIsigHQC2cADgBQCWUApoxgHwwuvejAD0YmIAGFwKHjgFNnABh2AXcZiAcFsAnTfQCUQA 

TS Playground - An online editor for exploring TypeScript and JavaScript

 

2. 타입단언 (as 사용)

https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#%ED%83%80%EC%9E%85-%EB%8B%A8%EC%96%B8

Documentation - Everyday Types

 

3. Non-null assertion operator (Null이 아닌 어선셜 연산자. !를 사용)

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator

Documentation - TypeScript 2.0

 

4. Definite Assignment Assertions (확정할당 연산자. !를 사용)

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#definite-assignment-assertions

Documentation - TypeScript 2.7

 

5. React TypeScript cheat sheet

https://react-typescript-cheatsheet.netlify.app/docs/basic/setup/

Setup TypeScript with React | React TypeScript Cheatsheets

라이브러리나 프레임워크를 사용할 때, 어떻게 추론해야 할 지 알 수 없다면?

• `<button onClick={e=>{}}/>` 등을 작성하고 e에 마우스를 가져다대서 타입을 알아냅니다. 
• 구글 검색
• 치트시트 참조
• React / index.d.ts 참조

 

6.

Q. textarea와 input에서 onChange 이벤트를 사용할 때 | 를 사용하여 두 타입을 모두 명시하는 것이 좋을까, 두 타입의 부모 타입을 주는 게 좋을까?

A. 이럴 때 제네릭을 사용하자

 

 

7. 에러가 발생한다고 해서 그것이 꼭 에러객체라는 건 아니다.

throw 'h1' // Uncaught h1
throw new Error('h1') // Uncaught Error: h1

function readUser(json) {
  let user;

  try {
    user = JSON.parse(json);
  } catch (err) {
    if (err instanceof Error) {
    // instanceof 연산자를 사용하면 객체가 특정 클래스에 속하는지 아닌지를 확인할 수 있습니다.
      console.log(err)
    } else {
      throw err;
    }
  }
}

 

RQ

 

1. 모듈 시스템이란?

> 모듈: 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부른다.

> 모듈로 분리된 JS파일을 불러오는 방식을 정의한 것.

https://doitnow-man.tistory.com/entry/javascript-module-%EC%8B%9C%EC%8A%A4%ED%85%9C

[javascript] module 시스템

<script src="./a.js"></script>
<script src="./b.js"></script>

// 글로벌 스코퍼를 공유하게 됨

 

2. IIFE: 정의와 동시에 즉시 실행되는 함수

Immediately Invoked Function Expression (즉시 실행되는 함수 표현식)

https://velog.io/@doondoony/javascript-iife

자바스크립트의 IIFE

(function () { console.log('Hello World') })(); // Hello World

보편적으로 전역 스코프를 오염시키지 않기 위해 사용함.

 

 

3. 웹팩이란?

자바스크립트 모듈 번들러.

어플리케이션에 필요한 모든 모듈을 병합하고 압축해서 하나의 결과물(번들)을 생성해주는 도구.

웹팩에서의 모듈은 javascript 파일뿐만 아니라 애플리케이션을 구성하는 HTML, CSS, Javascript, Images, Font 등 많은 파일들을 모듈이라고 한다.

 

4. 순수함수란?

외부의 상태를 변경하지 않으면서 동일한 인자에 대해 항상 똑같은 값을 리턴하는 함수

const App = () => {
 return <div>App</div>
}

 

함수인가?: 함수 컴포넌트는 어떻게 보면 그냥 '함수'이다.

그 목적은?: view를 리턴하고 있다.

리덕스는 순수함수를 기반으로 한다.

 

5. 사이드이펙트란?

자바스크립트 관점에서 보면 사이드 이펙트는 (자바스크립트) 코드가 외부 세계에 영향을 주거나 받는 것이다. 조금 모호하지만 함수 관점으로 생각하면 조금 더 명확하다. 함수가 일관된 결과를 보장하지 못하거나, 함수 외부 어디든지 조금이라도 영향을 주는 경우 모두 사이드 이펙트를 갖는 것이라 할 수 있다.

(출처: https://ui.toast.com/weekly-pick/ko_20171124)

const App = () => {

    useEffect(()=>{
     // fetch('') - 외부세계에 영향을 미치는 부수효과. 사이드 이펙트.
    },[])

 return <div>App</div>
}

만약 위 코드를 동기적으로 실행한다면 useEffect가 끝날 때까지 렌더링이 멈출 것이다.

이 함수의 목적은 'App'을 리턴하는 것이다.

fetch는 사이드 이펙트다.

그러므로 렌더링이 다 된 뒤 useEffect가 실행된다.

'Effect'만 없다면 순수함수가 될 수 있었을 텐데...

 

(state, props) => UI

state, props에 의해서만 UI가 영향을 받는다.

state, props 외, 다른 것이 들어와서 UI가 바뀌면 순수함수가 아니다.

 

 

Q. 음... 잘 와닿지 않는데요?

A. fetch로 들어온 데이터 때문에 UI가 바뀐다면 순수함수가 아니다.

 

 

5. useState의 첫 번째 인자에 함수를 넣는 이유?

-> 처음 한 번만 실행하기 위함이다.

 

6. 캐시란?

자주쓰는 데이터를 가까운 저장소에 두는 것.

 

서버야. 캐시가 있니? 

응: 그럼 캐시 쓰자.

아니: 캐시에 데이터 저장할게

cache[request.url] ? cache[request.url] : cache[request.url] = request.url

6-1. react-query에서 캐시키의 활용.

a, b 컴포넌트에서 같은 캐시키를 갖고 있다면?

b에서 바뀌면 a도 바뀐다.

 

 

7. 직렬화란?

plain object

-객체 리터럴 {}을 이용해서 만들 수 있다.

-{key:value, key2:value, ...}와 같은 형식으로 만든다.

-키 값으로 관리되는 순서가 중요치 않는 데이터를 저장한다.

 

대표적으로 json 직렬화가 있다.

JSON.stringfy(JSON형식의 객체) 

: 객체 => 문자열로 변환하며, 이를 직렬화(serialize)라고 한다.

: 통신할 때는 문자열로 직렬화하여 주고 받는 것이 안전하다.

 

8. 불변성이란?

객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴

 

9. 엔드포인트란?

서비스를 이용할 때 사용하는 커뮤니케이션 채널의 한쪽 끝에 해당하는 URL

get. post 등의 메서드로 엔드포인트가 끝나야 이상적이다.

 

10. 로컬 스토리지는 동기적인 동작이다. 메인스레드가 정지된다.