2021-02 소식

README.md

@@ -16,6 +16,7 @@ FE News는 네이버 FE 엔지니어들이 엄선한 양질의 `FE 및 주요한
 
 ## :mailbox_with_mail: 최신소식
 
+- [2021-02](/issues/2021-02.md)
 - [2021-01](/issues/2021-01.md)
 - [2020-12](/issues/2020-12.md)
 - [2020-11](/issues/2020-11.md)

issues/2021-02.md

@@ -0,0 +1,248 @@
+# 2021-02 <img src='https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fnaver%2Ffe-news%2F2021-02' align=right>
+
+# 링크 & 읽을거리
+
+## [JavaScript Frameworks, Performance Comparison 2020](https://medium.com/javascript-in-plain-english/javascript-frameworks-performance-comparison-2020-cd881ac21fce)
+
+<img src=https://miro.medium.com/max/1400/1*aAdVBLu0VV4H-SpItpghEA.png width=500>
+
+총 20개의 다양한 프레임워크들에 대한 성능 비교를 수행하고 그 결과를 소개하는 글이다.
+벤치마크는 크게 다음의 3가지 영역에 대한 실행을 통해 비교를 수행한다.
+- DOM 성능
+- 초기 시작 메트릭
+- 메모리 사용량
+
+또한 각 항목들은 상대적 비교를 위해, 가장 최적화된 Vanilla로 구현체의 결괏값이 제공된다.
+
+> 최종 벤치마크 결과는 다음 링크를 통해 확인할 수 있다.
+> https://krausest.github.io/js-framework-benchmark/index.html
+
+## [Tao of React - Software Design, Architecture & Best Practices](https://alexkondov.com/tao-of-react/)
+
+소프트웨어의 아키텍처와 디자인은 생산성과 유연성을 제공해 개발자들이 효율적으로 코어를 재작성하는 일이 없도록 만드는 것이 가장 큰 목표라 할 수 있다.
+
+글의 저자는 2016년부터 React를 사용한 개발 경험을 통해 애플리케이션 구조(아키텍처)와 디자인 측면에서의 모범사례를 제시한다.
+
+```js
+// ex) 헬퍼 함수들에 대한 정리
+// 👎 클로저를 유지할 필요가 없는 중첩 함수를 피하라.
+function Component({ date }) {
+  function parseDate(rawDate) {
+    ...
+  }
+
+  return <div>Date is {parseDate(date)}</div>
+}
+
+// 👍 헬퍼 함수들은 컴포넌트 앞에 배치하라.
+function parseDate(date) {
+  ...
+}
+
+function Component({ date }) {
+  return <div>Date is {parseDate(date)}</div>
+}
+```
+
+## [Running Rust in WebAssembly in a Pool of Concurrent Web Workers in JavaScript](https://alesgenova.github.io/concurrent-wasm-workers/)
+
+<img src=https://alesgenova.github.io/images/2021-1-16-concurrent-wasm-workers/diagram.png width=500>
+
+레이 트레이싱을 사용하는 3D 장면을 구성하는 단일 프레임을 렌더링 하는 실험적 애플리케이션 구현을 통해, 일련의 무거운 작업들을 빠르게 실행할 수 있는지에 대한 POC(Proof Of Concept)이다.
+
+wasm 모듈로 컴파일된 Rust 라이브러리는 웹 워커 풀을 통해 다수의 작업을 동시에 실행되도록 해 무거운 작업들을 빠르게 처리할 수 있음을 증명한다.
+
+데모 애플리케이션은 다음 링크를 통해 직접 실행해 볼수 있다.
+- https://alesgenova.github.io/ray-tracer-app/
+
+## [How we built the GitHub globe](https://github.blog/2020-12-21-how-we-built-the-github-globe/)
+
+<img src=https://github.blog/wp-content/uploads/2020/12/102573836-33a1fb80-40a4-11eb-8c77-e2d328f0a570.gif width=500>
+
+총 5개 시리즈를 통해 [GitHub의 새로운 홈페이지](https://github.com/home) 개발 과정을 소개한다. 첫 번째 시리즈에서는 메인 페이지에 추가된 지구본을 통해 전 세계에서 발생되는 PR을 시각화하기 위한 개발 과정을 다루고 있다.
+
+## [Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)](https://blog.isquaredsoftware.com/2021/01/context-redux-differences/)
+
+"Context vs Redux"에 대한 주제는 React Context API가 릴리스된 이래, 항상 많은 이들의 열띤 토론을 이끌어 냈던 단골 주제 중 하나였으며, 이들 "토론"의 대부분은 2가지 도구가 갖는 목적과 사용 사례에 대한 혼란에서 비롯되었음을 글에서 지적한다.
+
+글의 저자는 자신이 작성했던 답글들을 정리해 어떤 경우에 이들이 사용되어야 하고, 무엇이 다른지 그리고 어떤 경우에 사용되어야 하는지를 자세하게 소개한다.
+
+## [How to ace your next Javascript interview](https://browntreelabs.com/how-to-ace-your-next-javascript-interview/)
+
+<img src=https://i.ytimg.com/vi/aIcmXfe87j4/hqdefault.jpg width=500>
+
+7분 내외의 짧은 동영상을 통해 저자는 지난 10여 년간의 경력에서 경험했던 수많은 인터뷰 참여를 통해 모든 인터뷰들에서 갖는 일반적인 패턴들이 존재하며, 이들 패턴들을 잘 이해하고 공부한다면 여러분들도 충분히 다음 인터뷰에서 성공할 수 있을 것이라 말한다.
+
+대다수 인터뷰에서 관찰됐던 일반적인 패턴들은 다음과 같다.
+- 최소한 한 가지 이상의 까다로운 문제(tricky question)가 존재한다.
+- 일반적으로 한 개 이상의 알고리즘 문제가 포함된다.
+- 전체 애플리케이션 내에 포함되는 작은(일부) 기능 구현을 작성해 보도록 요구된다.
+- JavaScript의 경우, vanilla JS로 작성할 것이 요구된다.
+
+## 2020 설문조사
+
+<img src=https://tsh.io/wp-content/uploads/2020/08/state-of-frontend-2020-report-cover.png width=300>
+
+또 다른 새해가 시작되었다. 지난 1년간 Front-end 영역에서의 변화가 무엇일지, 그리고 앞으로의 전망은 어떻게 될지 가장 빠르고 쉽게 알아볼 수 있는 방법은 바로 다양한 이들의 생각을 살펴보는 것이다.
+
+매해 진행되는 다음의 다양한 설문조사 결과들은 여러분들의 궁금증에 대한 해답을 들려줄 것이다.
+
+- [State of Frontend 2020](https://tsh.io/State-of-Frontend-2020-by-TSH.pdf)
+- [2020 State Of JS](https://2020.stateofjs.com/ko-KR/)
+- [2020 State Of CSS](https://2020.stateofcss.com/ko-KR/)
+- [2020 JavaScript Rising Stars](https://risingstars.js.org/2020/en#section-framework)
+- [2020 Design Systems Survey](https://designsystemssurvey.seesparkbox.com/2020/)
+
+## [The Top 100+ Developer Tools 2020](https://stackshare.io/posts/top-developer-tools-2020)
+
+<img src=https://img.stackshare.io/featured_posts/stackshare-top-100-developer-tools-awards-2020.png width=500>
+
+개발 회사와 개발팀에서 어떤 오픈소스와 도구들을 사용하고 있는지 공유하고 파악할 수 있는 [stackshare](https://stackshare.io/) 사이트에서 작년(2020) 한 해 동안 커뮤니티에서 가장 높은 점수를 받은 기술들에 대해 순위를 메겼다. 
+
+이 순위는 커뮤니티에서 얻은 8백만 개 이상의 데이터를 분석해서 제공한 것이라고 한다. 
+언어, 프레임워크, 협업, 커뮤니케이션, 모니터링 등 각종 분야에서 어떤 기술들이 인기 있었는지 확인할 수 있고, 오픈소스와 기술 도구들의 트렌드와 흐름을 한눈에 파악하는 데 도움이 될 것이다.
+
+## 카카오 FE개발자의 성장 스토리
+
+카카오 FE 개발자들의 성장 스토리에 대한 시리즈 글로, 다양한 기술적 공유와 경험 등을 소개한다.
+
+- [01: Judy, 첫 컨퍼런스에 가다(feat. JSConf korea 2020)](https://tech.kakao.com/2020/11/24/frontend-growth-01/)
+- [02: Babel7과 corejs3 설정으로 전역 오염 없는 폴리필 사용하기](https://tech.kakao.com/2020/12/01/frontend-growth-02/)
+- [03: 카카오 어드민 UI 컴포넌트를 모노레포로 개발하여 얻은 것들](https://tech.kakao.com/2020/12/03/frontend-growth-03/)
+- [04: 공동체 FE 온라인 세션 후기](https://tech.kakao.com/2020/12/23/frontend-growth-04/)
+- [05: 의존관계를 이용해 구조적 리팩토링 포인트 찾기](https://tech.kakao.com/2021/01/12/frontend-growth-05/)
+- [06: 2021년 Chrome의 새로운 변화 – Schemeful same-site을 대응하자](https://tech.kakao.com/2021/02/02/frontend-growth-06/)
+
+
+## [네이티브 앱 → 리액트 네이티브 앱 전환 그리고 1년 후](https://www.ridicorp.com/story/react-native-1year-review/)
+
+Android와 iOS 각각 별도로 구현되었던 앱을 React Native로 통합한 과정과 그 후 1년간에 대한 회고를 다룬다.
+
+## [Naming cheatsheet](https://github.com/kettanaito/naming-cheatsheet)
+
+구체적인 가이드나 코드 컨벤션 없이 개발을 하다 보면 안 좋은 네이밍 방법으로 코드를 작성할 수 있다.
+
+이 아티클은 꽤나 보편적으로 통용되는 네이밍 가이드를 예제와 함께 제시하고 있다. 
+자신이 작성한 코드에서 네이밍에 대한 의심이 있다면 한번 읽어보는 것을 추천한다.
+
+```js
+/* Bad */
+const a = 5 // "a" could mean anything
+const isPaginatable = a > 10 // "Paginatable" sounds extremely unnatural
+const shouldPaginatize = a > 10 // Made up verbs are so much fun!
+
+/* Good */
+const postCount = 5
+const hasPagination = postCount > 10
+const shouldDisplayPagination = postCount > 10 // alternatively
+```
+
+## [You Should Use React.memo More!](https://www.youtube.com/watch?v=IuXpqUxJG90)
+
+<img src=https://i.ytimg.com/vi/IuXpqUxJG90/hqdefault.jpg width=500>
+
+React에서 컴포넌트의 변경이 일어나면 렌더링이 발생하며, 해당 컴포넌트의 하위 컴포넌트도 변경 여부와 상관없이 렌더링이 다시 된다.
+
+이를 방지하기 위한 방법은 `React.memo`를 사용하는 것이다.
+
+이 영상에서는 memo가 어떻게 동작하는지 예시 프로젝트를 통해 보여주며 메모가 적용되지 않는 경우도 쉽게 설명해 준다.
+
+규모가 큰 프로젝트에선 이런 사소한 것이 큰 성능 변화를 일으킬 수 있다. React 프로젝트를 진행하고 있다면 memo를 더 적극적으로 적용해 보는 것은 어떨까?
+
+## [[JS] 한글도 지원하는 퍼지 문자열 검색](https://taegon.kim/archives/9919)
+
+<img src=https://taegon.kim/wp-content/uploads/2019/03/conceptual-creativity-cube-327186.jpg width=500>
+
+종종 어떤 키워드를 검색하고 싶은데 해당 키워드 전체가 기억나지 않을 때가 있다. 그럴 때면 적당히 생각나는 초성 등만을 입력하여 검색을 하게 되는데, 이러한 대략적인 검색 방식을 퍼지 검색이라고 한다.
+
+이 글은 한글 퍼지 검색에 대한 글이다. 하나씩 차근차근 설명하며 최종 구현 데모 페이지까지 제공한다.
+
+## [리덕스 잘 쓰고 계시나요?](https://ridicorp.com/story/how-to-use-redux-in-ridi/)
+
+<img src="https://ridicorp.com/wp-content/uploads/2021/01/Thumbnail-1-1.png" width=500>
+
+React 개발의 초창기에는 React 프로젝트에서 Redux를 사용하는 것이 당연시되어 왔다. 하지만, 이제는 리액트 자체적인 기능뿐 아니라 다른 라이브러리의 도움을 받아 훨씬 편하게 개발할 수 있는 방법이 존재한다.
+
+이 글은 Redux뿐만 아니라 [Constate](https://github.com/diegohaz/constate), [Recoil](https://recoiljs.org/), [Jōtai](https://jotai.surge.sh/) 등 다른 상태 관리 라이브러리 대체재들을 소개하고 있고 같은 구현체를 여러 상태 관리 라이브러리 코드로 작성하고 있어 간단히 비교하기 좋다. React 프로젝트에서 어떤 상태 관리 라이브러리를 도입할지 검토 중일 때 참고하기 좋은 글이다.
+
+또한, Redux를 사용할 때 참고할만한 훌륭한 팁들을 많이 소개하고 있다.
+
+# 튜토리얼
+
+## [Building a Real-Time Commenting System in React](https://dev.to/pandasekh/building-a-real-time-commenting-system-in-react-part-1-3-3kep)
+
+<img src=https://res.cloudinary.com/practicaldev/image/fetch/s--mQycTmW7--/c_limit,f_auto,fl_progressive,q_66,w_880/https://dev-to-uploads.s3.amazonaws.com/i/gl4tnasg6egnsxpmhark.gif width=500>
+
+> - [Making Nested Comments - Part 2](https://dev.to/pandasekh/making-nested-comments-building-a-real-time-commenting-system-in-react-part-2-3-3044)
+> - [Emoji Reactions for Comments - Part 3](https://dev.to/pandasekh/emoji-reactions-for-comments-building-a-real-time-commenting-system-in-react-part-3-3-4m6)
+
+총 3개의 시리즈로 구성된 실시간 댓글 개발 과정을 소개하는 튜토리얼이다.
+
+- 소스코드: https://github.com/PandaSekh/React-Commenting-System
+- 온라인 데모: https://react-commenting-system.vercel.app/
+
+튜토리얼을 통해 무제한 대댓글, 이모티콘, 마크다운 문법 지원, 페이지 새로 고침 없이 표현되는 실시간 업데이트 등의 기능이 지원되는 댓글 개발을 따라 해 볼 수 있다.
+
+## [The definitive guide to JavaScript Debugging [2021 Edition]](https://dev.to/atapas/the-definitive-guide-to-javascript-debugging-2021-edition-116n)
+
+<img src=https://res.cloudinary.com/practicaldev/image/fetch/s--qb7Omu-R--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/pli0trzhf8zn59lv4qiq.png width=500>
+
+JavaScript 애플리케이션을 디버깅하기 위해 알아야 하는 개발자 도구의 사용법과 의미를 간략하게 소개하는 종합적 디버깅 가이드다.
+
+크롬 개발자 도구를 기반으로 하고 있지만, 타 브라우저들의 개발자 도구들도 모두 유사한 기능을 제공하고 있으므로 학습 내용을 활용하는 것은 전혀 문제 되지 않을 것이다.
+
+
+# 코드와 도구
+
+## [Forgo](https://forgojs.org/)
+
+<img src=https://forgojs.org/img/forgo.png width=200>
+
+4KB 크기의 라이브러리로, JSX(React의 것과 유사한)를 사용한다. 이미 여러분이 알고 있는 DOM API와 플레인 JS를 사용해 모던 웹앱 개발을 할 수 있게 하기 때문에 별도의 러닝 커브 없이 빠르게 개발을 시작할 수 있다.
+
+## [Moiva](https://moiva.io/)
+
+<img src=https://moiva.io/moiva.svg width=300>
+
+npm 패키지의 다운로드 수, 릴리스 횟수 등 패키지에 대한 전반적 상태에 대한 지표를 확인해 볼 수 있다. 이들 지표를 기준으로 다른 패키지와의 비교를 통해 패키지 선택시 도움을 받을 수 있다.
+
+> [참고] 유사한 도구로는 다음을 함께 참고하라.
+> - [npm trends](https://www.npmtrends.com/)
+> - [Bundle Phobia](https://bundlephobia.com/)
+ 
+## [CodeSwing](https://aka.ms/codeswing)
+
+<img src=https://user-images.githubusercontent.com/116461/103024429-ae37a480-4504-11eb-85ea-37ba9b9a4d9a.gif width=500>
+
+코드 수정을 실시간으로 반영해 미리 보기 할 수 있는 [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/)과 같은 playground 도구와 같이 VS Code 내에서 상호 동작하는 코딩 환경을 만들어 주는 플러그인이다.
+
+## [Handsfree](https://handsfree.js.org/)
+
+<img src=https://camo.githubusercontent.com/b5e5e7bea4b6cff6fa2476524397a9ab2fd52f585022028602b87fd1a41c660d/68747470733a2f2f6d65646961322e67697068792e636f6d2f6d656469612f4242636e535531494a3574705162775844492f67697068792e676966 width=500>
+
+별도의 입력장치를 사용하지 않는 핸즈프리 한 사용자 경험을 구성할 수 있게 도와주는 도구다.
+
+사용자의 웹캠을 통해 사용자의 움직임(얼굴, 손, 몸짓 등)을 인식하며, 특정 제스처를 인식해 페이지 스크롤, 게임 조작 등을 할 수 있다.
+
+> 보다 자세한 내용은 다음의 소개 글을 같이 참고하라.
+> - [Introducing Handsfree.js - Integrate hand, face, and pose gestures to your frontend](https://dev.to/midiblocks/introducing-handsfree-js-integrate-hand-face-and-pose-gestures-to-your-frontend-4g3p)
+
+```html
+<!-- CDN에서 관련 파일을 로딩 -->
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/lib/assets/handsfree.css" />
+<script src="https://unpkg.com/[email protected]/build/lib/handsfree.js"></script>
+
+<script>
+    // 초기화
+    const handsfree = new Handsfree({hands: true})
+    handsfree.enablePlugins('browser')
+    handsfree.start()
+</script>
+```
+## [Create App](https://createapp.dev): Frontend build config generator
+
+<img src=https://user-images.githubusercontent.com/5152681/106172584-4d238080-61d6-11eb-94f7-f7ec3259deb3.png width=500>
+
+webpack, Parcel, Snowpack의 환경 구성을 편리하게 해주는 도구다.
+
+React, Svelte, Vue의 설정을 지원하며, 이외에도 UI, Test, Transpiler, Style, Image, Utilities, Linting의 설정도 가능하다. 모든 설정이 끝난 뒤에는 다운로드하거나, `How to create your project yourself` 가이드를 따라 하면 된다.