learning-note icon indicating copy to clipboard operation
learning-note copied to clipboard

Today I Learned ๐Ÿซง

https://mooneewiki.vercel.app/ <- ์ด์ œ ์—ฌ๊ธฐ์„œ ๊ธฐ๋ก์ค‘ ๐Ÿ„๐Ÿปโ€โ™€๏ธ

๊ณต๋ถ€๋…ธํŠธ๐Ÿ“š

๐Ÿ’ซ Computer Science

์šด์˜์ฒด์ œ

  • ์šด์˜์ฒด์ œ ๊ฐœ๋…, ์šด์˜์ฒด์ œ ๊ตฌ์กฐ
  • ํ”„๋กœ์„ธ์Šค์™€ ์“ฐ๋ ˆ๋“œ
  • IPC(Interprocess Communication)
  • IPC ํ†ต์‹  ๋ฐฉ๋ฒ• (Socket๊ณผ RPC)
  • ๋ฉ€ํ‹ฐ ์“ฐ๋ ˆ๋“œ
  • ํ”„๋กœ์„ธ์Šค ๋™๊ธฐํ™”
  • ๋ฎคํ…์Šค์™€ ์„ธ๋งˆํฌ์–ด
  • ๋™์‹œ์„ฑ ์ œ์–ด์˜ ๊ณ ์ „์  ๋ฌธ์ œ๋“ค

๋„คํŠธ์›Œํฌ

  • OSI 7๊ณ„์ธต
  • CORS
  • TCP/UDP
  • HTTP
  • HTTP ์™€ HTTPS ๋น„๊ต
  • ๋Œ€์นญํ‚ค์™€ ๋น„๋Œ€์นญํ‚ค ๋น„๊ต
  • ์ฟ ํ‚ค์™€ ์„ธ์…˜
  • ๊ฒ€์ƒ‰์ฐฝ์— ๊ตฌ๊ธ€์„ ์น˜๋ฉด ์ผ์–ด๋‚˜๋Š” ์ผ
  • DNS
  • CDN
  • Stale-While-Revalidate
  • ์›น์„œ๋ฒ„ vs WAS

์ž๋ฃŒ๊ตฌ์กฐ & ์•Œ๊ณ ๋ฆฌ์ฆ˜

  • ๋‹คํ•ญ์‹ ๊ณ„์‚ฐ, ํฌ์†Œํ–‰๋ ฌ
  • ๋ฐฐ์—ด๋ฆฌ์ŠคํŠธ์™€ ์—ฐ๊ฒฐ๋ฆฌ์ŠคํŠธ
  • ์ด์ง„ ํƒ์ƒ‰ ํŠธ๋ฆฌ
  • ์šฐ์„  ์ˆœ์œ„ ํ
  • ๊ธฐ์ดˆ ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜ - ์„ ํƒ,์‚ฝ์ž…,์‰˜,๋ฒ„๋ธ”
  • ๋จธ์ง€ ์†ŒํŠธ
  • ์ผ๋ฐ˜ ํ€ต์†ŒํŠธ
  • ์ค‘๊ฐ„๊ฐ’ ํ€ต์†ŒํŠธ

๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค

  • ํŠธ๋žœ์žญ์…˜์ด๋ž€

๋””์ž์ธํŒจํ„ด

  • Command-Query Separation (CQS)
  • ๋””๋ฉ”ํ…Œ๋ฅด ๋ฒ•์น™ - ์ตœ์†Œ ์ง€์‹ ์›์น™

๐Ÿ’ซ Frontend

  • ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๊ณผ์ •
    • Critical Rendering Path
  • ๋‚™๊ด€์  ์—…๋ฐ์ดํŠธ (Optimistic Update)
  • ์›น ์„ฑ๋Šฅ ์ตœ์ ํ™”
    • ์›น ์„ฑ๋Šฅ ์ตœ์ ํ™” ์š”์•ฝ
    • HTTP ์บ์‹œ ์‚ฌ์šฉํ•˜๊ธฐ
  • HTML ๋ Œ๋”๋ง ์ค‘์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์‹คํ–‰๋˜๋ฉด ๋ Œ๋”๋ง์ด ๋ฉˆ์ถ”๋Š” ์ด์œ 
  • npm vs yarn
  • Axios Interceptor ์™€ Cancel Token
  • Incremental Static Regeneration ์ฆ๋ถ„ ์ •์  ๋นŒ๋“œ
  • Windowing
  • Micro-Frontend
  • ๋ชจ๋“ˆ ํŽ˜๋”๋ ˆ์ด์…˜์˜ ๊ณต์œ  ์˜์กด์„ฑ
  • ์ œ์–ด์˜ ์—ญ์ „
  • ๊ธฐ๋Šฅ ๋ถ„ํ•  ์„ค๊ณ„ (fsd)

๐Ÿ’ซ JavaScript

  • ์ด๋ฒคํŠธ ๋ฃจํ”„
  • JavaScript ์—์„œ๋Š” Object๊ฐ€ ์žˆ๋Š”๋ฐ ์™œ ๊ตณ์ด Map ์„ ๋งŒ๋“ค์—ˆ์„๊นŒ?
  • for...in ๊ณผ for...of์˜ ์ฐจ์ด์ 
  • ์‹คํ–‰์ปจํ…์ŠคํŠธ์™€ ํ˜ธ์ด์ŠคํŒ…
  • ํ”„๋กœํ† ํƒ€์ž…
  • ํด๋กœ์ €
  • this
  • Promise
  • ๋ชจ๋“ˆ ์‹œ์Šคํ…œ CJS & ESM

๐Ÿ’ซ TypeScript

  • ๊ตฌ์กฐ์  ํƒ€์ดํ•‘
  • ํƒ€์ž…๊ฐ€๋“œ
  • ํƒ€์ž… ๋‹จ์–ธ vs ํƒ€์ž… ์„ ์–ธ
  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์—์„œ any ์™€ unknown, never ํƒ€์ž…์˜ ์ฐจ์ด์ 

๐Ÿ’ซ HTML & CSS

  • rem, em ์ฐจ์ด

๐Ÿ’ซ Web

  • Realtime web
  • SSR๊ณผ CSR
  • Restful

๐Ÿ’ซ React

  • ๋ฆฌ์•กํŠธ์—์„œ ๋ถˆ๋ณ€์„ฑ์„ ์ง€์ผœ์•ผํ•˜๋Š” ์ด์œ 
  • ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ vs ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ
  • key
  • State
  • Virtual DOM
  • ์ด๋ฒคํŠธ ์‹œ์Šคํ…œ
  • React Fiber
  • React ์ตœ์ ํ™”

๐Ÿ’ซ React-Query

  • placeholder data vs initialData
  • ๋ฆฌ์•กํŠธ ์ฟผ๋ฆฌ ์ด๋ชจ์ €๋ชจ ๊ธฐ๋ก
  • prefetch ์‚ฌ์šฉํ•˜๊ธฐ

๐Ÿ’ซ Infra

  • CF์˜ lambda function์ด ๋ญ˜๊นŒ
  • ๋ฉ€ํ‹ฐ ํƒœ๋„Œ์‹œ, ์‹ฑ๊ธ€ ํƒœ๋„Œ์‹œ๊ฐ€ ๋ญ˜๊นŒ
  • Health Check๋ž€ ๋ญ˜๊นŒ

๐Ÿ’ซ Test

  • ํ…Œ์ŠคํŠธ ๋Œ€์—ญ์ด๋ž€
  • ์ข‹์€ ๋‹จ์œ„ ํ…Œ์ŠคํŠธ์˜ ์›์น™ ๋ช‡๊ฐ€์ง€

๐Ÿ’ซ ๋…์„œ๋…ธํŠธ

๋ฆฌํŒฉํ„ฐ๋ง 2ํŒ

  • 2์žฅ ๋…์„œ๋…ธํŠธ
  • 3์žฅ ๋…์„œ๋…ธํŠธ - ์ฝ”๋“œ์—์„œ ๋‚˜๋Š” ์•…์ทจ

์ข‹์€ ์ฝ”๋“œ ๋‚˜์œ ์ฝ”๋“œ

  • 2์žฅ ์ถ”์ƒํ™” ๊ณ„์ธต
  • 10์žฅ ์ข‹์€ ๋‹จ์œ„ ํ…Œ์ŠคํŠธ์˜ ์›์น™ ๋ช‡๊ฐ€์ง€

๐Ÿ’ซ Conference & Articles

  • Managing React Application State Management - Talk by Kent C. Dodds
  • feconf2021 - ๋‚˜๋Š” ์™œ ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ๋ž‘ํ•˜๋Š”๊ฐ€
  • feconf2021 - Statecharts: ๋ณต์žกํ•œ UI ์ƒํƒœ๋ฅผ ์ง€๋ฐฐํ•˜๋Š” ๋ฐฉ๋ฒ•
  • feconf2021 - ์ปดํฌ๋„ŒํŠธ ๋‹ค์‹œ ์ƒ๊ฐํ•˜๊ธฐ
  • slash2022 - Effective Component ์ง€์† ๊ฐ€๋Šฅํ•œ ์„ฑ์žฅ๊ณผ ์ปดํฌ๋„ŒํŠธ
  • devDive2022 - ๋‚ด ์ฝ”๋“œ์˜ ํ’ˆ์งˆ์„ ๋†’์—ฌ์ฃผ๋Š” Type-Driven Development
  • woowa2022 - ์šฐ๋ฆฌ๋Š” ํ•˜๋‚˜๋‹ค! ๋ชจ๋…ธ๋ ˆํฌ with pnpm
  • feconf2022 - ๋””์ž์ธ ์‹œ์Šคํ…œ, ํ˜•ํƒœ๋ฅผ ๋„˜์–ด์„œ
  • feconf2022 - ํ”„๋ก ํŠธ์—”๋“œ, DDD๋ฅผ ๋งŒ๋‚˜๋‹ค
  • feconf2022 - ๋‚ด import ๋ฌธ์ด ๊ทธ๋ ‡๊ฒŒ ์ด์ƒํ–ˆ๋‚˜์š”?
  • if(kakao)2022 - ์„ฌ์„ธํ•œ ISFP์˜ ์ฝ”๋“œ ๊ฐ€๋…์„ฑ ๊ฐœ์„  ๊ฒฝํ—˜
  • Why We're Breaking Up with CSS-in-JS (CSS-in-Js ์žฅ๋‹จ์ )
  • feconf2023 - ๋Œ€ํ˜• ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ Micro Frontend ์ „ํ™˜๊ธฐ