From 55924301bb48e20d71f42fc38d1a6fb3e5b9e3bb Mon Sep 17 00:00:00 2001 From: Inkyu Oh Date: Wed, 7 Feb 2024 10:33:09 +0900 Subject: [PATCH] =?UTF-8?q?2024-02=20=EC=86=8C=EC=8B=9D=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + issues/2024-02.md | 320 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 321 insertions(+) create mode 100644 issues/2024-02.md diff --git a/README.md b/README.md index e144f8d..c86fe8f 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,7 @@ FE News는 네이버 FE 엔지니어들이 엄선한 양질의 `FE 및 주요한 ### 2024 +- [2024-02](/issues/2024-02.md) - [2024-01](/issues/2024-01.md)
diff --git a/issues/2024-02.md b/issues/2024-02.md new file mode 100644 index 0000000..ece288a --- /dev/null +++ b/issues/2024-02.md @@ -0,0 +1,320 @@ +# 2024-02 + +# 📚 링크 & 읽을 거리 + +## [The package that broke NPM (accidentally)](https://uncenter.dev/posts/npm-install-everything/) + + + +NPM 레지스트리에 등록된 모든 패키지들을 포함하는 패키지를 만들고 배포하면 어떻게 될까? + +약 10년 전, PatrckJS 닉네임을 사용하는 개발자는 “everything”이라는 패키지를 만들고 배포했었다. 그 당시 NPM 레지스트리는 등장한지 5년 정도 되었던 시점이었다. + +이 글은 현재 시점에, 모든 레지스트리에 등록된 모든 패키지들에 대한 의존성을 갖는 단일 패키지를 만들고 배포하는 과정을 다룬다. + +과정을 통해 몇 가지 밝혀진 사실 중 하나는, 단일 NPM 패키지에서 의존성은 [최대 800개](https://github.com/Hacksore/max-npm-package-deps)까지라는 점이다. 재미있는 시도와 그 뒷이야기를 읽어볼 수 있다. + +> [참고] 글에서 배포된 [scoped 패키지](https://www.npmjs.com/org/everything-registry)는 모두 삭제된 상태다. + +## [npm in Review: A 2023 Retrospective on Growth, Security, and Quirky Facts](https://socket.dev/blog/2023-npm-retrospective) + + + +패키지 관리자인 npm의 23년의 변화들을 되돌아 보고 정리한 글로, 생태계의 주요 트렌드 몇 가지와 데이터에 기반해 어떻게 성장했는지 다룬다. + +또한 직면했던 멀웨어와 스팸 문제, 가장 긴 이름(패키지 명으로는 최대 214자까지 허용)을 가진 패키지나 가장 큰 크기(5.96GB)를 가진 패키지와 같이 알고 싶었지만 알지 못했던 질문에 대한 답을 얻을 수 있다. + +## [New client-side hooks coming to React 19](https://marmelab.com/blog/2024/01/23/react-19-new-hooks.html) + +React 19 버전에 포함될 새로운 hook들을 소개한다. React 개발팀은 `data fetching`과 `form` 관련한 기존의 pain point를 개선하는데 집중했다. 새로운 hook들은 개발자들의 생산성을 향상시켜줄 것이다. React Canary와 Experimental Channels를 통해 미리 경험해 볼 수 있다. + +19버전에서 새로 포함될 훅들은 아래와 같다. + +- use(Promise) +- use(Context) +- useFormState() +- useFormStatus() +- useOptimistic() + +## [2023 JavaScript Rising Stars](https://risingstars.js.org/2023/en#section-framework) + +작년 한 해 동안 가장 많은 Github Star를 받은 프로젝트들이 정리되어 있다. 테스팅, 스타일링, 상태 관리 등의 각 부문별 순위도 정리되어 있어서, 23년의 인기 오픈소스를 되돌아보기 좋은 글이다. + +TL;DR + +- 전체 프로젝트 부문: [shadcn/ui](https://github.com/shadcn-ui/ui), [bun](https://github.com/oven-sh/bun), [Excalidraw](https://github.com/excalidraw/excalidraw) +- 테스팅: [Playwright](https://github.com/microsoft/playwright), [Storybook](https://github.com/storybookjs/storybook), [puppeteer](https://github.com/puppeteer/puppeteer) +- 스타일링: [Stylex](https://github.com/facebook/stylex), [unocss](https://github.com/unocss/unocss), [tamagui](https://github.com/tamagui/tamagui) +- 상태관리: [Zustand](https://github.com/pmndrs/zustand), [Jotai](https://github.com/pmndrs/jotai) + +## [숫자 1은 올바른 JSON 형식인가?](https://wormwlrm.github.io/2024/01/21/Standardization-of-JSON.html) + +```json +// data.json +1 +``` + +숫자 1만 들어있는 JSON 파일이 있다고 생각해 보자. 이 JSON 파일은 올바른 JSON 형식일까? 정답은 "그렇다!"이다. + +해당 스펙이 표준 JSON 스펙이 되기까지의 뒷이야기가 흥미롭다. + +## [JSON's Numeric Boundaries: The Lesser-Known Reality of Inaccurate Figures](https://blog.phakorn.com/jsons-numeric-boundaries-the-lesser-known-reality-of-inaccurate-figures) + +JSON은 단순성과 가독성이라는 매력 덕분에 전 세계 개발자들이 선호하는 방식으로 데이터 교환, 특히 웹 애플리케이션 분야에서 초석이 되었다. + +그러나 숫자를 다룰 때 JSON의 접근 방식은 처음에 보이는 것보다 다소 덜 간단하다. +다음 코드는 어떤 값을 출력할까? + +```js +const x = 9223372036854775807; +console.log(x); +``` + +## [이모지의 이모저모](https://www.padosum.dev/wiki/Various-Aspects-of-Emoji/) + + + +웹에 접속하는 매일, 이모지(Emoji)를 보지 않는 날이 없다. 그만큼 이모지는 생활에 깊숙이 들어왔다. +이모지는 다른 문자와 뭐가 다른 걸까? 어떻게 표시되는 걸까? 이모지에 대한 궁금증을 풀어보자. + +## [JS의 주석은 //과 /\* \*/뿐만이 아니다](https://witch.work/posts/javascript-various-comments) + + + +//와 /\* \*/로 각각 한 줄 주석과 여러 줄 주석을 만들 수 있다는 것은 모두 알고 있을 것이다. + +하지만 ECMAScript 명세에는 `#!`로 시작하는 Hashbang Comments와 HTML 주석 형식인 ``로 감싸는 HTML-like Comments 등 다른 것도 정의되어 있다는 사실도 알고 있는가? + +어떤 이유에서 이런 다양한 주석 형식들이 도입되었는지, JavaScript가 걸어온 길을 따라 걸으며 확인해 보자. + +## [아름다운 코드에 대하여](https://kciter.so/posts/what-is-beautiful-code) + + + +대체 아름다운 코드란 대체 무엇인가. 진지하게 개발자를 업으로 삼는 사람이라면 한 번쯤 고민해 본 적이 있을 것이다. 정답이 존재하지 않는 물음에 필자는 사회성, 신뢰성, 선형성, 선언성의 측면에서 아름다움에 대한 생각을 풀어낸다. + +## [웹 개발에 대해 엔지니어들이 믿는 이상한 것들](https://birtles.blog/2024/01/06/weird-things-engineers-believe-about-development) + +Mozilla에서 브라우저 개발에 참여했던 저자가 웹 개발로 돌아온 이후 느끼게 된 여러 가지 `웹 개발에 대한 몇 가지 놀라운 주장들`에 대해 소개한다. 전직 브라우저 개발자의 시각을 흥미롭게 풀어 내어 재미있게 읽을 수 있을 것이다. + +> 한글 번역: https://velog.io/@sehyunny/weired-things-engineers-believe + +## [The Two Reacts](https://overreacted.io/the-two-reacts/) + +React 커뮤니티에서 활발한 활동을 이어 나가고 있는 Dan Abramov의 글이다. + +Dan은 현재의 React를 아래의 두 가지 공식으로 양분해서 설명한다. + +- UI = f(state), client component +- UI = f(data), server component + +끝으로, UI = f(state, data)처럼 하나의 공식으로 통합하는 방법에 대해서 독자에게 질문을 던지며 다음 글을 예고한다. + +## [React 서버 컴포넌트를 사용해야 하는 이유와 방법](https://www.freecodecamp.org/korean/news/how-to-use-react-server-components/) + +React 서버 컴포넌트가 **왜 필요한지, 어떤 문제를 해결하는지** 알아본다. + +## [Common mistakes with the Next.js App Router and how to fix them](https://vercel.com/blog/common-mistakes-with-the-next-js-app-router-and-how-to-fix-them) + +Vercel에서 수백 명의 개발자와 수천 개의 Next.js Repository 사례를 종합하여 Next.js App Router를 쓸 때 흔히 저지르는 10가지 실수를 정리했다. + +왜 이런 실수를 하는지, 모범 사례는 무엇인지, 그리고 App Router 팁 몇 가지를 소개한다. + +
+ TL;DR + +Using Route Handlers with Server Components + +- 서버 컴포넌트에서 라우트 핸들러를 호출하지 말 것 +- 대신 라우트 핸들러 내부에 배치하려는 로직을 서버 컴포넌트에서 직접 호출하라 + +Static or dynamic Route Handlers + +- 라우트 핸들러는 GET 메서드를 사용할 때 기본적으로 캐시 됨 +- GET 라우트 핸들러에서 리턴한 JSON 데이터는 다른 빌드가 일어날 때까지 변경되지 않음 + +Route Handlers and Client Components + +- Form을 만들 때 라우터 핸들러 대신 Server Action을 활용할 수 있음 + +Using Suspense with Server Components + +- Suspense의 위치는 데이터 패칭을 수행하는 비동기 컴포넌트보다 높은 곳에 위치해야 함 +- Suspense가 비동기 컴포넌트 내부에 있으면 작동하지 않음 + +Using the incoming request + +- 서버 컴포넌트는 들어오는 요청(Incoming Request)의 객체에 접근할 수 없음 +- 대신, 서버 컴포넌트는 들어오는 요청에 접근할 수 있는 function과 props를 제공함 +- `cookies()`, `headers()`, `params`, `searchParams`와 같은 옵션을 사용 + +Using Context providers with App Router + +- 두 가지 일반적인 실수는 서버 컴포넌트와 Context를 함께 쓰려고 하는 것과 App Router에 Provider를 배치하는 것 +- 클라이언트 컴포넌트 트리에 Provider를 배치하고, 서버 컴포넌트 트리에 해당 클라이언트 컴포넌트를 포함하라 + +Using Server and Client Components together + +- 서버 컴포넌트는 클라이언트 컴포넌트를 자식으로 둘 수 있음 +- 클라이언트 컴포넌트는 서버 컴포넌트를 자식으로 둘 수 있음 + +Adding “use client” unnecessarily + +- 모든 파일에 `use client`를 추가할 필요는 없음 +- 클라이언트 바운더리에 있으면, 클라이언트 컴포넌트의 형제 자매는 클라이언트 컴포넌트가 됨 + +Not revalidating data after mutations + +- 개발자들의 일반적인 실수 중 하나는 data를 변경(mutate) 하고 나서 revalidate 하는 작업을 까먹는 것 +- 데이터 변경 이후, `next/cache`의 `revalidatePath()`을 실행하라. 그래야 화면에 보이는 데이터가 업데이트됨 + +Redirects inside of try/catch blocks + +- `return redirect()` 대신 `redirect()`를 사용할 것 +- `redirect()` 함수는 TypeScript의 `never` 타입을 사용하므로 return을 붙일 필요가 없음 + +
+ +> [Vercel Youtube 영상](https://www.youtube.com/watch?v=RBM03RihZVs)으로 시청할 수도 있다. + +> [참고] App router에 대한 기대치와는 다르게 실제 production 구현과 적용은 좀 더 신중해야 할 수 있다. page router에서 app router로 변경을 고려하고 있다면, 다음의 경험적 글을 참고해 보기 바란다. +> +> - [NEXT.JS APP ROUTER MIGRATION: THE GOOD, BAD, AND UGLY](https://www.flightcontrol.dev/blog/nextjs-app-router-migration-the-good-bad-and-ugly) + +## [React Libraries for 2024](https://www.robinwieruch.de/react-libraries/) + +React를 사용할 때 참고하면 좋은 라이브러리에 대해서 추천해 준다. + +React Project, Package Manager, State Management, Data Fetching, Router, CSS Styling를 포함하여 30가지 주제에 대해 다양한 라이브러리들에 소개한다. + +다만, 모든 라이브러리가 다 있는 것은 아니어서, 가볍게 참고해 보면 좋다. + +# 🕹 튜토리얼 + +## [Compiling a standalone executable using modern JavaScript/TypeScript runtimes](https://gist.github.com/guest271314/9b1adad3db3deba64e118f844a77bad6) + +동일한 소스 코드를 사용해 모던 JS/TS 런타임들(bun, deno, node)을 사용해 단일 실행 파일로 컴파일 하고, 생성된 파일이 올바르게 동작하는지의 과정을 기술한 내용이다. + +결론적으론 bun과 deno는 단일 실행 파일을 생성했지만, node의 경우는. CJS만 가능했고, ESM의 경우는 실패했다. + +## [What are the parts of a URL?](https://web.dev/articles/url-parts) + + + +우리가 너무나도 당연하게 사용하는 URL은 여러 가지 요소로 구성되어 있다. +`TLD`, `Fragment`, `pathname` 같은 용어가 생소하거나 `Search`와 `Search params`를 명확히 구분하지 못한다면 이 글을 통해 확인해 보자. + +## [Let’s learn how modern JavaScript frameworks work by building one](https://nolanlawson.com/2023/12/02/lets-learn-how-modern-javascript-frameworks-work-by-building-one/) + + + +처음부터 프레임워크를 만들어보는 경험을 통해 현대 JavaScript 프레임워크의 핵심 개념과 구현 방법을 학습할 수 있다. + +## [스토리북으로 인터랙션 테스트하기](https://ui.toast.com/posts/ko_20220111) + +스토리북으로 자동화 테스트를 작성하는 방법, Interactive Stories 기능 등을 활용하여 컴포넌트의 인터랙션을 자동으로 재생하는 방법, 그리고 E2E 도구를 결합하여 테스트하는 방법을 소개한다. + +## [Build a Next.js app in Storybook with React Server Components and Mock Service Worker](https://storybook.js.org/blog/build-a-nextjs-app-with-rsc-msw-storybook/) + + + +[MSW](https://mswjs.io/)(Mock Service Worker)를 이용해서 React Server Component Storybook을 만드는 방법에 대해서 알아본다. + +# 📦 코드와 도구 + +## [nuqs](https://github.com/47ng/nuqs) + +```ts +'use client'; // app router: only works in client components + +import { useQueryState } from 'nuqs'; + +export default () => { + const [name, setName] = useQueryState('name'); + return ( + <> +

Hello, {name || 'anonymous visitor'}!

+ setName(e.target.value)} /> + + + ); +}; +``` + +React.useState()처럼 상태를 관리한다. url Query String에 상태를 저장하며 type-safe를 보장해 주는 특징이 있다. + +## [Bun Shell](https://bun.sh/blog/the-bun-shell) + +```js +import { $ } from 'bun'; + +const buffer = Buffer.alloc(1024); + +await $`ls *.js > ${buffer}`; + +console.log(buffer.toString('utf8')); +``` + +macOS의 zsh, Linux의 bash, Windows의 cmd는 서로 다른 문법과 명령어를 가지고 있어 호환성 문제가 있었다. + +Bun Shell은 Bun에 내장된 새로운 실험적 언어 및 인터프리터로, JavaScript 및 TypeScript에서 크로스 플랫폼 쉘 스크립트를 실행할 수 있게 한다. + +Bun Shell은 일반 JavaScript처럼 느껴지면서도, pipe를 사용할 수 있어서 쉘처럼 느껴지기도 한다. + +## [Ollama JavaScript Library](https://github.com/ollama/ollama-js) + + + +Llama 2, Mistral 등 LLM을 로컬에서 사용할 수 있는 Ollama의 JavaScript 라이브러리이다. +단 몇 줄의 코드만으로 생성형 AI를 활용할 수 있다. + +```sh +$ npm install ollama +``` + +```js +import ollama from 'ollama'; + +const response = await ollama.chat({ + model: 'llama2', + messages: [{ role: 'user', content: 'Why is the sky blue?' }], +}); + +console.log(response.message.content); +``` + +## [Sit in Shade](https://sitinshade.com/) + +버스를 타고 이동할 경로와 함께 예상 탑승 시간을 입력하면, 햇빛 노출을 최소화하기 위해 어떤 위치의 좌석에 앉는 것이 좋은지를 확인할 수 있다. + +## [Shoelace](https://shoelace.style/) + + + +표준 기술인 Web Components로 개발된 UI 컴포넌트를 제공하며, 특정 프레임워크에 기반하지 +않기 때문에 모든 프레임워크 환경 또는 사용하지 않는 환경에서 사용할 수 있다. + +컴포넌트는 [LitElement](https://lit.dev/)를 사용해 개발되었다. + +## [Awesome Figma Tips](https://awesomefigtips.com/tips) + +다양한 상황에서 필요한 작업을 빠르게 수행할 수 있는 Figma 팁 모음을 제공한다. + +## [Automatic Class Sorting with Prettier](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) + +TailwindCSS의 다양한 유틸리티 클래스를 사용하다 보면, 적용된 클래스가 많아지게 되면서 +정렬되지 않은 클래스명으로 인해 가독성이 낮아지는 경우가 종종 발생하게 된다. + +이 Prettier 플러그인은 자동으로 [권장 클래스 순서](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted)에 따라 정렬해 준다. + +```html + + + + + +```