Daily/Today I Learned

22.11.22_TIL

ํ˜ธ๋ฐ€์ด 2022. 11. 23. 00:29

๐Ÿ“— ์˜ค๋Š˜ ํ•œ ์ผ

Javascript ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œํ’€์ด

  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฌธ์ œ
    • [level2] ๊ตฌ๋ช…๋ณดํŠธ
      • ๋‹จ์ˆœํ•˜๊ฒŒ ์™„์ „ํƒ์ƒ‰์œผ๋กœ ํ‘ธ๋Š” ๋ฌธ์ œ์˜€์ง€๋งŒ ํšจ์œจ์„ฑ์ด ๊ฑธ๋ ธ๋‹ค. ๋‚ด๋ฆผ์ฐจ์ˆœ์œผ๋กœ ํ•  ๊ฒฝ์šฐ ์„ฑ๊ณต์ด ๋˜์ง€๋งŒ ์˜ค๋ฆ„์ฐจ์ˆœ์œผ๋กœ ํ•  ๊ฒฝ์šฐ ์‹คํŒจํ•œ๋‹ค. ์ด์œ ๋Š” ๋‚˜์˜ ๋กœ์ง ๋ฌธ์ œ์˜€๋‹ค. ๋‚ด ๋กœ์ง์€ ๋‚ด๋ฆผ์ฐจ์ˆœ์œผ๋กœ ํ•  ๊ฒฝ์šฐ๋งŒ ์„ฑ๊ณตํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ์˜€๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
    • [level2] N๊ฐœ์˜ ์ตœ์†Œ๊ณต๋ฐฐ์ˆ˜
      • ์ตœ์†Œ๊ณต๋ฐฐ์ˆ˜๋ฅผ ์ฐพ๋Š” ๋ฌธ์ œ๋Š” ๋„ˆ๋ฌด ๋งŽ์ด ํ’€์–ด๋ดค๋˜ ๊ฒƒ ๊ฐ™๋‹ค.
        ์ตœ๋Œ€๊ณต์•ฝ์ˆ˜๋ฅผ ์œ ํด๋ฆฌ๋“œ ํ˜ธ์ œ๋ฒ•์„ ํ†ตํ•ด์„œ ์ฐพ์œผ๋ฉด ์ตœ์†Œ๊ณต๋ฐฐ์ˆ˜๋ฅผ ํ’€ ์ˆ˜ ์žˆ๋‹ค.
    • [level1]๊ธฐ์‚ฌ๋‹จ์›
      • level1๋ฌธ์ œ ์˜€์ง€๋งŒ ์œ„์˜ level2๋ฌธ์ œ๋“ค๋ณด๋‹ค ์ƒ๊ฐํ•ด์•ผ ํ•  ๊ฒƒ์ด ๋งŽ์•˜๋˜ ๋ฌธ์ œ ๊ฐ™๋‹ค.
        ์•ฝ์ˆ˜์˜ ๊ฐœ์ˆ˜๋ฅผ ๊ตฌํ•ด์„œ ์กฐ๊ฑด์— ๋งž๊ฒŒ ์ด ํ•ฉ์„ ๊ณ„์‚ฐํ•˜๋Š” ๊ฐ„๋‹จํ•œ ๋ฌธ์ œ์ธ์ค„ ์•Œ๊ณ  ์ฒ˜์Œ์— ์ ‘๊ทผํ–ˆ์œผ๋‚˜ ์‹œ๊ฐ„๊นŒ์ง€ ๊ณ ๋ คํ•ด์•ผ ํ–ˆ๋‹ค.
        ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ์•ฝ์ˆ˜์˜ ๊ฐœ์ˆ˜๋ฅผ ๊ตฌํ•˜๋Š” ๊ฒƒ์„ ๋ฐ˜์œผ๋กœ ๋‚˜๋ˆ ๋ณด์•˜๋Š”๋ฐ ์ฒ˜์Œ์— ์‹œ๊ฐ„์ดˆ๊ณผ๋Š” ๋‚˜์ง€ ์•Š๊ณ  ํ†ต๊ณผ๊ฐ€ ๋์ง€๋งŒ 8000ms๋ผ๋Š” ์—„์ฒญ๋‚œ ์‹œ๊ฐ„์ด ๋‚˜์™”๋‹ค. ์ด๊ฒƒ์€ ์‹œ๊ฐ„์ด ๋งŽ์ด ๊ฑธ๋ฆฐ ์ฝ”๋“œ์ด๊ธฐ ๋•Œ๋ฌธ์— ์–ด๋–ป๊ฒŒ ๋” ์ค„์ผ ์ˆ˜ ์žˆ์„์ง€ ์ž ๊น ์ƒ๊ฐํ–ˆ๋‹ค.
        Math.sqrt๋กœ ์ œ๊ณฑ๊ทผ๊นŒ์ง€๋งŒ ์ ‘๊ทผ์„ ํ•˜๋ฉด ํ•ด๊ฒฐ๋  ๊ฒƒ ๊ฐ™์•„์„œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ–ˆ๋”๋‹ˆ ํ•ด๊ฒฐ๋˜์—ˆ๋‹ค.

๋ฉด์ ‘์ค€๋น„

๋‚˜๋งŒ์˜ ํฌํŠธํด๋ฆฌ์˜ค ์‚ฌ์ดํŠธ (22.11.21 ~ ing)

  • ๋””์ž์ธ ์„ธ๋ถ€์‚ฌํ•ญ ์กฐ์ ˆ
  • ์ด์ „ ํ”„๋กœ์ ํŠธ ์ œ๊ฑฐ ํ›„ ์ƒˆ ํ”„๋กœ์ ํŠธ ๋ณ€ํ™˜
  • Navbar ๊ตฌ์„ฑ
  • Home ๊ตฌ์„ฑ ์ค‘
  • vercel ๋ฐฐํฌ ์ž๋™ํ™”

Next.js ๊ธฐ์ดˆ ํ•™์Šต

  • Next.js๋ž€ ๋ฌด์—‡์ธ๊ฐ€?
    • React์œ„ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค.
  • Next.js์˜ ํŠน์ง•
    • ํฐ ๊ทœ๋ชจ์˜ React ์•ฑ์„ ์‰ฝ๊ฒŒ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ๋งŽ์€ ๊ธฐ๋Šฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.
    • SSR (Server Side Rendering) ๋ฐฉ์‹์ด๋‹ค.
      • ์„œ๋ฒ„์—์„œ ์™„์„ฑ๋œ HTML์„ ๋ณด๋‚ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ๋ Œ๋”๋ง ์†๋„๊ฐ€ ๋นจ๋ผ ์‚ฌ์šฉ์ž์—๊ฒŒ ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๋Š” ์‹œ๊ฐ„์ด ๋นจ๋ผ์ง„๋‹ค.
        • ๊ธฐ์กด์˜ React๋Š” CSR (Client Side Rendeing) ๋ฐฉ์‹์œผ๋กœ ์ดˆ๊ธฐ ํŽ˜์ด์ง€ ๋กœ๋”ฉ์ด ์˜ค๋ž˜๊ฑธ๋ฆฌ๋Š” ๋‹จ์ ์„ ๋ณด์™„ํ•ด์ค€๋‹ค.
      • ์™„์„ฑ๋œ HTML์„ ๋ณด๋‚ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— SEO(Search Engine Optimization, ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”)์—๋„ ์ข‹์•„ ๊ฒ€์ƒ‰์—”์ง„์— ๋…ธ์ถœ๋  ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์•„์ง„๋‹ค.

โœ Diary

๋ฉด์ ‘ ์ค€๋น„๋ฅผ ํ•  ๋•Œ๋Š” ์ด๋ก ์ ์ธ ๋‚ด์šฉ์„ ๊ณ„์†ํ•ด์„œ ๋ณด๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ์กฐ๊ธˆ ๋” ์žฌ๋ฏธ์žˆ์—ˆ๋‹ค.

ํฌํŠธํด๋ฆฌ์˜ค ์‚ฌ์ดํŠธ๋ฅผ vercel๋กœ ๋ฐฐํฌ ์ž๋™ํ™”๋ฅผ ํ•˜๋ ค๊ณ  ๋ณด๋‹ˆ import github repository์—์„œ 5๊ฐœ๊ฐ€ ๋„˜์–ด๊ฐ€๋‹ˆ ์„ ํƒ์„ ํ•  ์ˆ˜ ์—†์—ˆ๋‹ค...
์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ ์ฝ”๋“œ์Šคํ…Œ์ด์ธ  ๊ณผ์ •์—์„œ ํ–ˆ๋˜ vercel ํ…Œ์ŠคํŠธ์šฉ ๋ ˆํฌ๋ฅผ ๋น„ํ™œ์„ฑํ™”ํ•˜๊ณ  ํฌํŠธํด๋ฆฌ์˜ค ์‚ฌ์ดํŠธ๋ฅผ ๋ฐฐํฌํ•ด์„œ ํ•ด๊ฒฐํ–ˆ๋‹ค!

aws๋‚˜ netlify๋กœ๋„ ๋ฐฐํฌ๋ฅผ ํ•  ์ˆ˜ ์žˆ์—ˆ์ง€๋งŒ aws๋Š” ํ”„๋ฆฌํ‹ฐ์–ด๊ฐ€ ๋๋‚˜๋ฉด ์œ ๋ฃŒํ™”๊ฐ€ ์ง„ํ–‰๋˜๊ณ  ๋ฐฐํฌ ์ž๋™ํ™”๋ฅผ ํ•˜๊ธฐ์œ„ํ•œ ๊ณผ์ •์— ์‹œ๊ฐ„์„ ํˆฌ์žํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„ ํƒํ•˜์ง€ ์•Š์•˜๊ณ  netlify๋Š” ์œ„์™€ ๊ฐ™์€ ์œ ๋ฃŒํ™”๋Š” ์—†์ง€๋งŒ vercel๋ฅผ ๋” ๋งŽ์ด ์‚ฌ์šฉํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— vercel๋ฅผ ์„ ํƒํ–ˆ๋‹ค.

๋‹ค์Œ์—” ๊ธฐํšŒ๊ฐ€ ๋œ๋‹ค๋ฉด netlify๋กœ ํ•ด๋ด์•ผ๊ฒ ๋‹ค.

'Daily > Today I Learned' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

22.11.24_TIL  (0) 2022.11.25
22.11.23_TIL  (0) 2022.11.23
22.11.21_TIL  (0) 2022.11.22
22.11.20_TIL  (2) 2022.11.21
22.11.19_TIL  (0) 2022.11.21