[TIL] Naver FE News 2023-10

[TIL] Naver FE News는 Naver FE 팀에서 매월 첫째주 수요일에 업로드하는 FE 관련 이슈들을 팔로우 하면서 관심있는 내용을 학습하고 정리하는 컨텐츠입니다. [ https://github.com/naver/fe-news ]

1. BUN 1.0

https://bun.sh/blog/bun-v1.0#bun-is-an-all-in-one-toolkit

Bun 1.0 | Bun Blog

• Bun은 Webkit 기반의 JavaScript, TypeScript 툴 체인이며 low-level 언어인 Zig로 작성되었다. (Node는 C++로 작성됨) 상당히 빠른 벤치마크 속도를 보여서 큰 관심을 받고 있다. Node.js, npx, Babel, esbuild, swc, webpack, Jest, Vitest, npm, Yarn, pnpm 등의 프런트엔드 도구들을 대체할 수 있다.
• Install : npm install -g bun
• Node.js가 데뷔한지 14년이 지났고 수많은 관련 도구들이 누적되어 쌓여왔다. 이로 인해 우리의 Javascript가 점점 복잡해지고 느려지고 있다.
• Bun의 목적은 한 가지 입니다. 당신이 좋아하는 라이브러리와 프레임워크와의 호환성을 유지하면서(계속 사용할 수 있게 하면서) 속도와 복잡성 문제를 해결하는 것입니다.

Bun이 제거하는 요소들

• Node.js
  • node : fs, path, net과 같은 내장 모듈들을 지원한다.
  • npx : 5배 더 빠른 bunx
  • dotenv, cross-env : .env 파일을 기본값으로 읽는다.
  • nodemon, pm2 : watch mode 내장
  • ws : WebSocket server 내장
  • node-fetch, isomorphic-fetch : fetch 내장
• Transpilers : .js, .ts, .cjs, .mjs, .jsx, .tsx  형식의 파일들이 아래 파일들을 대체합니다. (내장되어 있다는 뜻인듯)
  • tsc
  • babel, .babelrc, @babel/preset-*
  • ts-node, ts-node-esm
  • tsx
• Bundlers : 마찬가지로 최고 성능의 esbuild 플러그인 API를 갖추었기 때문에(내장) 아래 요소들이 필요하지 않습니다.
  • esbuild
  • webpack
  • parcel, .parcelrc
  • rollup, rollup.config.js
• Package managers : 마찬가지로 npm급 패키지 매니저 또한 내장하고 있어 아래 요소들이 필요하지 않습니다.
  • npm, .npmrc, package-lock.json
  • yarn, yarn.lock
  • pnpm, pnpm.lock, pnpm-workspace.yaml
  • lerna
• Testing libraries : 마찬가지로 jest급 테스트 러너를 내장하고 있어 snapshot testing, mocking, code coverage를 위한 아래 요소들이 필요하지 않습니다.
  • jest, jest.config.js
  • ts-jest, @swc/jest, babel-jest
  • jest-extended
  • vitest, vitest.config.ts

Bun이 지원하는 요소들 _ Runtime

• Next.js, Remix, Astro, SvelteKit, Nest, SolidStart, Vite와 같은 Full-stack 어플리케이션들
• Node.js 보다 기본 4배 더 빠름
  • TS 쓰면 차이가 훨씬 더 벌어짐
  • Google의 V8 엔진이 아닌 Apple의 Webkit 엔진에 맞춰서 설계
• 의존성 추가 없이 JS, TS, JSX, TSX 모두 사용 가능
• ESModules 이전 에 존재했던 CommonJS와의 호환성 지원
• Web APIs
• Hot reloading : HTTP와 WebSocket 커넥션이 끊어지지 않고 state가 초기화되지 않는다.
• Plugins
  • highly-customizable
• 쉽고 빠른 Bun APIs
  • Bun.file() : lazy loading 지원, Node보다 10배 더 빠름
  • Bun.write() : 뭔진 정확히 몰라도 Node보다 3배 더 빠름
  • Bun.serve() : HTTP, WebSocket 서버 지원, Node보다 4~5배 더 빠름, tls 옵션 지원
  • bun:sqlite : Node의 better-sqlite3보다 4배 더 빠름
  • Bun.password.hash() : 해쉬 암호화 함수 지원

Bun이 지원하는 요소들 _ Build Time

• npm 대신 bun 사용 (ex. bun install)
  • 더이상 npm 로딩을 기다릴 필요가 없다.
• global module cache를 사용하여 모든 OS에서 가장 빠른 패키지 다운로드 속도를 보여준다.
  • pnpm보다 16배, npm보다 29배, yarn보다 33배 더 빠르다.
• npm run -> bun run : way faster
• jest -> bun:test : fully and easily jest-compatible (대체 가능)
  • 테스트 속도 또한 다른 도구들에 비해 8~13배 더 빠르다.
  • CI(Github Action)에서 테스트 annotation 자동 생성
• esbuild에서 영감을 얻은 yaml 파일 기반의 번들링 : Webpack5보다 220배 더 빠름
• Bun은 runtime 도구이면서 동시에 bundle time 도구이기 때문에 "JS macros"와 같은 새로운 기술을 사용할 수 있습니다. (macro 함수에서 반환된 값은 번들에 직접 인라인됩니다.(?))
• Bun은 Linux, MacOS 기반에서 동작하였지만 Windows 버전도 기본 버전이 출시되었습니다.
  • 현재는 runtime 기능만 지원되고 build time 기능들(패키지 매니저, 테스트 러너, 번들러)은 비활성화 되어 있습니다.

---

Laws of UX

https://lawsofux.com/

Home | Laws of UX

• 인간의 생각과 행동방식을 개념적으로 정리한 심리학 법칙은 UX 디자인에 중요한 영향을 미칠 수 있다. 대표적으로 다음과 같은 법칙들이 있다.
  • Jakob’s Law: 기존에 사용해왔던 경험을 바탕으로 다른 것도 동일한 방식으로 작동하는 것을 선호.
  • Fitts's Law: 대상의 목적을 달성하는데 걸리는 시간은 대상까지의 거리와 크기에 따라 달라진다.
  • Hick's Law : 결정을 내리는데 걸리는 시간은 선택지의 수와 복잡성에 비례한다.
• 위 사이트에서는 각각에 대한 법칙들에 대한 설명과 UI/UX 적 예시, 그리고 관련해서 읽으면 좋을 만한 아티클 링크들을 제공하고 있다.

---

유용한 도구들

CSS Diner

https://flukeout.github.io/

CSS Diner

• 재미있는 게임의 형태로 CSS 선택자를 배우고 연습해 볼 수 있다.

 

create-t3-app

https://github.com/t3-oss/create-t3-app

GitHub - t3-oss/create-t3-app: The best way to start a full-stack, typesafe Next.js app

• next.js, tRPC, tailwind css, prisma, next-auth 등의 기술을 조합해서 가장 빠르게 full-stack web app을 개발할 수 있도록 도와주는 CLI 도구이다.
• 위의 모든 기술을 사용할 필요는 없다. 대화형 인터페이스를 통해서 제외하고 싶은 기술을 제외하고 프로젝트를 구성할 수 있다.