├── .gitignore ├── README.md ├── assets └── logo.svg └── issues ├── 2020-02.md ├── 2020-03.md ├── 2020-04.md ├── 2020-05.md ├── 2020-06.md ├── 2020-07.md ├── 2020-08.md ├── 2020-09.md ├── 2020-10.md ├── 2020-11.md ├── 2020-12.md ├── 2021-01.md ├── 2021-02.md ├── 2021-03.md ├── 2021-04.md ├── 2021-05.md ├── 2021-06.md ├── 2021-07.md ├── 2021-08.md ├── 2021-09.md ├── 2021-10.md ├── 2021-11.md ├── 2021-12.md ├── 2022-01.md ├── 2022-02.md ├── 2022-03.md ├── 2022-04.md ├── 2022-05.md ├── 2022-06.md ├── 2022-07.md ├── 2022-08.md ├── 2022-09.md ├── 2022-10.md ├── 2022-11.md ├── 2022-12.md ├── 2023-01.md ├── 2023-02.md ├── 2023-03.md ├── 2023-04.md ├── 2023-05.md ├── 2023-06.md ├── 2023-07.md ├── 2023-08.md ├── 2023-09.md ├── 2023-10.md ├── 2023-11.md ├── 2023-12.md ├── 2024-01.md ├── 2024-02.md ├── 2024-03.md ├── 2024-04.md ├── 2024-05.md ├── 2024-06.md ├── 2024-07.md ├── 2024-08.md ├── 2024-09.md ├── 2024-10.md ├── 2024-11.md ├── 2024-12.md ├── 2025-01.md ├── 2025-02.md ├── 2025-03.md ├── 2025-04.md └── 2025-05.md /.gitignore: -------------------------------------------------------------------------------- 1 | .* 2 | /.* 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FE News 2 | 3 | 4 | 5 | FE News는 네이버 FE 엔지니어들이 엄선한 양질의 `FE 및 주요한 기술 소식`들을 큐레이션 해 공유하는 것을 목표로 합니다. 6 | 이를 통해 국내 개발자들에게 지식 공유에 대한 가치 인식과 성장에 도움을 주고자 합니다. :grin: 7 | 8 | > [!TIP] 9 | > 네이버 Front-end 조직이 어떤 일을 하고, 개발자들이 어떻게 성장하고 있는지 궁금하신가요?
10 | > 11 | > - [네이버 Front-end 소개](../../tree/fe-org) 12 | 13 | ## 🚩 발행소식 14 | 15 | 발행소식은 [`/issues`](/issues) 폴더 내의 `yyyy-mm.md` 파일을 통해 확인할 수 있습니다. 16 | 17 | ## 📆 발행주기 18 | 19 | 매월 첫째 주 수요일, 월 1회 발행 20 | 21 | ## 🔔 구독방법 22 | 23 | 다음의 방법들을 통해 발행 소식을 구독하실 수 있습니다. 24 | 25 | > [!NOTE] 26 | > 대부분의 커밋은 소식의 발행 또는 오타, 정보 수정에 대한 PR의 머지 수준에서 발생합니다. 27 | 28 | - GitHub 프로젝트 `watch`를 통해 구독하기 29 | - 저장소 상단의 `watch` 버튼을 클릭해 프로젝트를 지켜보는 것으로 구독 30 | - RSS 리더를 통해 구독하기 31 | - RSS 리더를 통해 GitHub 프로젝트 커밋을 구독 32 | - https://github.com/naver/fe-news/commits/master.atom 33 | - 메일로 구독하기 34 | - https://fenews.substack.com/embed 35 | 36 | > [!IMPORTANT] 37 | > Disclaimer 38 | > - 큐레이션은 구독자에게 최대한 도움이 될 것으로 기대되는 측면과 다양성을 고려해 선별됩니다. 39 | > - FE News는 생산된 정보를 "있는 그대로" 매개하며, 정보의 정확성 및 신뢰성은 원칙적으로 정보를 작성한 원 저작자에게 있습니다. 40 | 41 | ## 📬 최신소식 42 | 43 | > 이전 소식들은 '연도'를 클릭하면 보실 수 있습니다. 44 | 45 | ### 2025 46 | - [2025-05](/issues/2025-05.md) 47 | - [2025-04](/issues/2025-04.md) 48 | - [2025-03](/issues/2025-03.md) 49 | - [2025-02](/issues/2025-02.md) 50 | - [2025-01](/issues/2025-01.md) 51 | 52 |
53 | 2024 54 | 55 | - [2024-12](/issues/2024-12.md) 56 | - [2024-11](/issues/2024-11.md) 57 | - [2024-10](/issues/2024-10.md) 58 | - [2024-09](/issues/2024-09.md) 59 | - [2024-08](/issues/2024-08.md) 60 | - [2024-07](/issues/2024-07.md) 61 | - [2024-06](/issues/2024-06.md) 62 | - [2024-05](/issues/2024-05.md) 63 | - [2024-04](/issues/2024-04.md) 64 | - [2024-03](/issues/2024-03.md) 65 | - [2024-02](/issues/2024-02.md) 66 | - [2024-01](/issues/2024-01.md) 67 | 68 |
69 | 70 |
71 | 2023 72 | 73 | - [2023-12](/issues/2023-12.md) 74 | - [2023-11](/issues/2023-11.md) 75 | - [2023-10](/issues/2023-10.md) 76 | - [2023-09](/issues/2023-09.md) 77 | - [2023-08](/issues/2023-08.md) 78 | - [2023-07](/issues/2023-07.md) 79 | - [2023-06](/issues/2023-06.md) 80 | - [2023-05](/issues/2023-05.md) 81 | - [2023-04](/issues/2023-04.md) 82 | - [2023-03](/issues/2023-03.md) 83 | - [2023-02](/issues/2023-02.md) 84 | - [2023-01](/issues/2023-01.md) 85 | 86 |
87 | 88 |
89 | 2022 90 | 91 | - [2022-12](/issues/2022-12.md) 92 | - [2022-11](/issues/2022-11.md) 93 | - [2022-10](/issues/2022-10.md) 94 | - [2022-09](/issues/2022-09.md) 95 | - [2022-08](/issues/2022-08.md) 96 | - [2022-07](/issues/2022-07.md) 97 | - [2022-06](/issues/2022-06.md) 98 | - [2022-05](/issues/2022-05.md) 99 | - [2022-04](/issues/2022-04.md) 100 | - [2022-03](/issues/2022-03.md) 101 | - [2022-02](/issues/2022-02.md) 102 | - [2022-01](/issues/2022-01.md) 103 | 104 |
105 | 106 |
107 | 2021 108 | 109 | - [2021-12](/issues/2021-12.md) 110 | - [2021-11](/issues/2021-11.md) 111 | - [2021-10](/issues/2021-10.md) 112 | - [2021-09](/issues/2021-09.md) 113 | - [2021-08](/issues/2021-08.md) 114 | - [2021-07](/issues/2021-07.md) 115 | - [2021-06](/issues/2021-06.md) 116 | - [2021-05](/issues/2021-05.md) 117 | - [2021-04](/issues/2021-04.md) 118 | - [2021-03](/issues/2021-03.md) 119 | - [2021-02](/issues/2021-02.md) 120 | - [2021-01](/issues/2021-01.md) 121 |
122 |
123 | 2020 124 | 125 | - [2020-12](/issues/2020-12.md) 126 | - [2020-11](/issues/2020-11.md) 127 | - [2020-10](/issues/2020-10.md) 128 | - [2020-09](/issues/2020-09.md) 129 | - [2020-08](/issues/2020-08.md) 130 | - [2020-07](/issues/2020-07.md) 131 | - [2020-06](/issues/2020-06.md) 132 | - [2020-05](/issues/2020-05.md) 133 | - [2020-04](/issues/2020-04.md) 134 | - [2020-03](/issues/2020-03.md) 135 | - [2020-02](/issues/2020-02.md) 136 |
137 | 138 | ----- 139 | 140 | ## 🧑🏻‍💻 Team 141 | 142 | [![Jae Sung Park](https://avatars.githubusercontent.com/u/2178435?s=150&v=4)](https://github.com/netil) | [![DonBum Ham](https://avatars.githubusercontent.com/u/5152681?s=150&v=4)](https://github.com/silveracy) | [![Inkyu Oh](https://avatars.githubusercontent.com/u/13645032?s=150&v=4)](https://github.com/gomjellie) | [![Inseo Hwang](https://avatars.githubusercontent.com/u/24623403?s=150&v=4)](https://github.com/sjsjsj1246) 143 | :---:|:---:|:---:|:---: 144 | [Jae Sung Park](https://github.com/netil) | [DonBum Ham](https://github.com/silveracy) | [Inkyu Oh](https://github.com/gomjellie) | [Inseo Hwang](https://github.com/sjsjsj1246) 145 | 146 | ## 😎 Contributors 147 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /issues/2020-02.md: -------------------------------------------------------------------------------- 1 | # 2020-02 2 | 3 | # 링크 & 읽을꺼리 4 | 5 | ## [Illustraded.dev](https://illustrated.dev/) 6 | FE 기술들에 대한 근본적인 개념을 도식화해 설명해 주며, GraphQL, Babel, React Hooks 등에 대한 주제들이 포함되어 있다. 7 | 8 | 9 | ## [free-for.dev](https://free-for.dev/) 10 | 무료로 사용할 수 있는 다양한 기반 서비스(SaaS, PaaS, IaaS, etc.)들의 방대한 목록들을 제공한다. 11 | > ex) 메이저 클라우드 서비스 제공자들 목록: 12 | > - [AWS 프리 티어](https://aws.amazon.com/free/?awsf.Free%20Tier%20Types=categories%23alwaysfree) 13 | > - [Microsoft Azure](https://azure.microsoft.com/en-us/free/) 14 | > - [Oracle Cloud Free Tier](https://www.oracle.com/cloud/free/) 15 | > - [IBM Cloud free tier](https://www.ibm.com/cloud/free/) 16 | 17 | ## [List of Free Learning Resources](https://ebookfoundation.github.io/free-programming-books/) 18 | 19 | 무료로 제공되는 다양한 프로그래밍 서적, 리소스, 온라인 교육과정들에 대한 방대한 목록을 제공하며, 한글로 작성된 콘텐츠 목록도 다수 포함하고 있다. 20 | 21 | > 한글 컨텐츠는 AWS, Docker, Git, JavaScript, LaTex, Python 등의 주제가 등록되어 있다. 22 | > https://ebookfoundation.github.io/free-programming-books/free-programming-books-ko.html 23 | 24 | ## [WebAssembly Summit](https://webassembly-summit.org/) 25 | 26 | 27 | 지난 2월10일 구글 본사에서 진행된 웹어셈블리 개발자 써밋. 전체 발표 동영상은 아래 링크를 통해 확인할 수 있다. 28 | - 발표 동영상: https://www.youtube.com/watch?v=WZp0sPDvWfw 29 | 30 | ## [Today, the Trident Era Ends](https://schepp.dev/posts/today-the-trident-era-ends/) 31 | IE의 렌더링 엔진 [Trident](https://en.wikipedia.org/wiki/Trident_(software))의 지난 기록을 돌아보는 글로, 과거 IE가 도입했던 몇몇 혁신적인 기술적 내용들을 돌아본다. 32 | 33 | > - 과거 웹사이트들은 IE와 같이 특정 브라우저에서만 동작이 보장되는 경우가 많아, 다음과 같은 아이콘을 사이트에 노출하기도 했었다. 34 | > ![](https://schepp.dev/img/ieget_animated.gif) 35 | > - 관련해서 HackerNews에서 이뤄지고 있는 [다양하고 흥미 있는 의견들](https://news.ycombinator.com/item?id=22146629)도 함께 참고해 보기 바란다. 36 | 37 | ## [Web Almanac 2019](https://almanac.httparchive.org/en/2019/table-of-contents) 38 | 39 | Web Almanac은 [HTTP Archive](https://httparchive.org/)를 통해 수집된 다양한 웹사이트 데이터에 연례 보고서로 전 세계 웹사이트들의 사용 현황(페이지 내의 JS 크기, 이미지 크기 등과 같은)을 살펴볼 수 있다. 40 | 41 | ## [React Native Directory](https://www.native.directory/) 42 | 43 | 큐레이션된 다양한 React Native 라이브러리들의 목록을 제공한다. 44 | 45 | 46 | 47 | # 튜토리얼 48 | 49 | ## [Practical CSS Scroll Snapping](https://css-tricks.com/practical-css-scroll-snapping/) 50 | 51 | 사용자의 스크롤 액션에 따라 뷰포트를 특정 요소 또는 위치에 잠금(lock) 되도록 만들 수 있는 'CSS Scroll Snap'의 다양한 실용적 사용 방법들을 소개한다. 52 | 53 | > CSS Scroll Snap는 CSS 만으로 다음과 같은 캐로셀 인터렉션을 쉽게 구현할 수 있다. 54 | 55 | 56 | 57 | ## [Learning Modern JavaScript with Tetris](https://medium.com/@michael.karen/learning-modern-javascript-with-tetris-92d532bcd057) 58 | 59 | JavaScript로 테트리스를 구현해 가는 과정을 step-by-step 형식으로 설명한다. 60 | 61 | ## [TypeScript Unit Testing with Test Coverage](https://medium.com/swlh/typescript-unit-testing-with-test-coverage-2cc0cc6f3fd1) 62 | TypeScript를 사용한 프로젝트의 테스트 커버리지를 출력을 설정하는 방법을 설명한다. 63 | 64 | ## [CSS Layout](https://csslayout.io/) 65 | 66 | CSS로 작성된 인기 있는 레이아웃과 패턴들의 코드를 제공해, 초기 페이지 레이아웃 구성 시 참고해 빠르게 레이아웃을 구성할 수 있도록 도와준다. 67 | 68 | ## [Tesseract.js | Pure Javascript Multilingual OCR](https://tesseract.projectnaptha.com/) 69 | 인기 있는 OCR 엔진인 [tesseract](https://github.com/tesseract-ocr/tesseract)의 순수 JavaScript 포팅 버전으로 한국어도 지원된다. 70 | 71 | 72 | 73 | # 코드와 도구 74 | 75 | ## [You Don't Need](https://github.com/you-dont-need/You-Dont-Need) 76 | Moment.js, Lodash, Redux, jQuery 등과 같은 도구/라이브러리/패턴들의 사용을 대체할 수 있는 방법(코드 예제)들이 제공된다. 77 | 78 | ex) Underscore/Lodash의 `_.dropRight()`은 다음의 네이티브 코드로 대체할 수 있다. 79 | ```js 80 | _.dropRight([1, 2, 3]); 81 | // => [1, 2] 82 | 83 | _.dropRight([1, 2, 3], 2); 84 | // => [1] 85 | 86 | // Native 87 | [1, 2, 3].slice(0, -1); 88 | // => [1, 2] 89 | 90 | [1, 2, 3].slice(0, -2); 91 | // => [1] 92 | ``` 93 | 94 | ## [Big List of Naughty Strings](https://github.com/minimaxir/big-list-of-naughty-strings/) 95 | 96 | 문제를 일으킬 수 있는 다양한 텍스트 입력값의 모음을 제공해 97 | 입력값 테스트 시 예외적 항목들을 테스트해 볼수 있다. 98 | 99 | > - 텍스트: https://github.com/minimaxir/big-list-of-naughty-strings/blob/master/blns.txt 100 | > - JSON: https://github.com/minimaxir/big-list-of-naughty-strings/blob/master/blns.json 101 | 102 | ex) 예제에 포함된 2 바이트 문자열 테스트 값은 다음과 같다. 103 | ```sh 104 | # Two-Byte Characters 105 | # 106 | # Strings which contain two-byte characters: can cause rendering issues or character-length issues 107 | 108 | 田中さんにあげて下さい 109 | パーティーへ行かないか 110 | 和製漢語 111 | 部落格 112 | 사회과학원 어학연구소 113 | 찦차를 타고 온 펲시맨과 쑛다리 똠방각하 114 | 社會科學院語學研究所 115 | 울란바토르 116 | 𠜎𠜱𠝹𠱓𠱸𠲖𠳏 117 | ``` 118 | 119 | ## [Tiny helpers](https://tiny-helpers.dev/) 120 | 121 | 웹 개발에 사용할 수 있는 다양한 온라인 개발 도구들의 목록을 제공한다. 122 | 123 | ex) 확인할 수 있는 몇가지 도구들은 다음과 같다. 124 | - [0to255](https://www.0to255.com/) 125 | 밝거나 어두운 색상 컬러 코드를 쉽게 고를 수 있게 제공한다. 126 | - [AST explorer](https://astexplorer.net/) 127 | 다양한 파서들로부터 생성된 AST(Abstract Syntax Tree)를 탐색할 수 있게 한다. 128 | 129 | ## [What's new in DevTools (Microsoft Edge 80)](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/whats-new/2019/12/devtools) 130 | 131 | Chromium 기반의 MS Edge 브라우저가 정식 발표된 이후, Edge만의 고유한 기능들이 하나둘씩 추가되고 있으며 132 | MS Edge 80 개발자 도구에 추가된 새로운 업데이트 내용을 통해 몇몇 기능들을 소개하고 있다. 133 | 134 | ex) `3D View` 기능은 페이지의 DOM 또는 z-index stacking context 시각화를 3D로 제공해 디버깅 할수 있도록 한다. 135 | 136 | 137 | ## [Jsonnet - The Data Templating Language](https://jsonnet.org/learning/tutorial.html) 138 | `jsonn` 확장자를 갖는 데이터 템플릿팅 언어로 설정관련 데이터 등을 손쉽게 관리할 수 있게 한다. 결과물은 `.json`, `.ini`, `.sh` 등의 다양한 확장자로 출력할 수 있다. 139 | 140 | ex) 아래의 `.jsonnet` 파일을 통해 141 | ```js 142 | // example.jsonnet 143 | local Person(name='Alice') = { 144 | name: name, 145 | welcome: 'Hello ' + name + '!', 146 | }; 147 | { 148 | person1: Person(), 149 | person2: Person('Bob'), 150 | } 151 | ``` 152 | 다음의 `.json` 파일을 출력한다. 153 | ```js 154 | // output.json 155 | { 156 | "person1": { 157 | "name": "Alice", 158 | "welcome": "Hello Alice!" 159 | }, 160 | "person2": { 161 | "name": "Bob", 162 | "welcome": "Hello Bob!" 163 | } 164 | } 165 | ``` 166 | 167 | ## 온라인 데모 168 | - [Forge Viewer: Get Fragment Properties](https://codepen.io/petrbroz/pen/OJJYGXv)
유명한 3D 설계 프로그램을 개발하는 AutoDesk에서 제공하는 클라우드 기반의 도구인 [Forge](https://forge.autodesk.com/en/docs/viewer/v2/developers_guide/overview/)를 사용해 구현한 뷰어 데모 169 | - [Infinite draggable webgl slider.](https://codepen.io/ReGGae/pen/povjKxV): WebGL로 shader 프로그래밍 해서 캐로셀 전환 효과를 구현한 데모 170 | - [Button Collection](https://codepen.io/alphardex/pen/VwwVLdM): 버튼에 적용할 수 있는 다양한 애니메이션 전환 효과 데모 171 | - [Sweaterize Yo'self](https://codepen.io/cobra_winfrey/pen/BayQeyr): 화상 카메라를 통해 촬영된 실시간 이미지에 니팅 패턴을 적용하는 데모 172 | > 자매작품: [Holiday CSSweater Generator](https://codepen.io/cobra_winfrey/pen/ZEYzMBj) 173 | - [3D carousel](https://codepen.io/hoanghien0410/pen/MMPaqm): 3차원 캐로셀 구현 데모 174 | - [The Cube](https://codepen.io/bsehovac/pen/EMyWVv): [three.js](https://threejs.org/)로 구현한 인터랙티브 큐브 게임 175 | -------------------------------------------------------------------------------- /issues/2020-03.md: -------------------------------------------------------------------------------- 1 | # 2020-03 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [Request - Simplified HTTP client: Deprecated!](https://github.com/request/request#deprecated) 6 | 24K 깃헙 Star와 매주 18M 건의 다운로드, 그리고 무려 48K 개의 패키지들이 의존하고 있는 인기 HTTP 클라이언트 라이브러리인 'Request'가 지난 2월 20일을 기점으로 deprecate 되었다. 7 | 8 | > 지난 10여 년간(2009년 시작) 유지되었던 이 프로젝트의 개발자인 Mikeal Rogers는 지난 몇 년간 빠르게 변화한 JavaScript 생태계의 변화들로 인해 request의 코어 패턴은 시대에 뒤떨어지게 되었고, 생태계를 위한 최선책은 메인터넌스 모드로 전환하는 것이라고 그 이유를 밝혔다. 보다 자세한 내용은 아래 링크를 통해 확인할 수 있다. 9 | > - [Request’s Past, Present and Future](https://github.com/request/request/issues/3142) 10 | 11 | 12 | ## (영상) [dotJS 2019 - Vladimir Agafonkin - Fast by default: algorithmic performance optimization in practice](https://www.youtube.com/watch?v=bwA9i6wjfhw) 13 | 14 | > 병목지점을 찾고 왜 느린지 생각하고 빠르게 만들어라! 15 | 16 | Javascript에서 퍼포먼스를 향상시키는 방법을 다양한 경험과 예제를 통해 설명한다. 17 | 18 | ## [Some Tips for the Web VR Beginners](https://medium.com/naver-fe-platform/some-tips-for-the-web-vr-beginners-ee12002f36bf) 19 | 20 | 21 | > 단돈 5 달러만 있어도 VR 콘텐츠를 즐길 수 있는 세상, Web VR 개발 팁을 공유한다. 22 | 23 | Web VR을 개발하려고 할 때 어떤 것들을 고민해봐야 하는지 여러 가지 브라우저와 기기의 측면에서 이야기한다. 24 | 25 | 26 | 27 | ## [Good bye, Clean Code](https://overreacted.io/goodbye-clean-code/) 28 | 29 | > 클린코드 빌런이 되지는 말자. 클린 코드는 목표가 아니고 단지 프로그램의 복잡성을 줄이고자 하는 시도일 뿐이며, 코드가 어떻게 바뀔지 모르는 상황에서, 피해를 최소한으로 줄이고자 하는 방어 전략 중 하나일 뿐이다. 30 | 31 | 코드가 어떻게 보이는지만 보는 게 아니라 다양한 사람들로부터 어떻게 발전시켜 나갈지가 중요하다는 것을 경험을 토대로 이야기한다. 32 | 33 | ## [A Guide to Console Commands | CSS-Tricks](https://css-tricks.com/a-guide-to-console-commands/) 34 | 35 | > console은 간단히 다루기에는 알아야할 것들이 의외로 많다. 36 | 37 | 우리가 코드를 처음 시작할 때 다뤘던 console의 다양한 활용법, 기능을 자세히 가이드한다. 38 | 39 | 40 | 41 | ## [Bulletproof node.js project architecture 🛡️](https://softwareontheroad.com/ideal-nodejs-project-structure/) 42 | 43 | > Express.js는 node.js로 REST API를 개발할 때 정말 좋은 프레임워크이지만, node.js 프로젝트를 어떻게 구성해야 하는지에 대해 그 누구도 알려주지 않는 건 큰 문제다. 44 | 45 | Express.js 기반의 node 프로젝트를 어떻게 설계/구성해야 하는지 자세하게 설명한다. 한글로 번역된 글([#바로가기](https://velog.io/@hopsprings2/%EA%B2%AC%EA%B3%A0%ED%95%9C-node.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90-%EC%84%A4%EA%B3%84%ED%95%98%EA%B8%B0))도 있다. 46 | 47 | ## [The ultimate guide to proper use of animation in UX](https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9) 48 | 49 | 사용자 경험(UX)을 위해 애니메이션을 사용하는 경우 고려해야 하는 종합적인 가이드를 제공한다. Timing Function에 따라 적합한 애니메이션들은 무엇인지, 인터페이스 애니메이션의 가장 최적화된 속도는 200~500ms 사이(다수의 [리포트](https://valhead.com/2016/05/05/how-fast-should-your-ui-animations-be/)에 근거한)라는 내용들을 소개하며, 각 항목 별로 제공되는 애니메이션 예제를 통해 차이점들을 직접 체감해 볼 수 있다. 50 | 51 | > ex) 속도와 관련해서는 너무 빠르지는 않지만 사용자들의 기다림을 최소화한 속도의 애니메이션 적용의 필요성에 대한 애니메이션 예제 52 | ![](https://miro.medium.com/max/3840/1*SYWUDqw9jPF4Q--MWqisVg.gif) 53 | 54 | ## [Design Better Forms](https://uxdesign.cc/design-better-forms-96fadca0f49c) 55 | 56 | > 인생은 짧고 사용자는 폼에 데이터를 넣기 꺼려 한다. 57 | 58 | 사용자에게 어떻게 폼을 제공해야 효과적이고 완료율이 높은지 설명하는 글. 현재 프로젝트에서 폼을 개발하고 있다면 필독! 59 | 60 | 61 | 62 | ## [7 design psychology fundamentals every designer should know](https://uxdesign.cc/7-design-psychologies-every-designer-should-know-d01a1becd961) 63 | 64 | > 프로덕트를 개발할 때 멘탈모델을 염두해 두면 사용자의 반응을 성공적으로 이끌어 낼 수 있다. 65 | 66 | 인간의 7가지 심리적요소를 UX에 어떻게 녹여야 사용자의 좋은 반응이 나오는지 설명해 준다. 67 | 68 | ## [Why Apple's Notification Bubbles Are so Stressful](https://onezero.medium.com/why-apples-notification-bubbles-are-so-stressful-65a544e51f10) 69 | 70 | > iPhone의 잠금을 해제할 때마다 시뻘건 알림 벳지로 부터 공격을 받는다. 71 | 72 | 나은 UX는 작은 변화로부터 시작된다. 필자가 "인지 과부화"라고까지 일컫는 알림 벳지 스트레스를 어떤 작은 변화로 해결할 수 있는지 이야기한다. 73 | 74 | ## [네이버 지도 vs 카카오맵 사용자 경험 비교 (Mobile)](https://brunch.co.kr/@sijin90/50) / [(PC)](https://brunch.co.kr/@sijin90/49) 75 | 네이버 지도와 카카오맵을 Mobile과 PC 두 플랫폼에서 음성검색, 복사, 즐겨찾기 등 다양한 측면에서 비교한 글. 76 | 두 지도 서비스를 모두 설치하고 상황에 따라 적절히 이용하고 있는 필자의 UX에 대한 깊은 인사이트를 엿볼 수 있다. 77 | 78 | 79 | # 코드와 도구 80 | 81 | ## [The Top ~~50~~ 100+ Developer Tools 2019](https://stackshare.io/posts/top-developer-tools-2019) 82 | 2019년 한 해동안 StackShare 커뮤니티에서 공유된 4백만 개 이상의 데이터를 분석했고, 프런트/백엔드부터 디자인 툴 그리고 협업 툴까지 18가지의 범주로 분류해서 순위화했다. 83 | 84 | 다양한 측면에서 비교를 통해 의미 있는 선택을 할 수 있게 도와주는 참고 자료가 될 것이다. 85 | 86 | stackshare에서는 UBER, Airbnb, Shopify 등 기업들이 사용하는 기술 스택을 확인할 수 있다. [링크](https://stackshare.io/stacks)에서 내가 사용하는 기술 스택과 다른 기업들이 사용하는 기술 스택을 비교하는 것도 쏠쏠한 재미가 되지 않을까? 87 | 88 | 89 | 90 | ## [30 seconds of code](https://www.30secondsofcode.org/) 91 | 2018년 깃헙 Top 프로젝트로 선정되기도 했던 이 프로젝트는 코드 작성 시 맞닥뜨릴 수 있는 문제들의 해결을 위한 다양하고 짤막한 코드 스니펫 모음들을 제공한다. JavaScript 외에도 CSS, React, Python 등 총 7가지 개발 환경 및 언어들의 분류로 제공된다. 92 | 93 | ```js 94 | // ex) 배열 내에 존재하는 교차 값을 구하는 스니펫 95 | const intersectionBy = (a, b, fn) => { 96 | const s = new Set(b.map(fn)); 97 | return [...new Set(a)].filter(x => s.has(fn(x))); 98 | }; 99 | 100 | intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [2.1] 101 | ``` 102 | 103 | > 추가로 [2018년 Top 깃헙 프로젝트](https://github.blog/2018-12-13-new-open-source-projects/#top-projects-of-2018)로 선정되었던 다음 프로젝트도 유용하게 참고할만하다. 104 | > - [33-js-concepts](https://github.com/leonardomso/33-js-concepts) 105 | > JavaScript 개발자들이 알아두면 좋을 주요한 33가지 개념들에 대한 설명글과 동영상들의 방대한 목록을 제공한다. 이들 개념들 중에는 Call Stack, Expression(표현식) vs Statement(문장)의 차이 등을 살펴볼 수 있다. 106 | 107 | ## [Google Lighthouse: Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/) 108 | 109 | Chrome 브라우저의 기본 성능 측정 도구인 Lighthouse를 이제 Firefox에서도 사용할 수 있다. 110 | 111 | ## [fullcalendar/fullcalendar](https://github.com/fullcalendar/fullcalendar) 112 | 113 | 이벤트 drag & drop이 가능한 full-sized 달력이다. 114 | 115 | ## [myliang/x-spreadsheet](https://github.com/myliang/x-spreadsheet) 116 | 117 | 웹 엑셀. 엑셀 function 도 사용 가능하다. 118 | -------------------------------------------------------------------------------- /issues/2020-05.md: -------------------------------------------------------------------------------- 1 | # 2020-05 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [10 New JavaScript Features in ES2020 That You Should Know](https://www.freecodecamp.org/news/javascript-new-features-es2020/) 6 | 7 | 8 | 9 | 올해 TC39 committee가 승인한 새로운 ES2020 기능들을 간단한 예제와 함께 살펴볼 수 있는 글이다. Dynamic Import, Optional Chaining, Nullish Coalescing 등 웹 개발을 더 편리하게 만들어주는 기능들이 추가되었다. 10 | 11 | ## [Best practices for good PR's](https://www.kenneth-truyers.net/2018/11/01/best-practices-good-pr/) 12 | 13 | 14 | 15 | 팀 단위로 협업을 하다 보면, 우리는 서로 PR을 올리고 리뷰를 하게 된다. PR을 단편적인 업무 공유와 단순 버그 수정 용도가 아닌, 코드 품질을 높이고 모두가 성장할 수 있는 과정으로 만들려면 리뷰어도 작성자도 노력을 기울여야 한다. 이 글에서는 어떻게 좋은 PR을 작성할 수 있는지, 그리고 또 어떻게 좋은 리뷰를 작성할 수 있는지에 대한 기본적인 가이드라인을 제시하고 있다. 16 | 17 | ## [How video streaming works on the web: An introduction](https://medium.com/canal-tech/how-video-streaming-works-on-the-web-an-introduction-7919739f7e1) 18 | 19 | 20 | 21 | Youtube와 Netflix를 필두로 한 동영상 재생 서비스 시장은 계속해서 커져나가고 있다. 웹에서의 동영상 재생 기술이 어떻게 변화되어 왔고, 현재에 이르러서는 어떤 기술을 쓰는지 확인할 수 있는 내용을 담고 있다. 22 | 23 | ## [What’s new in TypeScript 3.8](https://blog.logrocket.com/whats-new-in-typescript-3-8/) 24 | 25 | 26 | 27 | 새롭게 릴리즈된 타입스크립트 3.8에서는 새롭게 추가된 ES2020의 문법들을 지원하고 있다. 이뿐만 아니라 `asynqc`에 묶이지 않고 최상위 단에서 쓸 수 있는 Top-level Await 기능도 새로이 추가되었다. 28 | 29 | ## [웹 기술로 구현하는 Adaptive HTTP Streaming](https://meetup.toast.com/posts/131) 30 | 31 | 32 | 33 | 이제 웹에서의 비디오 재생은 완전한 파일을 내려받은 PD(Progressive Downloand) 방식에서 벗어나 실시간으로 사용자가 영상을 송출하고 시청하는 라이브 스트리밍에 기술의 초점이 맞춰지고 있다. 사람들은 영상을 와이파이로 보기도 하고, 고속 인터넷 선이 연결된 컴퓨터로 보기도 한다. 다들 저마다의 네트워크 속도가 다르기 때문에 원활한 영상 시청을 위해선 적절한 해상도의 영상을 내려받아야 한다. 이 글은 어떻게 네트워크 속도에 따른 원활한 영상 시청 경험을 사용자에게 제공하는지 설명하고 있다. 평소 모바일 라이브로 스포츠 경기를 보거나 Twitch 같은 스트리밍 서비스를 이용하는 사람들에겐 재밌는 글이 될 것이다. 34 | 35 | ## [Svelte Society Day 2020](https://sveltesociety.dev/) 36 | 37 | > - [전체 동영상 발표보기](https://www.youtube.com/watch?v=0rnG-OlzGSs) 38 | > - [발표 리소스 자료](https://gist.github.com/sw-yx/ace62a7f6b880a3c87660ac6e663bd9a) (슬라이드, 코드 저장소 등) 39 | 40 | 41 | 42 | 4/26일 진행된 Svelte 온라인 밋업으로, Svelte 개발자인 Rich Harris를 포함해 총 10여 개의 주제로 한 발표를 볼 수 있다. 43 | 44 | ## [Women of React](https://womenofreact.com/) 45 | 46 | > - [동영상 발표보기](https://www.youtube.com/watch?v=K8MF3aDg-bM) 47 | > - [컨퍼런스 요약](https://dev.to/ashc0des/women-of-react-2020-recap-51jf) 48 | 49 | 50 | 51 | 4/25일 진행된 React 여성 개발자들이 주축으로 진행한 온라인 컨퍼런스로 총 11개의 세션으로 구성되어 있으며, 다양한 React tip부터, 테스팅, React 기술 인터뷰 준비 그리고 주요 여성 개발자들 간의 Q&A와 토론 등의 알찬 내용으로 꾸며져 있다. 52 | 53 | # 튜토리얼 54 | 55 | ## [Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver](https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api/) 56 | 57 | 58 | 59 | 사용자가 현재 보고 있는 화면 영역을 파악하는 것은 이미지 레이지 로딩을 통한 성능 개선은 물론 무한 스크롤이나 PIP(Picture in Picture) 같은 UX 개발에도 큰 도움을 줄 수 있다. 이 글에서는 [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)가 무엇인지 자세히 설명하고, 이를 어떻게 적용하고 활용할 수 있는지에 대한 샘플 코드를 담고 있다. 60 | 61 | ## [How Smashtest is changing the way you write selenium tests](https://www.lambdatest.com/blog/how-smashtest-is-changing-the-way-you-write-selenium-tests/) 62 | 63 | 64 | 이 글은 셀레니움 기반으로 동작하는 크로스 브라우징 e2e 테스트 프레임워크, SmashTest를 소개하고 있다. 모든 브라우저에서 테스트 케이스를 돌릴 수 있으며, 각 코드가 실행될 때마다 UI가 어떻게 변하는지 스크린샷으로 확인할 수도 있다. 65 | 66 | # 코드와 도구 67 | 68 | ## [Visual Studio Code Live Share](https://www.digitalocean.com/community/tutorials/how-to-use-live-share-with-visual-studio-code) 69 | 70 | 71 | 72 | 개발자들이 구조 설계 회의를 거칠 때 손과 그림만으로 설명하는 것은 때로 부족할 수 있다. VS코드의 Live Share 익스텐션을 사용하면, 하나의 화면에서 모든 사람들이 동시에 코드를 편집하며 의견을 주고받을 수 있다. 코드를 편집하면 그 사람의 이름이 화면에 뜨며, 실시간으로 동일한 파일의 코드를 수정할 수 있다. 요즘처럼 재택근무가 빈번히 이루어지는 시국에 더할 나위 없이 유용한 익스텐션이 아닐 수 없다. 73 | 74 | ## [Eruda](https://github.com/liriliri/eruda) 75 | 76 | 77 | 78 | 모바일 브라우저에서 사용 가능한 개발자 콘솔 도구다. 79 | 디버깅 대상 페이지에 스크립트를 로딩한 후, 초기화하는 것으로 간단하게 개발 도구를 활용할 수 있다. 80 | 81 | ## [Live Server](https://github.com/ritwickdey/vscode-live-server) 82 | 83 | 한 번의 클릭으로 실행되는 VS Code 플러그인 웹서버. Live reload가 기본적으로 지원되며, 개발 작업을 웹서버에서 확인이 필요한 경우 요긴하게 사용할 수 있다. 84 | 85 | 플러그인 설치 후, VS Code 우측 하단 상태 바에 추가되는 `Go Live` 버튼을 클릭하는 것으로 서버를 즉시 시작하고 종료할 수 있다. 86 | 87 | ![](https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-animated-demo.gif) 88 | 89 | ## [새로운 마크다운 파서가 필요한 이유: Toast UI Editor](https://ui.toast.com/weekly-pick/ko_20200320/) 90 | 91 | 92 | 93 | UI Editor를 만들면서 맞이한 문제점을 기술하고, 그 문제를 해결하는 방법을 설명한 글이다. 94 | Tree-Sitter, LSP와 같이 IDE에서 도입한 솔루션을 검토하고 이를 바탕으로 새로운 마크다운 파서를 개발한 내용인데, 에디터 만드는 사람에게는 꽤나 도전적이고 재미있는 글로 다가올 것이다. -------------------------------------------------------------------------------- /issues/2020-06.md: -------------------------------------------------------------------------------- 1 | # 2020-06 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [Recoil: State Management library for React](https://recoiljs.org/) 6 | 7 | 지난 5월 14일 온라인으로 열린 ReactEurope 콘퍼런스에서 페이스북은 새로운 상태 관리자 라이브러리인 Recoil을 공개했다. 8 | 9 | 10 | 11 | > 발표영상: [Recoil: State Management for Today's React](https://www.youtube.com/watch?v=_ISAA_Jt9kI) 12 | 13 | Recoil은 기존 상태 관리자들만으로 해결하기 어려웠던 다음의 문제들을 해결하기 위해 개발되었다고 그 이유를 밝히고 있다. 14 | 15 | - Flexible shared state 16 | - Derived data and queries 17 | - App-wide state observation 18 | 19 | > 다음의 Egghead에서 제공되는 총 6분 내외의 짧은 온라인 튜토리얼을 통해 기본적인 Recoil의 사용방법을 빠르게 배울 수 있다. 20 | > - [Up and running with Recoil - a new state management library for React](https://egghead.io/playlists/up-and-running-with-recoil-a-new-state-management-library-for-react-78b8) 21 | 22 | ## [Implementing Dark Mode In React Apps Using styled-components](https://www.smashingmagazine.com/2020/04/dark-mode-react-apps-styled-components/) 23 | 24 | 25 | 26 | 많은 웹사이트가 다크 모드를 지원하는 추세다. 27 | 다크 모드는 사용자의 눈의 피로를 줄여줄 뿐만 아니라 사용자 디바이스의 전력 소모를 줄이는 데에도 도움을 줄 수 있다. 28 | 이 글에서는 CSS-in-JS 라이브러리 중 하나인 styled-components를 이용하여 간단하게 React 환경에서 Dark Mode를 구현하는 방법을 설명한다. 29 | 30 | ## [자바스크립트 개발자를 위한 AST(번역)](https://gyujincho.github.io/2018-06-19/AST-for-JS-devlopers) 31 | 32 | 33 | 34 | AST(Abstract Syntax Tree)가 무엇인지, 또, 자바스크립트 코드가 어떻게 AST로 변환이 되는지 설명하는 글이다. 35 | AST가 어떻게 활용될 수 있는지 Babel, Prettier 등을 간단하게 예로 들어 보여준다. 36 | 37 | ## [Become a better godfather for your React components](https://mariosfakiolas.com/blog/become-a-better-godfather-for-your-react-components/) 38 | 39 | 40 | 41 | React Component를 디버깅하다 보면 한 번쯤은 React Developer Tools에서 Anonymous Component를 마주한 적이 있을 것이다. 이는 React 디버깅 시 작지 않은 방해 요소다. 이 글에서는 어떻게 하면 Anonymous Component를 피할 수 있는지 간단한 예시와 함께 설명한다. 42 | 43 | ## [자바스크립트에서 AbortController 를 활용하여 비동기 작업 중단하기](https://genie-youn.github.io/journal/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C_AbortController%EB%A5%BC_%ED%99%9C%EC%9A%A9%ED%95%98%EC%97%AC_%EB%B9%84%EB%8F%99%EA%B8%B0_%EC%9E%91%EC%97%85_%EC%A4%91%EB%8B%A8%ED%95%98%EA%B8%B0.html) 44 | 45 | 46 | 47 | 자바스크립트에서 비동기 작업을 도중에 중단하기란 보통 어려운 일이 아니다. 이 글에서는 브라우저의 AbortController API를 이용하여 자바스크립트 비동기 작업을 도중에 중단하는 방법에 대해 예제 코드와 함께 설명한다. 48 | 49 | ## [What's New in Lighthouse 6.0](https://web.dev/lighthouse-whats-new-6.0/) 50 | 51 | 52 | 53 | Chrome DevTools의 웹 사이트 진단 도구인 Lighthouse가 6.0 버전을 릴리스하였다. Chrome 84 버전부터 탑재 된다고 한다. 이 글에서는 6.0 버전에서 어떤 것들이 바뀌었는지 설명한다. 54 | 55 | ## [Text fields & Forms design — UI components series](https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0) 56 | 57 | 58 | 59 | FE 개발자들이 빈번하게 개발하는 form. 우리는 그동안 익숙함에 늘 관성적으로 form을 개발하고 있지는 않았는가? 60 | 61 | 이 글에서는 form에서 각종 요소들이 어떻게 정렬되는지, 어떻게 위치하고 있는지 등에 따라 장단점을 알려준다. 또한 더 나은 사용자 경험을 위한 form을 만들기 위해 어떤 방법들이 있는지 좋은 사례와 나쁜 사례를 비교하며 자세하게 설명해 준다. 62 | 63 | FE-news를 통해 지난 3월에 공유한 [Design Better Forms](https://github.com/naver/fe-news/blob/master/issues/2020-03.md#design-better-forms)를 함께 읽어보면 사용자가 이용하기 편리한 form을 만드는데 큰 도움이 될 것이다. 64 | 65 | ## [web.dev - LIVE](https://web.dev/live/) 66 | 67 | 68 | 69 | 구글 웹 플랫폼 팀에서 3일(6/30 ~ 7/2) 동안 온라인 이벤트를 진행할 예정이다. 70 | 71 | 빌드 도구부터 CSS, 이미지 압축, 크롬 개발자 도구를 활용한 문제점 발견과 해결 방법, PWA를 안드로이드 앱으로 배포하기 등등 웹 개발에 유익한 다양한 모던 웹 기술과 테크닉 세션들이 예정되어 있다. 72 | 73 | ## [Standard IO Under the Hood](https://keleshev.com/standard-io-under-the-hood) 74 | 75 | 우리가 `console.log()`를 사용할 때 실제로는 어떤 과정을 거쳐 호출이 실행될까? 76 | 77 | C++로 작성된 JavaScript 런타임 V8의 코드를 통해 전체 실행 과정에 대한 설명을 확인할 수 있다. C++에 대한 경험이 없다면 이해하기 어려울 수도 있지만, 우리가 매일 작성하는 JavaScript 코드가 어떻게 실행되는가에 대한 호기심을 충족시켜 줄 수 있다. 78 | 79 | ## [Why is immutability so important (or needed) in JavaScript?](https://stackoverflow.com/questions/34385243/why-is-immutability-so-important-or-needed-in-javascript/43318963#43318963) 80 | 81 | 불변성(Immutability)은 JavaScript에서 필수적이라기보다는 패션 트렌드에 가깝고, React를 사용하는 경우 상태 관리에서 일부 [혼란스러운 설계](https://github.com/facebook/react/issues/11527)에 대한 깔끔한 해결 방법을 제공할 수 있지만 대부분의 다른 상황에서는 도입에 따른 복잡성이 충분한 가치를 더해주지 못한다는 의견을 밝히고 있다. 82 | 83 | # 튜토리얼 84 | 85 | ## A Visual Guide To React Mental Models 86 | > [Part 1](https://obedparla.com/code/a-visual-guide-to-react-mental-models/), [Part 2](https://obedparla.com/code/a-visual-guide-to-react-mental-models-part-2-use-state-use-effect-and-lifecycles/) 87 | 88 | 89 | 90 | React의 각 특징적 요소들과 동작 방식을 시각적 이미지로 설명한 ‘React Mental Model’ 가이드다. 91 | 92 | > Mental Model 이란 우리가 ‘인터넷’을 머릿속으로 떠올렸을 때 그 거대한 네트워크가 어떻게 동작하는지 아주 세세히 알지 못하지만 대략적 동작 방식을 이해하고 관련된 문제를 해결, 개선할 수 있는 사고 과정이라 할 수 있다. 93 | 94 | 가이드는 React의 기본적 개념과 동작 방식 등을 빠르고 쉽게 훑어볼 수 있도록 시각적 이미지를 활용해, React를 처음 접하는 이들과 전체 흐름을 이해하고자 하는 이들에게 큰 도움을 준다. 95 | 96 | ## [Deno Handbook](https://flaviocopes.com/deno/) 97 | 98 | 99 | 100 | 지난 5월 14일 1.0 버전이 릴리스된 새로운 TypeScript 런타임 Deno에 대한 핸드북을 제공한다. 간결한 소개와 함께 Node.js와의 비교를 통한 차이점, 예제 코드를 통한 사용방법 등을 확인할 수 있다. 101 | 102 | ## [Deconstructing React || Tejas Kumar](https://www.youtube.com/watch?v=f2mMOiCSj5c) 103 | 104 | React API들을 Vanilla JS를 이용해 간단하게 만들어 보며 이해하기 쉽게 설명한다. Virtual DOM(render), Hooks, Suspense에 대해 다룬다. 105 | 106 | # 코드와 도구 107 | 108 | ## [Responsively](https://manojvivek.github.io/responsively-app/) 109 | 110 | 반응형 사이트 개발 시, 다양한 크기의 디바이스에서 렌더링 되는 화면을 한 번에 보고 개발할 수 있도록 도와주는 도구로 Electron으로 개발되었다. 111 | 112 | ## [Appy Dev](https://appy-dev.netlify.app/) 113 | 114 | 수년간의 큐레이션을 통해 수집된 다양한 웹 개발 도구, 유틸리티, 리소스 들의 링크 디렉터리를 제공하며, 리스트에서 확인할 수 있는 몇몇 도구들은 다음과 같다. 115 | 116 | - [Keyframes](https://keyframes.app/): CSS 애니메이션과 shadow 등의 개발을 도와주는 시각적 도구 117 | - [Picular](https://picular.co/): 사용자 입력 키워드를 구글 이미지 검색으로 검색한 결괏값 이미지들에서 사용된 주요 색상 값들을 추출해 제공하는 도구 118 | - [HEAD](https://htmlhead.dev/): HTML5 `` 요소에 대한 사용 가이드 119 | 120 | ## [pico](https://github.com/nikersify/pico) 121 | 122 | 123 | 124 | client side에서 스크린숏을 찍는 라이브러리이다. viewport에 맞춰 cross origin image, web fonts 등 headless browser를 이용해서는 얻을 수 없는 정보들을 포함하여 보다 정확하게 스크린숏 찍는 것을 목표로 한다고 한다. 125 | 126 | ## [motion](https://github.com/framer/motion) 127 | 128 | 129 | 130 | React에서 단지 props로 객체를 전달하는 것으로, animation과 gesture를 쉽게 사용할 수 있도록 도와주는 라이브러리이다. 131 | 132 | ## [react-error-boundary](https://github.com/bvaughn/react-error-boundary) 133 | 134 | React 개발을 하다 보면 간혹 DOM과 sync가 안 맞는 등의 이유로 렌더링 중 에러를 뱉으며 흰 화면이 나타나는 경우를 겪을 수 있다. 135 | 이런 예외적인 상황을 대처하기 위해 React v16에서 ErrorBoundary API가 소개되었는데, 136 | 이 라이브러리를 이용하면 ErrorBoundary를 좀 더 쉽게 사용할 수 있다. 137 | -------------------------------------------------------------------------------- /issues/2020-07.md: -------------------------------------------------------------------------------- 1 | # 2020-07 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [Off The Main Thread](https://css-tricks.com/off-the-main-thread/) 6 | 7 | 8 | 9 | JavaScript는 "단일 스레드"로 실행되며, 이는 곧 한 개의 콜 스택(call stack)과 한 개의 메모리 힙(memory heap)이 존재함을 의미한다. 10 | 11 | 모든 작업이 메인 스레드에서 실행된다는 것은 마치 도시로 향하는 단 하나의 길을 통해 모든 차량들이 그곳으로 가기 위해 길 위에서 기다리고 있는 모습으로 비유될 수 있다. 이러한 병목현상 문제를 해결하는 방법은 무엇일까? 12 | 13 | 바로 모든 작업을 메인 스레드에서 실행하지 않는 것이다. UI 관련 작업이 아니라면, 네이티브 표준 API인 "Web Workers"를 사용해 메인 스레드 밖에서 JavaScript를 실행하고, 가능한 한 모든 상황에서 이를 적용하는 것에 대한 필요성을 언급하는 내용의 글이다. 14 | 15 | ## JavaScript Visualized 16 | 17 | 18 | 19 | 다음의 7개 주제로 구분된 이 시리즈는 시각적 이미지와 애니메이션을 사용해 JavaScript의 언어적 특성과 함께 핵심적인 개념들을 쉽게 이해할 수 있도록 도와준다. 20 | 21 | - [Event Loop](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif) 22 | - [Hoisting](https://dev.to/lydiahallie/javascript-visualized-hoisting-478h) 23 | - [Scope (Chain)](https://dev.to/lydiahallie/javascript-visualized-scope-chain-13pd) 24 | - [JavaScript 엔진](https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf) 25 | - [Prototypal Inheritance](https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co) 26 | - [Generators and Iterators](https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36) 27 | - [Promises & Async/Await](https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke) 28 | 29 | ## [어서와, SSR은 처음이지? - 도입 편](https://d2.naver.com/helloworld/7804182) (1/3 진행 중) 30 | 31 | 네이버 블로그 서비스에 Node.js 기반의 SSR을 도입한 경험기를 소개하는 첫번째 글이다. 32 | 33 | 이 글은 총 3편 중 첫번째 "도입 편"으로 Node.js 기반의 SSR을 블로그 서비스에 도입한 이유와 배경에 관한 글이다. 34 | 35 | angular.js를 선택하고, Full Stack Developer를 지향했던 개발팀이 왜? React를 선택하고, FE 전문 인력을 육성하게 되었는지를 설명하고 있다. 36 | 37 | 이후 다룰 "개발편", "운영편"에서는 대한민국 국민들이 모두 사용하는 블로그의 트래픽을 준비한 경험과 운영했던 내용을 다룰 예정이라 다음 편이 더 기대되는 글이다. 38 | 39 | ## [Profiling React.js Performance](https://addyosmani.com/blog/profiling-react-js/) 40 | 41 | 리액트의 Profiler API와 Interaction Tracing API, 그리고 브라우저의 User Timing API을 이용하여 영화 앱의 랜더링 속도와 인터랙션 속도를 어떻게 측정할 수 있는지 설명하고 있다. 42 | 43 | 이 글에서 다루는 API를 이용하면 훌륭한 클라이언트 랜더링 모니터링 툴도 충분히 구축 할 수 있다. 44 | 45 | [React Production Performance Monitoring](https://kentcdodds.com/blog/react-production-performance-monitoring) 에서는 이를 이용한 Performance Monitoring 툴 구축 아이디어를 언급하고 있다. 46 | 47 | ## [CSS 애니메이션의 성능 아는 만큼 좋아져요!](https://wit.nts-corp.com/2020/06/05/6134) 48 | 49 | Chrome DevTools을 통해 애니메이션시 적용하는 CSS 속성에 따라 애니메이션이 어떻게 성능 차이가 나는지를 예제를 통해 보여주는 글이다. 50 | 51 | 이 글을 통해 간접적으로나마 Chrome DevTools에서 성능을 측정하교 비교하는 방법을 배울 수 있다. 52 | 53 | # 튜토리얼 54 | 55 | ## 리액트 훅 MVVM 시리즈 글 (진행 중) 56 | 57 | - [리액트 훅 MVVM #1](https://www.bsidesoft.com/8267) 58 | - [리액트 훅 MVVM #2](https://www.bsidesoft.com/8280) 59 | - [리액트 훅 MVVM #3](https://www.bsidesoft.com/8289) 60 | - [리액트 훅 MVVM #4](https://www.bsidesoft.com/8304) 61 | 62 | 일반적인 리액트 훅을 이용한 개발 튜토리얼이기보다는 리액트의 모델-렌더 시스템을 이해하고 이를 이용하여 MVVM 모델로 구축해보는 튜토리얼 성격의 글이다. 63 | 64 | - 1부에서는 리액트의 모델-렌더 시스템과 증분 랜더링 소개를 시작으로 리액트 훅의 개념을 설명하고 있다. 65 | - 2부에서는 MVVM 모델의 바인더를 리액트 state를 통해 구현하고 커맨드의 구조를 만들어 가는 것을 설명하고 있다. 66 | - 3 ~ 4 부에서는 todo 앱을 만들어 보면서 리액트 훅의 미묘한 차이점을 살펴본다. 67 | 68 | 69 | 70 | 재미있는 점은 이 글에서는 리액트 함수형 컴포넌트와 훅 사용으로 인해 발생하는 미묘한 차이를 저자의 독특한 시각과 방법으로 해결하고 있다. 71 | 리액트를 이용하여 MVVM을 구현하는 것보다 이 튜토리얼을 통해 리액트를 더 잘 이해할 수 있는 계기가 되면 좋겠다. 72 | 73 | 이 글 외에 리액트 훅에 대한 자세한 내용을 알고 싶다면 다음 글을 참조해 보길 바란다. 74 | 75 | - A Complete Guide to useEffect [[한국어]](https://overreacted.io/ko/a-complete-guide-to-useeffect/) [[영어](https://overreacted.io/a-complete-guide-to-useeffect/)] 76 | - [33 line React](https://leontrolski.github.io/33-line-react.html) 77 | 78 | ## API 공통화 관련 글 79 | 80 | - 리액트 앱에서의 중앙 집중식 API 에러 핸들링 [[한국어](https://ui.toast.com/weekly-pick/ko_20200623/)] [[영어](https://itnext.io/centralizing-api-error-handling-in-react-apps-810b2be1d39d?gi=9de019662e0c)] 81 | - [useFetch — A Custom React Hook](https://medium.com/swlh/usefetch-a-custom-react-hook-36d5f5819d8) 82 | 83 | 첫번째 글은 "API 오류를 어떻게 중앙에서 관리하는가?"에 대한 문제를 중심으로 풀어가는 글이라면 두번째 글은 "React Custom Hook을 어떻게 만드는가?"에 대한 글이다. 84 | 두 글의 목적이 다르지만 API를 공통화해가는 과정은 두 글 모두 인상 깊다. 85 | 86 | # 코드와 도구 87 | 88 | ## [127 Useful JavaScript Snippets You can understand in 30 seconds](https://morioh.com/p/a76bc7d72226) 89 | 90 | 127 개의 유용한 JavaScript 코드 조각 모음. 91 | 127 개라 긴 글일거라 생각하겠지만. 쉽게 이해 할 수 있는 요긴하고 간단한 코드 조각들이다. 92 | 93 | ## [One Div iPad Pro](https://codepen.io/anniebombanie/pen/pojmNzN?__cf_chl_jschl_tk__=71de61593b16a5028cd8b9ae58a10111bf587d1c-1591055028-0-ATDH36t3q8LbU3cZgW28qQcbIcWRru4XfaWNQchgM8IcwSMs8kGFf9aC-pj8_NLur2_KvBf4a9la1eojybUQRq09ItOPayABj0M6cAXpABEXrjyY3vvhROMPWLlf_dw1Bg8fNMqEVAkf-OA3auDTTPuv8JZ_nQhkNlGjKDP5hkxplNPMxn5enH7TmVLNatpPCSBbwdAqZQNiDO0R2LqA_s-OlN9bdlIMKJ4wTvpBzChZF5dSh) 94 | 95 | CSS만으로 그린 iPad Pro 예제 코드 96 | 97 | ## [audiomass.co](https://audiomass.co/) 98 | 99 | 서버 기술 없이 브라우저 웹 기술만으로 음성을 편집할 수 있는 웹 음성 편집기. 100 | Web Audio API와 WebAssembly를 이용하여 오디오 효과 적용과 편집을 구현하고 있다. 101 | 102 | 103 | 104 | ## [우아한테크코스 코드 리뷰 모음 블로그](https://woowacourse.github.io/javable/) 105 | 106 | 우아한 형제들의 "우아한테크코스" 코드리뷰 내용을 정리하여 공개한 사이트. 107 | FrontEnd와 직접 적인 관련은 없지만 코드를 바라보는 개발자로서 참고하면 좋은 이야기들로 가득하다. 108 | 109 | ## [Draw.io VS Code Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) 110 | 111 | 다이어그램을 그리고 쉽게 공유할 수 있는 도구인 draw.io의 VS Code Extension. 112 | 개발과 함께 설계도 이제 VS Code 내에서 자유롭게 사용할 수 있다. 113 | 114 | 115 | -------------------------------------------------------------------------------- /issues/2020-09.md: -------------------------------------------------------------------------------- 1 | # 2020-09 2 | 3 | 4 | # 링크 & 읽을거리 5 | 6 | ## [JavaScript 번들러로 본 조선시대 붕당의 이해](https://wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html) 7 | 8 | 9 | 10 | Javascript의 모듈시스템과 번들러는 종류도 많고 방식도 달라서 처음 진입하는데 어려움이 있다. 11 | 12 | 이 글에서는 여려운 내용을 쉽게 전달하기 위해 "조선시대 붕당의 이해"라는 짤에 유머러스하게 비유해 제시하고, 시간의 흐름에 따라 설명하고 있다. 13 | 14 | 복잡하고 어려운 Javascript의 모듈시스템과 번들러의 이해를 도와줄 글이다. 15 | 16 | ## [The cost of parsing JSON](https://v8.dev/blog/cost-of-javascript-2019#json) 17 | 18 | 아래의 JS 객체 리터럴과 `JSON.parse()`를 통한 문자열 파싱 방식들 중, 어떤 것이 성능적으로 더 빠를까? 19 | 20 | ```js 21 | const data = { foo: 42, bar: 1337 }; 22 | const data = JSON.parse('{"foo":42,"bar":1337}'); 23 | ``` 24 | `JSON.parse()`는 파싱, 컴파일 그리고 실행 모든 단계에 있어, 대다수의 JS 엔진에서 객체 리터럴 대비 약 1.7배 이상 더 빠르게 처리된다. 25 | 26 | > JSON의 빠른 파싱을 위해 SIMD(Single Instruction Multiple Data)를 사용해 GB 단위의 데이터를 초당 처리할 수 있는 [simdjson](https://github.com/simdjson/simdjson) 프로젝트도 흥미로워 보이며, 다양한 바인딩(Node.js 바인딩은 [simdjson_nodejs](https://github.com/luizperes/simdjson_nodejs))과 포트들이 제공된다. 27 | > 28 | > 암호화폐 호가 JSON 데이터를 simdjson보다 더 빠르게 파싱하는 C++ 코드를 작성한 경험을 다룬 "[세계에서 제일 빠른 JSON 파서 만들기](https://tanstaafl.dev/20200821-worlds-fastest-json-parser.html)" 글도 재밌게 읽어볼 수 있다. 29 | 30 | 31 | 32 | > 다음의 벤치마크와 적용 사례 등도 같이 참고해 보기 바란다. 33 | > - [JSON.parse benchmark](https://github.com/GoogleChromeLabs/json-parse-benchmark) 34 | > - [Improving Redux state transfer performance with JSON.parse(), a quick case study](https://joreteg.com/blog/improving-redux-state-transfer-performance) 35 | 36 | ## [What’s New in TypeScript 4](https://medium.com/better-programming/whats-new-in-typescript-4-fe8d50f08e31) 37 | 38 | 39 | 40 | typescript 4.0 버전이 발표되었다. 41 | 42 | 이번 버전에서는 튜플 타입에 라벨링을 할 수 있고 스프레드 오퍼레이터를 제네렉 타입에도 쓸 수 있게되었다. 자세한 내용은 글에서 확인할 수 있다. 43 | 44 | 또한 [공식블로그](https://devblogs.microsoft.com/typescript/announcing-typescript-4-0/)에서는 보다 더 상세한 내용을 참고할 수 있다. 45 | 46 | ## [React v17.0 Release Candidate: No New Features](https://reactjs.org/blog/2020/08/10/react-v17-rc.html) 47 | 48 | React major 버전이 곧 올라간다. 곧바로 추가되는 새로운 기능은 없고, 사용자들이 큰 무리없이 업그레이드를 가능하게끔 하는 것을 중점으로 두었다. 이 외에 document에서 root노드로 이벤트 위임변경 등 여러가지 개선한 내용을 담고 있다. 49 | 50 | ## [What Actually is a String in JavaScript?](https://dmitripavlutin.com/what-is-string-in-javascript/) 51 | 52 | 53 | 54 | 다음 출력값은 무엇일까? 55 | ```js 56 | console.log("🥶".length); 57 | console.log([..."🥶"].length); 58 | ``` 59 | 한 이모지이므로 차례로 `1`, `1`이라고 생각할 수 있겠지만 결과는 `2`, `1`이다. 60 | 왜 그럴까? 이 글에서는 Javascript가 문자열을 다루는 방식을 설명하고, 어떻게 위와 같은 결과가 도출되는지 간략하게 설명한다. 61 | 62 | ## [Why I Don’t Use GraphQL Anymore](https://www.youtube.com/watch?v=S1wQ0WvJK64) 63 | 64 | MongoDB 엔지어인 [Harry Wolff](https://hswolff.com/)가 밝히는 왜 GraphQL을 더 이상 사용하지 않는지에 대한 동영상이다. 65 | 66 | 67 | 68 | GraphQL은 매력적이고 FE 개발에 놀라운 기능들을 제공하지만 그에 반해 서버 구현은 매우 어렵다. 69 | 70 | 또한 Facebook과 같은 스케일의 서비스에서는 많은 문제들을 해결해 줄 수 있지만, 대다수의 사용자들은 그러한 환경에서 사용하지는 않기 때문이라고 그 이유를 설명한다. 71 | 72 | ## [10 Awesome Chrome Flags You Should Enable Right Now](https://medium.com/better-programming/10-awesome-chrome-flags-you-should-enable-right-now-2684e4518cb5) 73 | 74 | 75 | 76 | 바로 사용해도 좋은 10가지 크롬 플래그를 소개한다. 77 | 78 | # 튜토리얼 79 | 80 | ## [I created the exact same app in React and Vue. Here are the differences](https://sunilsandhu.com/posts/i-created-the-exact-same-app-in-react-and-vue-2020-edition) 81 | 82 | 83 | 84 | React와 Vue를 이용해서 똑같은 TODO 앱을 만들어 보면서 어떤 점이 다른지, 코드 스타일은 어떤 식으로 차이가 있는지를 설명하고 있다. 2020년 버전으로 React는 Hooks를 Vue(3+)는 Composition API를 사용했다. (2019년, 2018년 버전도 본문 하단 링크에 있다.) 85 | 86 | 소스를 올려놓은 저장소 링크도 있으니 코드를 확인하거나 직접 실행해볼 수 있다. 87 | 88 | 두 개의 선택지에서 갈등하는 개발자가 읽어보기를 추천한다. 89 | 90 | ## [TypeScript Exercises](https://typescript-exercises.github.io/) 91 | 92 | 인터랙티브한 구성을 통해 제공되는 16개의 연습문제를 해결을 통해 아래의 TS 기능들을 학습해 볼 수 있다. 93 | 94 | - Basic typing. 95 | - Refining types. 96 | - Union types. 97 | - Merged types. 98 | - Generics. 99 | - Type declarations. 100 | - Module augmentation. 101 | - Advanced type mapping. 102 | 103 | ## [Let's build BATTLESHIPS in JavaScript, HTML and CSS](https://youtu.be/U64vIhh0TyM) 104 | 105 | 106 | 배틀쉽 게임을 제작하는 과정을 소개한 유튜브 동영상 강의이다. 107 | 108 | 1시간 40분간의 강의를 따라서 간단한 게임을 만들어본다면, 109 | 110 | HTML, CSS, JavaScript을 학습함은 물론 큰 성취감을 느낄 수 있을것이다. 111 | 112 | # 코드와 도구 113 | 114 | ## [Mock Service Worker](https://github.com/mswjs/msw) 115 | 116 | 117 | 118 | 기존의 mock API 도구 또는 서비스들은 별도로 제공되는 API 주소를 사용하기 때문에, 테스트 용도로써는 유용하지만 실 서비스 단계에서는 실 API로의 업데이트가 필요하다는 단점이 존재한다. 119 | 120 | MSW(Mock Service Worker)는 ServiceWorker를 사용해 네트워크 레벨에서 mocking이 이뤄지기 때문에 실 서비스 API 주소를 테스트 단계에서도 그대로 사용할 수 있다. 121 | 122 | ```js 123 | import { setupWorker, rest } from 'msw' 124 | 125 | const worker = setupWorker( 126 | // 'https://github.com/octocat'에 대한 mock response를 구성 127 | rest.get('https://github.com/octocat', (req, res, ctx) => { 128 | return res( 129 | ctx.delay(1500), 130 | ctx.status(202, 'Mocked status'), 131 | ctx.json({ 132 | message: 'Mocked response JSON body', 133 | }), 134 | ) 135 | }), 136 | ) 137 | 138 | worker.start(); 139 | ``` 140 | 141 | ## [pattern.css](https://bansal.io/pattern-css) 142 | 143 | 144 | 145 | background에 다양한 패턴효과를 줄 수 있다. 146 | 147 | ## [WebGL water ripples](https://codepen.io/martinlaxenaire/full/OJVKVYa) 148 | 149 | 150 | 151 | WebGL base인 [curtain.js](https://www.curtainsjs.com/)로 만든 물결효과. 152 | 153 | ## [Debug Visualizer](https://github.com/hediet/vscode-debug-visualizer/blob/master/extension/README.md) 154 | 155 | 디버깅 시 데이터 구조를 시각화해 보여주는 VS Code 확장도구로 JS/TS 및 대다수 언어들을 지원한다. 156 | > JS/TS 외 언어들은 기본적 수준에 한해서만 지원된다. 157 | 158 | 159 | -------------------------------------------------------------------------------- /issues/2020-10.md: -------------------------------------------------------------------------------- 1 | # 2020-10 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [Introducing the New JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) 6 | 7 | JSX는 일반 JavaScript 코드로 transpile 되지 않으면, 브라우저는 이해하지 못한다. 따라서 아래 예제 코드와 같이 작성된 코드는 React.createElement를 사용하도록 변환된다. 8 | 9 | ```jsx 10 | import React from 'react'; 11 | 12 | // 작성된 코드 13 | function App() { 14 | return

Hello World

; 15 | } 16 | 17 | // 변환된 코드 18 | function App() { 19 | return React.createElement('h1', null, 'Hello world'); 20 | } 21 | ``` 22 | 23 | 그러나, `React.createElement`의 사용은 다음의 2가지 문제가 존재한다. 24 | - React 스코프 내에 있어야 하는 문제 (즉, React import를 필요) 25 | - 적용된 일부 [성능 향상과 단순화]( https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation)를 지원하지 못하는 문제 26 | 27 | 새로운 Transform은 [Babel 개발팀과의 협업](https://babeljs.io/blog/2020/03/16/7.9.0#a-new-jsx-transform-11154httpsgithubcombabelbabelpull11154)을 통해 다음의 이점들을 제공한다. 28 | - React import 없이 JSX를 사용 29 | - 번들 크기의 개선(사용자의 설정 환경에 따라 다를 수 있다.) 30 | - 학습이 필요한 React의 개념적 부분을 감소시켜 주는 개선을 활성화한다. 31 | 32 | 새로운 Transform은 `React 17`(향후 0.14.x, 15.x, 16.x 들도 지원 예정)을 통해 사용할 수 있으며, 컴파일러(Babel, TS) 전용 entry point를 제공해 `React.createElement` 대신 특별한 함수를 자동으로 import 하고 사용하도록 변환된다. 33 | 34 | ```jsx 35 | // 작성된 코드 (React import 없이 작성) 36 | function App() { 37 | return

Hello World

; 38 | } 39 | 40 | // 변환된 코드 (아래 모듈은 컴파일러를 통해 자동 import) 41 | import {jsx as _jsx} from 'react/jsx-runtime'; 42 | 43 | function App() { 44 | return _jsx('h1', { children: 'Hello world' }); 45 | } 46 | ``` 47 | 48 | ## [We now generally consider Moment to be a legacy project in maintenance mode](https://momentjs.com/docs/#/-project-status/) 49 | Moment 라이브러리가 더 이상의 기능 추가 없이 유지 보수만 한다. 50 | 51 | ### 대안 라이브러리 52 | - [Luxon](https://moment.github.io/luxon/): Moment의 진화로 생각할 수 있다. 오랜 기간 Moment 컨트리뷰터인 Isaac Cambron이 개발하고 있다. 53 | - [Day.js](https://day.js.org/): 유사한 API를 사용하여 Moment를 최소한으로 대체하도록 설계되었다. 54 | - [date-fns](https://date-fns.org/): Date 객체를 조작하기 위한 다양한 함수를 제공한다. 55 | - [js-Joda](https://js-joda.github.io/js-joda/): JSR-310 기반의 Java SE8 java.time 패키지를 포팅 하였다. 56 | 57 | ## [Effective limited parallel execution in JavaScript](https://medium.com/@arsenyyankovsky/effective-limited-parallel-execution-in-javascript-ea2a1fb9a632) 58 | 병렬 실행에 효과적으로 제한을 두는 방법이다. 59 | 60 | 간단한 예제를 통해서 적절하게 병렬 실행을 제한할 수 있는 방법을 알려 준다. 61 | [promise-pool](https://www.npmjs.com/package/@supercharge/promise-pool) 62 | 63 | 64 | 65 | ## [The Ugly Side of React Hooks](https://medium.com/swlh/the-ugly-side-of-hooks-584f0f8136b6) 66 | 요즘 많은 React 관련 글들이 class component보다는 hooks를 권장하는데, 제목에서 알 수 있듯, 이 글은 그와 반대이다. [React 공식 문서에서 말하는 hooks의 motivation](https://reactjs.org/docs/hooks-intro.html#motivation)을 하나하나 집으며 비판한다. 67 | 68 | ## [Vue.js 3.0 "One Piece"](https://github.com/vuejs/vue-next/releases/tag/v3.0.0) 69 | 오랜 개발 기간 끝에 드디어 Vue 3.0(코드명 "One Piece")의 공식 릴리스가 공개되었다. Progressive framework 콘셉트를 지향하는 Vue.js의 새로운 출발을 주목해 보자. 70 | 71 | ## [Deno 1.4](https://deno.land/posts/v1.4) 72 | TypeScript 런타임인 Deno의 새로운 버전인 1.4가 릴리스가 공개되었다. 이번 릴리스에는 웹소켓 지원과 개발 환경에서 사용할 수 있는 watch 모드 지원이 추가되었다. 점점 실무에서 활발한 사용이 증가할 것으로 기대된다. 73 | 74 | # 튜토리얼 75 | 76 | ## [React Component Patterns](https://dev.to/alexi_be3/react-component-patterns-49ho) 77 | 78 | 79 | 80 | 다양한 React Component 패턴(Compound, Flexible Compound 그리고 Provider Pattern)들을 소개하고, 각 패턴들의 사용이 어떤 경우에 적합한지 그리고 각각의 trade-offs 들을 소개한다. 81 | 82 | ## [React-use hooks](https://github.com/streamich/react-use) 83 | React에서 사용하는 사용자 정의(custom) hook 이다. 유용한 hook이 많이 있으니 개발할 때 만들기 보다 필요한 hook을 찾고 이용해 보면 좋다. 84 | 85 | ## [Logical assignment operators in JavaScript](https://dev.to/hemanth/logical-assignment-operators-in-javascript-inh?utm_source=ESnextNews.com&utm_medium=Weekly+Newsletter&utm_campaign=2020-09-01) 86 | 논리 할당 연산자가 (EcmaScript 2021)에 추가될 예정이다. [stage-4](https://dev.to/hemanth/stage-4-features-5a26) 87 | 88 | 간략하게 알아보면, 89 | 90 | ### OR 연산 91 | ```javascript 92 | x ||= y; 93 | ``` 94 | ```js 95 | x || (x = y) 96 | ``` 97 | 두 표현식은 동일하다. 98 | 99 | ### AND 연산 100 | ```javascript 101 | x &&= y; 102 | ``` 103 | ```js 104 | x && (x = y); 105 | ``` 106 | 두 표현식은 동일하다. 107 | 108 | ## [A Gentle Introduction to Code Splitting with React](https://blog.kommit.co/a-gentle-introduction-to-code-splitting-with-react-395ddf44b71b) 109 | React를 사용한 프로젝트에서 코드 분할 방법을 설명한다. 110 | 111 | ### 분할하는 방법 112 | 1. Route level 113 | ```jsx 114 | import React, { Suspense } from 'react'; 115 | import { Location, Router } from '@reach/router'; 116 | 117 | import Loading from './components/Loading'; 118 | 119 | const Home = React.lazy(() => import('./components/Home')); 120 | const AppointmentForm = React.lazy(() => import('./components/AppointmentForm')); 121 | const PreviousAppointments = React.lazy(() => import('./components/PreviousAppointments')); 122 | 123 | class App extends React.Component { 124 | render() { 125 | return ( 126 | 127 | {({ location }) => ( 128 | }> 129 | 130 | 131 | 132 | 133 | 134 | 135 | )} 136 | 137 | ); 138 | } 139 | } 140 | ``` 141 | 2. Component level 142 | ```jsx 143 | class PreviousAppointments extends Component { 144 | constructor(props) { 145 | super(props); 146 | 147 | this.state = { map: null }; 148 | 149 | this.handleClick = this.handleClick.bind(this); 150 | } 151 | 152 | handleClick() { 153 | import('./components/Map').then(module => 154 | this.setState(() => ({ 155 | map: module.default, 156 | })), 157 | ); 158 | } 159 | 160 | render() { 161 | const { map: Map } = this.state; 162 | 163 | return ( 164 | <> 165 |
Previous Appointments
166 | ... 167 | {Map ? : } 168 | 169 | ); 170 | } 171 | } 172 | ``` 173 | 두 분할 방법을 잘 이용해서 성능을 높이고 사용자 경험을 최적화 시키자. 174 | 175 | ## [Decorators](https://github.com/tc39/proposal-decorators) 176 | 2020년 9월에 제시된 데코레이터들이다. 177 | 178 | 몇 가지만 살펴보면, 179 | ### @logged 180 | 메서드의 시작과 끝에 로그를 출력한다. 181 | ```javascript 182 | import { logged } from "./logged.mjs"; 183 | 184 | class C { 185 | @logged 186 | m(arg) { 187 | this.#x = arg; 188 | } 189 | 190 | @logged 191 | set #x(value) { } 192 | } 193 | 194 | new C().m(1); 195 | // starting m with arguments 1 196 | // starting set #x with arguments 1 197 | // ending set #x 198 | // ending m 199 | ``` 200 | 201 | ### @tracked 202 | 필드 값을 추적(tracking)해 값의 변경이 발생되면, render 메서드를 트리거 한다. 203 | ```javascript 204 | import { tracked } from "./tracked.mjs"; 205 | 206 | class Element { 207 | @tracked counter = 0; 208 | 209 | increment() { this.counter++; } 210 | 211 | render() { console.log(counter); } 212 | } 213 | 214 | const e = new Element(); 215 | e.increment(); // logs 1 216 | e.increment(); // logs 2 217 | 218 | ``` 219 | 220 | # 도구 221 | 222 | ## [Comlink](https://github.com/GoogleChromeLabs/comlink) 223 | 224 | 225 | 226 | > 예제 코드 이미지 (클릭하면 확대해서 볼 수 있다.) 227 | 228 | 크롬 개발팀에서 공개한 아주 작은 크기(1.1kb)의 라이브러리로, WebWorkers 사용에 대한 초기 접근 장벽을 제거해 준다. 좀 더 추상적 수준에서 보자면, postMessage와 [ES6 Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)에 대한 [RPC](https://ko.wikipedia.org/wiki/%EC%9B%90%EA%B2%A9_%ED%94%84%EB%A1%9C%EC%8B%9C%EC%A0%80_%ED%98%B8%EC%B6%9C) 구현이라 할 수 있다. 229 | 230 | Webpack을 번들러로 사용하고 있다면 [comlink-loader](https://github.com/GoogleChromeLabs/comlink-loader)를 같이 사용해, 코드의 일부 수정(또는 없이)을 통해 사용되는 모듈들을 WebWorkers 스레드에서 실행될 수 있도록 만들 수도 있다. 231 | 232 | ## [GitHub CLI](https://cli.github.com/) 233 | GitHub의 공식 CLI 도구로 Beta 기간을 끝내고, 얼마 전 1.0 버전을 선보였다. 터미널 상에서 GitHub PR을 만들거나 관리도 할 수 있다. 234 | -------------------------------------------------------------------------------- /issues/2020-12.md: -------------------------------------------------------------------------------- 1 | # 2020-12 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [npm-init](https://docs.npmjs.com/cli/v7/commands/npm-init) `` 6 | 7 | 보통 새로운 프로젝트를 시작할 때, `npm init -y`를 수행해 기본 값이 지정된 package.json을 만들거나, 또는 특정 프레임워크라면 `create-XXX`(create-react-app)와 같은 도구를 사용해 프로젝트 스캐폴딩을 8 | 통해 시작한다. 9 | 10 | 스캐폴딩 도구를 자주 사용하는 경우라면, 전역 영역에 설치하고 사용하거나 자주 사용되지 않는 11 | 경우라면 `npx`를 통해 한 번만 다운로드해 실행하는 경우가 일반적이다. 12 | 13 | ```sh 14 | npx create-react-app my-app 15 | ``` 16 | 17 | 잘 알려지지 않은 사실 중 한 가지는, `npm init` 명령어를 사용해 보다 간편하게 이 작업을 수행할 수 있다는 점이다. npm `v6+`부터 ``지정을 통해 외부 도구를 활용한 스캐폴딩을 수행할 수 있다. 18 | 19 | ```sh 20 | npm init 21 | 22 | npm init foo # ==> npx create-foo 23 | npm init foo -- --hello # ==> npx create-foo --hello 24 | ``` 25 | 26 | npm 패키지명이 `create-`와 같이 존재하는 경우, npx를 통해 해당 패키지를 다운로드 후 해당 패키지를 통한 프로젝트 스캐폴딩을 생성한다. 27 | 28 | ```sh 29 | npm init react-app my-app 30 | npm init react-app@3.3.0 my-app 31 | 32 | # Yarn의 경우도, 유사한 "yarn create"를 사용할 수 있다. 33 | yarn create react-app my-app # Yarn 0.25+ 34 | ``` 35 | 36 | ## [How Web Apps Work: JavaScript and the DOM](https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-javascript-dom/) 37 | 38 | 웹 개발은 넓고 다양한 콘셉트, 정의, 도구 그리고 기술들을 포함한다. 처음 웹 개발 영역에 접근하는 이들은 이들 각각이 어떻게 결합되고 동작하는지 잘 알지 못한 채 시작하는 경우가 대다수다. 39 | 40 | 이 글에서는 기본적인 웹 개발 개념과 기술들에 대해 무엇인지, 왜 필요한지, 그리고 그것들이 어떻게 서로 연관되어 있는지를 개괄적으로 다룬다. 41 | 42 | ## [Chrome Dev Summit 2020](https://developer.chrome.com/devsummit/) 43 | 44 | 45 | 46 | 12월 9-10일, 크롬 브라우저와 웹 기술과 관련된 총 26개의 세션으로 구성되어 있는 크롬 개발자 서밋이 진행된다. 올해는 다른 개발자 행사들과 마찬가지로 온라인으로 진행된다. 47 | 48 | 본 행사에 앞서 12월 7-8일 진행되는 [워크숍](https://developer.chrome.com/devsummit/schedule/#workshops)을 통해 각 분야별 전문가들을 통해 직접 새로운 기술들을 배워볼 수도 있다. 49 | 50 | ## [Why I will no longer be using console.log() to check React state updates](https://dev.to/hymanaharon/why-i-will-no-longer-be-using-console-log-to-check-react-state-updates-29el) 51 | 52 | 53 | 54 | React 개발을 하다 보면 종종 state를 보기 위해 `console.log`를 이용할 때가 있다. 하지만, `console.log`는 가독성 면에서 좋지 않을 때가 많다. 55 | 이 글은 `console.table`과 `columns` 파라미터를 통해 React state를 좀 더 보기 쉽게 디버깅하는 방법을 설명한다. 56 | 57 | ## [10 React security best practices](https://snyk.io/blog/10-react-security-best-practices) 58 | 59 | 60 | 61 | React 환경에서 개발 시 쉽게 놓칠 수 있는 10가지 보안 위협 케이스와 그에 대한 해법을 제시한다. 62 | 63 | ## [TypeScript's Release Process](https://github.com/microsoft/TypeScript/wiki/TypeScript's-Release-Process) 64 | 65 | 타입스크립트 팀이 타입스크립트 릴리스 프로세스에 대한 글을 작성하였다. 릴리스 단계, 주기 등을 타입스크립트 팀은 어떻게 관리하는지 엿볼 수 있다. 66 | 67 | ## [React SSR 그 고통의 기록](https://www.seokjun.kim/react-ssr-the-record-of-pain/) 68 | 69 | 운영 중인 서비스에 SSR 적용을 위한 개발 경험을 공유하는 글로, SSR을 통해 성능적인 개선을 이루기도 했지만 많은 리소스를 투입할 만큼 매력적인 기능인지에 대한 의문점을 얘기한다. 70 | 71 | SSR이 초기 페이지 렌더링 속도 향상과 SEO를 위해 꼭 적용해야 하는 테크닉처럼 인식되고 있지만, 무조건 적용하면 좋다는 식의 접근보다는 균형 잡힌 접근이 필요함을 확인할 수 있다. 72 | 73 | # 튜토리얼 74 | 75 | ## [Web Development for Beginners - A Curriculum](https://github.com/microsoft/Web-Dev-For-Beginners) 76 | 77 | 78 | 79 | MS에서 12주, 24개의 강좌로 이루어진 JS, CSS, HTML 기초 수업을 공개했다. 각 강좌마다 퀴즈와 과제, 비디오 등이 포함되어 있어 학습을 돕는다. 80 | 81 | # 코드와 도구 82 | 83 | ## [aleph](https://github.com/alephjs/aleph.js) 84 | 85 | 86 | 87 | Next.js 영감을 받은 Deno 런타임을 위한 React 프레임워크로, 기본적으로 ESM import 문법 지원을 통해 Next.js와는 다르게 Webpack 또는 그 외 다른 번들러의 사용이 필요하지 않다. 88 | 89 | ## [SvgPathEditor](https://yqnn.github.io/svg-path-editor/) 90 | 91 | 92 | 93 | 온라인 SVG path 에디터로, path 값만 넣으면 바로 시각화된 모습을 볼 수 있고 직접 편집점들을 조작해 원하는 형태로 수정할 수 있다. 94 | 95 | ## [spacetime](http://spacetime.how/) 96 | 97 | 98 | 99 | 15kb (gizipped) 크기를 갖는 아주 경량화된(moment-timezone은 98kb) timezone 라이브러리로, moment와 유사한 API를 제공한다. 100 | 101 | ```js 102 | let s = new spacetime('January 5 2018', 'Africa/Djibouti'); 103 | 104 | s.date() // 5 105 | s.isAsleep() // true 106 | s.time() // '2:30pm' 107 | ``` 108 | 109 | ## [Operator Lookup](https://joshwcomeau.com/operator-lookup) 110 | 111 | 112 | 113 | JavaScript의 다양한 연산자들의 사용법과 간단한 예제를 검색해 볼 수 있다. 114 | 115 | ## [faker.js](https://github.com/Marak/faker.js) 116 | 117 | 더미 데이터(fake data)를 생성해 주는 JS 라이브러리이다. address, commerce, company 등 매우 다양한 데이터 형식을 지원한다. 118 | 119 | 다음은 Browser와 Node 환경에서의 사용 예시이다: 120 | 121 | ```html 122 | 123 | 128 | ``` 129 | 130 | ```js 131 | var faker = require('faker'); 132 | 133 | var randomName = faker.name.findName(); // Rowan Nikolaus 134 | var randomEmail = faker.internet.email(); // Kassandra.Haley@erich.biz 135 | var randomCard = faker.helpers.createCard(); // random contact card containing many properties 136 | ``` 137 | 138 | > [참고] 프로젝트의 높은 인기도와는 상관없이 원 개발자는 프로젝트 메인터넌스를 위한 어려움을 겪고 있는 것으로 보이며, 최근 라이브러리 사용을 원하는 기업들은 비용을 지불하거나 포크 하라고 선언하기도 했다. 139 | > - [No more free work from Marak - Pay Me or Fork This](https://github.com/Marak/faker.js/issues/1046) 140 | 141 | ## [jsdiff](https://github.com/kpdecker/jsdiff) 142 | 143 | 문자열 비교(diff) Javascript 라이브러리이다. 다음과 같이 간단한 로직으로 문자열 비교 결과를 출력할 수 있다: 144 | 145 | ```js 146 | require('colors'); 147 | const Diff = require('diff'); 148 | 149 | const one = 'beep boop'; 150 | const other = 'beep boob blah'; 151 | 152 | const diff = Diff.diffChars(one, other); 153 | 154 | diff.forEach((part) => { 155 | // green for additions, red for deletions 156 | // grey for common parts 157 | const color = part.added ? 'green' : 158 | part.removed ? 'red' : 'grey'; 159 | process.stderr.write(part.value[color]); 160 | }); 161 | 162 | console.log(); 163 | ``` 164 | 165 | 166 | -------------------------------------------------------------------------------- /issues/2021-01.md: -------------------------------------------------------------------------------- 1 | # 2021-01 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## 2020년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 6 | [1편](https://d2.naver.com/helloworld/7226235), [2편](https://d2.naver.com/helloworld/6951656) 7 | 8 | React, Angular, Vue.js 그리고 Svelte의 최근 동향을 다루는 글로, 다양한 프레임워크들의 기술적 변화와 차이점 들을 다루고 있어 여러 프레임워크들의 동향을 한눈에 파악할 수 있다. 9 | 10 | > 지난 "라이브러리와 프레임워크 동향" 시리즈: [2017](https://d2.naver.com/helloworld/7229119), [2018](https://d2.naver.com/helloworld/3259111), 2019([1편](https://d2.naver.com/helloworld/7700312), [2편](https://d2.naver.com/helloworld/2108442)) 11 | 12 | ## [React Server Component](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) 13 | React Server Component에 대한 영상이 React 공식 블로그에 공개되었다. 14 | 현재는 아직 연구 중인 단계이지만 그 가능성에 대해 많은 설명을 하고 있다. 15 | 클라이언트 번들 사이즈를 줄이고 backend 자원에 직접 접근할 수 있는 React Server Component에 대한 글과 영상이다. 16 | 17 | 18 | 19 | 발표 이후 [해커뉴스](https://news.ycombinator.com/item?id=25497065)에서도 질문이 끝이지 않고 있다. Dan Abramov에게 궁금증이 있다면 여러분도 지금 답을 얻을 수 있다. 20 | > [참고] React 코어 개발팀의 Dan Abromov 트윗에서는 Server Component에 대한 주요 내용에 대한 요약을 확인해 볼 수 있다. 21 | https://twitter.com/dan_abramov/status/1342261577475633154 22 | 23 | ## Deview 2020 24 | Deview 2020 [발표 영상](https://d2.naver.com/news/5751902)이 공개되었다. 25 | 26 | 그 중 웹 세션 발표 중 국내와 해외에서 각기 다른 이유로 BFF (Backend for Frontend) 아키텍쳐로의 전환 경험을 다루고 있어 소개한다. 27 | 28 | ### GraphQL 29 | [GraphQL이 가져온 에어비앤비 프론트앤드 기술의 변천사(부제: REST환경에서 GraphQL 기반 UI 설계하기)](https://deview.kr/2020/sessions/337) 30 | - 에어비엔비에 GrahphQL을 도입하면서 BFF 아키텍쳐 구조를 만들어간 경험을 공유한 발표이다. 31 | - GraphQL 운영 경험에 대한 구체적인 경험이 궁금하시다면 [GraphQL API 까짓거 운영해보지 뭐](https://deview.kr/2020/sessions/347) 발표를 보시는 것도 좋을 것 같다. 32 | 33 | 34 | 35 | ### Server-Side Rendering 36 | [어서와, SSR은 처음이지? (네이버 블로그 Node.js 기반의 Server-Side Rendering 적용기)](https://deview.kr/2020/sessions/403) 37 | - 네이버 블로그에 SSR을 도입하면서 BFF 아키텍처 구조를 만들어간 경험을 공유한 발표이다. 38 | - SSR을 구축하기 위한 구체적인 경험이 궁금하시다면 [리액트 개발이 이렇게 쉬웠나? (feat. Next.js)](https://deview.kr/2020/sessions/351) 발표를 보시는 것도 좋을 것 같다. 39 | 40 | 41 | 42 | 이 외에도 Deview 2020에서 FrontEnd 경험을 다룬 다양한 세션이 있으니 살펴보기 바란다. 43 | > [참고] **Deview 2020 FrontEnd 세션** 44 | > - [묻고 한 벌로 가! (네이버 플레이스 한 벌의 코드로 모바일 웹/모바일 앱/PC 웹 서비스 확장 개발기)](https://deview.kr/2020/sessions/378) 45 | React로 만들어진 네이버 플레이스 서비스를 지도앱과 Angular 기반의 서비스에 통합시켰던 경험을 소개한다. 46 | > - [WebXR API를 이용한 웹 AR 개발, 그 한계와 대안](https://deview.kr/2020/sessions/361) 47 | 현 시점에서 WebXR API를 적용하는 장점과 한계점들을 살펴보고 이를 대체할 수 있는 다른 방법들을 설명한다. 48 | > - [깃헙 4.4K 스타 billboard.js 메인테이너가 들려주는 오픈소스 개발기(부제: 톨먼이형!, 오픈소스 개발은 왜 이래?)](https://deview.kr/2020/sessions/392) 49 | 네이버 오픈소스 차트 라이브러리인 billboard.js 프로젝트의 개발과 운영 경험을 통해 지속 가능한 오픈소스 메인테이너스를 위한 경험을 소개한다. 50 | > - [Deno 를 통해 알아보는 Javascript 세상 이야기](https://deview.kr/2020/sessions/358) 51 | Deno 에 대하여 알아보며 JavaScript 에서 TypeScript, Node.js에서 Deno 까지 JavScript 세상에서의 불편함을 해결 하고자 했던 기술을 소개한다. 52 | > - [성능개선 뛰어들기 (고전적 SSR 성능개선)](https://deview.kr/2020/sessions/346) 53 | 네이버의 스마트어라운드 성능개선 방향과 그 여정을 소개한다. 54 | > - [egjs 오픈 서커스 오신것을 환영합니다](https://deview.kr/2020/sessions/400) 55 | 복잡한 기능을 구현하기 위해서 오픈소스를 찾는 과정과 오픈소스를 활용하면서 겪을수 있는 실제 사례를 재밌게 배울 수 있는 발표이다. 56 | > - [Recoil: 왕위를 계승하는 중입니다](https://deview.kr/2020/sessions/336) 57 | Recoil이 Redux의 굳건한 왕좌를 위협할 것이라고 생각하는 근거에 대해서 얘기하고 단계별로 준비된 4가지 예제를 통해 Recoil의 단순하지만 강력한 기능을 간략하게 배워가는 발표이다. 58 | 59 | 60 | 61 | ## Chrome Dev Summit 2020 영상 발표 62 | Chrome Dev Summit 2020 세션 [발표 영상](https://www.youtube.com/playlist?list=PLNYkxOF6rcIDzLmWaDwfHVZJl1Q5RFgOR)이 공개되었다. 63 | CSS 엔진의 low-level api 인 [Houdini](https://houdini.how/)의 발표부터 PWA, [Web Story](https://stories.google/), Performance까지 구글웹플랫폼의 진보된 경험을 보실 수 있다. 64 | 65 | 66 | ## [새로운 웹페이지 성능 측정 지표 CLS(Cumulative Layout Shift)](https://wit.nts-corp.com/2020/12/28/6240) 67 | chrome 86 업데이트에서 개발자도구 – Performance 패널 – Experience 섹션에 Cumulative Layout Shift (CLS) 라는 새로운 성능 측정 지표가 생겼다. 68 | Web Vital의 새로운 지표인 CLS에 대해 정리한 글이다. 69 | 70 | 71 | ## [전역상태 관리에 대한 단상 (stale-while-revalidate)](https://jbee.io/react/thinking-about-global-state/) 72 | 전역 상태 관리로 Redux를 즐겨 쓰던 개발자가 더 이상 Redux를 사용하지 않게된 이유와 회고가 담긴 글이다. 73 | React Query, SWR, Apollo와 같은 라이브러리가 추구하는 것과 같이 API 캐싱을 통해 컴포넌트의 응집도와 편의성을 높이는 방법에 대한 고민을 설명하고 있다. 74 | 75 | 76 | ## [The React Hooks Announcement In Retrospect: 2 Years Later](https://dev.to/ryansolid/the-react-hooks-announcement-in-retrospect-2-years-later-18lm) 77 | React Hooks이 소개된 이후 2년이라는 시간이 지났다. 이 글은 그 기간동안 개발자의 경험을 시간 순으로 서술하고 있다. 78 | 2021년에도 끝나지 않은 논쟁에 대한 여러분들 의견은 어떤가요? 79 | 80 | ## [25 years of JavaScript History](https://www.jetbrains.com/lp/javascript-25/) 81 | IDE로 유명한 JetBrains에서 JavaScript 25주년을 맞이한 JavaScript 역사에서 주목할만한 타임라인 페이지를 공개하였습니다. 82 | 83 | # 튜토리얼 84 | ## [React / GraphQL Course - Build a social media app (MERNG Stack)](https://youtu.be/n1mdAPFq2Os) 85 | MongoDB + Express + React + Node.js + GraphQL 스택으로 만들어 보는 소셜 미디어 앱 튜토리얼이다. 86 | 87 | 88 | 89 | ## [Build your own CANDY CRUSH using JavaScript, HTML and CSS](https://youtu.be/XD5sZWxwJUk) 90 | JavaScript, HTML, CSS를 이용하여 드래그 앤 드랍을 구현하고 이를 이용하여 우리에게 유명한 CANDY CRUSH 라는 웹게임을 만들어 보는 영상이다. 91 | 92 | 93 | 94 | ## [NodeJS ZOOM Clone](https://youtu.be/ZVznzY7EjuY) 95 | 원격 근무에는 빠질수 없는 ZOOM 어플리케이션을 클론해보는 영상이다. 96 | 97 | 98 | 99 | # 코드와 도구 100 | ## [estimator.dev](https://estimator.dev/) 101 | ES2015을 지원하는 브라우저 비율이 90%를 넘고 있다. 이 사이트는 `Modern JavaScript 최적화`를 진행한다면 얼마 만큼의 성능 향상을 기대할 수 있을지를 평가 할수 있는 툴이다. 102 | 103 | 104 | ## [Monaco Editor](https://microsoft.github.io/monaco-editor/) 105 | 106 | VS Code의 웹 버전. NPM으로 설치해 브라우저에서 VS Code를 이용할 수 있다. 모바일 브라우저는 지원하지 않는다. 107 | 108 | 109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /issues/2021-03.md: -------------------------------------------------------------------------------- 1 | # 2021-03 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [NASA: PRE-LANDING SIMULATION](https://eyes.nasa.gov/apps/mars2020/) 6 | 7 | 8 | 9 | 얼마 전 미국 탐사 로봇이 화성에 착륙했고, NASA는 실시간 착륙 시뮬레이션을 웹에 공개했다. 10 | WebGL 기술이 사용된 이 시뮬레이션에 대해 WebGL의 간판 라이브러리 three.js 개발자가 남긴 트윗이 인상적이다. 11 | 12 | 발전된 웹 기술이 이와 같은 다양한 영역에서 사용되는 것은 굉장히 고무적인 일이다. 13 | 14 | (참고로 [#이곳](https://github.com/nasa?language=javascript)에서 NASA가 JavaScript를 사용하고있는 오픈소스 프로젝트들을 확인해볼 수 있다.) 15 | 16 | ## [An architectural overview for WebRTC — A protocol for implementing video conferencing](https://eytanmanor.medium.com/an-architectural-overview-for-web-rtc-a-protocol-for-implementing-video-conferencing-e2a914628d0e) 17 | 18 | 19 | 20 | COVID-19 시대에서는 화상 회의 도구들은 이제 필수가 되었다. 웹에서 화상 회의 도구를 개발하기 위해선 WebRTC(Web Real-Time Communication)을 사용할 수 있다. 21 | 22 | 글의 저자는 단일 명령어 실행만으로 화상으로 코드 작성을 실시간으로 공유할 수 있는 CLI 도구인 [Git Streamer](https://github.com/DAB0mB/git-streamer) 개발과정을 통해 학습된 화상회의 도구 개발의 기본적 개요/개념들을 설명한다. 23 | 24 | ## [Web platform's hidden gems - Shape Detection API](https://arunmichaeldsouza.com/blog/web-platform's-hidden-gems---shape-detection-api) 25 | 26 | 오늘날 스마트폰은 다양한 영역과 일상생활에서 사용되고 있다. 대표적인 활용 영역들 중 하나는 결제를 위해 QR 코드나 바코드를 읽어내는 페이 등의 시스템이 그러하다. 27 | 28 | 웹에서 이러한 시스템을 구현하려면 어떻게 해야 할까? 많은 이들에게 잘 알려지지 않은 [ShapeDetection API](https://github.com/WICG/shape-detection-api)은 웹에서 QR/바코드, 얼굴인식 그리고 문자인식(OCR)이 가능한 애플리케이션 개발을 가능하게 한다. 29 | 30 | > [참고] [The Shape Detection API: a picture is worth a thousand words, faces, and barcodes](https://web.dev/shape-detection/) 31 | 32 | ## [Generators in Javascript: How to use them](https://dev.to/karimelghamry/generators-in-javascript-how-to-use-them-372d) 33 | 34 | 35 | 36 | Generator는 일반 함수와 유사하나, 이전 실행이 종료된 지점의 상탯값을 저장하고 요청에 따라 종료된 시점부터 실행을 다시 지속할 수 있도록 만들 수 있는 함수다. 37 | 38 | ES6 명세에 포함되어 있으며, 등장한지 많은 시간이 흘렀다. 그러나 실사용 사례는 아직까지 그에 비례하지 않는 것 같다. 이 글을 통해 다시 한번 기본적 이해와 함께 어떤 경우에 유용하게 사용하면 좋을지 확인해 보자. 39 | 40 | > [참고] [JAVASCRIPT.INFO: 제너레이터](https://ko.javascript.info/generators) 41 | 42 | ## [JS minification benchmarks](https://github.com/privatenumber/minification-benchmarks) 43 | 44 | 현재 JavaScript minifier 도구는 과거의 UglifyJS가 defacto 도구로 사용되었던 것과는 다르게 다양한 도구들이 개발되고 있다. 45 | 46 | 어떤 것이 가장 빠르게 실행될까? 유명한 프로젝트들의 빌드 파일을 대상으로 수행한 벤치마크 결과를 확인해 볼 수 있다. 47 | 48 | ## [Things You Can Do With CSS Today](https://www.smashingmagazine.com/2021/02/things-you-can-do-with-css-today/) 49 | 50 | CSS는 최근 몇 년 동안 정말 빠르게 발전하고 있다. 그만큼 우리가 놓친 유용한 기능들도 많을 것이다. 51 | 52 | 이 글에서는 최신 CSS 기술들로 할 수 있는 Masonry layout, `:is` selector, CSS function, Aspect ratio 등의 활용적인 기능들에 대해 설명하고 있다. 53 | 54 | 55 | 56 | ## [Test your JavaScript skills Series' Articles](https://dev.to/coderslang/series/11099) 57 | 58 | 59 | 60 | JavaScript 인터뷰에 자주 등장하는, 헷갈리기 쉬운 문제를 16가지 예제와 함께 정리해 놓은 아티클이다. 차례차례로 읽어본다면 JavaScript에 대한 자신의 기본기를 부담 없이 확인해 보고 향상시킬 수 있을 것이다. 61 | 62 | # 튜토리얼 63 | 64 | ## [JavaScript's Memory Management Explained](https://felixgerschau.com/javascript-memory-management/) 65 | 66 | ![](https://felixgerschau.com/static/b452488bd7eeac0405c48f164da6280d/29007/stack-heap-pointers.png) 67 | 68 | JavaScript 코드를 작성하면서 사용하게 되는 변수, 함수, 객체 등은 어디에 어떻게 저장되고 사용될까? 그리고 더 이상 필요 없게 되었을 때 어떻게 GC(Garbage Collection)가 이뤄지게 될까? 69 | 70 | 이 글은 JavaScript 메모리 관리에 대한 궁금증을 쉽게 해결해 줄 것이다. 71 | 72 | ## [Let’s Create a Chrome Extension To Add New Features To Medium](https://js.plainenglish.io/lets-create-a-chrome-extension-to-add-new-features-to-medium-3da288af710e) 73 | 74 | 75 | 76 | 웹 서비스를 이용 중에 어떤 기능이 추가되면 좋겠다는 생각을 해본 경험이 있는가? Chrome 브라우저를 사용한다면 extension을 개발함으로써 이 문제를 해결할 수 있다. 77 | 78 | 이 글에서는 Chrome extension이 어떻게 동작하는지에 대한 간단한 설명과 실제로 Medium에서 사용할 수 있는 extension에 새로운 기능을 추가하는 예제를 보여주고 있다. 79 | 80 | 81 | # 코드와 도구 82 | 83 | ## [json-to-simple-graphql-schema](https://github.com/walmartlabs/json-to-simple-graphql-schema) 84 | 85 | > JSON에 동일한 필드를 갖는 2개의 타입이 존재하는 경우: 86 | ```json 87 | { 88 | "id": "some-id-0", 89 | "name": "A fun object", 90 | "color": { 91 | "id": "color-id-1", 92 | "name": "Test color" 93 | }, 94 | "favoriteColor": { 95 | "id": "color-id-1", 96 | "name": "Test color" 97 | } 98 | } 99 | ``` 100 | > 앱을 통해 실행되면, 다음의 스키마가 생성된다. 101 | 102 | ```graphql 103 | 104 | type FavoriteColor { 105 | id: String 106 | name: String 107 | } 108 | 109 | type Color { 110 | id: String 111 | name: String 112 | } 113 | 114 | type AutogeneratedMainType { 115 | id: String 116 | name: String 117 | favoriteColor: FavoriteColor 118 | color: Color 119 | } 120 | 121 | # Types with identical fields: 122 | # FavoriteColor Color 123 | It called out the two types with identical fields. 124 | 125 | ``` 126 | 127 | JSON 형태의 데이터를 graphql schema로 변환해 주는 도구이다. 128 | 129 | JSON 기반으로 API 통신하는 프로젝트에 graphql을 적용하는 상황이라면 이 도구가 굉장히 유용하게 쓰일 것이다. 130 | 131 | ## [<SpeedTyper />](https://www.speedtyper.dev/) 132 | 133 | 134 | 개발자들을 위한 코드 타이핑 학습(게임) 도구로, 실제 오픈소스 프로젝트들의 코드들을 사용한다. 속도와 정확성을 기준으로 다른 이들과 경쟁하거나 코드 타이핑 스킬을 스스로 학습해 볼 수도 있다. 135 | 136 | ## [Parallel.js](https://parallel.js.org/) 137 | 138 | Parallel.js는 Node.js와 브라우저 환경에서 간단하게 병렬 작업을 수행할 수 있게 만들어 주는 작은 용량(1.49KB - gzipped)의 라이브러리로, Node.js 환경에서는 child processes, 그리고 웹 환경에서는 웹 워커를 사용한다. 139 | 140 | ## [RunJS](https://runjs.app/) 141 | 142 | 143 | 144 | Javascript 코드를 작성하고 실행시킬 수 있는 데스크톱 애플리케이션이다. 145 | 146 | 기본적으로 typescript를 지원하고 npm 패키지들을 설치해서 사용할 수 있다. 147 | 프로토타이핑이나 테스트 등 간단한 작업에 사용하기 알맞아 보인다. 148 | 149 | 150 | ## [Remotion](https://www.remotion.dev/) 151 | 152 | 153 | 154 | Remotion은 리액트를 사용하여 비디오와 모션 그래픽을 제작할 수 있는 라이브러리다. CSS, Canvas, SVG, WebGL 같은 웹 기술을 사용해 비디오를 만들 수 있다. -------------------------------------------------------------------------------- /issues/2021-05.md: -------------------------------------------------------------------------------- 1 | # 2021-05 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [Real-world CSS vs. CSS-in-JS performance comparison](https://pustelto.com//blog/css-vs-css-in-js-perf/) 6 | 7 | CSS-in-JS는 Front-end 개발 영역에 확고한 한자리를 차지해 나가고 있어 보이며, 특히나 React 영역에서 더 두드러져 보인다. 8 | > 매해 조사되는 "[State of CSS 2020](https://2020.stateofcss.com/en-US/technologies/css-in-js/)" 설문조사에서는 대표적인 CSS-in-JS 도구인 [Styled Components](https://styled-components.com/)를 들어본 적이 없다고 답변한 이는 14.3%에 불과해 CSS-in-JS는 이제 널리 알려진 개발 방식이라 말할 수 있어 보인다. 9 | 10 | 이 글은 주요 CSS-in-JS 라이브러리들에 대한 현실 세계(real-world) 애플리케이션에서의 성능 비교를 소개한다. 그러나 CSS-in-JS는 어떤 식으로든 로딩 성능(JS 파일 크기가 작은 것이 더 나은 성능을 기대)에 영향을 미칠 수밖에 없기 때문에, 로딩 성능에 민감하다면 CSS-in-JS는 여러분의 선택지가 아닐 수도 있다. 11 | 12 | ## [Working With Strings in Modern JavaScript](https://www.baseclass.io/guides/string-handling-modern-js) 13 | 14 | 이 가이드는 JavaScript에서 문자열을 다루기 위해 필요한 모든 내용을 담고 있으며, 문자열의 생성, 조작 그리고 비교 방법에 대한 모든 내용을 다루고 있다. 15 | 16 | ## [Slow and Steady: Converting Sentry’s Entire Frontend to TypeScript](https://blog.sentry.io/2021/04/12/slow-and-steady-converting-sentrys-entire-frontend-to-typescript) 17 | 18 | 19 | 20 | 오류 로깅 플랫폼/도구인 Sentry가 모든 코드 베이스를 JavaScript에서 TypeScript로 전환한 경험을 소개하는 글로, 12명 이상의 엔지니어링 팀이 참여해 1.1k 여개의 파일들에서 95k 라인에 대한 코드들에 대한 작업이 진행되었다고 한다. 21 | 22 | ## [How to actually test UIs](https://storybook.js.org/blog/how-to-actually-test-uis/) 23 | 24 | 25 | 26 | UI를 테스트하는 것은 쉽지 않은 일이다. 매 릴리스마다 새롭고 많은 기능들로 인해 UI와 상태는 비례해서 증가하고, 모든 테스트 도구들은 "쉽고, 빠르고, 잘 흐트러지지 않는" 테스트를 만들 수 있다고 말하지만 현실은 그렇지 않다. 27 | 28 | Storybook 커뮤니티 내의 10개 팀들이 사용하는 UI 테스트 테크닉을 통해 어떻게 실용적인 테스트 전략을 만들 수 있는지를 소개한다. 29 | 30 | ## [[V8 Deep Dives] Random Thoughts on Math.random()](https://apechkurov.medium.com/v8-deep-dives-random-thoughts-on-math-random-fb155075e9e5) 31 | 32 | V8에서 `Math.random`을 ECMA specification부터 `torque`, `C++`로 되어있는 구현 로직을 따라가 본다. 33 | 이를 통해 왜 `Math.random`이 보안상 사용하면 안 되는지 확인해 준다. 34 | 35 | V8에 대해서 관심이 생겼다면 아래 글들을 추가로 읽어볼 것을 추천한다. 36 | * [[V8 Deep Dives] Understanding Array Internal](https://itnext.io/v8-deep-dives-understanding-array-internals-5b17d7a28ecc) 37 | * [[V8 Deep Dives] Understanding Map Internals](https://itnext.io/v8-deep-dives-understanding-map-internals-45eb94a183df) 38 | 39 | 40 | ## [Javascript Closure는 Private 변수 만드는 용도인가?](https://medium.com/naver-place-dev/javascript-closure%EB%8A%94-private-%EB%B3%80%EC%88%98-%EB%A7%8C%EB%93%9C%EB%8A%94-%EC%9A%A9%EB%8F%84%EC%9D%B8%EA%B0%80-d5868489c421) 41 | 42 | 43 | Javascript Closure에 대해서 어떻게 접근하면 좋을지에 대한 좋은 방향을 제시해 준다. 44 | 페이스북 `React Korea`그룹의 댓글에 좋은 의견이 있어 링크를 첨부한다. 45 | https://www.facebook.com/groups/react.ko/permalink/2834835133443307/ 46 | 47 | 48 | ## [입력을 다루는 다양한 방법](https://so-so.dev/react/form-handling/) 49 | 50 | 51 | 52 | React에서는 Form의 수가 많아질수록 코드와 상태 관리가 복잡해지고 어려우며, 성능 문제를 겪을 수 있다. 53 | 이 문제를 해결하기 위해 `useImperativeHandle` , `Uncontrolled Component`을 설명하고, 이런 부분이 고려되어 있는 `react-hook-form`을 소개한다. 54 | 55 | ## [Webpack’s Hot Module Replacement Feature Explained](https://blog.bitsrc.io/webpacks-hot-module-replacement-feature-explained-43c13b169986) 56 | 57 | 58 | Webpack에서 HMR이 왜 생겼는지, HMR이 어떤 방식으로 일어나는지 간단하게 설명하고, 설정하는 방법을 알려준다. 59 | 60 | # 튜토리얼 61 | ## [JavaScript Game For Beginners: Sprite Animation](https://www.youtube.com/watch?v=CY0HE277IBM) 62 | 63 | 64 | 65 | 실제 게임 개발에서 많이 사용하는 Image Sprites 기법을 JavaScript canvas로 구현한 과정을 담은 영상이다. 66 | 해당 유튜브 채널에 Javascript로 만드는 게임, 애니메이션에 대한 자료가 많으니 관심이 있다면 확인해봐도 좋다. 67 | 68 | 69 | # 코드와 도구 70 | 71 | ## [Equality in JavaScript](https://dorey.github.io/JavaScript-Equality-Table/) 72 | 73 | JavaScript 문법을 통해 동등 연산자(`==`)를 수행하는 경우, 생각했던 것과는 다른 당황스러운 결과를 얻게 될 때가 있다. 74 | 75 | ```js 76 | [] == "" // true 77 | [] == 0 // true 78 | undefined == null // true 79 | ... 80 | // 그만 알아보도록 하자. -,- 81 | ``` 82 | 어떤 값과 비교했을 때 true/false 인지 잘 기억나지 않는다면 비교 테이블을 통해 확인해 보자. 83 | 추가로 다양한 사례들과 설명을 모아둔 [wtfjs](https://github.com/denysdovhan/wtfjs)도 확인해 보자. 84 | 85 | ## [Debug Why React (Re-)Renders a Component](https://dev.to/mokkapps/debug-why-react-re-renders-a-component-3i8e) 86 | 87 | 88 | React의 렌더링, Virtual Dom을 간단히 설명하고, 렌더링이 된 이유를 알 수 있는 툴을 알려준다. 89 | * 렌더링을 시각화: [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)의 설정 90 | * 렌더링 된 이유: React DevTools의 Profiler 91 | * hook의 렌더링 된 이유 [Why Did You Render](https://github.com/welldone-software/why-did-you-render) 92 | 93 | 이 글을 통해 React가 Component를 다시 렌더링 하는 이유와 동작을 시각화하고 디버깅하는 방법을 알 수 있다. 94 | 95 | ## [Solving a Mystery Behavior of parseInt() in JavaScript](https://dmitripavlutin.com/parseint-mystery-javascript) 96 | 97 | 98 | `parseInt`가 아래 코드의 경우 의도대로 동작하지 않는 원인을 알아본다. 99 | ```js 100 | parseInt(0.0000005); // => 5 101 | parseInt(999999999999999999999); // => ? 102 | ``` 103 | 104 | ## [Using the Switch(true) Pattern in JavaScript](https://seanbarry.dev/posts/switch-true-pattern) 105 | switch true 패턴에 대해서 설명하고 이것이 언제 유용한지 알려준다. 106 | 107 | ```js 108 | switch (true) { 109 | case !user: 110 | throw new Error("User must be defined."); 111 | case !user.firstName: 112 | throw new Error("User's first name must be defined"); 113 | case typeof user.firstName !== "string": 114 | throw new Error("User's first name must be a string"); 115 | // ...lots more validation here 116 | default: 117 | return user; 118 | } 119 | ``` 120 | 121 | ## [Thunder Client](https://github.com/rangav/thunder-client-support) 122 | 123 | 124 | 125 | VS Code 플러그인으로 Rest API 클라이언트 도구로 유명한 [Postman](https://www.postman.com/)과 유사한 기능들을 제공한다. 126 | 127 | ## [Pkg](https://github.com/vercel/pkg) 128 | 129 | 130 | 131 | Next.js를 개발한 Vercel에서 개발한 도구로, 개발한 Node.js 패키지를 Node.js가 설치되지 않은 환경에서도 실행 가능한 파일로 만들어 준다. 132 | 133 | ## [Appsmith](https://github.com/appsmithorg/appsmith) 134 | 135 | 136 | 137 | JavaScript 기반의 비주얼 개발 플랫폼으로 내부 도구들을 빠르고 쉽게 만들 수 있게 한다. 빌트인 된 위젯들을 드래그 드롭으로 끌어다 놓은 후, 서비스의 API를 연결하는 것만으로 상호작용하는 페이지를 생성할 수 있다. 138 | -------------------------------------------------------------------------------- /issues/2021-06.md: -------------------------------------------------------------------------------- 1 | # 2021-06 2 | 3 | # 링크 & 읽을거리 4 | ## [Design Systems Repo](https://designsystemsrepo.com/) 5 | 6 | 7 | 8 | 최근 들어 디자인 시스템에 대한 관심이 많아지고 있고, 그에 비례해 다양한 디자인 시스템들이 공개되고 있다. 그러나 잘 만들어진 디자인 시스템을 검색하고 찾아보는 것은 쉽지 않다. 9 | 10 | Design System Repo에서는 여러분들이 영감받을 수 있는 큐레이션 된 다양한 디자인 시스템 목록과 스타일 가이드, 패턴 라이브러리 그리고 관련 문서와 컨퍼런스 등, 디자인 시스템과 관련된 방대한 리소스 들을 찾아볼 수 있다. 11 | 12 | ## [Implementing Private Fields For JavaScript](https://www.mgaudet.ca/technical/2021/5/4/implementing-private-fields-for-javascript) 13 | 14 | Firefox JavaScript 엔진인 [SpiderMonkey](https://spidermonkey.dev/) 팀에서 일하고 있는 저자는 새로운 JavaScript 언어의 기능을 구현할 때 제정된 명세의 구현 과정에서의 현실적 어려움(언어 규격을 벗어나는 등의)을 다루는 글이다. 15 | 16 | 저자는 class field proposal을 통해 제안된 [Private fields](https://github.com/tc39/proposal-class-fields#private-fields) 예를 통해 명세와 구현의 현실적 차이를 설명한다. 17 | 18 | ## [A JavaScript optimizing compiler](https://medium.com/leaningtech/a-javascript-optimizing-compiler-3fd3f49bd071) 19 | 20 | 21 | 22 | JavaScript 코드를 최적화된 JavaScript로 컴파일 하는 실험적 시도에 관한 흥미로운 글로, 대상 JavaScript 코드를 LLVM 중간 표현식(Intermediate Representation)으로 변환한 후, 최적화된 IR(중간 표현식)을 통해 다시 JavaScript 코드를 생성하는 접근 방식을 취한다. 23 | 24 | > 최적화에 대한 결과는 아래 링크를 통해 직접 벤치마크를 수행해 볼 수 있다.
25 | > https://carlopi.github.io/js-opt-benchmark/ 26 | 27 | ## [Past, Present, and Future of React State Management](https://leerob.io/blog/react-state-management) 28 | 29 | 2013년 등장한 React는 UI의 상태를 표현하는 함수라는 패러다임 전환을 가져왔고, React는 컴포넌트가 어떻게 보이게 될지를 상태에 기반해 처리한다. 이처럼 React는 '상태'라는 아이디어에 기반해 만들어졌다 할 수 있다. 30 | 31 | 글의 저자는 과거와 오늘날에 이르기까지 등장했던 다양한 상태 관리자들과 기본적 개념들과 어떤 문제들을 해결하고자 했는지를 포괄적으로 다루고 있다. 32 | 33 | ## [Google I/O 2021: Web 영역](https://events.google.com/io/program/content?4=topic_web&lng=ko) 34 | 35 | 구글의 연례 개발자 행사인 Google I/O 2021이 지난 5월 18일 ~ 20일, 3일간 진행되었고, 다채로운 내용들이 발표되었다. 36 | Front-end 영역 관점에서, 웹 영역 세션들을 통해 구글이 어떤 기술 영역에 집중하고 있는지를 가늠해 볼 수 있다. 37 | 38 | ## [라이트하우스 성능 지표 살펴보기](https://medium.com/jung-han/%EB%9D%BC%EC%9D%B4%ED%8A%B8%ED%95%98%EC%9A%B0%EC%8A%A4-%EC%84%B1%EB%8A%A5-%EC%A7%80%ED%91%9C-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0-83df3dc96fb9) 39 | 40 | 41 | 42 | 웹 품질 측정을 위한 도구로는 여러 도구가 있겠지만, 그중 가장 유명한 것은 단연 구글에서 제공하는 Lighthouse 일 것이다. 43 | 44 | Lighthouse를 이용하면 어렵지 않게 웹 품질을 측정하고 확인할 수 있는데, 이때 측정 결과는 여러 지표들의 점수로서 나타나게 된다. 각 지표의 점수가 높을수록 좋다는 것은 직관적으로 알 수 있지만, 각 지표의 정확한 의미를 알기는 조금 어려울 수 있다. 45 | 46 | 본 글에서는 Lighthouse의 각 지표들의 의미를 그림과 함께 알기 쉽게 설명하여 이해를 돕는다. 47 | 48 | ## [Software Engineering at Google](https://abseil.io/resources/swe-book) 49 | 50 | 51 | O'Reilly에서 출간한 Software Engineering at Google 책이 PDF 파일로 무료 공개되었다. 52 | 53 | 소프트웨어 엔지니어링이란 무엇인가라는 근본적인 내용부터 시작하여 팀으로 일하기, 지식 공유하기 등 전반적인 소프트웨어 엔지니어링에 대해 다룬다. 54 | 55 | ## [Journey of Improving React App Performance by 10x](https://medium.com/technogise/journey-of-improving-react-app-performance-by-10x-9195d4b483d4) 56 | 57 | 58 | React Application의 성능을 향상시켰던 방법을 알려준다. 59 | * `render`에서 inline 함수 제거 60 | * 상태가 변경되는 경우만, Redux Store 업데이트 61 | * 조건부 렌더링 적용 62 | * 불필요한 `await`을 제거하고 적용 가능하면 `Promise.all()` 사용 63 | 64 | ## [The future of Internet Explorer on Windows 10 is in Microsoft Edge](https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/) 65 | 66 | MS에서 Windows 데스크톱의 IE 지원을 2022년 6월 15일부로 종료하겠다고 공식 발표하였다. 67 | 68 | ## [Modern Javascript: Everything you missed over the last 10 years (ECMAScript 2020)](https://turriate.com/articles/modern-javascript-everything-you-missed-over-10-years) 69 | ECMAScript는 매년 새 버전을 발표하며 빠르게 변화하고 있어 최신 기술 스펙을 놓치기에 십상이다. 최근 10년 동안의 새로 발표된 내용들을 한곳에 모아 보기 쉽게 정리한 글이다. 70 | 71 | # 튜토리얼 72 | ## [Learn CSS](https://web.dev/learn/css/) 73 | 74 | 구글의 [web.dev](https://web.dev/) 팀에서 공개한 튜토리얼로, CSS의 기본적인 내용들을 이해하기 쉽게 항목들을 세분화하고 CSS를 효과적으로 사용하는 방법을 설명한다. 박스 모델, 셀렉터, 크기 단위, 플렉스 박스, 가상 요소/클래스 등 거의 모든 CSS 스펙들을 다루며, 각각의 항목들은 관련 podcast와 인터랙티브 데모가 제공된다. 75 | 76 | ## [Building A Rich Text Editor (WYSIWYG)](https://www.smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/) 77 | 78 | 79 | 80 | 커스텀 가능한 리치 텍스트 편집기를 만들 수 있는 JavaScript 라이브러리 [Slate](https://github.com/ianstormtaylor/slate)를 사용해 위지윅(WYSIWYG) 편집기를 구현하는 방법을 상세히 설명한다. 81 | 82 | ## [How to Create Actions for Selected Text With the Selection API](https://css-tricks.com/how-to-create-actions-for-selected-text-with-the-selection-api/) 83 | 84 | 85 | 86 | 텍스트 에디터에서 문장 선택 시, 선택 영역 위에 메뉴가 나타나는 것을 본 적이 있을 것이다. 웹에서는 어떻게 이것을 구현할 수 있을까? 다소 생소할 수 있는 API인 Selection API를 이용하여 이를 웹에서 구현하는 방법을 설명한다. 87 | 88 | ## [Coding Fantasy: Learn Flexbox by Playing a Coding Game](https://codingfantasy.com/) 89 | 90 | 91 | 92 | flexbox를 이용하면 레이아웃 작업을 비교적 쉽게 진행할 수 있다. 게임을 통해 flexbox 개념을 학습할 수 있도록 돕는다. 93 | 94 | ## [Get Started With React By Building A Whac-A-Mole Game](https://www.smashingmagazine.com/2021/05/get-started-whac-a-mole-react-game/) 95 | 96 | 97 | 98 | React를 이용해 두더지 잡기(Whac-A-Mole) 게임을 만들어본다. React의 기초부터 하나씩 구현을 진행한다. 기초 개념들도 함께 설명해 주기 때문에 React 입문자도 따라 해보기 좋다. 99 | 100 | # 코드와 도구 101 | ## [React Notion X](https://github.com/NotionX/react-notion-x) 102 | 103 | 104 | 105 | 인기를 끌고 있는 메모 애플리케이션인 Notion의 콘텐츠를 React로 렌더링 할 수 있게 하는 TypeScript로 작성된 도구다. 106 | 107 | ```js 108 | # 1) Notion 콘텐츠를 얻어온다. 109 | import { NotionAPI } from 'notion-client' 110 | 111 | const notion = new NotionAPI() 112 | const recordMap = await notion.getPage('067dd719a912471ea9a3ac10710e7fdf') 113 | 114 | # 2) 얻어온 콘텐츠를 React를 통해 렌더링한다. 115 | import React from 'react' 116 | import { NotionRenderer } from 'react-notion-x' 117 | 118 | export default ({ recordMap }) => ( 119 | 120 | ) 121 | ``` 122 | 123 | 예를 들어, 다음의 Notion 콘텐츠를 124 | - https://www.notion.so/Notion-Kit-Test-Suite-067dd719a912471ea9a3ac10710e7fdf 125 | 126 | React 애플리케이션에서 로딩해 다음과 같이 웹사이트를 만들 수 있다. 127 | - https://react-notion-x-demo.transitivebullsh.it/ 128 | 129 | ## [Map of JavaScript](https://github.com/mechaniac/Map-of-Javascript) 130 | 131 | 132 | 133 | JavaScript와 HTML, DOM 그리고 JavaScript에서의 데이터구조와 알고리즘을 각각 한장의 Map 이미지 형태로 확인해 볼수 있다. 134 | 135 | ## [WWIT](https://wwit.design/) 136 | 137 | 최신 iOS 앱들의 UI 디자인 패턴들의 스크린숏 모음을 제공하는 [Mobbin](https://mobbin.design/)에 영감을 받은 `WWIT(What Was IT)`은 한국에서 개발된 iOS 모바일 디자인 패턴들에 대한 스크린숏을 모아서 볼 수 있도록 제공한다. 138 | 139 | iOS 앱들이라 하더라도 많은 경우 상세 화면들은 웹뷰를 통해 구현되는 경우가 많아, Front-end 관점에서도 UI/UX에 대한 영감을 얻을 수 있어 참고할만하다. 140 | 141 | ## [Screen Sizes](https://www.screensizes.app/) 142 | 143 | 다양한 Apple 기기들에 대한 세밀한 디스플레이 정보를 한눈에 확인해 볼 수 있다. 144 | 145 | ## [CSS Hell](https://csshell.dev/) 146 | 147 | 일반적인 CSS 오류들에 대한 모음과 수정 방법을 제공한다. 148 | 149 | ## [Introducing WebContainers: Run Node.js natively in your browser](https://blog.stackblitz.com/posts/introducing-webcontainers/) 150 | 151 | 152 | 153 | Node.js 환경을 브라우저에서 실행할 수 있게 되었다. 심지어 로컬 환경보다 빌드 및 패키지 설치가 빠르며, 브라우저 샌드박스 안에서 실행되므로 안전하다고 한다. 154 | 155 | public beta 버전이긴 하나, [이곳](https://stackblitz.com/)에서 직접 사용해 볼 수 있다. 156 | -------------------------------------------------------------------------------- /issues/2021-09.md: -------------------------------------------------------------------------------- 1 | # 2021-09 2 | 3 | # 링크 & 읽을거리 4 | ## [FE devtalk 20회, 디자인 시스템 개발 편 2탄](https://d2.naver.com/news/0267195) 5 | 6 | 7 | 지난 8월 17일, 네이버에서 진행하는 사내 프론트엔드 컨퍼런스인 FE Devtalk에서 "디자인 시스템(개발편 2탄)"란 주제로 20회 행사가 진행되었다. 8 | 9 | 쏘카, 뱅크샐러드, 카카오 엔터프라이즈, 직방과 같은 인터넷 서비스 회사들이 자체적인 디자인 시스템을 어떻게 기획/디자인/개발/협업하고 있을까 라는 궁금증으로 시작된 이 주제는 3회에 걸쳐 진행되면서 그 이야기들을 풀어내고 있다. 10 | 11 | 이번 20회에선 코멘토, 코발트, 와디즈, 직방의 개발자들이 참여해 디자인 시스템 개발에 대한 경험을 공유했다. 아래 링크에서 발표들을 확인해 볼 수 있다. 12 | 13 | - [17회 - 디자인 시스템(기획자, 디자이너 편) - 리디, 소카, 마이리얼트립](https://github.com/NAVER-FEPlatform/FEDevtalk/blob/master/17_fedevtalk.md) 14 | - [19회 - 디자인 시스템(개발편 1탄) - 다노, 뱅크샐러드, 카카오엔터프라이즈](https://github.com/NAVER-FEPlatform/FEDevtalk/blob/master/19_fedevtalk.md) 15 | - [20회 - 디자인 시스템(개발편 2탄) - 코멘토, 코발트, 와디즈, 직방](https://github.com/NAVER-FEPlatform/FEDevtalk/blob/master/20_fedevtalk.md) 16 | 17 | 18 | ## [TensorFlow로 디자인시스템 만들기](https://judepark-6960.medium.com/a-design-system-made-with-tensorflow-js-8f6c567e9593) 19 | 20 | 21 | 디자인 시스템을 실제로 만드는 디자이너의 입장에서 매번 고통스럽게 반복해야하는 작업이 많다. 22 | 23 | 이를 Zeplin과 tensorflow.js의 객체인식(Object Detection)을 사용해 문제를 해결했던 프로젝트에 대해 소개하고 있다. 24 | 25 | [Zeplin-ML](https://github.com/dusskapark/zeplin-ml)라는 이 프로젝트는 스크린 디자인들에서 UI객체를 찾아주는 기능을 제공하며, 그것을 비교하기 쉽게 컴포넌트 라이브러리 화면들도 제공한다. 26 | 27 | ## [JavaScript vs JavaScript. Fight!](https://dev.to/this-is-learning/javascript-vs-javascript-fight-53fa) 28 | 29 | 30 | 31 | 소프트웨어 개발을 하면서 우리들은 결과적으로 동일한 것을 수행하지만, 자신들의 것이 최고라고 홍보하는 수많은 라이브러리와 도구들 중에서 32 | 그들의 장단점을 비교하고 선택하는 과정을 거친다. 그러나 때때로 차별화 요소는 우리가 성취하고자 하는 것과 덜 관련이 있고, 33 | 단점들이 무엇인지 항상 명확하지는 않다. 이런 것들이 정말 중요한 것들일까? 34 | 35 | 한 번쯤은 다들 고민해 봤을 주제들인 MPA vs SPA, React vs Reactivity, VDOM vs No VDOM, Components vs Web Components 등의 36 | 논점들이 무엇이고 어떠한 점을 고려해야 할지 살펴볼 수 있다. 37 | 38 | 39 | ## [Modern web apps without JavaScript bundling or transpiling](https://world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755) 40 | 41 | 2000년대 RJS (Ruby-to-JavaScript)나 CoffeeScript 등을 통해 JavaScript가 아닌 다른 언어로 JavaScript 코드를 생성해 낼수 있게 되었고, 이후 2015년 ES6로의 발전을 통해 더 나은 JavaScript 코드를 작성할 수 있게 되었고, 최신 문법의 브라우저 지원을 기다릴 필요 없이 Babel이 미래의 최신 문법의 코드를 즉시 사용할 수 있게 만들어 주었다. 그러나 이는 공짜가 아니었고, 웹의 복잡성을 수반하게 만들었다. 42 | 43 | 오늘날의 웹 환경에서 transpiler나 번들링 도구가 꼭 필요한 것일까? 44 | 45 | ## [CSS module scripts: `import` stylesheets like JavaScript modules](https://blogs.windows.com/msedgedev/2021/08/17/css-module-scripts-import-stylesheets-like-javascript-modules/) 46 | 47 | CSS 파일을 ESM과 같이 import 문법으로 로딩할 수 있게 하는 [CSS module script](https://chromestatus.com/feature/5948572598009856) 지원이 Edge와 Chrome 93에 추가될 예정이다. 48 | 49 | ```js 50 | import sheet from './styles.css' assert { type: 'css' }; 51 | 52 | document.adoptedStyleSheets = [sheet]; 53 | shadowRoot.adoptedStyleSheets = [sheet]; 54 | ``` 55 | 56 | > 보다 자세한 CSS Module Script에 대한 내용은 다음 링크를 참고하라. 57 | > - [Using CSS Module Scripts to import stylesheets](https://web.dev/css-module-scripts/) 58 | 59 | ## [Node v16.8.0 (Current) Released ](https://nodejs.org/en/blog/release/v16.8.0/) 60 | Node V16.8.0이 릴리즈 되었다. 61 | [V16.6.0](https://nodejs.org/en/blog/release/v16.6.0/)버전 부터는 `Array.prototype.at` 이 사용 가능하다. 더이상 `array[array.length-1]` 로 마지막 원소를 찾아갈 필요가 없다. `array.at(-1)` 이면 끝! 62 | 63 | ## [A Visual Guide to React Rendering - useMemo ](https://alexsidorenko.com/blog/react-render-usememo/) 64 | props가 바뀌지도 않았는데 자식 컴포넌트가 리렌더링되는 현상의 이유와 useMemo를 통한 해결과정을 알려주는 가이드이다. 의도치 않은 리렌더링으로 고생한 경험이 있다면 1독을 권한다. 65 | 66 | ## [Headless UI Library란?](https://jbee.io/react/headless-concept/) 67 | 68 | 69 | 70 | 컴포넌트를 라이브러리로 개발할 때에 Headless로 구현하면 어떤 점이 좋아지는지 그리고 어떻게 작성할 수 있는지에 대해 설명하고 있다. 71 | 72 | 여기서 Headless(또는 Renderless)란 컴포넌트 라이브러리에서 스타일을 담당하는 부분을 제외하고 상태와 관련된 부분만을 다루는 것을 말한다. 73 | 74 | ## [Typescript 4.4에 추가된 기능](https://velog.io/@yrnana/Typescript-4.4%EC%97%90-%EC%B6%94%EA%B0%80%EB%90%9C-%EA%B8%B0%EB%8A%A5) 75 | 76 | TypeScript 4.4에 추가된 기능에 대해 예시를 통해 설명한 글이다. 77 | class에서 static 블록을 사용할 수 있는 기능이 추가되었다. 또한, 기존에는 Type Guard를 통해 해결했던 문제를 4.4에서는 "alias 된 조건문과 판별문 흐름 분석"을 통해 좀더 쉽게 타입 추론을 할 수 있다. 78 | 79 | - [TypeScript 4.4 공식 릴리즈 문서](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/) 80 | 81 | 82 | ## [Guideline from the 70's on how to split your React components](https://joaoforja.com/blog/guideline-on-how-to-decompose-a-react-component) 83 | 84 | 85 | 86 | 컴포넌트를 어떻게 나눌지 결정하는 것은 쉬운 일이 아니다. 이 글은 David Parnas의 1979년 “Designing Software for Ease of Extension and Contraction”에서 얻은 아이디어에 기초하여, 코드의 재사용성을 높이고 유지보수 비용을 줄이는 측면에서 어떻게 컴포넌트를 나눌 수 있을지 가이드라인을 제시한다. 87 | 88 | ## [What’s the Average JavaScript Developer Salary in 2021?](https://www.daxx.com/blog/development-trends/javascript-market-trends-average-salaries) 89 | 90 | 91 | 92 | 자바스크립트와 웹 생태계의 부흥에 따라 수 많은 프레임워크가 등장했고 최근에는 React, Angular, Vue 3강 구도가 유지되고있다. 각 프레임워크 별 연봉은 어떻게 될까? 93 | 94 | 위 글에서는 자바스크립트 개발자의 연봉과 프레임워크 별 연봉을 서구권 국가 위주로 통계를 내서 정리해놓았다. (아쉽게도 대한민국의 통계는 없다.) 95 | 96 | # 튜토리얼 97 | ## [Vanilla Javascript로 상태관리 시스템 만들기](https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Store) 98 | Flux 기반의 Redux, Vuex의 상태 관리 라이브러리를 Vanilla JS를 이용해서 만들어 가는 튜토리얼 문서이다. 99 | Observer pattern, 그리고 상태 변화를 인지할 수 있는 Object.defineProperty, proxy 등을 소개하면서 간단한 상태 관리 라이브러리를 만들어 볼 수 있다. 100 | 실무에서 상태 관리 라이브러리를 사용하기 전에 한 번씩 따라 해 보면 좋은 학습이 될 것이다. 101 | 102 | ## [How to Make your React App a Progressive Web App(PWA)](https://felixgerschau.com/how-to-make-your-react-app-a-progressive-web-app-pwa/) 103 | 104 | React 앱을 PWA로 만들어가는 과정을 단계별로 서술한 튜토리얼이다. 105 | PWA를 만져보고 싶지만 어떻게 시작해야 할지 모르는 상태에서 글을 한번 따라 해 보면 PWA에 대한 이해를 높일 수 있을 것이다. 106 | 튜토리얼을 따라 하지 않고 PWA와 Service Worker에 대한 설명만 읽어보아도 PWA에 대한 감을 잡을 수 있다. 107 | 108 | 109 | # 코드와 도구 110 | ## [JS is weird](https://jsisweird.com/) 111 | JavaScript를 더 어렵게 만드는 이상한 문법 25개를 풀 수 있다. 112 | 113 | 심심풀이로 풀어보고 실무에서는 이와 같은 혼란스러운 문법을 가급적 지양해야겠다. 114 | 115 | ## [React Suite](https://rsuitejs.com/) 116 | 117 | 118 | 119 | React Suite는 기업용 제품을 위한 오픈소스 리액트 컴포넌트 라이브러리다. 좋은 개발 경험을 제공하는 데에 초점을 두었다. [링크](https://rsuitejs.com/design/default/)와 같이 각 컴포넌트의 디자인 프로토타입과 명세도 제공한다. 120 | 121 | ## [WEBRIX](https://github.com/open-amdocs/webrix) 122 | 123 | 124 | Bootstrap이나 Material-UI와 같은 컴포넌트 프레임워크(또는 라이브러리)를 도입해 웹서비스를 개발하면 초기에 빠르게 서비스를 만들 수 있다는 장점이 있다. 125 | 126 | 하지만 컴포넌트를 커스터마이징을 하려고 하거나, 서비스가 발전해 자체적인 디자인 시스템을 구축한다고 했을 때 위와 같은 프레임워크의 도입이 부담이 될 수 있다. 127 | 128 | 그렇다고 하나부터 열까지 컴포넌트를 자체적으로 개발하는 것 또한 낭비적인 부분이 생긴다. 129 | 130 | 이를 해결해 줄 수 있는 솔루션이 바로 WEBRIX이다. 131 | 132 | WEBRIX 는 ``, ``, ``, ``, ``, ``, ``, `` 와 같이 기능적 부분에 포커스 된 컴포넌트들을 제공한다. 서비스 개발자는 컴포넌트의 presentaion 적인 부분만 신경 써서 개발하면 된다. 133 | 134 | ## [wavesurfer.js](https://github.com/katspaugh/wavesurfer.js) 135 | 136 | 137 | Web Audio API와 CANVAS로 audio리소스를 시각화하고 탐색할 수 있는 라이브러리다. 138 | ## [WinXP](https://github.com/ShizukuIchi/winXP) 139 | 140 | 141 | Windows XP 운영체제의 몇가지 기능과 간단한 앱들을 React와 hooks를 사용해서 구현한 프로젝트이다. 142 | 윈도우에서 친숙한 인터렉션을 어떻게 구현했는지 코드를 통해 살펴볼 수 있다. 143 | 144 | ## [macos-web](https://github.com/PuruVJ/macos-web) 145 | 146 | 147 | 이번엔 MacOS 운영체제다. Svelte로 작성되었다. 코드를 통해 MacOS의 인터렉션을 어떻게 구현했는지 확인할 수 있다. 148 | -------------------------------------------------------------------------------- /issues/2021-10.md: -------------------------------------------------------------------------------- 1 | # 2021-10 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [SELF-PARKING CAR IN 500 LINES OF CODE](https://trekhleb.dev/blog/2021/self-parking-car-evolution/) 6 | 7 | 8 | 9 | [Self-Parking Car Evolution](https://github.com/trekhleb/self-parking-car-evolution) 프로젝트는 유전 알고리즘([Genetic Algorithm](https://en.wikipedia.org/wiki/Genetic_algorithm))의 기본 작동 원리를 학습하기 위한 목적의 프로젝트다. 이를 위해 자동차의 자율 주차 학습 과정을 통해 접근하며, 이 글은 500 라인의 코드를 통해 자율주차 학습 과정을 단계별로 설명한다. 10 | 11 | > [Self-Parking Car Evolution 시뮬레이터](https://trekhleb.dev/self-parking-car-evolution/)를 통해 브라우저에서 과정을 시뮬레이션 해 볼 수 있다. 12 | 13 | ## [Gatsby 4 Beta released](https://www.gatsbyjs.com/gatsby-4/) 14 | 15 | 16 | 17 | Gatsby는 리액트와 GraphQL 기반의 정적 웹사이트를 생성할 수 있는 프레임워크로 4.0 베타 버전이 릴리즈되었다. 18 | 19 | 다음과 같은 기능들이 추가되었다. 20 | 21 | - Server side rendering: 이제 Gatsby에서도 런타임에 데이터를 요청하고 렌더 할 수 있다. 22 | - Deferred static generation: 모든 페이지를 빌드 타임에 생성하지 않고, 어떤 페이지는 빌드 타임에, 어떤 페이지는 런타임에 생성되도록 할 수 있다. 23 | - Parallel processing: 멀티프로세싱을 함으로써 SSG(Static site generation) 빌드 시간을 획기적으로 줄였다. 24 | 25 | ## [Interactive Learning Tools For Front-End Developers](https://www.smashingmagazine.com/2021/09/interactive-learning-tools-front-end-developers/) 26 | 27 | 28 | 29 | CSS, JavaScript, 리액트, 정규표현식, SQL 등을 게임같이 재밌게 학습할 수 있는 웹사이트들을 모아두었다. 30 | 31 | ## [React 상태 관리 라이브러리 Zustand의 코드를 파헤쳐보자](https://ui.toast.com/weekly-pick/ko_20210812) 32 | 33 | 34 | 35 | TOAST UI Calendar에서 애플리케이션의 상태를 효과적으로 다루는 상태 관리 도구를 만들어 보려는 과정에서 찾게 된 Zustand에 대해서 상세히 알려준다. 36 | 왜 Zustand를 선택하게 되었고, 그리고 내부 동작원리까지 잘 설명해 주고 있다. 37 | 38 | ## [Stop Using Atomic Design](https://jbee.io/react/stop-using-atomic-design/) 39 | 40 | 41 | 42 | 컴포넌트 기반의 웹 개발을 하면서 많은 이야기가 이루어지고 사용되는 개념 중에 [Atomic Design](https://atomicdesign.bradfrost.com/table-of-contents/)이 있다. 43 | 44 | 이 글에서는 상대적으로 순수하지 않고, 유용하지 않다는 Atomic Design의 단점을 설명하면서 변경에 유연하게 대응할 수 있도록 컴포넌트를 설계해야 한다고 말하고 있다. 다음 글인 [변경에 유연한 컴포넌트](#변경에-유연한-컴포넌트)로 이어진다. 45 | 46 | ## [변경에 유연한 컴포넌트](https://jbee.io/web/components-should-be-flexible/) 47 | 48 | 우리가 작성하는 소프트웨어는 지속 가능해야 한다. 작성하는 코드는 예상할 수 없는 변경에 그나마 유연하게 대응할 수 있어야 한다. 49 | 50 | 이 글에서는 다음과 같은 변경에 유연한 컴포넌트를 개발하기 위한 방법론을 제시한다. 51 | 52 | 1. 컴포넌트는 **데이터**와 **역할**을 중심으로 추상화한다. 53 | 2. **일반적인 인터페이스**로 컴포넌트를 설계한다. 54 | 55 | ## [Performance Monitoring in GraphQL](https://blog.sentry.io/2021/08/31/guest-post-performance-monitoring-in-graphql) - Sentry, Apollo Server 56 | 57 | 58 | 59 | 60 | BFF에서 GraphQL의 사용을 위해 많은 오픈 소스 중 하나인 [Apollo Server](https://www.apollographql.com/docs/apollo-server/)를 많이 선택한다. 61 | 또, [Sentry](https://sentry.io/)는 에러 트래킹 서비스로 FE의 모니터링뿐만 아니라 BE의 모니터링도 가능하다. 62 | 이 글에서는 [Apollo Server의 Plugin 기능](https://www.apollographql.com/docs/apollo-server/v2/integrations/plugins/)을 이용해 Sentry를 통해 resolver 단위로 성능을 측정할 수 있는 방법을 안내해 준다. 63 | 64 | ## [How To Study Design Patterns as a Web Developer](https://medium.com/arctouch/how-to-study-design-patterns-as-a-web-developer-e54284958e48) 65 | 66 | 67 | 68 | 대부분 디자인 패턴의 내용은 OOP 기반 언어에 영향을 많이 받아 그 아이디어에 많이 젖어있다. 그렇기 때문에 다른 언어 개발자에 비해 class 사용이 적은 프론트엔드 개발자는 거의 대부분 OOP 기반으로 작성된 문서들이 어색하게 느껴질 수 있다. 69 | 이에 대해 저자는 클래스와 객체는 도구일 뿐이며 디자인 패턴은 문제와 솔루션을 설명한다는 것 그 자체임을 강조하면서, 패턴을 적용하고 함수형으로 발전시키는 과정을 예시로 상세하게 보여준다. 70 | 71 | ## [Does for-loop Nesting Order Affect Performance?](https://bytefish.medium.com/does-for-loop-nesting-order-affect-performance-dbc677217e66) 72 | 73 | 74 | 75 | 중첩 for loop에서 순서에 따라 성능이 달라질 수 있을까? 결론부터 말하면 loop 횟수가 많은 for loop를 안쪽에 위치시킬수록 성능이 좋다고 한다. 76 | 실무에서는 이런 경우가 거의 발생하진 않겠지만 참고용으로 봐두면 좋을 듯하다. 77 | 78 | # 튜토리얼 79 | 80 | ## [The Super Tiny Compiler](https://github.com/jamiebuilds/the-super-tiny-compiler) 81 | 82 | 83 | 84 | 읽기 쉬운 JavaScript로 작성된 현대 컴파일러의 주요 부분들에 대해 매우 간단하게 작성된 예제다. 코드와 코드 내의 주석을 통해 현대 컴파일러가 어떻게 동작하는지 학습할 수 있다. 85 | 86 | > 준비가 되었다면, [1k 라인의 코드](https://github.com/jamiebuilds/the-super-tiny-compiler/blob/master/the-super-tiny-compiler.js)를 통해 학습을 시작할 수 있다. 87 | 88 | > [[참고]한글 번역](https://github.com/hg-pyun/the-super-tiny-compiler-kr) 89 | 90 | ## [A JavaScript developer’s guide to browser cookies](https://prateeksurana.me/blog/javascript-developer-guide-to-browser-cookies/) 91 | 92 | 93 | 94 | 브라우저에서 쿠키 작동 방식, 클라이언트와 서버에서 쿠키에 액세스하고 조작할 수 있는 방법, 브라우저의 속성을 사용하여 쿠키의 가시성을 제어하고 쿠키를 보다 안전하게 만드는 방법에 대해 설명한다. 95 | 96 | ## [How to use React Context like a pro](https://devtrium.com/posts/how-use-react-context-pro) 97 | 98 | 리액트의 내장 Context API는 현재 매우 유용하게 쓰이고 있다. 99 | 100 | 이 글에서는 Context API를 프로처럼 사용할 수 있는 여러 패턴을 코드와 함께 설명한다. 101 | 102 | ## [Event Bubbling and Event Catching in JavaScript and React – A Beginner's Guide](https://www.freecodecamp.org/news/event-propagation-event-bubbling-event-catching-beginners-guide/) 103 | 104 | 105 | 106 | 이 튜토리얼은 JavaScript와 리액트에서 이벤트 전파가 어떻게 이루어지는지 이해하기 쉽게 설명한 글이다. 107 | 108 | # 코드와 도구 109 | 110 | ## [Partytown](https://github.com/BuilderIO/partytown) 111 | 112 | 113 | 114 | 실험적 도구인 Partytown은 AngularJS를 개발했던 [Miško Hevery](http://misko.hevery.com/about/)가 CTO로 일하고 있는 [Builder.io](https://www.builder.io/)에서 개발한 lazy 로딩되는 6kb의 라이브러리로, 리소스를 많이 사용하는 스크립트(또는 서드파티)를 web worker에 재배치해 메인 스레드 부담을 덜어주고 여러분의 코드가 빠르게 실행될 수 있도록 만들어 줄 수 있다. 115 | 116 | ### [어떻게 동작할까?](https://github.com/BuilderIO/partytown/tree/v0.0.3#how-does-it-work) 117 | 118 | 1. 스크립트들은 메인 스레드에서 실행되지 않도록 `type="text/partytown"`으로 설정 119 | 2. Service Worker의 `onfetch` 핸들러 설정을 통해 특정 요청을 가로채게 한다. 120 | 3. Worker 스레드 내에서 실행될 스크립트가 Web Worker에게 전달 121 | 4. Web Worker는 JavaScript [Proxy들을 생성](https://github.com/BuilderIO/partytown/blob/9e8b10d4db995153d5dec74650486b2306ad0473/src/lib/web-worker/worker-proxy.ts#L212)해 메인 스레드 API(DOM 조작 등의) 호출을 복제하고 전달한다. 122 | 5. JS 프록시에 대한 요청은 [동기 XHR 호출](https://github.com/BuilderIO/partytown/blob/9e8b10d4db995153d5dec74650486b2306ad0473/src/lib/service-worker/sync-send-message-to-main-sw.ts#L9)을 사용 123 | 6. Service Worker는 요청을 가로챈 다음, 메인 스레드와 비동기 통신을 한다. 124 | 7. 이후, Service Worker가 메인 스레드로부터 결과를 전달받아 Web Worker 요청에 응답한다. 125 | 8. Web Worker에서 실행되는 코드 관점에서 본다면, 모든 것은 동기화되었고, 그리고 각각의 document 호출은 차단되었다. 126 | 127 | > 보다 자세한 내용은 다음 링크들을 참고하라. 128 | > 129 | > - [Introducing Partytown: Run Third-Party Scripts From a Web Worker](https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp) 130 | > - [Miško Hevery가 설명하는 Partytown](https://youtu.be/zqOnySYnGrQ?t=115) 131 | 132 | ## [Theatre.js](https://github.com/ariaminaei/theatre) 133 | 134 | 135 | 136 | 웹에서 사용할 수 있는 모션 디자인 에디터로 프로그램적으로 또는 시각적 도구를 통해 편집할 수 있다. 137 | 138 | > [온라인 데모](https://theatrejs-demo.netlify.app/) 139 | > 좌측 하단의 버튼을 클릭해 비주얼 편집 도구를 열 수 있다. 140 | 141 | ## [Ackee: A Self-Hosted, Node-Based Web Analytics Tool](https://github.com/electerious/Ackee) 142 | 143 | 144 | 145 | Ackee는 Node.js 기반의 웹사이트의 트래픽을 분석하고 유용한 통계를 제공해주는 도구다. 146 | 147 | 직접 호스팅할 수 있으며 여러 환경에서 설치할 수 있는 가이드를 제공하고 있다. 148 | 149 | ## [Tasuku (タスク): A Minimal Task Runner for Node](https://github.com/privatenumber/tasuku) 150 | 151 | 152 | 153 | Tasuku는 Node.js를 위한 태스크 러너다. 154 | 155 | 태스크를 라벨링 할 수 있고, 성공, 실패, 로딩 중 등의 상태를 터미널에 표시할 수 있다. 156 | -------------------------------------------------------------------------------- /issues/2021-11.md: -------------------------------------------------------------------------------- 1 | # 2021-11 2 | 3 | 4 | # 링크 & 읽을거리 5 | 6 | ## [A spooky error when you have a string bigger than 512MB in Chrome](https://cmdcolin.github.io/2021-10-30-spooky.html) 7 | 8 | Chrome 브라우저에서 처리할 수 있는 최대 문자열은 크기는 얼마일까? 9 | 10 | 결론부터 말하자면 512MB 이상의 문자열을 처리하지 못한다. 최신 버전인 95(Canary 97 포함)에서 제대로 처리하지 못하며, 이는 같은 chromium 계열인 Edge와 Opera도 마찬가지다. Firefox와 Safari에선 정상 동작한다. 11 | 12 | ```js 13 | const len = 536_870_888; // +1을 하면? 14 | const buf = new Uint8Array(len); 15 | for (let i = 0; i < len; i++) { 16 | buf[i] = "a".charCodeAt(0); 17 | } 18 | const str = new TextDecoder().decode(buf); 19 | console.log(str.length); // 536870888 출력 20 | 21 | // 간단한 방법으로는 아래와 같이 테스트 해볼수도 있다. 22 | "a".repeat(536_870_888 + 1).length // Uncaught RangeError: Invalid string length 23 | ``` 24 | 25 | ## [Mocking으로 생산성까지 챙기는 FE 개발](https://tech.kakao.com/2021/09/29/mocking-fe/) 26 | 27 | 28 | Front-end 개발자가 쉽게 겪게 되는 백엔드 개발 의존성을 해결하기 위해 Mocking을 적극적으로 활용하는 방법을 제시한다. 29 | `MSW.js` 를 이용하여 Mocking을 하고, 백엔드가 준비되지 않은 경우에도 Front-end 개발을 진행할 수 있다. 30 | 31 | ## [React Derived State 다시 보기](https://reactiver.dev/review-react-derived-state/) 32 | 33 | 34 | `React`의 `Derived State`에 대해서 알아보고, `Derived State`를 사용하다 생긴 문제를 확인하고, 35 | 개선 방법인 `FULLY CONTROLLED COMPONENT`, `FULLY UNCONTROLLED COMPONENT + KEY`를 소개한다. 36 | 37 | ## [A Visual Guide to React Rendering - Cheat Sheet](https://alexsidorenko.com/blog/react-render-cheat-sheet/) 38 | React에서 불필요한 Re-rendering이 발생할 수 있는 케이스들을 모아 놓은 Cheet Sheet이다. 39 | 각 케이스별로 상황을 보여주고, 해결책을 제시해 준다. 40 | 놓치기 쉬운 부분이니 초보 React 개발자라면 꼭 읽어보길 추천한다. 41 | 42 | ## [JS의 객체는 hash table이 아닙니다!](https://velog.io/@wongue_shin/JS%EC%9D%98-%EA%B0%9D%EC%B2%B4%EB%8A%94-hash-table%EC%9D%B4-%EC%95%84%EB%8B%99%EB%8B%88%EB%8B%A4) 43 | 44 | 45 | `V8 엔진`을 사용하는 경우 JS의 객체가 `Hash Table`이 아닌 것을 공부한 시간 흐름에 따라 정리한 글이다. 46 | 이 글을 통해 `JS Object`는 어떤 구조로 되어 있는지, `Array`의 상태와 퍼포먼스를 유리하게 동작하게 하는 방법, 동적 타이핑 언어의 특징 등을 알 수 있고 47 | 결론적으로 왜 `Hash Table`로 구현되지 않은 이유까지 설명한다. 48 | 49 | 50 | ## [크롬 익스텐션에서 데이터를 어떻게 다룰 것인가? (피트스탑과제 – 크롬 익스텐션 개발기)](https://techblog.woowahan.com/5900/) 51 | 52 | 53 | 복잡한 여러 폼에 대해 입력을 자동화 툴을 크롬 익스텐션을 만드는 과정에서, 54 | 데이터를 저장소를 어떤 것을 선택하였는지 또 저장 코드의 위치에 따라 55 | 다르게 동작하는 부분을 소개해 준다. 56 | 57 | ## [브라우저의 사용자 에이전트는 왜 이렇게 복잡하게 생겼을까?](https://wormwlrm.github.io/2021/10/11/Why-User-Agent-string-is-so-complex.html) 58 | 59 | 60 | 브라우저의 사용자 에이전트가 복잡한 역사적인 이야기를 잘 정리한 글이다. 61 | 62 | >결론을 우선 한 마디로 요약하자면, 호환성을 유지하기 위해서 입니다. 63 | >1. 인터넷 익스플로러(IE)가 넷스케이프 브라우저의 UA를 흉내냄으로써, 처음으로 UA가 더럽혀지기 시작했다. 64 | >2. 모질라 재단이 넷스케이프 브라우저의 렌더 엔진을 오픈소스 프로젝트로 공개한 후부터는 브라우저 렌더 엔진 정보도 UA에 추가되기 시작했다. 65 | > 3. 브라우저 전쟁 이후 다양한 브라우저가 생겼는데, 호환성을 유지하기 위해 기존 브라우저 UA에 스트링을 계속 덧붙이다보니 지금과 같은 끔찍한 형태가 되어버렸다. 66 | 67 | 글을 읽으면 더 자세한 이야기를 읽을 수 있다. 68 | 69 | # 튜토리얼 70 | 71 | ## [4 Essential Tips for Better Asynchronous Code in JavaScript](https://www.ditdot.hr/en/4-tips-better-asynchronous-javascript-code) 72 | 73 | 새로운 프로그래밍 테크닉을 배우는 것은 단순히 코드가 '동작'되는 것에서 '좋은 코드'로의 발전을 의미하며, 74 | 더 나은 비동기 코드를 작성하는 본문에서 소개하는 4개의 팁은 항상 유용할 것이다. 75 | 76 | 77 | ## [Candy Crush in React](https://www.youtube.com/watch?v=PBrEq9Wd6_U) 78 | 79 | 80 | `React`를 이용해 `Candy Crush` 게임을 만들어보는 튜토리얼 영상이다. 81 | 82 | # 코드와 도구 83 | ## [vscode.dev(!)](https://code.visualstudio.com/blogs/2021/10/20/vscode-dev) 84 | 85 | 86 | [stackoverflow의 2021 통계](https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-integrated-development-environment)에 따르면 `VS Code`는 가장 많은 개발자들이 선택하는 IDE이다. 87 | 이런 `VS Code`의 웹 버전이 공개되었다. 88 | `VS Code`를 설치할 수 없는 환경(iPad, Chromebook)에서도 실행이 가능하다. 89 | `github`의 경우 clone 없이 `https://vscode.dev/github.com/microsoft/vscode` 직접 접근도 가능하다. 90 | `Live Share`의 경우에도 설치 없이 협업을 할 수 있다. 91 | 또한 GitHub 프로젝트의 경우, 도메인을 `.com` → `.dev`로 변경하면 손쉽게 온라인 VSCode로 프로젝트를 열어볼 수 있다. 92 | > ex. https://github.com/facebook/react → https://github.dev/facebook/react 93 | 94 | ## [Sucrase](https://github.com/alangpierce/sucrase) 95 | 96 | Babel과 같은 트랜스파일러는 레거시 브라우저에서의 실행을 위해 모든 코드를 변환하지만, Sucrase는 개발자들 대다수가 개발 환경에서 모던 브라우저를 사용하고 있다고 가정해 JavaScript 코드는 변환하지 않고, 꼭 트랜스파일이 필요한 JSX나 TypeScript에 집중해 빠르게 빌드를 수행하는 도구다. 97 | 98 | > [Try it out](https://sucrase.io/) 99 | 100 | 다음은 36만 라인의 코드에 대한 벤치마크 결과로, Babel 보다 20배 빠른 성능을 보여준다. 101 | 102 | ```sh 103 | Time Speed 104 | Sucrase 1.64 seconds 220221 lines per second 105 | swc 2.13 seconds 169502 lines per second 106 | esbuild 3.02 seconds 119738 lines per second 107 | TypeScript 24.18 seconds 14937 lines per second 108 | Babel 27.22 seconds 13270 lines per second 109 | ``` 110 | 111 | ## [React Hooks in Svelte](https://github.com/joshnuss/react-hooks-in-svelte) 112 | 113 | 114 | 115 | Svelte 버전으로 포팅된 React Hooks 예제들 모음 116 | 117 | ## [TypeScript Boilerplate for 2021](https://www.metachris.com/2021/04/starting-a-typescript-project-in-2021/) 118 | 119 | 2021년 시점에서 빠르게 TypeScript 기반 프로젝트를 시작할 수 있는 boilerplate로, TS4, esbuild(optional), Jest, TypeDoc 등을 사용한다. 120 | 121 | 122 | ## [VSCode에서 Bracket Pair Colorizer 삭제하고 내장 기능 사용하기](https://violetboralee.medium.com/vscode%EC%97%90%EC%84%9C-bracket-pair-colorizer-%EC%82%AD%EC%A0%9C%ED%95%98%EA%B3%A0-%EB%82%B4%EC%9E%A5-%EA%B8%B0%EB%8A%A5-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-e75558a87990) 123 | 124 | 125 | 괄호(Bracket)의 쌍을 맞추어 주는 `VS Code`의 도구로 `Bracket Pair Colorizer` 플러그인이 있지만, 126 | 성능 이슈로 자체적으로 동일한 기능을 하는 옵션을 제공한다고 한다. 이 글을 따라가면 쉽게 설정을 변경할 수 있다. -------------------------------------------------------------------------------- /issues/2022-01.md: -------------------------------------------------------------------------------- 1 | # 2022-01 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [자바스크립트는 왜 프로토타입을 선택했을까?](https://medium.com/@limsungmook/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%99%9C-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85%EC%9D%84-%EC%84%A0%ED%83%9D%ED%96%88%EC%9D%84%EA%B9%8C-997f985adb42) 6 | 7 | 8 | 9 | 플라톤 세계관의 영향을 받아 만들어진 `클래스`와 그 세계관에 정면으로 반박하며 만들어진 `프로토타입`을 철학적인 방식으로 설명하고 있다. 10 | 저자의 이런 독특한 해석은 hoisting, this, lexical scope, prototype을 더욱 명확하게 이해할 수 있게 도와준다. 11 | 이 글을 통해 '자바스크립트는 prototype으로 상속한다'라는 잘못된 편견을 버리고 보다 자바스크립트를 잘 이해하는 데 도움이 되길 바란다. 자바스크립트를 이용하여 개발하는 개발자라면 꼭 읽어 보길 적극 권장한다. 12 | 13 | ## [The Future of Svelte (Interview with Rich Harris)](https://www.youtube.com/watch?v=uQntFkK8Z54) 14 | 15 | 16 | 17 | '21/11월, Svelte 개발자인 Rich Harris가 Next.js 개발사인 Vercel로의 이직에 대한 [깜짝 발표](https://vercel.com/blog/vercel-welcomes-rich-harris-creator-of-svelte)가 있었다. 이는 Svelte 생태계에 큰 뉴스일 수밖에 없는 게, Vercel은 React 기반의 Next.js를 개발해오고 있고, 이를 통해 주요 비즈니스를 수행하고 있기 때문이다. 18 | 19 | 왜 Vercel 합류를 결정했을까? 그리고 Svelte의 미래는 어떻게 되는 걸까? 20 | 21 | ## [A hundred things I learned working on the react team](https://twitter.com/dan_abramov/status/1470613731071696896) 22 | 23 | Dan Abramov가 React 개발팀의 일원으로 일하면서 배운 내용들을 100개의 트윗 스레드로 정리한 글이다. 기술적인 내용과 함께 프로젝트 관리, 커뮤니케이션 등 다양한 인사이트를 엿볼 수 있다. 24 | 25 | 일례로 50번째 트윗의 내용은 다음과 같다. 26 | 27 | > 50. naming is one of the most important decisions you will be doing. it’s not just bikeshedding. give it appropriate time and effort. you will mess it up anyway though. 28 | 29 | > [참고] 좀 더 편하게 읽고 싶다면, 다음 링크를 방문하라. 30 | > https://threadreaderapp.com/thread/1470613731071696896.html 31 | 32 | ## [Enzyme is dead. Now what?](https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl) 33 | 34 | React 테스팅 유틸리티인 [Enzyme](https://github.com/enzymejs/enzyme)을 위한 비공식 React 17 어댑터 프로젝트 [`enzyme-adapter-react-17`](https://github.com/wojtekmaj/enzyme-adapter-react-17) 개발자인 Wojciech Maj의 글로, 현재 Enzyme을 사용하고 있고 앞으로 React 18로 이동을 고려하고 있다면, 왜 Enzyme 이외의 다른 대체재를 당장 찾아야 하는지에 대해 얘기한다. 35 | 36 | 자신 또한 인기 있는 다수의 React 프로젝트([React-PDF](https://github.com/wojtekmaj/react-pdf), [React-Calendar](https://github.com/wojtekmaj/react-calendar), [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker) 등)를 개발하고 있고, Enzyme 기반의 단위 테스트를 수행하고 있지만 Enzyme의 React 17 공식 지원을 위한 PR이 오랫동안 머지 되지 않고 있다는 점과 React 18 지원을 위해서는 어댑터 차원만의 수정으로 해결될 수 없다는 점을 근거로 들고 있다. 37 | 38 | ## [Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/) 39 | 40 | Redux maintainer인 Mark Erikson이 React Rendering에 대해 정리한 글이다. 비교적 자세한 설명으로 구성되어 있어, React Rendering 과정에 대해, 그리고 성능 최적화에 대해 보다 높은 이해가 필요한 사람은 읽어보길 추천한다. 41 | 42 | ## [Why TurboRepo Will Be The First Big Trend of 2022](https://dev.to/swyx/why-turborepo-will-be-the-first-big-trend-of-2022-4gfj) 43 | 44 | 45 | 46 | 크고 작은 여러 프로젝트를 효율적으로 관리하고자 할 때 monorepo를 고민하지만 세팅하고 최적화하는데 많은 리소스를 할애해야 하는 장벽을 마주하게 된다. 47 | 48 | [Turborepo](https://turborepo.org/)는 이러한 문제점을 해결하기 위한 JavaScript 및 TypeScript 코드 베이스용 고성능 빌드 시스템으로, 캐싱과 작업 스케줄링 최적화, CPU 리소스를 최대한 활용한 병렬적 처리 등의 기법을 통해 빌드 속도를 85프로 향상시킬 수 있다고 한다. 그리고 "Zero config"를 지향하기 때문에 간편한 설정으로 편리하게 이용할 수 있다고 한다. 49 | 50 | 51 | 52 | 또한 전통 monorepo 도구들과 차이점으로 pipeline 기능을 제공하는데 이것은 개발자가 명시적으로 작업 관계 및 순서를 지정할 수 있어, 새로운 개발자가 이를 보고 작업흐름을 빠르게 이해할 수 있게 된다. 이 pipeline에 정의된 작업들은 앞서 언급한 CPU의 멀티코어 프로세서를 최대한 활용해 병렬적으로 처리되기 때문에 더 빠른 빌드를 가능하게 한다. 53 | 54 | - [Vercel 사의 Turborepo 인수](https://vercel.com/blog/vercel-acquires-turborepo?utm_source=turbo-site&utm_medium=banner&utm_campaign=turbo-website) 55 | - [Turborepo 소개영상](https://www.youtube.com/watch?v=9iU_IE6vnJ8&t=370s) 56 | 57 | ## [React Conf 2021](https://www.youtube.com/channel/UC1hOCRBN2mnXgN5reSoO3pQ/videos) 58 | 59 | '21/12/9일 온라인으로 진행되었던 `React Conf 2021`의 모든 세션이 공개되었다. 새롭게 개발 중인 [React Forget](https://youtu.be/lGEMwh32soc?t=590) (auto-memoizing 컴파일러)와 [새로운 아키텍처로 React Native 재작성 계획](https://youtu.be/FZ0cG47msEk?t=1884) 등에 대한 내용을 공개했다. 60 | 61 | ## [The State of CSS 2021](https://2021.stateofcss.com/) 62 | 63 | 64 | 65 | 2021년 전세계 개발자들의 CSS 현황 설문조사 결과가 공개되었다. Front-end 개발자들이 사용하는 CSS 기능, 기술, 도구 등을 통계로 볼 수 있어 CSS 관련 기술과 도구를 선택하는 데에 큰 참고가 될 것이다. 다음은 해당 설문조사에서 볼 수 있는 통계 예시다. 66 | 67 | - CSS 프레임워크와 관련해서 [Tailwind CSS](https://tailwindcss.com/) 사용률이 전년대비 13%로 큰 폭으로 상승했고, [Bootstrap](https://getbootstrap.com/)이 여전히 사용률 1위를 차지하고 있다. 68 | - 98.7%의 개발자가 CSS의 [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) 기능을 사용해 본 적이 있다고 답했다. 69 | - 34%의 개발자가 CSS-In-JS 라이브러리를 행복하게 사용하고 있다고 답했다. 70 | 71 | 또한, 매년 발표하는 JavaScript 현황 설문조사는 2022년 1월에 공개된다고 한다. 72 | 73 | # 튜토리얼 74 | 75 | ## [차세대 CSS 레이아웃](https://studiomeal.com/archives/197) 76 | 77 | 78 | 79 | Flex와 Grid 레이아웃이 등장한 지 꽤 되었지만 능숙하게 잘 사용하기는 쉽지 않다. 80 | 저자는 디자이너와 개발자로 일한 경험을 통해 다음의 2개 시리즈 글을 통해 Flex와 Grid의 각 속성들을 그림을 통해 쉽게 이해할 수 있도록 설명한다. 81 | 82 | - [이번에야말로 CSS Flex를 익혀보자](https://studiomeal.com/archives/197) 83 | - [이번에야말로 CSS Grid를 익혀보자](https://studiomeal.com/archives/533) 84 | 85 | ## [How to create NFTs with JavaScript](https://blog.logrocket.com/how-to-create-nfts-with-javascript/) 86 | 87 | 대체 불가능 토큰(NFT, non-fungible token)은 최근 미래 기술(디지털 자산 거래)로 많은 이들의 관심을 받고 있다. 88 | 이 글은 JavaScript로 NTF를 생성하는 방법을 단계별로 설명한다. 89 | 90 | ## [Array.prototype.groupBy to the rescue!](https://www.charpeni.com/blog/array-prototype-group-by-to-the-rescue) 91 | 92 | Array.prototype.GroupBy가 드디어 TC39 stage3으로 변경되었다. 93 | 이 글은 기존에 reduce, filter, map 등의 다양한 함수를 이용해야만 GroupBy를 구현할 수 있었던 예를 보여주고 마지막으로 `Array.prototyp.groupBy`를 이용하여 구현하는 방법을 보여준다. 94 | 95 | ```js 96 | const items = [ 97 | { 98 | type: "fruit", 99 | value: "🍎", 100 | }, 101 | { 102 | type: "fruit", 103 | value: "🍇", 104 | }, 105 | { 106 | type: "vegetable", 107 | value: "🥕", 108 | }, 109 | { 110 | type: "vegetable", 111 | value: "🌶️", 112 | }, 113 | ]; 114 | items.groupBy(({ type }) => type); 115 | ``` 116 | 117 | # 코드와 도구 118 | 119 | ## [Mitosis: Write components once, run everywhere](https://github.com/BuilderIO/mitosis) 120 | 121 | 122 | 123 | Mitosis를 사용하면 하나의 컴포넌트 코드로 React, Vue, Angular, Svelte 등 여러 프레임워크의 컴포넌트 코드로 컴파일할 수 있다. [Playground](https://mitosis.builder.io/)를 통해 어떻게 동작하는지 테스트해 볼 수 있다. 124 | 125 | ## [Pattens.dev](https://www.patterns.dev) 126 | 127 | Front-end 개발자를 위한 이보다 좋은 참고 사이트는 없다! 128 | Front-end에서 자주 접하게 되는 `디자인 패턴, 랜더링패턴, 성능 패턴`을 시각적인 자료, CodeSandbox 예제와 함께 제공하고 있다. 129 | 책까지 무료로 제공하고 있으니 꼭! 보고 학습해 보기 바란다. 130 | 131 | 132 | 133 | ## [How to Write Shell Scripts in Node with Google’s zx Library](https://www.sitepoint.com/google-zx-write-node-shell-scripts/) 134 | 135 | zx는 Shell Script를 여러분이 친숙한 JavaScript/TypeScript로 간단하게 프로그래밍할 수 있게 도와주는 라이브러리이다. 136 | 인터페이스도 상당히 직관적이라 bash나 zsh 스크립트에 익숙하지 않는 개발자에게는 유용한 라이브러리이다. 137 | 이 글은 zx를 이용하여 프로젝트를 생성하는 간단한 빌드 스크립트를 만드는 예제를 다루고 있으니 한번 따라 해보면 zx의 간편함을 몸소 체험해 볼 수 있을 것이다. 138 | 139 | ```ts 140 | // hello-world-typescript.ts 141 | 142 | import { $ } from "zx"; 143 | 144 | void (async function () { 145 | await $`ls`; 146 | })(); 147 | ``` 148 | 149 | ## [Drawing a Christmas Elf with HTML and CSS](https://www.youtube.com/watch?v=zYY1hfDEFZk) 150 | 151 | HTML와 CSS만을 이용해서 크리스마스 엘프를 만들어가는 제작 과정의 비디오이다. 152 | gradients, masks, clip-path를 사용해서 하나하나 그려가는 모습을 보면 개발 덕후란 무엇인지 알 수 있다. 153 | 154 | 155 | -------------------------------------------------------------------------------- /issues/2022-05.md: -------------------------------------------------------------------------------- 1 | # 2022-05 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## 모던 프론트엔드 프로젝트 구성 기법 6 | 7 | 다음의 2개 시리즈로 구성된 글을 통해 단일 코드 저장소에서 다중 프로젝트를 관리할 수 있는 Monorepo 개발 전략의 등장 배경과 함께, 사용할 수 있는 다양한 도구들에 대한 소개 및 장단점을 소개한다. 8 | 9 | - [모노레포 개념 편](https://d2.naver.com/helloworld/0923884) 10 | - [모노레포 도구 편](https://d2.naver.com/helloworld/7553804) 11 | 12 | > [참고] Line과 우아한 형제들의 기술 블로그를 통해 소개된 monorepo 글들도 같이 참고해 보기 바란다. 13 | > - [Line] [Turborepo로 모노레포 개발 경험 향상하기](https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo/) 14 | > - [우아한형제들] [Yarn berry workspace를 활용한 프론트엔드 모노레포 구축기](https://techblog.woowahan.com/7976/) 15 | 16 | 17 | ## [The Future of Micro-Frontends](https://betterprogramming.pub/the-future-of-micro-frontends-2f527f97d506) 18 | 19 | Micro Front-end(이하 MFE)를 말할 때 어느 정도의 "micro”가 MFE 일까? MFE 구현보단 보다 분산된 컴포넌트를 많이 목격하게 된다. 20 | 21 | 저자는 자신이 만든 MFE 멘탈모델 [Micro-frontends in context](https://increment.com/frontend/micro-frontends-in-context/) 을 활용해 디자인하고, MFE 간의 통신은 [Publish-subscribe 패턴](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern)을 활용해 [design-time 커플링](https://www.infoq.com/presentations/microservices-design-time-coupling/)을 회피하거나 또는 최소화할 것을 제안하고 있다. 22 | 23 | Back-end의 이벤트 주도적 아키텍처와 같이 이벤트를 위한 뚜렷한 스키마를 갖는 것은 통합과정에서 많은 실수를 줄여 줄 수 있다. 24 | [event-bus](https://www.npmjs.com/package/@trutoo/event-bus) 라이브러리는 느슨하게 결합된 요소들 간의 구조적인 통신을 가능하게 만드는 데 도움을 줄 수 있다. 25 | 26 | ## [Module Federation Examples](https://github.com/module-federation/module-federation-examples) 27 | 28 | 여러 개의 분리된 빌드들을 동적으로 실행시켜, 마치 하나의 앱과 같이 구성할 수 있도록 도와주는 module federation은 Webpack 5의 주요 기능 중 하나로 추가되었다. 이 저장소는 Webpack의 module federation을 구현한 개발자가 직접 다양한 개발 환경에서 사용될 수 있는 쇼케이스 예제를 작성해 제공한다는 점에서 관심을 가질만하다. 29 | 30 | 31 | ## [JavaScript Symbol의 근황](https://meetup.toast.com/posts/312) 32 | 33 | 34 | 애플리케이션을 개발하면서 일반적으로 Symbol을 사용할 일이 잘 없다. 35 | 이런 Symbol에 대해 알아보고, 어떤 이유로 Symbol이 도입되었으며, 우리는 이 Symbol을 어떻게 사용할 수 있는지를 소개한다. 36 | 37 | ## [JAVASCRIPT FUNCTION COMPOSITION: WHAT’S THE BIG DEAL?](https://jrsinclair.com/articles/2022/javascript-function-composition-whats-the-big-deal/) 38 | 39 | 40 | 함수형 자바스크립트의 함수 합성에 대해서 이야기를 하고, `compose()`, `flow()`, `pipe()`를 예제를 통해 설명하고, 41 | 함수 합성을 통한 코드도 아름답지만, 코드를 통해 새로운 사고방식을 배울 수 있음을 이야기한다. 42 | * [한글번역](https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%A8%EC%88%98-%ED%95%A9%EC%84%B1-%EB%AD%90%EA%B0%80-%EA%B7%B8%EB%A0%87%EA%B2%8C-%EB%8C%80%EB%8B%A8%ED%95%A0%EA%B9%8C-5a2664b7c2b8) 43 | 44 | 45 | ## [How return await can slow down your code](https://arthur.place/the-cost-of-return-await) 46 | 47 | 동일한 결과를 얻지만, 각각 다른 형태로 호출되는 다음의 함수들 중에서 가장 빠르게(또는 느리게) 실행되는 것은 어떤 것일까? 48 | 49 | ```js 50 | // function work(): Promise; 51 | async function doWait() { 52 | return await work(); 53 | } 54 | 55 | async function dontWait() { 56 | return work(); 57 | } 58 | 59 | function justReturn() { 60 | return work(); 61 | } 62 | ``` 63 | 64 | 대부분의 실 개발 시나리오에서는 사용되는 스펙에 따라 훨씬 더 오래전의 ECMAScript 버전으로 변환될 수 있다. 65 | 결론은 가능한 Eslint [no-return-await](https://eslint.org/docs/rules/no-return-await) 규칙을 설정하는 것이 권장된다. 66 | 67 | 원 글에서는 상황별 벤치마크 결과와 함께 보다 자세한 이유를 읽어볼 수 있다. 68 | 69 | 70 | ## [Reliable Web Summit 2021](https://www.youtube.com/playlist?list=PLOETEcp3DkCpXVC8MZjMLM_l_Vu3bbyb7) 71 | 72 | [Reliable Web Summit 2021](https://pages.ng-conf.org/reliable-web-summit-2021/)은 Angular 콘퍼런스로 유명한 [ng-conf](https://2022.ng-conf.org/)의 서브 콘퍼런스로, 신뢰성을 제공하는 웹을 만들기 위한 다양한 주제의 세션들이 진행되었다. 73 | 74 | ## [PageObject](https://martinfowler.com/bliki/PageObject.html) 75 | 76 | 리팩토링의 저자로 유명한 마틴 파울러의 글로, 웹 페이지에 대한 테스트를 작성할 때 HTML 요소들을 직접 조작하는 접근보다 페이지 객체를 통해 HTML 페이지 또는 조각(fragment)를 감싸는 형태의 접근 방법에 대해 이야기한다. 77 | 78 | 79 | 80 | ## [Building a dialog component](https://web.dev/building-a-dialog-component/) 81 | 82 | 83 | 84 | 최근 `` 엘리먼트가 여러 브라우저에서 stable 한 상태가 되었다. 이젠 모달이나 팝업 등을 native `` 엘리먼트를 활용해서 더 쉽게 만들어 볼 수 있다. 스타일, 애니메이션, Javascript 코드와 같이 사용하는 법까지 상세한 사용법을 다루고 [데모](https://gui-challenges.web.app/dialog/dist/)와 [소스](https://github.com/argyleink/gui-challenges), [Youtube](https://www.youtube.com/watch?v=GDzzIlRhEzM) 영상 또한 제공하고 있다. 조금 더 간단하게 ``엘리먼트 사용법을 알아보고 싶다면 [#링크](https://alligator.io/html/dialog-element/) 글을 확인해 봐도 좋다. 85 | 86 | 87 | ## [Why Do Developers Keep Implementing State Management in React?](https://www.thoughtworks.com/content/dam/thoughtworks/documents/radar/2022/03/tr_technology_radar_vol_26_en.pdf#page=7) 88 | 89 | [thoughtworks](https://www.thoughtworks.com/)는 글로벌 기술 자문 회사로, 주기적(반기마다)으로 기술 동향을 다루는 [Technology Radar](https://www.thoughtworks.com/radar) 리포트를 발행하고 있다. 90 | 91 | 최신호에서는 여러 가지 흥미로운 주제를 다루고 있는데, 그중 "개발자들은 왜 계속해서 React에서 동작하는 상태 관리자를 개발하는가?"에 대해 질문을 던지는 항목이다. 사실, 본문은 왜 그러한 현상이 일어나고 있는지에 대한 추측을 가볍게 던지고 있을 뿐이다. 92 | 93 | 그간 Redux → Mobx → Zustand → Recoil → Jotai로 이어져 오는 흐름을 알고 있다면, 여러분들도 같은 의문을 품을 것이다. 94 | 95 | 96 | ## [React Libraries for 2022](https://www.robinwieruch.de/react-libraries/) 97 | React를 사용할 때 참고하면 좋은 라이브러리에 대해서 추천해 준다. 98 | React Project, Package Manager, State Management, Data Fetching, Router, CSS Styling를 포함하여 25가지 주제에 대해 다양한 라이브러리들에 언급한다. 99 | 다만, 모든 라이브러리가 다 있는 것은 아니어서, 가볍게 참고해 보면 좋다. 100 | 101 | 102 | ## [When Does React Render Your Component?](https://www.zhenghao.io/posts/react-rerender) 103 | 104 | 105 | React에서는 렌더링이 의도하지 않게 일어나는 경우를 자주 접할 수 있지만, React 공식 문서에서는 명확하게 설명하고 있지 않아 파악하기 어렵다. 106 | 이 글에서는 React에서 렌더의 의미부터 살펴보고, 언제 렌더링 되는지 알아본다. 107 | 108 | 109 | 110 | * [한글번역](https://velog.io/@eunbinn/when-does-react-render-your-component) 111 | 112 | ## [웹프론트엔드 개발자의 Rust 돌려까기 🥊](https://boostbrothers.notion.site/Rust-aefb960939804ef898f07a944651d23c) 113 | 114 | 115 | 웹프론트엔드 개발자의 관점에서 Rust를 학습한 경험을 공유한다. 116 | 가비지 컬렉터가 없고, 소유권 개념이 생소하며, 컴파일러가 지나치게 친절(??) 하여 학습이 어려웠던 점을 설명한다. 117 | 끝으로 Rust를 배워야 하는 이유를 고민해 본다. 118 | 119 | 120 | # 튜토리얼 121 | 122 | ## [33 JavaScript Concepts Every Developer Should Know 🤓️💯️](https://dev.to/eludadev/33-javascript-concepts-every-beginner-should-know-with-tutorials-4kao) 123 | 124 | 125 | [33 Concepts Every JavaScript Developer Should Know](https://github.com/leonardomso/33-js-concepts)([FE News 20/4월 소식을 통해 소개](https://github.com/naver/fe-news/blob/cab540c2fe3459efc72d3cd7c95cfde6eda88f28/issues/2020-03.md#30-seconds-of-code)) 에서 영감을 받아 해당 목차를 간단하게 설명한다. 126 | 33가지 개념에 대해서 이미지와 짧은 설명을 제공하여 빠르게 살펴보기에 좋고, 모르는 개념이 있다면 튜토리얼 링크들을 제공하고 있어 개념들을 배우기도 좋다. 127 | 128 | ## [Figma Tips](https://www.youtube.com/playlist?list=PLlY_DF_tYwNiVzRvypHHkhPOp7drT_Tnu) 129 | 130 | 1분 내외의 짧은 쇼츠 시리즈를 통해 Figma 사용 시 활용할 수 있는 고급 팁들을 소개한다. 131 | 132 | 133 | ## [JavaScript Fighting Game Tutorial with HTML Canvas](https://www.youtube.com/watch?v=vyqbNFMDRGQ) 134 | 135 | 136 | 대전 격투 게임을 HTML Canvas를 이용하여 만들어 보자! 137 | 138 | 139 | # 코드와 도구 140 | 141 | ## [Preview.js: Preview UI components in your IDE instantly](https://previewjs.com/) 142 | 143 | 144 | 145 | Preview.js는 React, Vue 등의 컴포넌트를 IDE에서 바로 미리보기를 할 수 있도록 지원하는 도구다. 146 | 147 | 현재는 React (V16+), Vue 2, Vue 3, SolidJS를 지원하고 있으며, Preact, Svelte가 지원 예정이라고 한다. 148 | 149 | ## [projen](https://github.com/projen/projen) 150 | 151 | 152 | 153 | projen은 프로젝트 설정 파일들인 `package.json`, `tsconfig.json`, `.gitignore`, `eslint` 등을 통해 잘 정리된 JavaScript 정의 파일로 작성된다. 154 | 기존 설정 파일들은 수동으로 관리되어서는 안되며, 제공되는 class 모듈과 projen CLI를 통해 프로젝트 설정을 관리하게 된다. 155 | 156 | ## [nexe](https://github.com/nexe/nexe) 157 | 158 | 159 | 160 | Nexe는 Node.js 애플리케이션을 컴파일해 단일 실행 파일로 생성해 주는 CLI 도구다. 161 | (유사한 도구로는 [Pkg](https://github.com/vercel/pkg)가 있다.) -------------------------------------------------------------------------------- /issues/2022-06.md: -------------------------------------------------------------------------------- 1 | # 2022-06 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [Web at IO 2022](https://www.youtube.com/watch?v=5b4YcLB4DVI&list=PLNYkxOF6rcIDKuCU73tmdRN_-mI3tKFPD) 6 | 7 | 구글의 개발자 연례 행사인 Google I/O 2022가 지난 5월 11~12일 진행되었으며, Web at IO 2022는 이들 중 23개의 웹 세션들에 대한 재생 목록이다. 웹 플랫폼, 개발자 도구, 반응형 페이지의 현주소, 성능, PWA 등 다채로운 새로운 소식들로 가득 차 있다. 웹의 최신 동향을 알고 싶다면 살펴보기를 추천한다. 8 | 9 | > [참고] 재생 목록에는 포함되어 있지 않지만, 이어서 [State of CSS](https://www.youtube.com/watch?v=Xy9ZXRRgpLk)도 함께 살펴보면 좋다. 10 | 11 | ## [Meta Open Source is transferring Jest to the OpenJS Foundation](https://engineering.fb.com/2022/05/11/open-source/jest-openjs-foundation/) 12 | 13 | 지난 [FE News '22/3월 소식](https://github.com/naver/fe-news/blob/master/issues/2022-03.md#nobody-at-facebook-has-worked-on-jest-for-years)을 통해서 수년간 Jest에 기여하는 메타 소속 개발자들이 없었다는 소식을 공유한 바 있었는데, 그 소식에 이어 지난 5월 11일, Meta는 Jest 프로젝트를 [OpenJS 재단](https://openjsf.org/)으로 이관을 진행한다는 소식을 발표했다. 14 | 15 | Jest의 개발은 기존과 같이 현재의 코어 팀에 의해 리딩 되며, 이관에 따라 크게 달라지는 것은 없을 것이라고 밝혔다. 향후 몇 달간 Jest의 자산(도메인, 저장소, 웹사이트 등)이 이관되며, 이관에 따른 새로운 정책 등을 수립할 계획임을 밝히고 있다. 16 | 17 | ## [New from Anaconda: Python in the Browser](https://www.anaconda.com/blog/pyscript-python-in-the-browser) 18 | 19 | 20 | 21 | Anaconda가 PyCon US 2022에서 PyScript 프로젝트를 발표하였다. 22 | 23 | PyScript는 Python 애플리케이션을 웹에서 실행할 수 있도록 해주는 프레임워크이다. JS에서 Python, Python에서 JS로 양방향 커뮤니케이션이 가능하다고 한다. 즉, Python이 DOM을 참조하는 것 등이 가능하다. 24 | 25 | 다음은 간단히 Pi 값을 계산해 화면에 출력하는 예시이다: 26 | 27 | ```html 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | print("Let's compute π:") 36 | def compute_pi(n): 37 | pi = 2 38 | for i in range(1,n): 39 | pi *= 4 * i ** 2 / (4 * i ** 2 - 1) 40 | return pi 41 | 42 | pi = compute_pi(100000) 43 | s = f"π is approximately {pi:.3f}" 44 | print(s) 45 | 46 | 47 | 48 | ``` 49 | 50 | 더 많은 예시는 https://pyscript.net/examples/ 에서 확인할 수 있다. 51 | 52 | ## [React may be getting a new hook — useEvent](https://engineering.udacity.com/react-may-be-getting-a-new-hook-useevent-e3924856d7fa) 53 | 54 | 지난 5월 4일, `useEvent`로 명명된 새로운 훅에 대한 제안이 [RFC로 제출](https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md)되었으며, 항상 안정적(always-stable)인 함수 아이덴티티를 갖는 이벤트 핸들러를 정의할 수 있게 한다. 55 | 56 | ```js 57 | // 이벤트 핸들러에서 state/props를 읽으면 최적화가 중단된다. 58 | function Chat() { 59 | const [text, setText] = useState(''); 60 | 61 | // 1) 재렌더링시, 이벤트 핸들러의 아이덴티티는 매번 달라진다. 62 | const onClick = () => { 63 | sendMessage(text); 64 | }; 65 | 66 | // 2) `text`의 값이 변경되면, 이벤트 핸들러의 아이덴티티도 달라진다. 67 | const onClick = useCallback(() => { 68 | sendMessage(text); 69 | }, [text]); 70 | 71 | return ; 72 | } 73 | 74 | // useEvent Hook 75 | function Chat() { 76 | const [text, setText] = useState(''); 77 | 78 | // 항상 동일한 함수가 제공된다. (`text`가 변경되어도 그러하다) 79 | const onClick = useEvent(() => { 80 | sendMessage(text); 81 | }); 82 | 83 | return ; 84 | } 85 | ``` 86 | 87 | ## [How to use Decorators in JavaScript](https://javascript.plainenglish.io/using-decorators-in-javascript-e80674e4c6fa) 88 | 89 | 90 | 91 | 데코레이터(`@`)를 적용한 JavaScript 코드는 어렵지 않게 찾아볼 수 있다. 하지만, 보통은 데코레이터 관련 라이브러리들(e.g. [core-decorators.js](https://github.com/jayphelps/core-decorators)) 혹은 프레임워크에 내장된 데코레이터를 사용하기에 직접 데코레이터를 만들어 본 경험은 생각보다 흔치 않을 것이다. 92 | 93 | 본 글에서는 데코레이터에 대한 설명부터 어떻게 직접 만들 수 있는지 설명한다. 94 | 95 | 다음은 필드의 재할당을 막아주는 `locked` 데코레이터 예시이다: 96 | 97 | ```js 98 | function locked(target, key, descriptor) { 99 | return { 100 | ...descriptor, 101 | writable: false, 102 | }; 103 | } 104 | 105 | class Data { 106 | @locked 107 | password = 'mypwd'; 108 | } 109 | ``` 110 | 111 | > 참고로, 현재 JavaScript에서 데코레이터 사용이 가능한 것은 babel과 같은 transpiler의 힘을 빌렸기 때문에 가능한 것이다. 즉, 현재로서는 표준이 아니다. 112 | > 113 | > 최근 데코레이터를 표준으로 지정하고자 하는 [프러포절이 stage 3](https://github.com/tc39/proposal-decorators)까지 올라왔다. 본 글은 해당 프러포절과 다소 구현의 차이가 있을 수 있으니 참고하길 바란다. 114 | 115 | ## [Announcement: Passing the torch](https://github.com/lerna/lerna/issues/3121) 116 | 117 | Lerna 프로젝트의 리드 엔지니어인 [Daniel Stockman](https://github.com/evocateur)은 프로젝트 공지를 통해 5월 5일부로 번아웃으로 인해 모든 책임에서 물러날 것이라고 밝혔다. 그리고 프로젝트의 오너십을 또 다른 유명한 모노레포 도구인 [Nx](https://nx.dev/)의 개발사이기도 한 [Nrwl](https://nrwl.io/)로 이전한다고 밝혔다. 118 | 119 | # 튜토리얼 120 | 121 | ## [The DOM Challenge](https://github.com/devkodeio/the-dom-challenge) 122 | Front-end 문제로 이루어진 챌린지이다. HTML + CSS + Vanilla JS를 이용해 풀어야 한다. 123 | Front-end 개발자라면 한번 도전해 보아도 좋을 듯하다. 124 | 125 | ## [Web Audio Modem](https://martinmelhus.com/web-audio-modem) 126 | 127 | Web Audio API를 통해 데이터를 인코딩하고 디코딩 해, 결과적으로 시그널을 통한 데이터 전송이 가능한 모뎀의 구현 방법을 소개한다. 128 | 129 | 저자는 인터넷을 사용할 수 없는 업무 환경에서 데이터를 손쉽게 전송할 수 있는 방법을 고안하기 위해 만들게 되었으며, 데이터 인코딩은 Web Audio API의 [OscillatorNode](https://developer.mozilla.org/en/docs/Web/API/OscillatorNode)를 통해, 그리고 디코딩 [AnalyserNode](https://developer.mozilla.org/en/docs/Web/API/AnalyserNode)를 활용해 구현되었다. 130 | 131 | ## [모던 JavaScript 튜토리얼](https://javascript.info/) 132 | 133 | 모던 JavaScript(ES6 이후)를 배우고 싶다면 이 사이트를 추천한다. 134 | 체계적으로 분류되어 있으며, 한글화도 잘 되어 있어 따라 하면서 이해하기 쉽다. 135 | * [한글화](https://ko.javascript.info/) 136 | 137 | ## [nodejs.dev Learn](https://nodejs.dev/learn) 138 | 139 | OpenJS 재단에서 직접 운영하고 있는 nodejs 튜토리얼 사이트이다. 140 | nodejs의 다양한 기능들에 대해 쉽게 따라갈 수 있도록 잘 구성되어 있다. 141 | 142 | ## [Building an Animated Piano Keyboard with JavaScript and MIDI](https://www.jamieonkeys.dev/posts/piano-keyboard-javascript/) 143 | 144 | 145 | 146 | 이 글에서는 [재즈 피아노 튜토리얼 사이트](https://www.jazzkeys.fyi/)에서 JavaScript와 MIDI로 피아노 애니메이션을 개발한 방법을 소개한다. 147 | 148 | 피아노 키보드를 그리는 데에는 SVG를 사용하고, MIDI를 JSON 형식으로 바꾸는 부분은 브라우저에서 인터랙티브한 음악을 만들 수 있는 웹 오디오 프레임워크인 [Tone.js](https://tonejs.github.io/)를 사용했으며, 오디오를 다루는 부분은 [Howler.js](https://howlerjs.com/)를 사용했다고 한다. 149 | 150 | 해당 [CodeSandbox](https://codesandbox.io/s/onscreen-piano-keyboard-3uhrm)에서 데모와 코드를 볼 수 있다. 151 | 152 | # 코드와 도구 153 | 154 | ## [wireit](https://github.com/google/wireit) 155 | 156 | 157 | 158 | NPM 스크립트를 더 스마트하고 효율적으로 사용할 수 있도록 해주는 툴이다. 159 | 눈에 띄는 특징으로는 Cross-package dependencies, Parallelism, Incremental build 등이 있다. 160 | package.json의 스크립트를 조금만 수정하면 기존 `npm run` 커맨드도 그대로 사용할 수 있다. 161 | 162 | ## [TypeScript Error Translator](https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator) 163 | 164 | 165 | 166 | TypeScript 에러를 사람이 읽기 쉬운 문장으로 바꾸어 주는 VSCode extension이다. 167 | 168 | ## [lexical](https://lexical.dev/) 169 | 170 | Meta에서 새로 만든 텍스트 에디터이다. 이전에 React를 기반으로 만들었던 에디터 [Draft.js](https://draftjs.org/)와 달리, 바닐라 JS로 만들었다. 171 | 172 | ## [design-resources-for-developers](https://github.com/bradtraversy/design-resources-for-developers) 173 | 174 | 175 | 176 | 개발자를 위한 UI, 디자인 리소스들을 큐레이션 해 둔 Github 저장소이다. 폰트, 아이콘, 스톡 사진, 웹 템플릿, CSS 프레임워크, 크롬 익스텐션 등 많은 리소스를 찾아볼 수 있다. 177 | 178 | ## [Stacks](https://github.com/StackExchange/Stacks) 179 | 180 | 개발자라면 누구나 알고 있는 스택오버플로우의 디자인 시스템이다. 181 | -------------------------------------------------------------------------------- /issues/2022-07.md: -------------------------------------------------------------------------------- 1 | # 2022-07 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [ES2022 Features!](https://h3manth.com/ES2022/) 6 | 7 | 스위스 제네바에서 열린 [123번째 ECMA 총회](https://www.ecma-international.org/news/ecma-international-approves-new-standards-6/)(General Assembly)에서는 ECMA-262의 13번째 에디션인 ‘ECMAScript 2022’가 승인되었다. 8 | 9 | * .at() method on built-in indexables 10 | * RegExp Match Indices 11 | * Object.hasOwn 12 | * Error cause 13 | * Top-level await 14 | * Class field declarations 15 | * Ergonomic brand checks for private fields 16 | 17 | > [참고] 추가로 다음 글도 참고해 보면 좋다. 18 | > - [Ecma International approves ECMAScript 2022: What’s new?](https://2ality.com/2022/06/ecmascript-2022.html) 19 | 20 | 21 | ## [Svelte Origins: A JavaScript Documentary](https://www.youtube.com/watch?v=kMlkCYL9qo0) 22 | 23 | 24 | 25 | 개발자 구인 플랫폼을 서비스하는 [OfferZen](https://www.offerzen.com/)에서 운영 중인 YouTube 채널에서는 다양한 개발 프레임워크, 도구 등에 대한 기원(Origins)에 대한 다큐멘터리를 공개하고 있다. 26 | 27 | 이 영상에서는 Svelte 개발자인 Rich Harrison는 저널리즘을 공부하다, 2008년 런던의 금융 관련 출간물을 발행하는 회사에 첫 취업을 하게 되었다고 한다. 그러나, 2008년 금융위기로 인해 일하기 시작한 첫 몇 달간 많은 사람들이 해고되는 것을 직접 목격하면서부터 스스로가 좀 더 고용되기에 매력적인 사람이 되기 위해, 보다 기술적 역할을 수행하기 적합한 사람이 되기 위해 노력했다고 말한다. 28 | 29 | 몇 년 뒤 회사에서 아주 베이직한 HTML 작업이 필요했을 때 자신이 가장 잘 준비되어 있었고, 그렇게 개발자로써 커리어가 시작되었다고 한다. Svelte에 꼭 관심이 없더라도 개발적 관점에서 흥미 있게 볼 수 있는 내용들이 많아 재미있게 볼 수 있다. 30 | 31 | > [참고] 추가로 Tailwind에 대한 영상도 재미있게 볼 수 있다. 32 | > - [How Tailwind CSS came to be feat. Adam Wathan](https://www.youtube.com/watch?v=1x7HlvSfW6s) 33 | 34 | ## [Front-end Frameworks Popularity](https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190) 35 | 36 | 37 | 38 | React는 현재 가장 인기 있는 Front-end 프레임워크다. 이 문서에서는 다양한 소스(StackOverflow trend, 각종 개발자 설문조사, 트위터 언급량 등)들을 통해 그러한 ‘사실’을 보여준다. 39 | 40 | ## [JSConf Budapest 2022](https://www.youtube.com/playlist?list=PL37ZVnwpeshGuMZrOZzEo8QLBjjpbtBGm) 41 | 42 | 43 | 44 | 지난 6월 2,3일 이틀간 진행되었던 JSConf Budapest 발표 영상이다. 코로나로 인해 2년간 열리지 못했다가 오랜만에 오프라인에서 진행되었다. 다채로운 세션들로 구성되어 있으며, 2년간의 판데믹으로 인한 여파 때문인지 모르겠지만 정신건강과 스트레스 등에 대한 세션들이 눈에 띈다. 45 | 46 | 오프라인 콘퍼런스 참여에 목마름이 있다면, 조금이나마 그 갈증을 해소해 줄 것이다. 47 | 48 | ## [Web browsers over the last 28 years](https://www.youtube.com/watch?v=H52DmvfzDWM) 49 | 50 | 51 | 52 | 지난 6월 15일 Internet Explorer가 드디어 작별을 고했고, [국내 개발자의 묘비 설치](https://edition.cnn.com/2022/06/18/asia/internet-explorer-gravestone-viral-south-korea-intl-hnk/index.html) 조크는 전 세계적인 화제가 되기도 했었다. 대중적인 웹 브라우저가 등장한 이래로 수많은 브라우저가 등장했다 사라지기를 반복했다. 이 영상은 1994년~2022년까지의 브라우저 별 점유율 변화를 통한 흥망성쇠를 훑어볼 수 있게 한다. 53 | 54 | > [참고] 브라우저의 역사에 대해 관심이 있다면 다음 링크들을 참고하라. 55 | > - [The History of Web Browsers](https://www.mozilla.org/en-US/firefox/browsers/browser-history/) 56 | > - 만화로 나누는 자유/오픈소스 소프트웨어 이야기 57 | > - [모자익 브라우저의 탄생](https://joone.net/2021/10/11/41-%eb%aa%a8%ec%9e%90%ec%9d%b5-%eb%b8%8c%eb%9d%bc%ec%9a%b0%ec%a0%80%ec%9d%98-%ed%83%84%ec%83%9d/) 58 | > - [넷스케이프 브라우저](https://joone.net/2022/05/15/42-%eb%84%b7%ec%8a%a4%ec%bc%80%ec%9d%b4%ed%94%84-%eb%b8%8c%eb%9d%bc%ec%9a%b0%ec%a0%80/) 59 | > - [파이어폭스](https://joone.net/2022/06/25/43-%ed%8c%8c%ec%9d%b4%ec%96%b4%ed%8f%ad%ec%8a%a4/) 60 | 61 | 62 | ## [WebKit Features in Safari 16 Beta](https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/) 63 | 64 | 65 | 66 | 크롬이 대세 브라우저이지만 Safari도 그에 못지않게 많은 발전이 있었다. 특히 이번 Safari 16에서는 162개의 feature가 추가되었다. 67 | HTML / CSS / Web Inspector / Web API / JavaScript 그리고 WebAssembly / Security and privacy 등, 다양한 부분에 대한 기능이 추가되었다. 68 | 자세한 부분은 [WWDC](https://developer.apple.com/videos/play/wwdc2022/10048/)에서 소개된 영상을 참고하기 바란다. 69 | 70 | 71 | ## [토스 개발자 콘퍼런스 SLASH 22](https://toss.im/slash-22/sessions) 72 | 토스의 개발 경험을 알려주는 온라인 세션이 6월 8일 ~ 6월 10일 3일간 열렸다. 73 | 재미있는 주제가 많았는데 그중에서 UX, Front-end에 관련 있는 주제 몇 가지만 기술했다. 한번 살펴보기 바란다. 74 | 75 | - [UX와 DX, 그 모든 경험을 위한 디자인 시스템](https://toss.im/slash-22/sessions/1-3) 76 | - [잃어버린 유저의 시간을 찾아서: 100년을 아껴준 SSR 이야기](https://toss.im/slash-22/sessions/1-5) 77 | - [Effective Component 지속 가능한 성장과 컴포넌트](https://toss.im/slash-22/sessions/1-7) 78 | - [잃어버린 개발자의 시간을 찾아서: 매일 하루를 아끼는 DevOps 이야기](https://toss.im/slash-22/sessions/3-5) 79 | 80 | 81 | ## [토스에서의 시간을 돌아보며](https://evan-moon.github.io/2022/05/07/toss-retrospective/) 82 | 토스에서 일했던 2년 반의 입사 경험을 기술한 글이다. 토스는 다른 기업보다 어떻게 일을 더 빠르게 처리하는지부터 성장하면서 겪은 토스 조직의 문제점을 어떤 식으로 해결해 나갔는지도 설명하고 있다. 83 | 조직관리와 성장에 관심 있는 분이라면 한 번 읽으면 좋은 글이다. 84 | 85 | ## [내가 프론트엔드를 학습한 방법](https://miryang.dev/blog/how-studied-frontend) 86 | 보안 7개월, 백엔드 1년 7개월 경험이 있는 경력 3년 차 개발자의 프론트엔드 개발 전환기이다. 87 | 처음부터 어떻게 학습했고, 어떤 강좌를 통해 학습을 했는지 기술하고 있다. 초보 개발자나 프론트엔드 개발을 처음 시작하시는 분이라면 참고해 보면 좋을 것 같다. 88 | 89 | ## [Understanding the Closure Trap of React Hooks](https://betterprogramming.pub/understanding-the-closure-trap-of-react-hooks-6c560c408cde) 90 | 91 | 92 | React 16.8 버전부터 Hook이 나온 이후로 이제는 보편적으로 Hook을 사용한다. 93 | 하지만, 개발하다 보면 직면하게 되는 고전적인 문제 중 하나는 `closure trap of React Hooks`이다. 94 | 이 아티클을 통해서 문제가 어떤 것인지, 왜 그렇게 동작을 하는지에 대해 `FiberNode`와 `useEffect`의 구현을 따라가며 원리를 파악해 볼 수 있다. 95 | 96 | 97 | # 튜토리얼 98 | ## [AbortController로 요청 취소하기](https://blog.outsider.ne.kr/1602) 99 | AbortContoller를 이용하여 요청을 취소하는 기능을 소개한 글이다. 100 | 브라우저에서의 요청과 Node.js 스트림의 요청을 취소하는 기능을 소개하고 있다. 101 | 관련해서 [AbortController is your friend](https://whistlr.info/2022/abortcontroller-is-your-friend/) 튜토리얼 글도 있으니 참고하기 바란다. 102 | 103 | ## [Precise Timing With Web Animations API](https://www.smashingmagazine.com/2022/06/precise-timing-web-animations-api/) 104 | Web Animation API를 이용하여 정확한 시점에 대한 정확한 애니메이션을 만들 수 있는 방법을 튜토리얼을 통해 설명하고 있다. 105 | 106 | ## vanilla-javascript-gantt-chart 107 | 108 | 109 | - [Part 1](https://www.smashingmagazine.com/2021/08/interactive-gantt-chart-component-vanilla-javascript/) 110 | - [Part 2](https://www.smashingmagazine.com/2022/06/vanilla-javascript-gantt-chart-part-2/) 111 | 112 | Vanilla JS를 이용하여 간트 차트를 만드는 튜토리얼 이다. 많은 것을 고려해야하는 만큼 많은 것을 배울 수 있는 글이다. 113 | 114 | ## [CSS Speedrun](https://css-speedrun.netlify.app/) 115 | 116 | 간단한 CSS 선택자 퍼즐을 풀어보는 사이트이다. 총 10 레벨로 구성되어 있다. Speedrun이라는 이름답게 각 레벨을 통과하는데 얼마의 시간을 소모했는지도 확인해 볼 수 있다. 117 | 118 | ## [Google JavaScript Interview With A Frontend Engineer](https://www.youtube.com/watch?v=Rs7ARD5TCFU) 119 | 120 | 121 | 모의 Google JavaScript 인터뷰를 진행하는 영상이다. 122 | promiseAll, deepEquals, getTimer에 대해 인터뷰를 진행한다. 123 | 124 | 125 | # 코드와 도구 126 | 127 | ## [JSON HERO](https://jsonhero.io/) 128 | JSON 속에 숨어 있는 이미지, 날짜, 색상 등을 미리 보기 할 수 있다. 그뿐만 아니라 구조화된 JSON도 쉽게 탐색할 수 있다. 129 | - [vscode extension](https://marketplace.visualstudio.com/items?itemName=JSONHero.jsonhero-vscode) 도 있어서 VS Code에서 활용할 수 있다. 130 | 131 | ## [Clipdrop Remove Background](https://clipdrop.co/remove-background) 132 | 사진의 배경을 단 한 번의 클릭만으로 제거할 수 있는 온라인 툴이다. 133 | 134 | 135 | ## [Timeline JS](https://timeline.knightlab.com/) 136 | 타임 라인을 쉽게 만들 수 있는 라이브러리이다. 스토리를 담는 타임라인을 간단히 만들고자 한다면 이 라이브러리를 사용해 보기 바란다. 137 | 138 | ## [Fastify V4.2](https://medium.com/@fastifyjs/fastify-v4-ga-59f2103b5f0e) 139 | 가장 빠르고 적은 오버헤드를 지향하는 웹 프레임워크인 Fastify가 4 버전이 릴리스됐다. 140 | V3에서 가지고 있던 장점을 Break Change와 성능 저하 없이 개발한 팀의 역량이 대단하다. 141 | 142 | > 최근 v4.2가 공개했다. 143 | > https://github.com/fastify/fastify/releases/tag/v4.2.0 144 | -------------------------------------------------------------------------------- /issues/2022-09.md: -------------------------------------------------------------------------------- 1 | # 2022-09 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [A JavaScript V8 engine walkthrough](https://garden.bradwoods.io/blueprints/js-engine/basic) 6 | 7 | V8 JavaScript 엔진의 동작을 상황(기본, 오류, 스택오버플로, 비동기)에 따라 어떻게 단계별로 동작하는지를 시각화된 자료를 통해 확인해 볼 수 있다. 8 | 9 | ## [Oven](https://oven.sh/) 10 | 11 | 새로운 런타임인 Bun이 공개된 후, 온라인에서 많은 관심과 주목을 이끌어 내고 있다. 투자사인 Kleiner Perkins가 주도하고, Vercel의 창업자인 Guillermo Rauch 그리고 Y Combinator 등이 참여한 펀딩을 통해 7백만 달러의 투자를 유치했다. 12 | 13 | 이로 인해 Bun을 개발하고 발전시켜나갈 새로운 `Oven`이라는 회사가 설립되었고, 채용을 진행하고 있다. 14 | 15 | ## [What Are K, T, and V in TypeScript Generics?](https://medium.com/frontend-canteen/what-are-k-t-and-v-in-typescript-generics-9fabe1d0f0f3) 16 | 17 | 18 | `Mastering TypeScript`시리즈의 첫 글로 19 | TypeScript의 개념을 애니메이션 이미지를 이용하여 쉽게 설명한 글이다. 20 | TypeScript의 다양한 타입들의 실행 흐름도 함께 보여주어 빠르게 이해하기 좋다. 21 | 위의 주제 외에도 아래와 같은 글들이 있고, 계속 업데이트 되고 있다. 22 | * [Using TypeScript Mapped Types Like a Pro](https://javascript.plainenglish.io/using-typescript-mapped-types-like-a-pro-be10aef5511a) 23 | * [Using TypeScript Conditional Types Like a Pro](https://javascript.plainenglish.io/use-typescript-conditional-types-like-a-pro-7baea0ad05c5) 24 | * [Using TypeScript infer Like a Pro](https://levelup.gitconnected.com/using-typescript-infer-like-a-pro-f30ab8ab41c7) 25 | * [Using TypeScript Template Literal Types Like a Pro](https://medium.com/javascript-in-plain-english/how-to-use-typescript-template-literal-types-like-a-pro-2e02a7db0bac) 26 | * [TypeScript Visualized: 15 Most Used Utility Types](https://javascript.plainenglish.io/15-utility-types-that-every-typescript-developer-should-know-6cf121d4047c) 27 | 28 | ## [The James Webb Space Telescope runs JavaScript, apparently](https://www.theverge.com/2022/8/18/23206110/james-webb-space-telescope-javascript-jwst-instrument-control) 29 | 30 | 31 | 32 | 1989년 시작된 제임스 웹 우주 망원경 프로젝트는 오랜 시간의 개발 끝에 드디어 지난 21년 12월 발사되어 놀라운 우주 사진을 보내오고 있다는 사실을 한 번쯤은 들어봤을 것이다. 33 | 34 | 그리고 이러한 작업들은 대부분 JavaScript로 작성된 코드를 통해 제어가 되고 있다는 사실이다. 35 | 36 | ## [WHY YOUR WEBSITE SHOULD BE UNDER 14KB IN SIZE](https://endtimes.dev/why-your-website-should-be-under-14kb-in-size/) 37 | 38 | 웹사이트의 크기가 14KB일 경우, 15KB인 경우보다 621ms가 더 빠를 수밖에 없는지를 설명하는 글이다. 39 | 이유는 바로 TCP의 `slow start` 알고리즘 때문인데, 왜 그러한 알고리즘을 사용하는지와 그에 따라 무엇을 신경 써야 하는지를 다룬다. 40 | 41 | 이는 HTTP/2에서도 동일하게 적용되며, UDP 기반의 HTTP/3에서도 동일하게 적용된다. 42 | 43 | ## [How we use Typescript with React](https://medium.com/imersotechblog/how-we-use-typescript-with-react-a3eb33129416) 44 | 45 | 46 | Imerso라는 회사에서 87,000줄의 React 기반의 프로그램을 TypeScript로 전환하면서 정한 가이드의 일부를 글로 작성하였다. 47 | 가이드는 일관성을 높이고, 코드의 의도를 쉽게 전달하기 위해 작성되었다. 48 | 49 | ## [It’s 2022, Don’t Just Use React Anymore](https://javascript.plainenglish.io/its-2022-don-t-just-use-react-anymore-33659ed663c9) 50 | 51 | 52 | 다소 자극적으로 보일 수 있는 이 글의 타이틀은 친구가 Vue.js에 익숙하지 않아 인터뷰에 실패한 것을 동기로 이 글이 작성되었기 때문이다. 53 | 이 글은 Vue를 이용해서 React의 일부 기능을 예를 들어 설명한다. 54 | React에는 익숙하지만 Vue.js를 모른다면 짧은 시간에 파악하기 좋다. 55 | 56 | ## [JSON Creator Douglas Crockford Interview](https://evrone.com/douglas-crockford-interview) 57 | 58 | 59 | *Douglas Clockford*가 *evrone*이라는 업체와 인터뷰 전문이다. 60 | *Douglas Clockford*는 JS의 어떤 변경이 가장 중요한지 묻는 질문에, 최선의 방법은 JavaScript를 사용 중지하는 것이라고 답했다. 61 | JavaScript는 다른 언어와 마찬가지로 공룡 언어가 되어 발전을 막는 언어가 되었고, 다음 언어에 집중해야 한다는 말도 덧붙였다. 62 | 63 | ## [Top layer support in Chrome DevTools](https://developer.chrome.com/blog/top-layer-devtools/) 64 | 65 | 66 | 67 | 레이어를 문서 내의 최상위에 위치하도록 만들기 위해 `z-index:1000`를 사용하는 것이 일반적이었다. 그러나 `` 요소를 "modal" 형태로 열게 되면 브라우저 뷰포트 내의 document 상위에 위치하는 "[top layer](https://fullscreen.spec.whatwg.org/#new-stacking-layer)"와 같이 동작하기 때문에, 더 이상 수동적인 z-index 값의 조정을 하지 않아도 된다. 또한 pseudo-element인 `::backdrop`을 통해 배경을 스타일링 할 수 있다. 68 | 69 | ```html 70 | 71 |
72 | 73 |
74 | 75 | ``` 76 | 77 | Chrome 105 버전부터는 개발자 도구에서 top layer에 대한 기능이 추가되어 다음과 같이 확인할 수 있다. 78 | 79 | 80 | 81 | ### [DevTools Tips: How to speed up your workflow with Console shortcuts](https://developer.chrome.com/blog/devtools-tips-13/) 82 | 83 | 84 | 크롬 devtools에서 유용하게 사용할 수 있는 console shortcut에 대한 내용이다. 85 | DOM을 쉽게 셀렉팅하고 object를 table로 보기쉽게 만드는 등 devtools를 좀 더 스마트하게 쓸 수 있는 다양한 방법들을 [영상](https://youtu.be/hdRDTj6ObiE)을 통해 확인할 수 있다. 86 | 아마 평소 관심을 갖지 않았다면 접해보지 못한 유틸리티가 많을 것이다. 87 | 88 | 89 | # 튜토리얼 90 | 91 | ## [CSS border animations](https://web.dev/css-border-animations/) 92 | 93 | 94 | CSS를 이용하여 테두리에 애니메이션 효과를 주는 방법을 살펴본다. 95 | 96 | ## [JavaScript Game Development Course for Beginners](https://www.freecodecamp.org/news/learn-javascript-game-development-full-course/) 97 | 98 | 99 | Vanilla JavaScript로 횡스크롤 게임을 만들어 본다. 100 | 101 | ## [The Infinite Marquee](https://ryanmulligan.dev/blog/css-marquee/) 102 | 103 | 지금은 deprecate 된 [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee) 태그를 HTML과 CSS를 사용해서 현대적인 방법으로 구현하는 방법을 소개하고 있다. 104 | 105 | # 코드와 도구 106 | 107 | ## [Docusaurus](https://docusaurus.io/ko/blog/2022/08/01/announcing-docusaurus-2.0) 108 | 109 | 110 | Docusaurus는 Meta의 오픈소스로 정적 사이트 생성 도구이다. 111 | 2버전에서는 MDX를 사용해 React 컴포넌트를 추가할 수 있도록 변경되었고, 112 | 파일 시스템 규칙을 이용해 사이드바를 자동 생성해 주거나, 플러그인, 테마 기능 등이 추가되었다. 113 | 114 | ## [novu](https://github.com/novuhq/novu) 115 | 116 | 117 | 118 | 사용자에게 다양한 채널을 통한 알림 제공을 위한 인프라스트럭처를 구축할 수 있도록 도와준다. 119 | 120 | ## [Choose Your Framework](https://www.chooseyourframework.dev/) 121 | 122 | 포켓몬 스타일의 게임 스타일을 통해 프레임워크를 선택하면 프레임워크 공식 웹사이트로 이동하는 아주 단순한 기능을 제공한다. 123 | 124 | ## [Testing Library Recorder](https://github.com/testing-library/testing-library-recorder-extension) 125 | 126 | 127 | 128 | Chrome 확장 프로그램으로 Testing Library를 위한 테스트를 브라우저에서 동작을 녹화하고 테스트를 위한 스크립트를 내보내기 할 수 있다. 129 | 130 | ## [React Hooks Lifecycle](https://wavez.github.io/react-hooks-lifecycle/) 131 | 132 | Dan Abramov의 [클래스 컴포넌트 생명주기 다이어그램](https://twitter.com/dan_abramov/status/981712092611989509)에 영감을 받아 작성된 React Hooks 생명주기 다이어그램이다. 133 | 134 | ### [Vanilla Breeze](https://www.vanillabreeze.dev/) 135 | 136 | 137 | tailwind CSS 를 vanilla CSS로 변환해주는 도구. 138 | -------------------------------------------------------------------------------- /issues/2022-10.md: -------------------------------------------------------------------------------- 1 | # 2022-10 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [Schema Validation Layer](https://www.pumpkiinbell.com/blog/remote/scheme-validation-layer) 6 | 7 | ```ts 8 | const { data } = await axios.get( 9 | 'https://jsonplaceholder.typicode.com/posts' 10 | ); 11 | ``` 12 | 13 | API 응답으로 받은 data가 Post 타입이라는 것을 확신할 수 있을까? 14 | 15 | data가 Post 타입이 아니라면 프로그램이 안전하다는 것을 어떻게 보장할 수 있을까? 16 | 17 | js-ts 18 | 19 | 위 사진처럼 타입스크립트로 화려하게 타입을 작성은 했지만 프로그램이 깨지는 경험을 많이 한 개발자라면 재밌게 읽을 수 있는 글이다 20 | 21 | ## [CSS Transform 분할](https://web.dev/css-individual-transform-properties/) 22 | 23 | CSS의 transform 속성은 모든 속성을 문자열로 나열해야 하기 때문에 수정이 번잡하고 어려웠다. 24 | 25 | 이제 3개의 브라우저에서 모두 transform에 인라인으로 들어가던 속성들이 각각의 CSS 속성으로 지원된다. 26 | 27 | ### `As-Is` 28 | 29 | ```css 30 | .target:hover { 31 | transform: translateX(50%) rotate(30deg) scale(2); 32 | } 33 | ``` 34 | 35 | ### `To-Be` 36 | 37 | ```css 38 | .target:hover { 39 | translate: 50% 0; 40 | rotate: 30deg; 41 | scale: 2; 42 | } 43 | ``` 44 | 45 | ## [61 Frontend Web Development Buzz Words](https://tapajyoti-bose.medium.com/61-frontend-web-development-buzz-words-every-developer-should-have-in-their-vocabulary-8054e484875) 46 | 47 | 프론트엔드에서 많이 쓰이는 Buzzword 61선 48 | 49 | > Buzzword: 특정분야 사람들끼리 쓰는 유행어 50 | > 51 | > 벌이 사람 주위를 윙윙거리듯 어디를 가나 어떤 특정한 말을 자주 듣게 된다는 의미에서 buzzword라는 말이 만들어졌다 52 | 53 | ## [Translating Typescript Errors with a VS Code Extension - Open Source Friday](https://www.youtube.com/watch?v=0mc9E2gVp9o) 54 | 55 | 깃헙 유튜브 채널에서 Open Source Friday로 [Typescript Error Translator](https://github.com/mattpocock/ts-error-translator)의 개발자를 게스트로 초대해서 진행한 내용을 담고 있다. 56 | 57 | Typescript Error Translator 데모와 개발 과정을 소개하면서 간략하게 vscode extension 개발의 기초가 되는 내용도 함께 소개한다. 58 | 59 | Typescript Error Translator에 기여하는 방법도 다루고 있으니 관심 있다면 한번 참여해 보자! 60 | 61 | ## [The new wave of Javascript web frameworks](https://frontendmastery.com/posts/the-new-wave-of-javascript-web-frameworks/) 62 | 63 | 새롭게 이 영역에 막 뛰어드는 이들에게는 오늘날의 프레임워크 생태계를 따라잡는 것은 어려운 일이다. 이들에게는 대체로 지루할 수도 있는 현재 시점의 주도적 기술(또는 익숙한)을 선택한 후, 늦은 선택을 하는 것이 최선의 방법일 수 있다. 64 | 65 | 이 글은 대규모 웹 애플리케이션의 구축에서 과거의 문제점들을 해결하기 위한 프레임워크들의 등장과 진화를 소개한다. 66 | 67 | ## [CSR vs SSR case study](https://github.com/theninthsky/client-side-rendering) 68 | 69 | SSR은 지난 몇 년 동안 Next.js와 Remix를 통해 인기를 높여왔고, 주로 성능적 향상을 강조해 오고 있다. 이는 반대로 CSR이 느리다는 것을 암시하게 만든다. 70 | 71 | 이 프로젝트는 SSR 방식과의 비교를 통해 CSR 방식의 잠재성을 확인하는 것을 목표로 하며, 이를 위해 기본적인 CSR 앱을 구현(Webpack 5로 빌드/번들링 되는) 하고 code-splitting과 요청들을 대부분 병렬화시켜 로딩 시간을 단축하도록 구현되어 있다. 72 | 73 | 프로젝트는 결론적으로 CSR의 렌더링 성능이 SSR과 비교 시 대등하며, 때론 더 빠른 결과를 나타냈음을 보여준다. 또한 pre-rendering을 통해 완벽한 SEO 대응이 가능함을 보여주고 있다. 74 | 75 | ## [Porting Tests from Cypress to Playwright with AI](https://contra.com/p/PWBcPYZc-rewriting-tests-from-cypress-to-playwright-using-gpt-3) 76 | 77 | 78 | 79 | [Cypress](https://www.cypress.io/)와 [Playwright](https://playwright.dev/)는 프론트엔드에서 가장 많이 사용하는 e2e 테스트 프레임워크다. 80 | 81 | 저자는 프로젝트의 테스트 코드베이스를 Cypress에서 Playwright로 OpenAI에서 개발한 GPT-3 인공지능 모델을 사용하여 포팅한 방법을 소개하고 있다. 82 | 83 | ## [JavaScript APIs You Don’t Know About](https://www.smashingmagazine.com/2022/09/javascript-api-guide/) 84 | 85 | Page Visibility API, Web Share API, Broadcast Channel API, Internalization API 등 비교적 생소한 Web API에 대해 소개하는 글이다. 86 | 87 | # 튜토리얼 88 | 89 | ## [Build Your Own React](https://pomb.us/build-your-own-react/) 90 | 91 | React를 처음부터 개발하는 과정을 다룬다. 92 | 93 | 평소에 React의 깊은 동작 방식에 궁금증을 갖고 있었다면 재밌게 읽을 수 있을 것이다 94 | 95 | [한글번역](https://bluewings.github.io/build-your-own-react/)도 존재한다. 96 | 97 | ## [TypeScript tips and Tricks with Matt](https://www.youtube.com/watch?v=hBk4nV7q6-w) 98 | 99 | 10개의 타입스크립트 챌린지 문제와 해설을 통해서 타입스크립트 타입 레벨 프로그래밍을 기초부터 익힐 수 있다 100 | 101 | 영상을 통해 타입 레벨 프로그래밍에 익숙해졌다면 [type-challenges](../issues/2021-12.md#typechallenge)를 다시 한번 도전해 보는 것도 좋을 것이다 102 | 103 | ## [Web Scraping Google With Node JS](https://serpdog.io/blog/web-scraping-google-with-node-js) 104 | 105 | 이 튜토리얼은 Node.js 생태계의 웹 스크래핑과 파싱 라이브러리를 활용해 구글의 검색 결과를 스크래핑 하는 방법을 소개한다. 이를 통해 JavaScript로 웹 스크래핑과 데이터 추출과 마이닝 하는 방법을 학습할 수 있다. 106 | 107 | ## [Throttle and Debounce in Javascript and React](https://codefrontend.com/debounce-throttle-js-react/) 108 | 109 | Debounce와 Throttle은 JavaScript에서 가장 일반적인 최적화 기법들 중 하나이며, 이를 React에서 사용하는 방법을 배울 수 있다. 110 | 111 | > **Debounce 란?** 112 | > 113 | > - 자주 실행되는 액션의 지연, 그룹화 또는 마지막 요청에만 실행되도록 해 성능을 최적화하는 기법이다. 114 | > 115 | > **Throttle 이란?** 116 | > 117 | > - 실행의 속도(빈도)를 제한시켜 성능을 최적화하는 기법으로, debounce와 유사하지만 규칙적인 실행을 보장한다. 118 | 119 | ## [Introduction Learn HTML](https://web.dev/introducing-learn-html/) 120 | 121 | 구글의 [web.dev](https://web.dev) 팀에서 [Estelle Weyl](https://twitter.com/estellevw)이 작성한 [HTML 튜토리얼](https://web.dev/learn/html/)을 공개했다. 해당 튜토리얼에는 Document 구조, 메타데이터, 시맨틱 HTML 등의 내용을 포함하고 있다. 현재 모두 공개된 상태는 아니며, 앞으로 몇 달에 걸쳐 단계적으로 공개한다고 한다. 122 | 123 | 지난 [FE News 2021년 6월호](https://github.com/naver/fe-news/blob/master/issues/2021-06.md#learn-css)에서도 [Learn CSS](https://web.dev/learn/css/)가 소개되기도 했다. HTML과 CSS 튜토리얼뿐 아니라 다음 튜토리얼도 제공한다. 124 | 125 | - [Learn Responsive](https://web.dev/learn/design/) 126 | - [Learn Forms](https://web.dev/learn/forms/) 127 | - [Learn PWA](https://web.dev/learn/pwa/) 128 | 129 | ## [jschallenger](https://www.jschallenger.com/) 130 | 131 | JavaScript와 JavaScript DOM API문제들을 풀면서 익히는 튜토리얼 사이트이다. 132 | 133 | # 코드와 도구 134 | 135 | ## [Fig](https://github.com/withfig/autocomplete) 136 | 137 | fig-demo 138 | 139 | 터미널에 IDE에서 보던 자동완성 박스를 추가해 주는 프로그램이다. 140 | 141 | 아직은 macOS만 지원되고, windows/linux는 개발 중이다. 142 | 143 | ## [Zsh-hangul](https://github.com/gomjellie/zsh-hangul) 144 | 145 | zsh-hangul-gif 146 | 147 | ls를 치려고 하는데 한글로 입력되어서 ㅣㄴ가 입력된 경험이 많을 것이다. 148 | 149 | 이런 한영 전환 문제를 해결해 주는 플러그인 프로그램이다. 150 | 151 | ## [The Fuck](https://github.com/nvbn/thefuck) 152 | 153 | thefuck-demo 154 | 155 | 명령어를 잘못 입력했을 때, 그 명령어를 고쳐서 의도한 명령으로 바꿔주는 프로그램이다. 156 | 157 | 예를 들어, `git commit`을 `git comit`으로 잘못 입력했을 때, `git commit`으로 바로 바꿔주는 것이다. 158 | 159 | ## [Auto-Animate](https://auto-animate.formkit.com) 160 | 161 | Simple example of AutoAnimation motion 162 | 163 | 두 줄의 코드 추가로 자연스러운 애니메이션 효과를 추가할 수 있는 가성비 라이브러리 164 | 165 | ## [Pico.js](https://nenadmarkus.com/p/picojs-intro/) 166 | 167 | pico-js-gif 168 | 169 | JavaScript 200줄로 만들어진 얼굴인식 라이브러리 170 | 171 | ## [MemLab](https://facebookincubator.github.io/memlab/) 172 | 173 | 174 | 175 | MemLab은 Meta에서 공개한 JavaScript 메모리 테스팅 오픈소스 프레임워크로 자동화된 메모리 누수 탐지를 해준다. 176 | 테스트 시나리오(Puppeteer API)를 작성한 후, 테스트를 실행하면 브라우저에서 JavaScript Heap 메모리 스냅샷을 통해 누수를 탐침 한다. 이 과정은 다음의 총 6단계를 통해 실행된다. 177 | 178 | 1. Browser Interaction 179 | 2. Diffing the heap 180 | 3. Refining the list of memory leaks 181 | 4. Generating retainer traces 182 | 5. Clustering retainer traces 183 | 6. Reporting the leaks 184 | 185 | > [참고] 추가로 Meta 엔지니어링 블로그의 소개 글도 읽어보라. 186 | > 187 | > - [MemLab: An open source framework for finding JavaScript memory leaks](https://engineering.fb.com/2022/09/12/open-source/memlab/) 188 | 189 | ## [JSON crack](https://jsoncrack.com/) 190 | 191 | 192 | 193 | 중첩된 구조의 복잡한 JSON 데이터는 쉽게 읽기 어렵다. 이 도구는 JSON 데이터를 트리 형태의 시각적 그래프로 표현해 데이터의 구조적 형태와 데이터를 쉽게 파악할 수 있도록 도와준다. 194 | -------------------------------------------------------------------------------- /issues/2023-01.md: -------------------------------------------------------------------------------- 1 | # 2023-01 2 | 3 | # 링크 & 읽을거리 4 | 5 | ## [JavaScript Frameworks - Heading into 2023](https://dev.to/this-is-learning/javascript-frameworks-heading-into-2023-nln) 6 | 7 | 8 | 9 | 2022년을 되돌아본다면, 많은 웹 개발 도구/프레임워크들이 릴리스되었다. Astro와 Sveltekit은 1.0, SolidStart와 Qwik은 베타 그리고 React 18은 Next.js와 Remix를 통해 길을 찾은 스트리밍 지원을 추가했다. 10 | 11 | Front-end 영역에서 문제 해결을 위해 방법으로 "서버에 보다 집중"해 SPA의 문제점들을 해결(SSR을 활용한다든지) 할 수 있다는 의견을 많이 들어봤을 것이다. 그러나 이러한 해결책들은 만병통치약이 아니다. 12 | 13 | 2023년이 이제 막 시작되었다. 23년에는 어떤 기술에 집중해야 할까? 글은 해답을 제시하지 않는다. 그러나 여러분들에게 충분히 생각해 볼 수 있는 인사이트를 제공할 것이다. 14 | 15 | ## [Explore the content of your npm packages with the new code explorer](https://github.blog/changelog/2022-12-06-explore-the-content-of-your-npm-packages-with-the-new-code-explorer) 16 | 17 | 그동안 NPM 패키지들의 세부 구성요소들을 확인하는 것은 쉽지 않았다. 커뮤니티에서 개발한 [npmview](https://npmview.vercel.app/)를 사용하는 방법도 있지만, 직접 사이트를 방문하는 번거로움의 감수가 필요했다. 18 | 19 | 이제 npmjs.com에서 각 패키지 페이지 내의 'code explorer' 탭을 통해 패키지 구성요소들을 손쉽게 확인할 수 있게 되었다. 20 | 21 | ## [React.js: The Documentary](https://hello.honeypot.io/react-coming-soon/) 22 | 23 | 24 | 25 | 이제 Front-end 신에서 React는 "React is everywhere"라는 말이 어울릴 만큼 성장하고 확산되었다. 26 | 그러나 처음 오픈소스로 공개되었을 당시만 해도 사람들의 반응은 이렇게 성장할 것이라고 믿는 이는 많지 않았다. 페이스북에 있던 소수의 개발자 그룹의 노력을 통해 오늘날까지 이어지게 되었다. 27 | 28 | 2월 10일 공개 예정인 다큐멘터리에서는 React의 기원과 인디 프로젝트에서 세계적으로 가장 인기 있는 프레임워크로의 발전에 대해 스타 개발자들로부터 직접 이야기를 들어볼 수 있을 것이다. 29 | 30 | ## [A React Developer's First Take on Solid](https://jakelazaroff.com/words/a-react-developers-first-take-on-solid/) 31 | 32 | React 개발자가 바라본 Solid에 대한 첫인상을 정리한 글로, 2개의 파트로 나눠 각각 Solid와 SolidStart에 대해 느꼈던 점을 소개한다. 33 | 34 | ## [Reasons to avoid Javascript CDNs](https://blog.wesleyac.com/posts/why-not-javascript-cdn) 35 | 36 | 우리는 많은 경우, 정적 파일(.js) 들에 대해 CDN(jsdelivr, unpkg 등)을 활용하면 보다 빠른 속도로 코드를 로딩할 수 있음을 배워왔었다. 그러나 보안 및 시스템 리스크에 따른 단점과 일부 상황에선 오히려 속도가 느려질 수도 있다는 점을 알려준다. 37 | 38 | ## [Migrate a 60k LOC TypeScript (NodeJS) repo to ESM and testing become 4x faster](https://dev.to/gaosun/migrate-a-60k-loc-typescript-nodejs-repo-to-esm-and-testing-become-4x-faster-12-5f82) 39 | 40 | 41 | 42 | 2편으로 구성된 글을 통해 저자는 세 번째 시도 끝에 CJS 모듈들을 네이티브 ESM으로 전환에 성공했고 이로 인해 단위 테스트 수행에 따른 CI 수행 시간을 4배 향상한 경험을 소개하고 있다. 43 | 44 | - [2편](https://dev.to/gaosun/migrate-a-60k-loc-typescript-nodejs-repo-to-esm-and-testing-become-4x-faster-22-4a4k) 45 | 46 | ## [Concepts behind modern frameworks](https://dev.to/lexlohr/concepts-behind-modern-frameworks-4m1g) 47 | 48 | 이제 막 Front-end에 진입하는 개발자들은 "어떤 프레임워크를 배워야 하는가?"와 "프레임워크를 사용하기 전 어느 만큼 JS/TS를 배워야 하는가?"라는 질문을 한다. 그러나 수많은 글들은 이들에게 정보에 입각한 결정 위한 개념 대신 글의 저자가 선호하는 프레임워크 또는 라이브러리의 장점을 홍보하는 것이 일반적이다. 49 | 50 | 이 글은 프레임워크를 구성하는 기본 기술 개념들을 이해할 수 있도록 도와주고, 독자 스스로 기본 개념을 이해할 수 있도록 도와준다. 51 | 52 | ## [당신이 모르는 자바스크립트의 메모리 누수의 비밀](https://ui.toast.com/posts/ko_20210611) 53 | 54 | 55 | 56 | 웹 개발 시 메모리 누수를 점검해 본 적이 있는가? CPU 및 네트워크 성능 측정은 흔한 점검이지만, 메모리 누수를 점검하는 일은 대개 흔치 않을 거라 생각한다. 본 글에서는 크롬 개발자 도구를 통해 메모리 누수를 점검하는 방법을 알아보고, 다섯 가지의 사례를 통해 메모리 누수를 해소하는 예제를 살펴본다. 57 | 58 | # 튜토리얼 59 | 60 | ## [Draw SVG rope using JavaScript](https://muffinman.io/blog/draw-svg-rope-using-javascript/) 61 | 62 | 63 | 64 | SVG path를 이용해 사실적인 밧줄을 그리는 과정과 사실적 구현을 위한 접근에 대한 고민들도 함께 살펴볼 수 있다. 65 | 66 | > [온라인 데모 & 코드](https://codepen.io/stanko/pen/vYaEMKX) 67 | 68 | ## [Webhooks 101 - How I Use Discord Webhooks to Get My Personal Notifications](https://blog.usmans.me/webhooks-101) 69 | 70 | 71 | 72 | 웹훅은 실시간으로 애플리케이션 간 통신하도록 도와주는 강력한 도구로, 수동적인 개입 없이 알림이나 상태에 대한 업데이트를 알려주는데 활용된다. 73 | 74 | 기본적인 REST API에 대한 요청을 하는 방법을 알고 있다면, 웹훅을 사용하는 것은 어렵지 않으며, 이 글을 통해 Discord 웹훅을 활용해 개인 알림을 Discord 서버로 보내는 방법을 배워 볼 수 있다. 75 | 76 | ## [Master Notifications With ChatGPT, React and NodeJS](https://dev.to/novu/master-notifications-with-chatgpt-react-and-nodejs-1ea9) 77 | 78 | 79 | 80 | 이 튜토리얼을 통해 ChatGPT로 생성된 알림을 React와 Node.js를 통해 사용자에게 보낼 수 있는 방법을 배워볼 수 있다. 81 | 82 | ## [Build your Own Virtual Scroll - Part I - DEV Community 👩‍💻👨‍💻](https://dev.to/adamklein/build-your-own-virtual-scroll-part-i-11ib) 83 | 84 | 85 | 86 | 웹 성능 최적화를 위한 virtual scroll 개념을 소개하고 이를 구현하는 방법에 대해서 간략히 알아본다. 87 | 88 | # 코드와 도구 89 | 90 | ## [tRPC](https://trpc.io/) 91 | 92 | 93 | 94 | tRPC는 스키마 또는 코드 생성 없이 타입 세이프 한 API를 빌드하고, 이를 쉽게 소비할 수 있도록 만들어 준다. 95 | 96 | ## [modern-errors](https://github.com/ehmicky/modern-errors) 97 | 98 | 99 | 100 | modern-errors는 오류들을 쉽고 안정적이게, 그리고 일관되게 처리할 수 있도록 만들어 준다. 101 | 102 | ```js 103 | // 1) 오류를 핸들링할 클래스를 생성한다. 104 | import ModernError from 'modern-errors'; 105 | const BaseError = ModernError.subclass('BaseError'); 106 | export const InputError = BaseError.subclass('InputError', { 107 | plugins: [modernErrorsSerialize], // 제공되는 플러그인을 사용할 수도 있다. 108 | }); 109 | 110 | // 2) 오류 발생 코드를 try...catch로 감싼다. 111 | try { 112 | // ... 113 | } catch (cause) { 114 | // 오류에 대한 세부 속성을 설정 115 | throw new InputError('Could not read the file.', { cause }) 116 | } 117 | 118 | ``` 119 | 120 | ## [GraphJin, Build APIs in 5 minutes not weeks](https://github.com/dosco/graphjin) 121 | 122 | 빠르고 안전하게 코드 작업 없이 GraphQL API를 만들 수 있다. GraphQL 쿼리를 통해 API를 정의하면, GraphJin이 자동으로 완전한 기능을 갖춘 API로 생성해 준다. 123 | 124 | ## [Canvas Confetti](https://www.kirilv.com/canvas-confetti/) 125 | 126 | 127 | 128 | 다양한 색종이 폭죽 효과를 만들 수 있다. 129 | 130 | ## [Multiline Structural Search - CodeQue](https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque) 131 | 132 | VSCode 플러그인으로 문법을 이해해 구조적으로 코드를 검색할 수 있도록 도와준다. 133 | > [데모 동영상](https://codeque.co/vscode-demo-sound.mp4) 134 | 135 | ## [Dittytoy](https://dittytoy.net/) 136 | 137 | 간단한 JavaScript API를 활용해 온라인으로 음악을 만들어 볼 수 있다. 138 | 139 | > 매해 크리스마스 시즌마다 듣는 [All I want for Christmas Is You](https://dittytoy.net/ditty/49e1f66678) 들어보기 140 | -------------------------------------------------------------------------------- /issues/2023-04.md: -------------------------------------------------------------------------------- 1 | # 2023-04 2 | 3 | # 링크 & 읽을 거리 4 | 5 | ## DEVIEW 2023 6 | 7 | 8 | 9 | 지난 2월 삼성동 코엑스 그랜드볼룸에서 개최된 국내 최대 규모 개발자 콘퍼런스 DEVIEW의 영상이 업로드되었다. FE 기술과 관련 있는 발표 주제는 다음과 같이 8개로 DEVIEW 공식 사이트의 [Session 페이지](https://deview.kr/2023/sessions)에서도 filter를 web으로 설정해 확인할 수 있다. 10 | 11 | - [하나의 코드로 React, Vue, Svelte 등 모든 프레임워크를 지원할 수 있는 CFCs Reactive](https://deview.kr/2023/sessions/548) 12 | - [눈으로 보며 듣는 음성 기록, 클로바노트 서비스의 웹 기술 톺아보기](https://deview.kr/2023/sessions/537) 13 | - [UI 빌더를 지탱하는 레고 블록 같은 아키텍처 만들기](https://deview.kr/2023/sessions/543) 14 | - [중요한 건 꺾이지 않는 마음: 스마트에디터의 도전](https://deview.kr/2023/sessions/573) 15 | - [GraphQL 잘 쓰고 계신가요? (Production-ready GraphQL)](https://deview.kr/2023/sessions/545) 16 | - [SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략](https://deview.kr/2023/sessions/538) 17 | - [자바스크립트 화이트박스 암호와 크롬 라인 메신저의 보안 강화](https://deview.kr/2023/sessions/534) 18 | - [웨일 브라우저 오픈 소스 생존기](https://deview.kr/2023/sessions/576) 19 | 20 | ## [10 Web Development Trends in 2023](https://www.robinwieruch.de/web-development-trends/) 21 | 22 | 올해의 웹 개발 트렌드는 어떻게 될까? 2023년의 웹 개발 트렌드에 대해 정리된 자료를 통해 쉽게 알아볼 수 있다. [한국어 번역](https://ykss.netlify.app/translation/10_web_development_trends_in_2023/)도 존재한다. 23 | 24 | TL;DR 25 | 26 | - 메타 프레임워크: **Next.js**, Remix, Sveltekit, SolidStart 27 | - 애플리케이션 및 렌더링 패턴: **SSR**, **SSG**, **ISR**, **Streaming SSR**, On-demand ISR, CSR 28 | - 엣지에서 서버리스: Cloudflare Workers, Deno Deploy, Vercel 29 | - 데이터베이스 르네상스: 30 | - 서버리스 데이터베이스: PlanetScale(MySql), Neon(PostgreSQL), Xata(PostgreSQL) 31 | - 플랫폼화: Fly.io, Railway 32 | - Firebase 대체재: Supabase 33 | - 자바스크립트 런타임: Deno, Cloudflare Workers, Bun 34 | - **서버사이드 자바스크립트 런타임의 파편화** 진행 중, 이를 해결하기 위한 [WinterCG](https://wintercg.org)(Web-interpoerable Runtimes Community Group) 35 | - 모노레포: **Turborepo**, Nx, Rush, Lerna 36 | - SSR의 부상에 따른 CSS 변화 37 | - Utility First CSS: **Tailwind CSS**, UnoCSS, CSS Modules 38 | - 제로 런타임 CSS-in-JS: vanilla-extract, linaria, astroturf, compiled 39 | - 타입스크립트를 통한 E2E 타입 안전성: tRPC, Zod, Prisma, TanStack Router 40 | - 빌드 도구: **Vite**, **Esbuild**, **Turbopack**, webpack 41 | - AI 주도 개발: copilot, chatGPT 42 | - 기타: Tauri, Playwright, Wrap, Fig, CSS Container Queries, htmx 43 | 44 | ## [SPA view transitions land in Chrome 111](https://developer.chrome.com/blog/spa-view-transitions-land/) 45 | 46 | view transitions 47 | 48 | 웹에서 네이티브 앱처럼 자연스러운 전환을 구현하는 것은 어렵고, 귀찮은 작업이었다. 49 | 50 | `view transitions API`은 자연스러운 전환 효과를 쉽게 구현할 수 있게 해준다. 해당 기능은 크롬의 최신 릴리스 버전인 111 버전부터 지원된다. 51 | 52 | ## [Why Turborepo is migrating from Go to Rust](https://vercel.com/blog/turborepo-migration-go-rust) 53 | 54 | Why Turborepo is migrating from Go to Rust 55 | 56 | Vercel이 모노레포 툴 Turborepo를 기존의 Go 언어에서 Rust로 옮기기로 결정한 배경에 대해서 설명한다. Turbopack과 코드 중복을 제거하고, 개발자 경험 향상 등의 이유가 있었다고 한다. 57 | 58 | ## [Programmers Dev Survey 2023](https://programmers.co.kr/pages/2023-dev-survey?utm_source=mailchimp&utm_medium=social&utm_campaign=brand_2023report_noti&utm_content=devsurvey_23mar) 59 | 60 | 코딩 테스트 플랫폼 프로그래머스에서 국내 개발자 4,034명을 대상으로 한 설문 조사 결과를 발표했다. 61 | 62 | 연봉, 언어, 프레임워크/라이브러리, 고민거리 등의 항목으로 구성되어서 국내 개발자들의 경험과 생각을 엿볼 수 있다. 63 | 64 | ## [Announcing TypeScript 5.0](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/) 65 | 66 | **typescript 5.0**이 릴리스 되었다. 67 | 68 | `Decorators`, `const Type Parameters` 등의 문법, 기능적 업데이트도 있었지만 더욱 눈여겨봐야 할 것은 `ESM`으로의 전환이다. 69 | 70 | [TypeScript’s Migration to Modules](https://devblogs.microsoft.com/typescript/typescripts-migration-to-modules/) 포스트를 통해 `ESM`으로 전환하게 된 배경에 대해서 밝히고 있다. 71 | 72 | ## [Introducing react.dev](https://react.dev/blog/2023/03/16/introducing-react-dev) 73 | 74 | 지난 3월 16일, 새로운 React 사이트 [react.dev](https://react.dev/)가 공개되었다. React는 이제 곧 공개 10년('13년 5월 29일 공개, [[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook](https://youtu.be/GW0rj4sNH2w?t=224))을 맞이하면서 오늘날 UI 개발에 있어 React를 사용하는 것이 대단하다는 점을 알리기 위해 새롭게 홈페이지를 단장했다고 한다. 75 | 76 | 기존 문서들은 [legacy.reactjs.org](https://legacy.reactjs.org/)를 통해 접근할 수 있으며, 새롭게 개편된 홈페이지는 다음 2개의 메인 섹션으로 나뉘어 있다. 77 | 78 | - [Learn React](https://react.dev/learn): React를 처음부터 배울 수 있는 자기 주도형 과정 79 | - [API Reference](https://react.dev/reference): 모든 React API에 대한 세부 사항과 사용 예제를 제공 80 | 81 | ## [How to start a React Project in 2023](https://www.robinwieruch.de/react-starter/) 82 | 83 | FE-news 구독자분들이라면 지난 3월 [Replace Create React App recommendation with Vite](https://github.com/naver/fe-news/blob/master/issues/2023-03.md#replace-create-react-app-recommendation-with-vite)에서 공식 문서의 추천 도구로 CRA 대신 Vite로 대체하자는 PR과 그에 대한 Dan Abramov의 답변을 소개한 사실을 알고 있을 것이라고 생각한다. 84 | 85 | 지금 소개하는 이 글은 위의 답변 이후 작성된 react.dev의 [Start a new React Project](https://react.dev/learn/start-a-new-react-project)를 보고 작성되었다. 86 | [Start a new React Project](https://react.dev/learn/start-a-new-react-project)에서는 Next.js, Remix, Gatsby, Expo를 추천하는데, 작가는 커뮤니티들에서 이 추천 목록이 완벽하게 받아들여지지 않는 것 같다고 이야기하면서, 초보자들에게 좀 더 다양한 선택지를 제공하기 위해 Vite, Next.js, Astro를 추천한다. 87 | 각각의 장단점을 기술하면서 추천된 이유와 추천되지 못한 이유들을 짚어본다. 88 | 89 | [한국어 번역](https://velog.io/@eunbinn/how-to-start-a-react-project-in-2023)도 존재한다. 90 | 91 | # 튜토리얼 92 | 93 | ## [Progressive Web Apps (PWA) for Beginners - Microsoft](https://www.youtube.com/playlist?list=PLlrxD0HtieHjqO1pNqScMngrV7oFro-TY#fef) 94 | 95 | Microsoft에서 초보자를 위한 PWA 강의를 공개했다. 96 | 4개 챕터, 17개의 비디오로 구성되어 있다. 비디오당 10분 내외의 길이라서 부담 없이 들을 수 있다. 97 | 98 | > PWA: PWA는 'Progressive Web Apps'의 줄인 말로, 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술이다. 99 | > 설치할 필요가 없지만 홈 화면에 아이콘 추가 및 푸시 알림도 가능하여 사용자와의 접촉 기회를 늘릴 수 있다. 그뿐만 아니라 읽기 속도와 표시의 향상, 오프라인 지원 등 다양한 이점을 얻을 수 있다. 100 | 101 | ## [The complete guide to CSS media queries](https://polypane.app/blog/the-complete-guide-to-css-media-queries/) 102 | 103 | CSS Media Queries에 대한 기본 개념부터 고급 기술까지 다룬다. 104 | 105 | > CSS Media Queries: 반응형 디자인을 구현하는 데 필수적인 기술로, 미디어 유형, 디바이스 설정 및 정보 등을 기준으로 CSS 스타일을 적용할 수 있다. 106 | > 이를 통해 디바이스의 크기나 방향 등에 따라 최적화된 디자인을 제공할 수 있게 된다. 107 | 108 | ## [FP and OOP are close siblings](https://blog.mhashim6.me/fp-and-oop-are-close-siblings/) 109 | 110 | 이 글은 FP와 OOP가 조화롭게 같이 사용될 수 있다는 점을 얘기하기 위한 목적을 갖고 있지 않다. 그러나 이 둘은 매우 유사하며, 두 세계의 특정 패턴에 대한 추론에 대해 몇 가지를 배우면 두 가지를 모두 진정으로 이해할 수 있다는 점을 말한다. 111 | 112 | OOP와 FP는 모두 인간 세계의 복잡한 문제를 더 잘 표현하고 해결하는 방법이라는 동일한 문제에 대한 해결책이며, Function Currying을 통해 접근하고 있다. 간단히 요약하자면, 이 글은 "OOP 개발자를 위한 FP"로 생각하면 된다. 113 | 114 | ## [Speeding up the JavaScript ecosystem - npm scripts](https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-4/) 115 | 116 | `npm script`는 높은 빈도로 모든 곳에서 실행되지만, 최적화가 잘되어 있지 않으며 때에 따라 400ms의 오버헤드를 추가하기도 한다. 이 글에서는 0 ~ 22ms로 어떻게 낮출 수 있는지를 설명한다. 117 | 118 | > [참고] 이 글은 "Speeding up the JavaScript ecosystem"의 4번째 시리즈 글로, 이전의 다른 시리즈의 글들도 같이 참고해 보면 좋다. 119 | > 120 | > - [Part 1: PostCSS, SVGO and many more](https://marvinh.dev/blog/speeding-up-javascript-ecosystem/) 121 | > - [Part 2: Module resolution](https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-2/) 122 | > - [Part 3: Linting with eslint](https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-3/) 123 | 124 | # 코드와 도구 125 | 126 | ## [JSVerbalExpressions](https://github.com/VerbalExpressions/JSVerbalExpressions) 127 | 128 | 정규 표현식은 강력하지만, 가독성이 항상 아쉽다. JSVerbalExpressions은 정규 표현식을 더 높은 가독성으로 작성하게 도와준다. 129 | 130 | 비슷한 라이브러리로 [magic-regexp](https://github.com/danielroe/magic-regexp)도 살펴보길 바란다. 131 | 132 | ```tsx 133 | const tester = VerEx() 134 | .startOfLine() 135 | .then('http') 136 | .maybe('s') 137 | .then('://') 138 | .maybe('www.') 139 | .anythingBut(' ') 140 | .endOfLine(); 141 | // 👆🏻 위 코드는 /^(http)(s)?(\:\/\/)(www\.)?([^\ ]*)$/ 정규식을 표현한다. 142 | 143 | if (tester.test('https://www.naver.com')) { 144 | alert('url 테스트 통과'); 145 | } 146 | ``` 147 | 148 | ## [Framework7](https://github.com/framework7io/framework7/) 149 | 150 | 네이티브 앱과 유사한 모습과 경험을 웹 앱을 개발하기 위한 프레임워크다. 유명 캐로셀 라이브러리인 [swiper](https://github.com/nolimits4web/swiper) 개발자가 개발했다. 151 | 152 | 제공되는 기능들은 [데모](https://framework7.io/kitchen-sink/react/?theme=ios)에서 훑어볼 수 있다. 153 | 154 | 유사한 라이브러리로 [stackflow](https://github.com/daangn/stackflow)도 살펴보길 바란다. 155 | 156 | ## [Turbowatch](https://github.com/gajus/turbowatch/) 157 | 158 | [Nodemon](https://nodemon.io/)과 유사한 도구로 파일의 변경을 빠르게 감지하고, 작업들에 대한 오케스트레이션을 수행한다. 159 | 160 | ## [chatGPT JS2TS](https://js2ts.com/) 161 | 162 | Chat GPT를 활용해 JavaScript 코드를 TypeScript로 변환해 주는 도구로, 간단하게 기존 JavaScript 코드를 붙여넣기해 변환할 수 있다. 163 | -------------------------------------------------------------------------------- /issues/2023-05.md: -------------------------------------------------------------------------------- 1 | # 2023-05 2 | 3 | # 링크 & 읽을 거리 4 | 5 | ## [Revisionist Engineering](https://www.sequoiacap.com/article/deno-spotlight/) 6 | 7 | 8 | 미국의 유명한 벤처 캐피털인 세쿼이아 캐피털 웹사이트에 공개된 Ryan Dhal의 인터뷰 내용이다. 9 | 10 | 지금은 Node.js와 Deno를 개발한 개발자로 유명하지만, 과거 영어 강사로 남아메리카에서 생활을 하다 경제적 이유로 인해 11 | 사이트 구축 일을 하면서 Front-end 개발을 시작하게 되었다고 한다. 12 | 13 | 이후, 2008년 9월 구글의 V8 엔진 공개를 기점으로 독일 쾰른의 스타벅스에서 6개월간 개발한 끝에 Node.js가 탄생되었다는 14 | 일화 등을 읽어 볼 수 있다. 15 | 16 | ## [Node.js Just Released Version 20!](https://blog.bitsrc.io/node-js-just-released-version-20-wth-6cb6dfbc161f) 17 | [Node.js의 version 20](https://nodejs.org/en/blog/announcements/v20-release-announce)이 출시되었다. 18 | Node.js 20에서는 `Permission Model`, `Stable Test Runner`이 기능이 추가되었고, V8도 `11.3`으로 업그레이드되었다. 19 | Node.js `0.10`버전부터 사용한 작가는 이런 변화들에 대해 조금 더 자세하고 좀 더 읽기 편하게 소개한다. 20 | 21 | ## [Dissecting Npm Malware: Five Packages And Their Evil Install Scripts](https://blog.sandworm.dev/dissecting-npm-malware-five-packages-and-their-evil-install-scripts) 22 | npm에 배포된 패키지들은 훅을 통해 설치 과정(pre/post install)에서 스크립트들을 수행시킬 수 있다. 23 | 즉, 패키지가 설치될 때 백그라운드에서 조용히 스크립트들이 실행될 수 있다는 말이기도 하다. 24 | npm 멀웨어 패키지들의 사례를 통해 어떤 식으로 사용자 정보를 탈취하는지를 살펴본다. 25 | 26 | > [참고] 추가적으로 다음의 글도 같이 참고해 보기 바란다. 27 | > - [Attackers are hiding malware in minified packages distributed to NPM](https://blog.phylum.io/phylum-discovers-npm-package-mathjs-min-contains-discord-token-grabber) 28 | 29 | ## [Introducing storage on Vercel](https://vercel.com/blog/vercel-storage) 30 | Next.js의 개발사 Vercel에서 다양한 Storage 서비스들을 공개했다. 공개한 서비스들은 아래와 같다. 31 | - Vercel KV: 서버리스 Redis, powered by Upstash 32 | - Vercel Postgres: 서버리스 pgSQL database, powered by Neon 33 | - Vercel Blob(Private Beta): 엣지 컴퓨팅을 활용한 파일 업로드 및 서빙, powered by Cloudflare R2 34 | 35 | ## [WASM + Kubernetes: Beyond Containers](https://www.youtube.com/watch?v=ulZGjeFZirU) 36 | Wasm은 다양한 언어에 효율적이고 안전한 런타임을 제공하는 포터블 컴퓨팅의 미래를 대표한다. 37 | 지난 한 해 동안 관리형 플랫폼, 툴링, WASI에 대한 추가 표준화 작업 등 백엔드에서 Wasm의 성장이 폭발적으로 증가했다. 38 | 39 | 이는 미래의 클라우드 네이티브 아키텍처를 바라볼 때 다음의 질문들을 떠올리게 만든다. 40 | - 언제 Wasm이 올바른 선택인가? 41 | - 특히 기존 엔터프라이즈 아키텍처와 Kubernetes 인프라에 대규모로 투자한 조직의 경우 언제 아키텍처를 전환하는 것이 합리적일까? 42 | - K8s 내에서 Wasm 워크 로드를 실행하여 기존 클러스터 리소스와 운영을 효율적으로 활용함으로써 오버헤드를 줄일 수 있을까? 43 | 44 | 이 강연은 Adobe가 K8s 내부의 백엔드에서 Wasm을 활용하는 몇 가지 방법에 대해 간략하게 설명하며, 기존 K8s 클러스터 내에서 Wasm 클라우드를 실행하기 위한 아키텍처와 Wasm 멀티테넌시를 위해 취하고 있는 단계를 소개한다. 45 | 46 | ## [ECMAScript 명세 이해 1부](https://ui.toast.com/posts/ko_20221116_1) 47 | 이 글은 [v8.dev](https://v8.dev/blog/understanding-ecmascript-part-1)의 `Understanding the ECMAScript spec, part 1`를 번역한 글이다. 48 | [ECMAscript spec](https://tc39.es/ecma262/)을 보게 되면, 익숙하지 않은 표기법으로 인하여 문서를 읽기를 포기하는 사람들이 많기 때문에 그런 사람들을 돕고자 이 글은 작성되었다. 49 | 1부에서는 `hasOwnProperty`의 명세부터 이해하기 위한 정보를 제공해 준다. 50 | 51 | - [ECMAScript 명세 이해, 2부](https://ui.toast.com/posts/ko_20221116_2) 52 | - [ECMAScript 명세 이해, 3부](https://ui.toast.com/posts/ko_20221116_3) 53 | - [ECMAScript 명세 이해, 4부](https://ui.toast.com/posts/ko_20221116_4) 54 | 55 | 56 | ## [문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 1](https://fe-developers.kakaoent.com/2023/230420-beyond-solving-problem-part-1/) 57 | 58 | 59 | 정체를 알 수 없는 CORS 에러를 만나면서 글이 시작된다. 60 | 여러 가지 방법을 찾아 "주먹구구식 방법"으로 문제를 리스트업 하고 하나하나 찾아간다. 61 | 그러던 중 특정 React 컴포넌트 내부에서 require로 css 파일을 가지고 오는 코드를 보고 import 구문으로 변경하여 문제를 해결한다. 62 | 이 글은 여기서부터 본론이다. 63 | 더 근본적인 원인을 찾아 코드를 분석하고 시행착오를 겪으며 문제를 해결하는 과정을 공유한다. 64 | 65 | - [문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2](https://fe-developers.kakaoent.com/2023/230421-beyond-solving-problem-part-2/) 66 | 67 | ## [한글 자동완성을 위한 정규식](https://bluewings.github.io/unobstructed-hangul-regular-expression/) 68 | 69 | 한글 자동완성을 위한 정규식 70 | 71 | 한글은 자음, 중성, 종성의 조합으로 구성되어 있어 조합 중에는 검색이 잘되지 않는 문제가 있다. 72 | 이 문제를 해결하기 위해 만든 [한글 정규식 생성 라이브러리](https://github.com/bluewings/korean-regexp)를 소개하고, 구현 방법에 대해서 설명한다. 73 | 74 | ## [30 Practical Tips for Effective User Interface Design](https://uxplanet.org/30-practical-tips-for-effective-user-interface-design-59e1e46ac370) 75 | 76 | 77 | 78 | UI를 개선할 수 있는 30가지의 간단한 팁을 설명하고 있다. 79 | 쉽게 도입해 볼 수 있는 내용이 많아서 아티클을 읽어보고 개선할 수 있는 부분에 곧바로 적용해 보는 것은 어떨까? 80 | - 순수한 검은 색상 사용하지 않기 81 | - 균일한 간격(8의 배수 사용) 82 | - 대소문자의 적절한 사용 83 | - 텍스트 폼에서의 정렬과 스타일 등 84 | 85 | 86 | ## [Should I use e.code or e.key when handling keyboard events?](https://blog.andri.co/022-should-i-use-ecode-or-ekey-when-handling-keyboard-events/) 87 | 88 | 키보드 이벤트가 발생하면 `code`와 `key` 프로퍼티를 사용하여 어떤 키가 눌렸는지 확인할 수 있다. 89 | 보통의 경우 두 프로퍼티를 구분하지 않고 사용해도 문제가 되지 않지만, 때로는 구분하여 사용해야 한다. 90 | 이 글에서는 두 프로퍼티의 차이점에 대해 살펴본다. 91 | 92 | ## [Conditionally adaptive CSS. Browser behavior that might improve your performance](https://pepelsbey.dev/articles/conditionally-adaptive/) 93 | 94 | 95 | 96 | Link 태그의 media 속성을 활용하여 현재 viewport 사이즈에 맞는 CSS 파일을 조건부 로드해 초기 로딩 성능을 개선할 수 있는 것에 대해 설명한다. 97 | viewport 사이즈뿐만 아니라 media 스펙에 있는 다양한 피처들을 활용해 성능을 개선하는 방법도 제시하고 있다. 98 | 대표적인 예로는 고해상도 화면이나 사용자의 색상 환경설정에 맞게 조건부로 로드시키는 것이다. 99 | 100 | ## [IndexedDB 간단 정리하기](https://pks2974.medium.com/indexeddb-간단-정리하기-ca9be4add614) 101 | 102 | 웹 브라우저에서 데이터를 저장할 때 주로 Cookie 혹은 Local Storage를 이용해서 처리하게 된다. 103 | 하지만, 이러한 방법은 용량의 제한과 저장할 데이터의 타입에 한계가 있는 방법이다. 104 | 이러한 한계를 극복할 수 있게 해주는 브라우저 표준 Database인 IndexedDB(과거 이름: WebSimpleDB)를 알아본다. 105 | 106 | # 튜토리얼 107 | 108 | ## [React Visualized](https://react.gg/visualized) 109 | 110 | 111 | 112 | 시각적 형태로 React 등장의 역사적 배경과 함께, React를 배우기 위해 필요한 모든 기본적 개념을 다룬다. 113 | 각 기술적 콘셉트 등에 대해선 간단한 예제를 제공해 상호작용을 통해 어떻게 동작하는지를 쉽게 이해할 수 있는 가이드다. 114 | 115 | ## [Next.js and Rust: An Innovative Approach to Full-Stack Development](https://joshmo.hashnode.dev/nextjs-and-rust-an-innovative-approach-to-full-stack-development) 116 | 117 | 사용자 등록을 통한 로그인 기반의 노트 앱을 만들어 보는 튜토리얼이다. 118 | Front-end는 Next.js를 사용하고, 119 | Back-end는 Rust 웹 프레임워크인 [Axum](https://github.com/tokio-rs/axum/)을 활용한다. 120 | 121 | ## [Creating a typewriter animation effect with only CSS](https://blog.logrocket.com/creating-typewriter-animation-css/) 122 | 123 | 124 | `@keyframes` 와 `@steps`를 이용해 typewriter animation을 만들어 본다. 125 | 126 | 127 | 128 | # 코드와 도구 129 | ## [Dexie.js](https://github.com/dexie/Dexie.js) 130 | 131 | ```ts 132 | const oldFriends = await db.friends 133 | .where('age').above(75) 134 | .toArray(); 135 | 136 | // or make a new one 137 | await db.friends.add({ 138 | name: 'Camilla', 139 | age: 25, 140 | street: 'East 13:th Street', 141 | picture: await getBlob('camilla.png') 142 | }); 143 | ``` 144 | Dexie.js는 웹 브라우저 표준 데이터베이스인 IndexedDB를 래핑 한 라이브러리이다. 145 | IndexedDB를 더 우아하게 다룰 수 있도록 해준다. 146 | 147 | ## [next-route-visualizer](https://github.com/DiiiaZoTe/next-route-visualizer) 148 | 149 | 150 | NextJs의 router를 보기 쉽게 시각화 시켜준다. 151 | 152 | 153 | ## [GitHub Language Statistics](https://madnight.github.io/githut) 154 | 155 | 156 | 이 페이지는 GitHub에서 가장 인기 있는 프로그래밍 언어별로 Pull Requests, Starts, Pushes, Issues의 수에 대한 그래프를 제공한다. 157 | 158 | 159 | ## [Jscanify](https://github.com/ColonelParrot/jscanify) 160 | 161 | 162 | 163 | [opencv.js](https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html)를 활용한 모바일 문서 스캐너 도구로, 사진 촬영된 문서를 잘 스캔 된 문서로 변환해 준다. 164 | 165 |

166 | 167 | 168 |

-------------------------------------------------------------------------------- /issues/2023-06.md: -------------------------------------------------------------------------------- 1 | # 2023-06 2 | 3 | # 📚 링크 & 읽을 거리 4 | 5 | ## [React에서 View의 렌더링 관심사 분리를 위한 VAC 패턴 소개](https://wit.nts-corp.com/2021/08/11/6461) 6 | 7 | UI 개발자와 JS 개발자가 협업하는 경우 JSX를 함께 수정해야 하는 일이 종종 발생한다. 이런 경우 코드 충돌이 발생하거나, 다른 개발자가 작성한 코드를 수정하기 어려운 일이 생길 수 있다. 8 | 9 | VAC(View Asset Component) 패턴은 뷰 로직과 JSX 개발 영역을 격리함으로써 이러한 협업 문제를 줄일 수 있는 패턴이다. 다음은 VAC 패턴의 한 예로, 스핀 박스 구현에 필요한 뷰 로직을 별도 컴포넌트로 격리하고, UI 표현에 필요한 정보를 props로 VAC에게 전달하고 있다: 10 | 11 | ```jsx 12 | // View Component 13 | const SpinBox = () => { 14 | const [value, setValue] = useState(0); 15 | 16 | const props = { 17 | value, 18 | onDecrease: () => setValue(value - 1), 19 | onIncrease: () => setValue(value + 1), 20 | }; 21 | 22 | return ; 23 | }; 24 | 25 | // VAC 26 | const SpinBoxView = ({ value, onIncrease, onDecrease }) => ( 27 |
28 | 29 | {value} 30 | 31 |
32 | ); 33 | ``` 34 | 35 | 비즈니스 로직과 View의 관심사를 분리하는 여러 기법이나 패턴을 적용했음에도 여전히 JSX 관리로 인해 UI 개발자와 JS 개발자가 협업에 어려움이 있다면 VAC 패턴을 검토해 보는 것도 좋을 듯하다. 36 | 37 | > 네이버 테크톡에서 글쓴이가 발표한 영상도 살펴 볼 수 있다: 38 | > https://tv.naver.com/v/23162062 39 | 40 | ## [Best Practices and Design Patterns in React.js for High-Quality Applications](https://medium.com/@obrm770/best-practices-and-design-patterns-in-react-js-for-high-quality-applications-6b203be747fb) 41 | 42 | 43 | 44 | React 앱을 구축할 때 알고 있으면 유용한 설계 방법들과 패턴에 대해 설명하는 글이다. 프로젝트를 기능 기반 폴더 구조로 구성, 작고 집중된 컴포넌트를 유지, 명확하고 의미 있는 이름을 사용, 상태 관리 및 API 훅 분리 등 기본적이지만 유익한 내용들을 정리해 놓았다. 45 | 46 | Next.js 나 SSR 관련된 설명은 없지만 React 앱을 만들 때 필요한 기본적인 내용을 담고 있어서 현재 React로 개발하고 있거나 개발할 예정이 있다면 한 번쯤 읽어봐도 좋을 것이다. 47 | 48 | ## [개발자가 알아두면 좋은 '재현 가능한 예제' 활용법](https://yozm.wishket.com/magazine/detail/2027/) 49 | 50 | 51 | 52 | 좋은 질문을 하는 것은 어렵다. 좋은 질문을 해야 좋은, 원하는 답변을 얻을 수 있다. 이러한 좋은 질문을 하는 방법 중에는 '재현 가능한 예제'를 활용하는 방법이 있다. '재현 가능한 예제'를 활용하면 코드의 맥락과 상황을 정확하고 자세하게 전달할 수 있다. 53 | 54 | 이 글에서는 '재현 가능한 예제'란 무엇인지, 어떻게 만들 수 있는지에 대해 설명한다. R 프로그래밍 관련 이야기가 후반부에 포함되어 있으나, 초반부만 읽어 보아도 좋을 듯하다. 55 | 56 | ## [React from Another Dimension](https://www.youtube.com/watch?v=zMf_xeGPn6s) 57 | 58 | 59 | 60 | 지난 5월 9~11일 진행되었던 [Remix Conf 2023](https://remix.run/conf/2023)에서 Dan Abramov의 세션으로, 노래와 가사를 검색하고 볼 수 있는 개인 웹 사이트를 React 구성 요소를 사용해 만드는 과정을 다룬다. 세션은 커다란 온라인 데모와 같이 구성되어 있으며, 기능을 한 가지씩 추가해 나가면서 React가 어떻게 활용되는지를 실무적 관점에서 전달한다. 61 | 62 | ## [11 HTML best practices for login & sign-up forms](https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms) 63 | 64 | 65 | 66 | HTML 엘리먼트와 속성을 정확히 사용하는 것은 중요하다. 정확히 사용한다면 많은 부분 브라우저의 도움을 받을 수 있다. 67 | 68 | 이 글에서는 로그인을 예시로 하여 HTML 엘리먼트와 속성을 정확히 사용하는 방법에 대해 설명한다. 69 | 70 | ## [What's new in ECMAScript 2023](https://pawelgrzybek.com/whats-new-in-ecmascript-2023/) 71 | 72 | 이번 ECMAScript 2023에 도입된 새 기능들을 소개하는 글이다. 특히 새롭게 추가된 배열 메서드를 통해 더욱 예측 가능한 코드 작성이 가능해진 점이 눈에 띈다. 새로운 기능에 관심이 있다면 읽어보길 바란다. 73 | 74 | ## [주니어 개발자를 위한 엄청 쉬운 TCP/IP 4계층 이야기](https://yozm.wishket.com/magazine/detail/1956/) 75 | 76 | TCP/IP 전송 계층에 대해 택배를 예로 들어 설명한다. 다음 글로는 [주니어 개발자를 위한 TCP/IP 주요 프로토콜 알아보기](https://yozm.wishket.com/magazine/detail/2005/)도 있으니 관심 있다면 이어서 읽어보길 추천한다. 77 | 78 | ## [On commit messages](http://who-t.blogspot.com/2009/12/on-commit-messages.html) 79 | 80 | 프로젝트가 오랫동안 성공할 수 있는지는 코드 유지 보수성에 달려 있다고 해도 과언은 아니다. 그런 면에서 커밋 메시지란 정말 중요하다. 하나의 명확하지 않은 커밋 메시지가 여러 개발자들의 시간을 허비하게 만들고, 코드를 변경할 수 없게 만들 수도 있다. 81 | 82 | 다소 오래된 글이지만 이 글은 그런 커밋 메시지의 중요성과 커밋 메시지를 어떻게 작성해야 하는지 잘 설명하고 있다. 83 | 84 | ## [리액트 공식 문서 한글 번역 (비공식)](https://react-ko.dev) 85 | 86 | 최근 리뉴얼된 React 공식 문서의 비공식 한글 번역 사이트이다. 원문과 번역을 함께 볼 수 있도록 구성되어 있다. 87 | 88 | ## [Costly CSS Properties and How to Optimize Them](https://levelup.gitconnected.com/costly-css-properties-and-how-to-optimize-them-b2ebc6a85979) 89 | 90 | 성능상 비용이 많이 드는 CSS 속성과 이를 최적화하는 방법을 설명하는 글이다. `box-shadow`, `filter`, `border-radius` 등이 비용이 많이 드는 대표적인 속성이고 이를 개선할 수 있는 방안에 대해 설명하고 있다. 91 | 92 | ## [Will JavaScript Become the Most Popular WebAssembly Language?](https://thenewstack.io/webassembly/will-javascript-become-the-most-popular-webassembly-language/) 93 | 94 | 95 | 96 | 브라우저에서 확장되었기 때문에 JavaScript가 Wasm에 자연스럽게 적합할 것이라고 쉽게 추측할 수 있다. 그러나 원래 Wasm은 개발자가 JavaScript를 통해 브라우저에서 다른 언어와 상호 작용할 수 있도록 컴파일하는 것이었다. 97 | 98 | 현재 서버 사이드 Wasm를 위한 여러 비 브라우저 런타임([Docker의 Wasm 지원](https://thenewstack.io/webassembly/docker-needs-to-get-up-to-speed-for-webassembly/) 포함)이 있다. 하지만 Wasm 모듈은 실제로 [JavaScript 런타임(예: V8) 내에서 실행](https://bytecodealliance.org/articles/making-javascript-run-fast-on-webassembly)되기 때문에, Wasm의 범용 런타임 전환에 따라 JavaScript와의 정렬 또한 계속 중요할 수밖에 없다. 99 | 100 | 101 | # 🕹 튜토리얼 102 | 103 | ## [How to draw any regular shape with just one JavaScript function](https://developer.mozilla.org/en-US/blog/javascript-shape-drawing-function) 104 | 105 | 106 | 107 | 삼각함수와 canvas를 이용해 쉽게 정다각형을 만드는 방법을 소개한다. 108 | 109 | 추가로 MDN에서 기존의 기술문서를 보완하기 위한 블로그를 5월부터 시작하였다. 110 | 111 | 112 | # 📦 코드와 도구 113 | 114 | ## [The Epic Stack](https://github.com/epicweb-dev/epic-stack) 115 | 116 | 117 | 118 | 최신 웹 개발에서 사용할 수 있는 훌륭한 도구가 너무 많다. 이로 인해 최신 웹 개발은 때로 지치게 만들기도 한다. 119 | 120 | 이것의 좋은 점은 대부분의 경우 잘못된 선택을 하기가 어렵다는 것이다. 애플리케이션을 구축하는 데 사용할 수 있는 대부분의 프레임워크와 도구의 장단점은 대다수 앱의 제약 조건에 맞다. 121 | 122 | 그럼에도 불구하고 엔지니어들은 분석 마비로 인해 지속적으로 어려움을 겪고 있다. 이를 어떻게 해결할 수 있을까? 123 | 124 | React 생태계의 주요 인물 중 한 명인 Kent C. Dodds는 오랜 경험을 바탕으로 팀이 아이디어를 더 빠르고 안정적인 기반 위에서 프로덕션에 출시할 수 있도록 도와주는 프로젝트 스타터(Remix 기반)를 공개했다. 125 | 126 | > Remix Conf 세션도 같이 참고해 보기 바란다.
127 | > - ["The Epic Stack" by Kent C. Dodds at RemixConf 2023](https://www.youtube.com/watch?v=yMK5SVRASxM) 128 | > 129 | > 유사한 Next.js 기반의 엔터프라이즈 boilerplate 프로젝트도 있다. 130 | > - [Next.js Enterprise Boilerplate](https://github.com/Blazity/next-enterprise) 131 | 132 | ## [useHooks](https://usehooks.com/) 133 | 134 | 135 | 136 | [ui.dev](https://ui.dev/) 팀에서 사용하는 React Hooks를 모아둔 사이트이다. 수십 여개의 Hooks를 제공한다. 직접 구현하기에는 번거로운 `useClickAway`와 같은 Hooks도 있으니 한번 살펴보길 바란다. 137 | 138 | ## [CodeJar](https://medv.io/codejar/) 139 | 140 | 141 | 142 | 웹에서 사용할 수 있는 코드 에디터이다. 다양한 프로그래밍 언어와 색상 테마를 제공한다. 143 | 144 | ## [pretty-ts-errors](https://github.com/yoavbls/pretty-ts-errors) 145 | 146 | pretty-ts-errors 147 | 148 | 타입이 복잡해질수록 타입 스크립트의 오류는 읽기 힘들어진다. 사실 내가 알고 싶은 것은 `email: string`이 누락되었다는 사실뿐인데도 타입스크립트 오류는 `...`으로 생략된 긴 오류를 보여주기도 한다. 149 | 150 | pretty-ts-errors 플러그인은 타입 에러의 핵심만 요약해서 보여준다. vscode에서만 사용 가능하다. 151 | 152 | ## [ts-pattern](https://github.com/gvergnaud/ts-pattern) 153 | 154 | ts-pattern 155 | 156 | 더 **나은** 더 **안전한** 조건 처리를 도와주는 라이브러리다. 157 | - 패턴 매칭을 통해 복잡한 조건을 하나의 간결한 표현식으로 표현할 수 있다. 158 | - 코드가 더 **짧아지고** 더 **읽기 쉬워진다**. 159 | - [Exhaustiveness checking](https://www.pumpkiinbell.com/blog/typescript/exhaustive-checking)을 통해 실수로 빠트린 케이스를 잡아준다. 160 | -------------------------------------------------------------------------------- /issues/2023-07.md: -------------------------------------------------------------------------------- 1 | # 2023-07 2 | 3 | # 📚 링크 & 읽을 거리 4 | 5 | ## [CommonJS is hurting JavaScript](https://deno.com/blog/commonjs-is-hurting-javascript) 6 | 7 | JavaScript가 브라우저를 넘어 서버로 확장되기 시작하면서, 현재 코드에 다른 모듈을 포함시키는 방법이 필요했다. 8 | 이에 대해 2009년 Mozilla의 Kevin Dangoor가 CommonJS라는 표준을 제안했고, 모두가 알고 있듯이 Node.js 채택으로 인해 사실상 표준이 되었다. 9 | 10 | 2015년 ES6를 통해 표준 모듈 시스템인 ESM을 도입했지만, Node.js는 CJS와 ESM 모두를 지원하며 오늘날까지도 2개의 모듈 시스템이 공존하고 있다. 11 | 12 | 많은 이들은 모듈을 설치하고 빌드 단계 없이, 서버에서 그리고 브라우저에서 바로 사용할 수 있기를 원하지 않을까? 13 | 14 | > [참고] Deno의 견해와는 반대로, Bun은 5/29일 릴리스된 v0.6.5에서 [네이티브 CJS 지원](https://bun.sh/blog/bun-v0.6.5#native-commonjs-runtime-support)을 추가했다. 15 | > - [CommonJS is not going away](https://bun.sh/blog/commonjs-is-not-going-away) 16 | 17 | ## [npm-esm-vs-cjs](https://github.com/wooorm/npm-esm-vs-cjs) 18 | 19 | 20 | 21 | npm 레지스트리에서 ESM과 CJS의 점유율에 대한 데이터로, 주당 1M 다운로드와 500+개 이상의 프로젝트가 의존하는 패키지들에 대해 분석한 결과를 제공한다. 22 | 23 | '23/5월 기준, CJS가 `70.7%`를 차지하고 있으며, 다양한 ESM 지원 방식들이 `29.3%`를 차지하고 있는 것으로 나타났다. 24 | 이 결과에 따르면, Deno의 바램과는 다르게도 아직 우리는 CJS 세상에 살고 있는 것처럼 보인다. 25 | 26 | ## [The Cost of JavaScript 2023](https://speakerdeck.com/addyosmani/the-cost-of-javascript-in-2023) 27 | 28 | 29 | 30 | Chrome 브라우저 팀에서 일하고 있는 Addy Osmani의 발표 자료로, 웹에서 JavaScript를 사용하는 데 있어 때때로 쉽게 알 수 없는 방식으로 31 | 전송하는 것에 대한 비용을 지불하는 것, 특히 모바일과 저사양 데스크톱에서 어떻게 JavaScript가 가장 비싼 리소스로 사용되는 방법과 그 이유를 설명한다. 32 | 33 | 발표에서 다루는 주요 내용은 다음과 같다. 34 | - 무거운 JavaScript로 인해 발생하는 주요 비용 35 | - 평균적인 하드웨어와 무거운 JavaScript가 사용자 경험에 미치는 영향 36 | - JavaScript 비용을 줄이고, 장시간 작업을 줄이며, 핵심 Web Vitals 지표를 개선하기 위한 팁과 요령 37 | - 프레임워크와 브라우저가 기본적으로 JavaScript 비용을 줄이기 위해 시도하는 것들 38 | - 새로운 성능 지표가 사용자 상호 작용을 개선하기 위해 JavaScript를 최적화할 위치를 추론하는 데 도움이 되는 방법 39 | 40 | > [발표 영상](https://www.youtube.com/watch?v=ZKH3DLT4BKw)으로 내용보기 41 | 42 | 43 | ## [The Costs & Benefits of React Server Components](https://www.youtube.com/watch?v=TJOiXyVKExg) 44 | 45 | 46 | 47 | 샌프란시스코에서 열린 [Reactathon 2023](https://www.reactathon.com/) 콘퍼런스에서 발표된 세션으로, RSC를 이해하기 위해 기존의 방식인 SPA → SSR 등에 대한 배경적 소개를 통해 접근한다. 48 | 49 | 깊은 내용이라기보단, 각각의 접근 방법들에 대한 개념적인 이해와 함께 RSC가 어떤 경우에 도움이 될 수 있을지를 설명한다. 50 | 51 | > [참고] 배경적 설명이 필요 없다면, 앞을 건너뛰고 [RSC를 다루는 부분](https://youtu.be/TJOiXyVKExg?t=678)부터 참고하라. 52 | 53 | 54 | ## [Picking the Right Tool for Maneuvering JavaScript's Event Loop](https://www.macarthur.me/posts/navigating-the-event-loop) 55 | 56 | 57 | 58 | 작업에 따라 Event Loop 수명 주기의 여러 부분에 걸쳐 작업을 예약하는 것은 유용하게 사용될 수 있으며, 이를 위해 사용할 수 있는 몇 가지 도구를 설명한다. 59 | 60 | 대부분의 경우 JavaScript의 이벤트 루프에 대해 깊이 생각하지 않고도 잘 사용할 수 있다. 하지만 렌더링 프로세스 및 비동기 작업과 같은 작업을 활용하기 시작하면, 작동 방식뿐만 아니라 이를 가장 잘 활용할 수 있는 다양한 도구를 아는 것이 편리하다. 61 | 62 | Event Loop의 "조작"이란 "반복의 특정 부분 또는 다른 반복에서 실행되도록 코드를 예약하는 것"을 의미하며, 상황에 따라 어떤 도구를 선택하느냐에 따라 코드의 성능에 큰 영향을 미칠 수 있다. 63 | 64 | ## [test262.fyi](https://test262.fyi/) 65 | 66 | ECMAScript의 공식 테스트 셋인 [test262](https://github.com/tc39/test262)를 매일 다양한 JavaScript 엔진을 대상으로 테스트를 실행하고 결과를 확인할 수 있다. 67 | 일반적으론 활용할 일이 많진 않겠지만, 엔진들의 호환성과 표준에 대한 준수를 확인할 수 있다. 68 | 69 | ## [새로 바뀐 네이버 메인 훔쳐보기](https://yceffort.kr/2023/05/what-is-in-naver) 70 | 71 | 네이버 PC 메인이 5월 17일, 3년 만에 새롭게 개편되었다. 72 | 개편된 데스크톱용 버전은 어떤 기술로 만들어졌는지 Chrome 개발자 도구를 통해 분석한다. 73 | 74 | 이 글은 네이버의 공식적인 의견은 아니며, 아래 작가의 경고도 함께 소개한다. 75 | > 네이버 메인 개발자가 아니기 때문에 진짜 그냥 웹사이트만 보고 배운 것들만 적어둔다. 실제 개발 내용과는 다를 수 있다는 점을 미리 경고한다. 76 | 77 | # 🕹 튜토리얼 78 | 79 | ## [Hands on with the Node.js test runner](https://www.sonarsource.com/blog/node-js-test-runner/) 80 | 81 | Node.js는 v18에 실험적인 테스트 러너를 추가했고, v20에 정식으로 릴리스했다. 82 | 83 | 빌트인 테스트 러너가 필요한 이유는 무엇일까? 84 | - 서드파티에 대한 종속성 없이 프로젝트를 테스트하는 데 사용할 수 있는 제한된 테스트 기능 세트를 제공하고 85 | - 테스트 프레임워크가 표준화하는 데 사용할 수 있는 기본 프리미티브 세트를 제공하는 것이다. 86 | 87 | 이 글은 빌트인 테스트 러너를 사용해 필요한 테스트를 작성하고 실행하는 방법을 설명한다. 88 | 89 | > [참고] Deno와 Bun 또한 빌트인 테스트 러너를 제공하고 있다. 90 | > - [Deno: Testing](https://deno.land/manual@v1.33.1/basics/testing) 91 | > - [bun test](https://bun.sh/docs/cli/test) 92 | 93 | ## [React Bits](https://github.com/vasanthk/react-bits) 94 | 95 | React를 활용한 패턴, 기술, 팁 및 트릭에 대한 모음을 코드 예제와 함께 제공되며, [Gitbook](https://vasanthk.gitbooks.io/react-bits/content/) 포맷으로도 제공된다. 96 | 97 | > [참고] 한국어 버전 링크도 있지만, 대부분 번역되지 않은 상태여서 영문 버전을 확인하기 바란다. 98 | 99 | ## [How I built my first Open Source project with ChatGPT and Next.js. 10k users in 24 hours 🤯](https://dev.to/shnai0/how-i-build-my-first-open-source-project-with-chatgpt-and-nextjs-10k-users-in-24-hours-2m7n) 100 | 101 | 한 번도 코딩을 해본 경험이 없는 개발자가 ChatGPT와 Next.js를 사용해 24시간 만에 1만 명의 사용자를 확보한 경험을 공유한다. 102 | 103 | [LinkedIn Post Generator](https://www.postgenerator.app/) 프로젝트는 LinkedIn에 어울리는 글을 자동으로 카테고리에 맞춰 자동으로 생성해 주며, 해시태그, 이모티콘, URL 등과 같은 요소를 고려하는 고유한 알고리즘을 기반으로 글의 완성도를 평가해 준다. 104 | 105 | ## [What is REST?](https://twitter.com/getpostman/status/1674859088159682560/photo/1) 106 | 107 | 108 | 109 | API 플랫폼 도구를 서비스하는 Postman에서 트윗 스레드를 통해 REST의 개념을 쉽게 이해할 수 있도록 소개한다. 110 | 111 | > [참고] 최근 트위터의 비로그인 게시물 열람 제한 적용에 따라, 트윗 확인을 위해 로그인이 필요할 수 있다. 112 | 113 | ## [Creating a seamless multi-language user interface in React](https://www.honeybadger.io/blog/creating-multi-language-user-interface-with-react/) 114 | 115 | 116 | 117 | `react-i18next`을 활용해 다국어를 지원하는 날씨 애플리케이션을 만들어보자. 만약 국제화(i18n) 설정을 끝내고 자동화를 하고 싶다면 지난 호에 실린 [국제화(i8n) 자동화 가이드](./2021-04.md#%EA%B5%AD%EC%A0%9C%ED%99%94i18n-%EC%9E%90%EB%8F%99%ED%99%94-%EA%B0%80%EC%9D%B4%EB%93%9C)도 좋은 참고 자료가 될 것이다. 118 | 119 | # 📦 코드와 도구 120 | 121 | ## [esm.sh](https://esm.sh/) 122 | 123 | URL(npm 패키지 또는 GitHub 저장소를 지정)에서 ESM을 import 할 수 있는 CDN 서비스이다. 124 | 125 | NPM 레지스트리와 GitHub 저장소에 있는 모듈을 import 하는 경우, 아래와 같은 형식으로 사용할 수 있다. 126 | ```js 127 | // NPM 레지스트리 기준 128 | import React from "https://esm.sh/react@18.2.0"; 129 | 130 | // GitHub 저장소 기준 131 | import tslib from "https://esm.sh/gh/microsoft/tslib@2.5.0"; 132 | ``` 133 | 134 | 또는 모듈을 설치하지 않고 다음과 같이 빌드할 수도 있다. 135 | ```js 136 | import { esm } from "https://esm.sh/build"; 137 | 138 | const mod = await esm` 139 | export const foo: string = "bar"; 140 | `; 141 | console.log(mod.foo); // "bar" 142 | ``` 143 | 144 | > [참고] 유사한 서비스로는 [Skypack](https://www.skypack.dev/)이 있다. 145 | 146 | ## [Anime.js](https://github.com/juliangarnier/anime/) 147 | 148 | 149 | 150 | Anime.js는 간단하면서도 강력한 API를 갖춘 경량 JavaScript 애니메이션 라이브러리로 CSS, SVG, DOM 및 JavaScript 객체와 함께 작동한다. 151 | 152 | 사용방법은 간단하게 대상 요소를 지정한 후, 필요한 속성을 지정하면 된다. 문서가 잘 정리되어 있어 비교적 쉽게 사용할 수 있다. 153 | 154 | ```js 155 | import anime from 'animejs/lib/anime.es.js'; 156 | 157 | anime({ 158 | targets: 'div', 159 | translateX: 250, 160 | rotate: '1turn', 161 | backgroundColor: '#FFF', 162 | duration: 800 163 | }); 164 | ``` 165 | 166 | ## [background-removal-js](https://github.com/imgly/background-removal-js) 167 | 168 | 169 | 170 | 이미지에서 배경을 제거해 주는 자바스크립트 라이브러리다. 브라우저 환경에서 동작하기 때문에 서버 비용, 프라이버시 문제를 걱정하지 않아도 된다. [데모 페이지](https://img.ly/showcases/cesdk/web/background-removal/web?utm_source=github&utm_medium=project&utm_campaign=bg-removal)에서 간단하게 실행해 볼 수 있다. 171 | 172 | ## [novel](https://github.com/steven-tey/novel) 173 | 174 | 175 | 176 | Notion 스타일의 WYSIWYG 에디터이다. AI 기반 자동 완성이 지원된다. [데모 페이지](https://novel.sh)에서 ++를 입력해서 AI 자동완성 기능을 써볼 수 있다. 177 | -------------------------------------------------------------------------------- /issues/2023-09.md: -------------------------------------------------------------------------------- 1 | # 2023-09 2 | 3 | # 📚 링크 & 읽을 거리 4 | 5 | ## [성능 하면 빠질 수 없는 메모이제이션, 네가 궁금해](https://d2.naver.com/helloworld/9223303) 6 | 7 | 8 | 9 | React에서 메모이제이션이 성능 개선의 만능 해결책일까? 10 | 11 | 이 글에서는 메모이제이션을 어떻게 하면 더 잘 쓸 수 있는지에 대해 다양한 케이스와 코드를 예로 들며 설명하고 있다. 12 | 13 | 글을 읽고 난 후에는 어떤 상황에서 메모이제이션이 오히려 성능을 저하 시키는지, 어떤 경우에 사용하고 사용하지 말아야 하는지, 어떻게 하면 불필요한 메모이제이션 코드를 제거할 수 있는지 알게 될 것이다. 14 | 15 | ## [State of CSS 2023](https://2023.stateofcss.com/en-US/) 16 | 17 | 18 | 19 | 전 세계 개발자들의 CSS 현황 설문조사 결과가 공개되었다. 20 | 21 | CSS Frameworks 부문에서는 [Tailwind CSS](https://tailwindcss.com/)가 전년도에 이어 계속해서 사용량이 우상향 하며 50%를 기록했고 가장 높은 긍정적인 경험을 나타내었다. 하지만 관심도와 만족도 부분에서는 [Open Props](https://open-props.style/)가 Tailwind CSS를 앞지르는 모습을 보였다. 22 | 23 | CSS-in-JS 부문에서는 CSS Modules가 가장 큰 만족도를 보였고 Styled Components가 그 뒤를 이었다. 24 | 25 | CSS Frameworks와 CSS-in-JS 사용자의 행복도를 비교하면 각각 35.1%, 20.3%로 CSS Frameworks 사용자의 행복도가 좀 더 높았다. 26 | 27 | ## [Randomness in CSS using trigonometry](https://hypersphere.blog/blog/randomness-in-css-using-trigonometry/) 28 | 29 | 30 | 31 | 최신 모던 브라우저들에서는 새로운 CSS Trigonometric functions(삼각함수)들을 사용할 수 있다는 사실을 알고 있는가? 이 함수들을 사용하면 이전에는 불가능했던 CSS 레벨에서 수학적 계산을 보다 정교하게 수행할 수 있다. 32 | 33 | 이 글에선 이들 함수를 활용해 pseudo-random 값들을 생성해 애니메이션이나 위치 등에서 활용할 수 있는 방법을 소개한다. 34 | 35 | > [참고] 삼각함수에 대해 보다 더 자세히 알고 싶다면, 다음 글을 참고하라. 36 | > 37 | > - [Trigonometric functions in CSS](https://web.dev/css-trig-functions/) 38 | 39 | ## [htmx](https://htmx.org/) 40 | 41 | 42 | 43 | 웹 개발의 대부분은 HTML/CSS을 통해 사용자 입력을 받고, 그에 따라 JavaScript를 통해 새로운 콘텐츠를 업데이트하는 방식의 접근을 오랜 시간 동안 받아들이고 사용하고 있다. 44 | 45 | htmx는 어쩌면 우리가 일반적으로 알고 있는 개발 방식에 새로운 접근을 제시하며, 대부분의 작업들은 HTML 태그의 속성을 통해 처리할 수 있게 한다. 46 | 47 | ```html 48 | 49 | 50 | 51 | 59 | ``` 60 | 61 | 위의 코드는 사용자가 `