The journey to becoming a developer

My future is created by what I do today, not tomorrow.

What I learned/CodeSquad Log

CodeSquad Day 36 : Front-end Week 3

Millie 2022. 3. 1. 01:02

 

CodeSquad๐Ÿ”นDay 36

Morning Scrum & ์˜ค์ „ ํ•™์Šต

์›”์š”์ผ, ์ƒˆ๋กœ์šด ์กฐ์›๋“ค, ๊ทธ๋ฆฌ๊ณ  ์ƒˆ๋กœ์šด ๋ฏธ์…˜๋“ค๊ณผ ํ•จ๊ป˜ ์‹œ์ž‘ํ•˜๋Š” ํ•˜๋ฃจ์˜€๋‹ค. ์ƒˆ๋กœ์šด ์กฐ์›๋“ค์ด๋ผ ํ–ˆ์ง€๋งŒ ์‚ฌ์‹ค ํ•œ ๋ฒˆ ์ด์ƒ ๊ฐ™์€ ์กฐ๊ฐ€ ๋œ ์ ์ด ์žˆ๋Š” ์‚ฌ๋žŒ๋“ค, ๊ทธ๋ฆฌ๊ณ  ์ฝ”์ฝ”์•„ ๊ณผ์ • ๋•Œ๋ถ€ํ„ฐ ๊ฐ™์ด ํ–ˆ๋˜ ์‚ฌ๋žŒ๋“ค๋„ ์žˆ์–ด์„œ ๋‚ฏ์ต์€ ๋Š๋‚Œ์ด ๋“ค์—ˆ๋‹ค. ์–ด์ƒ‰ํ•œ ๋Š๋‚Œ์€ ์—†์—ˆ๋‹ค.

๋ฏธ์…˜ ์ค‘ ํ•˜๋‚˜๋Š” ์ €๋ฒˆ์ฃผ์ฒ˜๋Ÿผ ์Šคํฌ๋Ÿผ ๊ทœ์น™์„ ์„ธ์šฐ๋Š” ๊ฑฐ์˜€๋‹ค. ์‚ฌ๋‹ค๋ฆฌ ํƒ€๊ธฐ๋ฅผ ํ•ด์„œ ๊ฑธ๋ฆฐ JS๊ฐ€ ์ •๋ฆฌํ•ด์„œ Slack ํ”„๋ก ํŠธ์—”๋“œ ์ฑ„๋„์— ์˜ฌ๋ ค์ฃผ์—ˆ๋‹ค.

์ ์‹ฌ ์‹œ๊ฐ„ ์ „๊นŒ์ง€๋Š” ๋ฏธ์…˜์„ ์ •๋…ํ•˜๊ณ  ๋ฏธ์…˜๊ณผ ํ•จ๊ป˜ ๋‚˜์˜จ ํ•™์Šตํ•  ๊ฑฐ๋ฆฌ๋“ค์„ ๋ณด๋ฉด์„œ Promise๋„ ๊ฐ„๋žตํ•˜๊ฒŒ ํ•™์Šตํ•ด ๋ณด์•˜๋‹ค. ๊ตฌํ˜„๋ณด๋‹ค๋Š” ์ด๋ฒˆ ์ฃผ ๋ฏธ์…˜์—์„œ ๋ฌด์—‡์„ ๋ฐฐ์›Œ์•ผ ํ• ์ง€, ๋˜ ์ˆ˜์—…์—์„œ๋Š” ๋ญ˜ ์–ป์–ด๊ฐ€๋ฉด ์ข‹์„์ง€ ๊ทธ๋Ÿฐ ๋ฐฉํ–ฅ์„ฑ์„ ์žก๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ๋ณด์•˜๋‹ค.

์ด๋ฒˆ ์ฃผ๋„ ์นด์นด์˜คํŽ˜์ด์ง€์ด์ง€๋งŒ, ํ•™์Šตํ•  ๊ฑฐ๋ฆฌ๋ฅผ ๋งŽ์ด ๋˜์ ธ ์ค€ ๊ฒƒ์„ ๋ดค์„ ๋•Œ ๊ตฌํ˜„๋ณด๋‹ค๋Š” ํ•™์Šต์— ๋น„์ค‘์„ ๋‘๋ผ๋Š” ๋œป์ด๋ผ๊ณ  ์ƒ๊ฐ์„ ํ–ˆ๋‹ค. ํŠนํžˆ ๋น„๋™๊ธฐ! ๋น„๋™๊ธฐ์™€๋Š” ๊ฑฐ๋ฆฌ๋ฅผ ๋งŽ์ด ์ขํžˆ์ง€ ๋ชปํ–ˆ๋Š”๋ฐ ์ด๋ฒˆ ์ฃผ ํ‰์ผ์—๋Š” ๋น„๋™๊ธฐ์— ๋งŽ์€ ์‹œ๊ฐ„๊ณผ ๋น„์ค‘์„ ํˆฌ์žํ•ด์„œ ๊ฑฐ๋ฆฌ๋ฅผ ์ขํ˜€๋ณด๊ณ  ์นœํ•ด์ง€๊ณ  ์‹ถ๋‹ค.

์ƒํ™œ์ฝ”๋”ฉ์˜ ์ตœ์‹  ๊ฐ•์˜์— Promise๊ฐ€ ์žˆ์–ด์„œ ์ฐธ๊ณ ํ•ด ๋ณด์•˜๋‹ค.

 

Class by Crong

ํฌ๋กฑ์€ ๊ฑฐ์˜ 3์‹œ๊ฐ„์„ ์ˆ˜์—…ํ–ˆ๋‹ค. ๊ณ„์† ์•‰์•„ ์žˆ๋Š๋ผ ์—‰๋ฉ์ด๊ฐ€ ์•„ํŒŒ์™”์ง€๋งŒ ์ผ์–ด๋‚  ์ˆ˜ ์—†์—ˆ๋‹ค. ์•ฝ๊ฐ„ ์•Œ๊ฑฐ๋‚˜ ๊ฑฐ์˜ ๋ชจ๋ฅด๋Š” ๊ทธ๋Ÿฐ ๋‚ด์šฉ๋“ค์ด ์Ÿ์•„์ ธ ๋‚˜์™€์„œ ์ž๋ฆฌ๋ฅผ ๋น„์šธ ์ˆ˜๊ฐ€ ์—†์—ˆ๋‹ค.

์ˆ˜์—… ๋•Œ๋Š” ๊ต‰์žฅํžˆ ๋งŽ์€ ์ด์•ผ๊ธฐ๋“ค์„ ํ–ˆ๋‹ค. Animation, Component, SSR, CSR, HTTP, Express, middleware, Promise, ๋™๊ธฐ์™€ ๋น„๋™๊ธฐ ๋“ฑ๋“ฑ. ๋„ˆ๋ฌด ๋ฐฉ๋Œ€ํ•œ ๋‚ด์šฉ๋“ค์ด ์••์ถ•์ ์œผ๋กœ ์ง€๋‚˜๊ฐ€์„œ ์•ฝ๊ฐ„ ๋„‹์ด ๋‚˜๊ฐ€๊ธฐ๋„ ํ–ˆ๋‹ค. ๊ทธ๋ฃน ๋ฆฌ๋ทฐ๋ฅผ ํ•  ๋•Œ ๋‹ค๋“ค ์•ฝ๊ฐ„ ์นจ์ฒด๋œ ๋ถ„์œ„๊ธฐ์˜€๋‹ค. ์ˆ˜์—…์„ ์ž˜ ์ดํ•ดํ•˜์ง€ ๋ชปํ–ˆ๋‹ค๋Š” ์˜๊ฒฌ์ด ๋งŽ์•˜๋‹ค. ๋‚˜๋งŒ ๊ทธ๋Ÿฐ ๊ฒŒ ์•„๋‹ˆ๋ผ๋Š” ์•ฝ๊ฐ„์˜ ์•ˆ๋„๊ฐ์ด ๋“ค๋ฉด์„œ๋„ ์–ด์จŒ๋“  ์ œ๋Œ€๋กœ ๋œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๋ฉด ์ „๋ถ€ ์•Œ์•„์•ผ ํ•˜๋Š” ๊ฒƒ๋“ค์ด๊ธฐ์— ๋ถ€์ฑ„๊ฐ€ ๋˜ ์Œ“์ธ ๊ธฐ๋ถ„์ด์—ˆ๋‹ค.

๊ทธ๋ž˜๋„ ์˜ค๋Š˜๋ถ€ํ„ฐ๋Š” ์ข€ ๋” ๊ธ์ •์ ์ธ ๋งˆ์ธ๋“œ๋กœ ์ƒˆ๋กœ์šด ๊ฒƒ์„ ํ•˜๋‚˜์”ฉ ์ต์ˆ™ํ•œ ๊ฒƒ์œผ๋กœ ๋ฐ”๊ฟ”๋‚˜๊ฐ€๋Š” ์‹œ๋„๋ฅผ ํ•ด ๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ๋„ˆ๋ฌด ๋ชปํ•œ ๊ฒƒ์—๋งŒ ์ดˆ์ ์„ ๋‘ฌ์„œ ๋ถ€์ •์ ์ธ ์ƒ๊ฐ์— ํœฉ์‹ธ์ด๊ธฐ๋ณด๋‹ค๋Š”, ๋” ๋‚˜์•„์ง„ ์ ๊ณผ ์•ž์œผ๋กœ ๋” ๋‚˜์•„์กŒ์œผ๋ฉด ํ•˜๋Š” ์ ์— ์ดˆ์ ์„ ๋‘๊ณ  ํ•˜๋ฃจํ•˜๋ฃจ ์‚ด์•„๊ฐ€๋ณด์ž.

 

Algorithm

๋‚ด์ผ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์Šคํ„ฐ๋”” ์ค€๋น„๋ฅผ ์œ„ํ•ด์„œ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ๋ฅผ ๋ณด์•˜๋‹ค. ์™œ ํ’€์ง€ ์•Š๊ณ  ๋ณด์•˜๋ƒ๊ณ  ํ•˜๋ƒ๋ฉด, ํ•œ ๋ฌธ์ œ๋Š” ์ด์ „์— ๋ฏธ๋ฆฌ ํ’€์—ˆ์—ˆ๊ณ , ํ•œ ๋ฌธ์ œ๋Š” ๋‚ด๊ฐ€ ๊ตฌํ˜„์„ ์ œ๋Œ€๋กœ ๋ชปํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ตฌํ˜„์„ ์ œ๋Œ€๋กœ ํ•˜์ง€ ๋ชปํ•œ ๋ฌธ์ œ๋Š” ์˜ค๋žœ ์ˆ™์ ๊ณผ ๊ฐ™์€ Linked List ๋ฌธ์ œ์ธ๋ฐ, ์ฝ”์ฝ”์•„ ์‹œ์ ˆ๋ถ€ํ„ฐ ๋‚˜๋ฅผ ๊ดด๋กญํžŒ(?) ๋ฌธ์ œ๋‹ค. ๋‚ด์ผ ๊ณผ์—ฐ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์˜ ๋ฆฌ๋ทฐ๋ฅผ ๋“ฃ๋Š”๋‹ค๋ฉด ์žฌ๊ท€๋ฅผ ์‚ฌ์šฉํ•œ ํ’€์ด๋ฅผ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์„๊นŒ?

 

์šด๋™ ์ธ์ฆ๋ชจ์ž„ ๊ฐœ์„ค!

ํ–„๋””์™€ ๊ฐ„๋งŒ์— ๊ธธ๊ฒŒ ์ด๊ฒƒ์ €๊ฒƒ ์ด์•ผ๊ธฐ ํ•˜๋‹ค๊ฐ€ ์šด๋™ ์ด์•ผ๊ธฐ๊ฐ€ ๋‚˜์˜ค๊ฒŒ ๋˜์—ˆ๋‹ค. ํ–„๋””์˜ (๋‚ด ๊ธฐ์ค€์œผ๋กœ ์ถฉ๊ฒฉ์ ์ธ!) ์šด๋™๋Ÿ‰์„ ๋“ฃ๊ณ , ์‹ฌ๊ฐ์„ฑ์„ ๋Š๋‚€ ๋‚˜๋Š” ์šด๋™ ์ธ์ฆ์„ ํ•˜์ž๊ณ  ์ œ์•ˆํ–ˆ๋‹ค. ์ฃผ 3ํšŒ ์•ผ์™ธ์—์„œ ์šด๋™ํ•œ ๊ฒƒ์„ ์ธ์ฆํ•˜๋Š” ๊ฒƒ์ธ๋ฐ, ๊ทœ์น™๋„ ์ •ํ•˜๊ณ  ๊ฐ์ž์˜ ๋ชฉํ‘œ๋„ ์ •ํ•ด๋ณด์•˜๋‹ค. ์ด๊ฒƒ์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•˜๋Š” ๋™์•ˆ ๋„๋‹ˆ๋„ ์™”๊ธธ๋ž˜ ๊ถŒ์œ ๋ฅผ ํ–ˆ๋Š”๋ฐ, ์‹œ๊ฐ„๋Œ€๊ฐ€ ๋„ˆ๋ฌด ์ผ์ฐ์ด๋ผ์„œ ์–ด๋ ค์šธ ๊ฒƒ ๊ฐ™๋‹ค๊ณ  ํ–ˆ๋‹ค. ์‚ฌ์‹ค ์˜ค์ „ 8์‹œ ๋ฐ˜์ด๋ผ์„œ ๊ทธ๋ ‡๊ฒŒ ์ผ์ฐ์€ ์•„๋‹ˆ์ง€๋งŒ ์ƒˆ๋ฒฝํ˜•์ธ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋Š” ์ด๋ฅผ ์ˆ˜ ์žˆ๋Š” ์‹œ๊ฐ„์ด๊ธด ํ•˜๋‹ค. ๋‚˜๋„ ์š”์ฆ˜ ๋Šฆ์ž ์„ ๋งŽ์ด ์ž๊ณ  ์žˆ๊ธฐ๋„ ํ•˜๊ณ . ๊ทธ ๋Šฆ์ž  ์ž๋Š” ์Šต๊ด€์„ ๋ฟŒ๋ฆฌ๋ฝ‘๊ณ  ์‹ถ์–ด์„œ ๋งŒ๋“  ๊ฒƒ๋„ ์žˆ๋‹ค.

๋ณธ๊ฒฉ์ ์ธ ์ธ์ฆ์€ 3์›” 2์ผ ์ˆ˜์š”์ผ๋ถ€ํ„ฐ ํ•˜๊ธฐ๋กœ ํ–ˆ์ง€๋งŒ, ๋‚˜๋Š” ๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด ๋งค์ผ ์ธ์ฆํ•  ์ƒ๊ฐ์ด๋‹ค. ๋ฃจํ‹ด์˜ ํž˜์ด ์ƒ๊ฐ๋ณด๋‹ค ๋” ํฌ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๋ถˆ๊ทœ์น™ํ•œ ์ƒํ™œ์—์„œ๋Š” ์ข‹์€ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ฌ ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ์„ ๋Š๋ผ๊ธฐ๋„ ํ•˜๊ณ , ๊ทœ์น™์ ์ธ ์šด๋™์€ ๋‡Œ ํ™œ์„ฑํ™”์—๋„ ์ข‹๊ธฐ ๋•Œ๋ฌธ์— ๋ฃจํ‹ด์€ ๊ฐ€๋Šฅํ•˜๋ฉด ์ผ์ •ํ•˜๊ฒŒ ์œ ์ง€ํ•˜๊ณ  ์‹ถ๋‹ค.

์ง€๊ธˆ์€ ๋‚˜์™€ ํ–„๋”” ๋ฟ์ด์ง€๋งŒ, ๋ฉค๋ฒ„๋ฅผ ๋” ๋ชจ์ง‘ํ• ๊นŒ๋„ ๊ณ ๋ฏผ์ค‘์ด๋‹ค. ๊ณต์‹์ ์œผ๋กœ ๋ชจ์ง‘์„ ํ• ์ง€? ์•„๋‹ˆ๋ฉด ๊ทธ๋ƒฅ ๊ฐ€๊นŒ์šด ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋งŒ ์•Œ๋ฆด์ง€.

'What I learned > CodeSquad Log' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

CodeSquad Day 38 : Front-end Week 3  (0) 2022.03.03
CodeSquad Day 37 : Front-end Week 3  (0) 2022.03.02
CodeSquad Day 35 : Front-end Week 2  (0) 2022.02.26
CodeSquad Day 34 : Front-end Week 2  (0) 2022.02.25
CodeSquad Day 33 : Front-end Week 2  (0) 2022.02.24