From 48c0746a48416e181a90d4a277259c3dd83a375d Mon Sep 17 00:00:00 2001 From: SangBeom Park Date: Sat, 19 Oct 2024 17:53:23 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Create=20=EC=83=81=EB=B2=94.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\354\203\201\353\262\224.md" | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 "\354\261\225\355\204\260_5/\354\203\201\353\262\224.md" diff --git "a/\354\261\225\355\204\260_5/\354\203\201\353\262\224.md" "b/\354\261\225\355\204\260_5/\354\203\201\353\262\224.md" new file mode 100644 index 0000000..b97fe26 --- /dev/null +++ "b/\354\261\225\355\204\260_5/\354\203\201\353\262\224.md" @@ -0,0 +1,35 @@ +## 챕터5 최신 자바스크립트 문법과 기능 + +자바스크립트 모듈은 ES6(2015년)에 출시와 함께 표준화 됨 + +#### 모듈의 효능 +- 모듈을 사용하면 각 기능에 맞는 독립적 단위로 코드 분리 가능 +- 다른 곳에서 같은 기능 적용 가능 (코드 재사용성 높아짐) + + +### 외부 소스로 부터 가져오는 모듈 +```js +import {cakeFactory} from "https://example.com/modules/cakeFactory.mjs"; +``` + +> 리액트는 webpack을 통해서 번들링 되고, 로컬 파일 시스템이나 node_modules 디렉토리에 있는 모듈을 참조하도록 설계되어 있어서 안 됨. 사실 리액트 아니여도 이렇게 안쓰지 않나 🤔 + +### 동적으로 모듈 가져오기 +> 적절하게 사용하면 번들 최적화 가능, 반면 사용자 경험 저하되거나 에러의 원인이 될 수도 있으니 조심해야 됨 + +> 이건 여담인데 lazy hydration 해보신분 있으신가요? +> react18에서 나온 selective hydration이랑은 다른거라 생각하는데 lazy hydration에 대해 어떻게들 생각하시는지 의견 궁금합니다.. +전 드라마틱한 개선 이점이 있다고는 생각 안하지만 적용하면 좋을거라고 생각함다 +> [관련 블로그](https://helloinyong.tistory.com/323) + + +### 생성자, 게터, 세터 가진 클래스 +> TC39에서 function 단어의 남용을 줄이려고 노력했다고 하는데, 이유가 궁금해짐 💭 개인적으로 함수 표현식 말고 선언식만 사용해서 function 단어 안쓴지 오래긴 함 + + +### 자바스크립트 프레임워크와 클래스 +> 갑자기 클래스 컴포넌트 얘기 나왔길래 예전에 제가 리액트에 대해 생각했던거 적어봤습니다. +> +> +> 처음에 선언형 프로그래밍을 기조로 한 리액트가 등장, 근데 UI는 JSX로 선언형이긴 한데 클래스 컴포넌트여서 명령형 프로그래밍으로서비스 로직 작성해야 됨 (이게 뭐지 싶었음 ㅋㅋ) +> 이후 16.8 버전부터 hooks 등장으로 함수 컴포넌트에서도 사이드 이펙트 처리 가능하게 되면서 선언형 프로그래밍 ㅇㅈ해줌, 그리고 훨씬 사용하기 좋아짐 From bd323f676fd54e40d9790d4c85eac0070ea1d7b0 Mon Sep 17 00:00:00 2001 From: SangBeom Park Date: Sat, 19 Oct 2024 18:46:21 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20?= =?UTF-8?q?=EC=9D=98=EA=B2=AC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "\354\261\225\355\204\260_5/\354\203\201\353\262\224.md" | 7 ------- 1 file changed, 7 deletions(-) diff --git "a/\354\261\225\355\204\260_5/\354\203\201\353\262\224.md" "b/\354\261\225\355\204\260_5/\354\203\201\353\262\224.md" index b97fe26..a652cbb 100644 --- "a/\354\261\225\355\204\260_5/\354\203\201\353\262\224.md" +++ "b/\354\261\225\355\204\260_5/\354\203\201\353\262\224.md" @@ -26,10 +26,3 @@ import {cakeFactory} from "https://example.com/modules/cakeFactory.mjs"; ### 생성자, 게터, 세터 가진 클래스 > TC39에서 function 단어의 남용을 줄이려고 노력했다고 하는데, 이유가 궁금해짐 💭 개인적으로 함수 표현식 말고 선언식만 사용해서 function 단어 안쓴지 오래긴 함 - -### 자바스크립트 프레임워크와 클래스 -> 갑자기 클래스 컴포넌트 얘기 나왔길래 예전에 제가 리액트에 대해 생각했던거 적어봤습니다. -> -> -> 처음에 선언형 프로그래밍을 기조로 한 리액트가 등장, 근데 UI는 JSX로 선언형이긴 한데 클래스 컴포넌트여서 명령형 프로그래밍으로서비스 로직 작성해야 됨 (이게 뭐지 싶었음 ㅋㅋ) -> 이후 16.8 버전부터 hooks 등장으로 함수 컴포넌트에서도 사이드 이펙트 처리 가능하게 되면서 선언형 프로그래밍 ㅇㅈ해줌, 그리고 훨씬 사용하기 좋아짐