Conversation
There was a problem hiding this comment.
4주차 워크북 수행하시느라 고생하셨습니다~
키워드 정리할실때 표와 코드를 함께 자세히 정리해주신 점이 저도 보면서 도움이 많이 되었습니다!
추가로 async, await부분에서 에러처리를 try-catch로 묶어 사용할 수 있는 방식도 한번 찾아보셔도 좋을거 같습니다~!
| | **방식** | 비동기적 | 동기적 | | ||
| | **default** | 공식적으로 존재 | module.exports가 대체 | | ||
| | **환경** | 브라우저, Node.js(최신) | Node.js(전통적) | | ||
| | **실행 시점** | 컴파일 시(코드 실행 전 모듈 구조 확정) | 런타임(코드 실행 중 require 호출 시) | |
There was a problem hiding this comment.
실제로 JS는 컴파일이 없습니다! (인터프리터언어기때문에) 따라서 ESM으로 JS를 실행하게 되면
파싱 -> 로딩 -> 링킹 -> 평가 이렇게 진행을 합니다. 따라서 실제 실행 이전에 모듈이 로딩된다고 생각하시면 됩니다!
|
|
||
| - **let/const**에서의 호이스팅 | ||
|
|
||
| TDZ(Temporal Dead Zone | 변수 선언 ↔ 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간)가 존재해서 호이스팅이 발생하지만, 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보임 |
There was a problem hiding this comment.
var - let,const 모두 호이스팅이 일어납니다! 하지만 let, const는 값 할당 전에 TDZ에 메모리가 올라가 접근시 Reference error를 발생하게 되죠! error가 발생해 프로세스가 멈추는것과 undefined값이 실제로 출력되는것에 차이를 이해해보시면 좋을거 같아요
|
|
||
| : 함수 선언 앞에 async를 붙이면 해당 함수는 자동으로 promise를 반환함 | ||
|
|
||
| async 함수의 결과값을 외부에서 사용할 경우 .then을 통해 처리 |
There was a problem hiding this comment.
async 결과값을 외부에서 사용할때도 await을 사용합니다!
|
|
||
| : Promise가 해결될때까지 기다린 후 결과값을 반환함 | ||
|
|
||
| Promise.then()을 대신하고, async 함수 내에서 사용 가능 |
There was a problem hiding this comment.
await 가 then을 대신하지 않습니다!
.then과 async await 동작은 차이가 있는데
.then으로 콜백을 등록한 경우 .then에 등록된 내용을 promise가 resolve될때 엔진자체가 콜백을 꺼내서 실행합니다. 즉! 실행흐름이 콜백 안으로 들어가게 되어 디버깅이 어렵게 되죠. 그리고 에러 핸들링의 경우도 체인 마지막에 .catch라는 문법을 사용해 promise reject를 감지해야합니다.
하지만 await는 함수 흐름에서 그냥 해당부분에 서 함수실행을 중단하고 resolve되면 그 자리에서 값을 꺼내 순차적으로 진행할 수 잇습니다! 에러처리도 일반 함수 작성하듯 try-catch를 쓰면 되죠
|
|
||
| - **nullish 문법 (??)** | ||
|
|
||
| 좌측의 값이 null/undefined일때, 우측의 값을 반환함 |
There was a problem hiding this comment.
nullish는 두가지 방법이 있는데 || 과 ??가 있습니다.
||는 falsy한 값(0,"", false, null, undefined}일때 값이 우측으로 넘어가고
??는 null undefined만 우측으로 넘어갑니다
| interface는 자동으로 합쳐지지만, type는 같은 이름으로 재선언이 불가능해서 병합할 수 없다 → 대규모 프로젝트에서 확장성 차이 발생 | ||
|
|
||
| - 정리 | ||
| - interface + class |
There was a problem hiding this comment.
interface로 class를 상속하면 특장 구조, 구현을 class에 강제할수 있습니다!
| - 코드 유연성 향상 : 패턴을 사용하면 코드 간 결합도를 낮추고, 변경에 유연하게 대응할 수 있는 구조를 만들 수 있다 | ||
| - 의사소통 도구 : 구현 방식에 대한 설명 없이도 구조를 이해할 수 있다 | ||
|
|
||
| - 종류 : 크게 생성, 구조, 행위 패턴으로 분류됨 | ||
| - 생성 패턴 | ||
|
|
||
| → 싱글톤 패턴, 팩토리 메서드 패턴, 추상 팩토리 패턴, 빌더 패턴, 프로토타입 패턴 | ||
|
|
||
| - 구조 패턴 | ||
|
|
||
| → 어댑터 패턴, 브릿지 패턴, 컴포지트 패턴, 데코레이터 패턴, 퍼사드 패턴, 플라이웨이트 패턴, 프록시 패턴 | ||
|
|
||
| - 행위 패턴 | ||
|
|
||
| → 옵저버 패턴, 전략 패턴, 커맨드 패턴, 상태 패턴, 책임 연쇄 패턴, 방문자 패턴, 인터프리터 패턴, 메멘토 패턴, 중재자 패턴, 템플릿 메서드 패턴, 이터레이터 패턴 | ||
|
|
3 participants
✅ 워크북 체크리스트
✅ 컨벤션 체크리스트