210209 TIL

Today I Learn

  • ์‰ฝ๊ฒŒ ๋ฐฐ์šฐ๋Š” ๋„คํŠธ์›Œํฌ 6๊ฐ•
  • ์ž๋ฐ” ๊ฐ์ฒด์ง€ํ–ฅ ๊ฐ•์˜ 1~5๊ฐ•
  • ์ฝ”๋“œ์—… ๊ธฐ์ดˆ 1๋ฌธ~20๋ฌธ

์˜ค๋Š˜์˜ ์ด์•ผ๊ธฐ

  • ์˜ค๋Š˜ ๋„คํŠธ์›Œํฌ์—์„  ์œ ์„  LAN, Ethernet์— ๋Œ€ํ•ด์„œ ๋ฐฐ์› ๋‹ค. ์™ธ์šธ๊ฒŒ ๋ฌด์ง„์žฅ ๋งŽ๋‹คโ€ฆ MAC๊ฐœ๋…์— ๋Œ€ํ•ด ๋” ์ฐพ์•„๋ณด๊ณ  ๋ธ”๋กœ๊ทธ์— ํฌ์ŠคํŒ… ํ•ด์•ผ๊ฒ ๋‹ค.
  • ์ž๋ฐ” ๊ฐ์ฒด์ง€ํ–ฅ์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ๋‹ค. ๋Œ€~์ถฉ ์ธ์Šคํ„ด์Šค๋Š” ์ด๋Ÿฐ๊ฑฐ๊ณ  ๋Œ€~์ถฉ ํ•จ์ˆ˜๋Š” ์“ฐ๋ฉด ๋˜๋Š”๊ฑฐ๊ณ  ํ–ˆ๋˜ ์ง€๋‚œ๋‚ ์— ๋ฐ˜์„ฑ์„ ํ•˜๊ฒŒ ๋œ๋‹ค ํ‘ํ‘โ€ฆ ๊ฐ์ฒด์ง€ํ–ฅ์˜ ๊ฐœ๋…์ด ๋ญ”์ง€ ์•Œ์ˆ˜๋ก ์–ด๋ ต์ง€๋งŒ ์žฌ๋ฐŒ๋‹ค.
    ๋ธ”๋กœ๊ทธ์— ํฌ์ŠคํŒ…ํ•  ๊ฑฐ๋ผ ์ƒ๊ฐํ•˜๋‹ˆ ๊ฐ„๋‹จํžˆ ์š”์•ฝํ•ด์„œ ์ ๊ธฐ ์ข€ ๊ทธ๋ž˜์„œ ์ค„๊ธ€๋กœ ํ’€์–ด์“ฐ๊ณ  ์žˆ๋Š”๋ฐ, ํ•œ ๊ฐ•๋งˆ๋‹ค ์‹œ๊ฐ„์ด ๋ฌด์ง„์žฅ ์†Œ์š”๋œ๋‹ค. ๋Œ€์ถฉ ์“ฑ ๋“ฃ๊ณ  ๋„˜์–ด๊ฐ€๋˜ ์ „์ด๋ž‘ ๋‹ค๋ฅด๊ฒŒ ๋ณต์Šต์€ ํ™•์‹คํžˆ ๋˜๋Š” ๊ฒƒ ๊ฐ™์€๋ฐโ€ฆ ์ธ๊ฐ•์„ ๋“ค์„๋•Œ๋งˆ๋‹ค ์ด๋ ‡๊ฒŒ ํ•ด์•ผํ•˜๋‚˜?! ์ผ๋‹จ ๊ฐ์ฒด์ง€ํ–ฅ์€ ์ค‘์š” ๊ฐœ๋…์ด๋‹ˆ ์ด๋Ÿฐ ์‹์œผ๋กœ ํ•˜๊ณ , ๋‹ค๋ฅธ ๊ฒƒ๋“ค์€ ๊ณ ๋ฏผ์„ ์ข€ ํ•ด๋ด์•ผ๊ฒ ๋‹ค. ์—ญ์‹œ ํฌ์ŠคํŒ…์€ ๋Œ€๋‹จํ•œ ๊ฑฐ์˜€์–ดโ€ฆ
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ณต๋ถ€๋ฅผ ์–ด๋–ป๊ฒŒ ํ• ์ง€ ์ฐพ์•„๋ณด๋‹ค๊ฐ€ ์šฐ์„  ๊ธฐ์ดˆ๋ฌธ์ œ๋ถ€ํ„ฐ ํ’€๊ธฐ๋กœ ํ–ˆ๋‹ค. ์‚ฌ์ดํŠธ์—์„œ java๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ์ง„ ์•Š์ง€๋งŒ ๊ฒ€์ƒ‰ํ•˜๋‹ˆ ์ด์ „์— ํ‘ธ์…จ๋˜ ๋ถ„๋“ค์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ๋‚˜์™€์„œ ๊ฐ์‚ฌํžˆ ์ฐธ๊ณ ํ•˜๋ฉฐ ๊ณต๋ถ€์ค‘์ด๋‹ค. ์†”์งํžˆ ์˜ค๋Š˜๊นŒ์ง€ ํ‘ผ ๋ฌธ์ œ๋Š” ์‰ฌ์› ๋Š”๋ฐโ€ฆ ๋‚ด์ผ์€ 50๋ฌธ์ œ๊นŒ์ง„ ํ’€์–ด๋ด์•ผ์ง€.
  • ๋ธ”๋กœ๊ทธ ์ •๋น„๊ฐ€ ๋๋‚˜์งˆ ์•Š๋Š”๋‹ค. ์นดํ…Œ๊ณ ๋ฆฌ ๋ฉ”๋‰ด์— ๋“ค์–ด๊ฐ€๋ฉด ๋‹ค์Œ๊ธ€์„ ๋ˆŒ๋ €์„ ๋•Œ ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋ฉ”๋‰ด ์•ˆ์—์„œ ์›€์ง์ด๊ฒŒ ํ•˜๊ณ  ์‹ถ์€๋ฐ pagination2 ๋ฅผ ์ ์šฉํ•˜๋ฉด ํ•ด๊ฒฐ๋˜๋ ค๋‚˜?;; ์ผ๋‹จ ์˜ค๋Š˜์€ ๊ฐ€๋…์„ฑ ์ข‹๊ฒŒ ํฌ์ŠคํŒ… css ๋ถ€๋ถ„์„ ์ˆ˜์ •ํ–ˆ๋‹ค. ๋ฌธ์ œ๋Š” ์™„์ „ํžˆ ๋ง˜์—๋“ค์ง„ ์•Š๋Š”๋‹คใ… ใ…  ๊ทธ๋ƒฅ velog๋‚˜ ํ• ๊ฑธ ๊ทธ๋žฌ๋‚˜ ํ›„ํšŒ๊ฐ€ ๋˜๊ณ ์žˆ๋‹คโ€ฆ
  • ์œ ํŠœ๋ธŒ์—์„œ 2021 ์›น๊ฐœ๋ฐœ ํŠธ๋ ŒํŠธ ์˜์ƒ์„ ๋ณด๊ณ  ๋Œ€์ถฉ ์ •๋ฆฌํ•ด๋ดค๋‹ค.

    • TypeScript
    • State management : React hooks / React Context API > Redux
    • ๋งŽ์ด ์“ฐ์ด๋Š” web framework : react, angular, vue.js / Svelte
      • Svelte : ์ปดํฌ๋„ŒํŠธ ํ”„๋ ˆ์ž„์›Œํฌ. VDOM์„ ์ƒ์„ฑํ•˜์ง€ ์•Š๊ณ  ์ปดํŒŒ์ผ ์‹œ๊ฐ„, ๋นŒ๋“œ ํƒ€์ž„๋•Œ ํ•„์š”ํ•œ DOM์š”์†Œ๋ฅผ ๋ฏธ๋ฆฌ ์ƒ์„ฑํ•จ. ๋ˆˆ์—ฌ๊ฒจ ๋ณผ ํ•„์š”๊ฐ€ ์žˆ์Œ.
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ : Runtime Environment(Node js)
      ๋ฐฑ์—”๋“œ๋ฅผ NodeJs ํ†ตํ•ด ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•„์ง, ๋‹จ์ ์ด ๋ณด์™„๋œ Deno
    • No Code, Less Code : Bubble, Airtable
    • Serverless : AWS, Netlify, Google Cloud Platformโ€ฆ
    • JAM Stack : ์„œ๋ฒ„์—†์ด ๋ฐฑ์—”๋“œ ์ง€์‹ ์—†์–ด๋„ ํ’€์Šคํƒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์คŒ.
      ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(NextJS, Gastby) + APIs(Headless CMS) + MarkUP
    • SPA(Single Page Application) : ์‚ฌ์šฉ์ž๊ฐ€ ์›น์‚ฌ์ดํŠธ์— ํ•œ ๋ฒˆ ์ ‘์†ํ•œ ๋’ค๋กœ ๋‹ค์‹œ ํŽ˜์ด์ง€๋ฅผ ๋ฆฌ๋กœ๋”ฉํ•  ํ•„์š” ์—†์ด ํ•œ ํŽ˜์ด์ง€ ๋‚ด์—์„œ ์—ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์‚ฌ์šฉ ๊ฐ€๋Šฅ. facebook, pinterest, gmailโ€ฆ
    • PWA(Progressive Web Apps) : ์›น๊ธฐ์ˆ  ์ด์šฉํ•ด ๋งŒ๋“  ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ชจ๋ฐ”์ผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์—†์ด ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ž์ฒด๋ฅผ ๋ชจ๋ฐ”์ผ์— ๋‹ค์šด๋ฐ›์•„ ๋ชจ๋ฐ”์ผ ๊ด€๋ จ API ์ด์šฉ, ๊ธฐ๊ธฐ๊ฐ€ ์˜คํ”„๋ผ์ธ ์ผ ๋•Œ๋„ ๋Š์ž„์—†์ด ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋„๋ก ํ•ด์คŒ
    • Web Assembly : ์ €์ˆ˜์ค€์— ์†ํ•˜๋Š” C, C++, Rust ๊ฐ™์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋กœ ๋ธŒ๋ผ์šฐ์ € ์œ„์—์„œ ๋™์ž‘ํ•˜๋Š” ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Œ. ์„ฑ๋Šฅ up, ์ปดํŒฉํŠธํ•œ ๋ฐ”์ด๋„ˆ๋ฆฌ ํฌ๋งท. ex) Figma(C++)
    • AI, ML
    • Voice Search and Navigation
    • Motion Design

    ์—ญ์‹œ TypeScript๋Š” ํ•˜๋ฃจ๋นจ๋ฆฌ ๋ฐฐ์›Œ์•ผ ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ.
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ”„๋ก ํŠธ๋ผ๊ณ  ์ƒ๊ฐํ•ด์„œ ํฌ๊ฒŒ ๋น„์ค‘์„ ์•ˆ ๋’€์—ˆ๋Š”๋ฐ^^ใ…Žใ…Ž.. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๊ณต๋ถ€ํ•˜๋ ค๋ฉด ์–ด์ฐจํ”ผ ๊ณต๋ถ€ํ•ด์•ผ ํ•˜๊ธด ํ•˜๋‹ˆ๊นŒ..^_ใ… ใ…  ๊ฐœ๋ฐœ์€ ์ง„์งœ ๊ณต๋ถ€ํ•  ๊ฒŒ ๋๋„์—†์ด ๋ฐ€์–ด ๋‹ฅ์น˜๋Š” ๊ฒƒ ๊ฐ™๋‹คโ€ฆ
    ๊ทธ๋ฆฌ๊ณ  ์ €์ˆ˜์ค€ ์–ธ์–ด๋„ ์–ธ์  ๊ฐ„ ๊ณต๋ถ€๋ฅผ ํ•ด์•ผํ•  ๊ฒƒ ๊ฐ™๋‹ค. Web Assembly ์„ค๋ช… ๋ณด๋ฉด์„œ ๋„ˆ๋ฌด ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์–ด์กŒ์Œ! ๋‚ด๊ฐ€ ์ง  ์ฝ”๋“œ๋กœ ํ”„๋กœ๊ทธ๋žจ ์„ฑ๋Šฅ์ด ํ™•์—ฐํ•  ์ •๋„๋กœ ์ข‹์•„์ง€๋ฉด ๋Œ€์ฒด ๋ฌด์Šจ ๊ธฐ๋ถ„์ผ๊นŒโ€ฆ ๋Š๊ปด๋ณด๊ณ  ์‹ถ๋‹ค.

ํƒœ๊ทธ:

์นดํ…Œ๊ณ ๋ฆฌ:

์—…๋ฐ์ดํŠธ:

๋Œ“๊ธ€๋‚จ๊ธฐ๊ธฐ