The journey to becoming a developer

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

What I learned/CodeSquad Log

CodeSquad Day 33 : Front-end Week 2

Millie 2022. 2. 24. 00:57

 

CodeSquad๐Ÿ”นDay 33

Morning Scrum

์–ด์ œ ๊ฑฐ์˜ 3์‹œ์ฏค ์ž๋Š๋ผ ์ข€ ๋Šฆ๊ฒŒ ์ผ์–ด๋‚ฌ์ง€๋งŒ ์•„์นจ๊นŒ์ง€ ๋“ ๋“ ํ•˜๊ฒŒ ์ฑ™๊ฒจ๋จน๊ณ , ์ง€๊ฐํ•˜์ง€ ์•Š์•˜๋‹ค. ์ƒ๊ฐ๋ณด๋‹ค ์ปจ๋””์…˜์€ ๊ดœ์ฐฎ์•˜๋‹ค. ์Šคํฌ๋Ÿผ์—์„œ๋Š” ๋ฐฉํƒœ๊ฐ€ github pages๋ฅผ ์ด์šฉํ•ด์„œ ์–ด๋–ป๊ฒŒ ๋ฐฐํฌํ•˜๋Š”์ง€๋ฅผ ๋ฌผ์–ด๋ณด๊ธธ๋ž˜ ํ™”๋ฉด ๊ณต์œ ํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์•Œ๋ ค์ฃผ์—ˆ๋‹ค. ์ด๋ˆ„๊ฐ€ express ๊ด€๋ จํ•ด์„œ ์–˜๊ธฐ๋ฅผ ์ข€ ํ–ˆ๋Š”๋ฐ express๋ฅผ ์•„์ง ์ œ๋Œ€๋กœ ํ•™์Šตํ•˜์ง€ ์•Š์•„์„œ ์ž˜ ์ดํ•ด๋ฅผ ๋ชปํ–ˆ๋‹ค. (์‚ฌ์‹ค ์˜ค๋Š˜ ๋ฐค์— ํ•™์Šตํ•˜๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ, ์•Œ๊ณ ๋ฆฌ์ฆ˜๊ณผ git์œผ๋กœ ์‹œ๊ฐ„์ด ๋‹ค ๊ฐ€๋ฒ„๋ ธ๋‹ค.)

 

Mission & PR & Review

์ด๋ฒˆ์—๋Š” PR ๋ณด๋‚ผ ๋•Œ ๋ฉ”์‹œ์ง€๋ฅผ ๊ผผ๊ผผํ•˜๊ฒŒ ์ž‘์„ฑํ•ด๋ณด์•˜๋‹ค. ๊ทธ๋™์•ˆ ๋‚ด๊ฐ€ ๊ณ ๋ฏผํ•œ ๊ฒƒ๋“ค์— ๋Œ€ํ•ด์„œ ์ผ๋ชฉ์š”์—ฐํ•˜๊ฒŒ ์ ์–ด๋ณด์•˜๋‹ค. ๋‚ด ์ƒ๊ฐ์„ ๋‚จ์—๊ฒŒ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด ์ •์ œํ•˜๋Š” ๊ณผ์ •๋„ ์ƒ๊ฐ๋ณด๋‹ค ์‹œ๊ฐ„์ด ๊ฝค๋‚˜ ๊ฑธ๋ ธ๋‹ค. ๋ฆฌํŒฉํ† ๋ง์„ ๋งˆ์น˜๊ณ  PR์„ ๋ณด๋ƒˆ๋‹ค. 12์‹œ๊ฐ€ ๋„˜์€ ์‹œ๊ฐ„์— ๋ณด๋‚ด์„œ์ธ์ง€, ๋ฆฌ๋ทฐ๋Š” ๋ฐค ๋Šฆ๊ฒŒ ๋ฐ›์•˜๋‹ค. ์ง€๊ธˆ์€ ๊ฐ„๋‹จํ•˜๊ฒŒ ํ›‘์–ด๋งŒ ์ฝ์—ˆ๊ณ  ๋‚ด์ผ ๋‹ค์‹œ ์ •๋…ํ•˜๋ฉด์„œ ์ ์šฉํ•ด ๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

 

Mission : Slider

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

 

Group Review

์ด๋ฒˆ์—๋Š” ์ฅฌ๊ฐ€ ๋น ์ ธ์„œ 5๋ช…์ด์„œ ๋ฆฌ๋ทฐ๋ฅผ ํ–ˆ๋‹ค. 5๋ช…์ด์„œ ํ•˜๋‹ˆ๊นŒ 1์‹œ๊ฐ„์ด๋ฉด ์ถฉ๋ถ„ํ•˜๊ฒ ์ง€ ํ–ˆ๋Š”๋ฐ ์ด๋ฒˆ์—๋„ ๋ณ„๋‹ค๋ฅด์ง€ ์•Š๊ฒŒ 1์‹œ๊ฐ„ ๋ฐ˜์ด ๊ฑธ๋ ธ๋‹ค. ์คŒ์— ๊ฐ€์žฅ ๋Šฆ๊ฒŒ๊นŒ์ง€ ๋‚จ์•„ ์žˆ๋Š” ์กฐ๊ฐ€ ๋˜์—ˆ๋‹ค. ์ตœํ›„์˜ ์Šน์ž(?) ใ…Žใ…Ž ์‚ฌ์‹ค ๋ฏธ์…˜ ๊ตฌํ˜„ ์–˜๊ธฐ๋ณด๋‹ค๋„ ๊ทธ๋ƒฅ ์žก๋‹ดํ•˜๋Š” ์‹œ๊ฐ„์ด ๊ธธ์—ˆ๋˜ ๊ฑฐ ๊ฐ™๊ธฐ๋„? ๊ทธ๋ž˜๋„ ๋”ฑ๋”ฑํ•˜์ง€ ์•Š๊ณ  ์ž์œ ๋กญ๊ฒŒ ๋งํ•˜๋Š” ๋ถ„์œ„๊ธฐ๊ฐ€ ํŽธํ•˜๊ณ  ์ข‹๋‹ค.

๋‚˜๋Š” Slider ๊ธฐ๋Šฅ ๊ตฌํ˜„ํ•œ ๊ฒƒ์— ๋Œ€ํ•ด์„œ ์ข€ ์ƒ์„ธํ•˜๊ฒŒ ๋ฆฌ๋ทฐ๋ฅผ ํ–ˆ๋‹ค. ๋ง๋กœ๋งŒ ์„ค๋ช…ํ•˜๋‹ˆ ๋ฐฉํƒœ๊ฐ€ ์ž˜ ์ดํ•ด๊ฐ€ ์•ˆ ๊ฐ„๋‹ค๊ณ  ํ•ด์„œ ์คŒ์˜ ๊ธฐ๋Šฅ์„ ์ด์šฉํ•ด์„œ ํŽœ์œผ๋กœ ํ™”๋ฉด์— ์จ๊ฐ€๋ฉด์„œ ํ–ˆ๋‹ค. ํ™•์‹คํžˆ ์„ค๋ช…์„ ํ•ด๋ณด๋‹ˆ๊นŒ ์ข€ ๋” ์„ ๋ช…ํ•ด์ง€๋Š” ๊ฒŒ ์žˆ๊ณ  ๋‚˜๋„ ์„ค๋ช…ํ•˜๋ฉด์„œ ๋ถ€์กฑํ•œ ๋ถ€๋ถ„์ด ๋ญ”์ง€๋ฅผ ์ž˜ ๊นจ๋‹ซ๊ฒŒ ๋˜์—ˆ๋‹ค.

 

Algorithms : Programmers & LeetCode

๋‚ด์ผ ์•„์นจ ์Šคํ„ฐ๋””์—ฌ์„œ ๋ฌธ์ œ๋ฅผ ํ’€์–ด์•ผ ํ–ˆ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ ˆ๋ฒจ 2์˜ '๊ฐ€์žฅ ํฐ ์ˆ˜' ๋ฌธ์ œ์˜€๋Š”๋ฐ ์ •๋ ฌ์„ ์–ด๋–ค ์‹์œผ๋กœ ํ•ด์•ผํ• ์ง€, ๊ทœ์น™์„ ๋ฐœ๊ฒฌํ•ด์•ผ ํ•˜๋Š”์ง€, ๊ฑฐ์˜ 2์‹œ๊ฐ„ ๋„˜๊ฒŒ ๋ฐ–์— ๊ฑธ์–ด๋‹ค๋‹ˆ๋ฉด์„œ๋„ ๊ณ„์† ๊ณ ๋ฏผํ–ˆ์ง€๋งŒ ๋‹ต์ด ๋‚˜์˜ค์ง€ ์•Š์•˜๋‹ค. ๊ฒฐ๊ตญ ์ด๊ฒƒ๋„ ํžŒํŠธ๋ฅผ ์–ป์—ˆ๊ณ , ๊ทธ๊ฑธ ์ ์šฉํ•ด์„œ ์ฝ”๋“œ๋ฅผ ์งฐ๋”๋‹ˆ ํ†ต๊ณผํ–ˆ๋‹ค.

LeetCode๋Š” Linked List ๋ฌธ์ œ์˜€๋Š”๋ฐ ์ด๊ฑด ์Šค์Šค๋กœ ํ•ด๊ฒฐํ–ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค ํ’€์ด๋ฅผ ๋ณด๊ณ  ๊ต‰์žฅํžˆ ์‹ ๋ฐ•ํ–ˆ๋‹ค. ๋ฌด๋ฆŽ์„ ์น˜๊ฒŒ ๋งŒ๋“œ๋Š” ํ’€์ด๊ฐ€ ์žˆ์–ด์„œ ๊ทธ๊ฑธ ๋ณด๊ณ  ๋˜ ๋งŽ์ด ๋Š๊ผˆ๋‹ค.

 

Refactoring : closest

์ด๋ฒคํŠธ ์œ„์ž„์„ ์ œ๋Œ€๋กœ ์•Œ๊ณ  closest ๋ฉ”์„œ๋“œ๋„ ์ž˜ ํ™œ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. ๊ทธ๋ฃน ๋ฆฌ๋ทฐ์—์„œ ์นธ์ด ๊ณ ๋ฏผ์„ ๊ณต์œ ํ–ˆ๋Š”๋ฐ ์ด๋ˆ„๊ฐ€ ์ž์‹ ์žˆ๊ฒŒ closest๋กœ ๊ทธ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๊ฒƒ์ด ์ธ์ƒ๊นŠ์—ˆ๋‹ค. closest๋Š” ์ž‘๋…„ ์ฝ”์ฝ”์•„ ๊ณผ์ • ๋•Œ ์–ดํ…€์ด ์•Œ๋ ค ์คฌ๋˜ ๊ฑด๋ฐ ๊ทธ ๋•Œ ์ œ๋Œ€๋กœ ์ดํ•ด๋ฅผ ๋ชปํ•œ ์ฑ„๋กœ ์ง€๊ธˆ๋„ ์œ ์ง€๋˜๊ณ  ์žˆ์—ˆ๋‹ค. ์ด ์ƒํƒœ๋ฅผ ๋นจ๋ฆฌ ๋ฒ—์–ด๋‚˜๊ณ  ์‹ถ์–ด์„œ ๊ณต๋ถ€๋ฅผ ํ•˜๊ณ  ๋‚ด ๋ฏธ์…˜์—๋„ ์–ผ๋ฅธ ์ ์šฉํ•ด ๋ณด์•˜๋‹ค. ์ ์šฉํ•œ ๊ฒƒ์„ Readme์—๋„ ๋‚จ๊ฒผ๋‹ค. ๋ฆฌํŒฉํ† ๋ง์ด ๋งŒ์กฑ์Šค๋Ÿฝ๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ ์•„์ง ์œ ์ฐฝํ•˜๊ฒŒ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋Š” ์ •๋„๋Š” ์•„๋‹ˆ๋‹ค. ์•„์ง ํ—ท๊ฐˆ๋ฆฌ๋Š” ๋ถ€๋ถ„๋„ ๋ถ„๋ช… ์žˆ๊ณ . ๊ทธ๋ž˜๋„ ์ง‘์ค‘ํ•ด์„œ ๋ชฐ๋ž๋˜ ๊ฒƒ์„ ์ด์ œ ์•Œ๊ณ  ์ ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์–ด ๋ฟŒ๋“ฏ!

 

Git cherry-pick

ํฌ๋กฑ์—๊ฒŒ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์€ ํ›„ ์ด๋ฒˆ์—” ์ €๋ฒˆ์ฒ˜๋Ÿผ merge ๋ฐฉ์‹์ด ์•„๋‹ˆ๋ผ cherry-pick์„ ์‚ฌ์šฉํ•ด ๋ณด์•˜๋‹ค. ์ด๊ฒƒ๋„ ์ •๋ง ์œ ์šฉํ–ˆ๋‹ค. Sourcetree, CLI ๋‘ ๊ฐ€์ง€ ๋ฒ„์ „์œผ๋กœ ์—ฐ์Šตํ•ด๋ดค๋‹ค.

 

๋ฐค์— ์•จ๋Ÿฐ์ด ์—ฐ ์†์บ  ๋ชจ๊ฐ์ฝ”์— ๋˜ ์ฐธ์—ฌํ–ˆ๋‹ค. ํ™•์‹คํžˆ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค๊ณผ ํ•จ๊ป˜ ๊ณต๋ถ€ํ•˜๋Š” ๋Š๋‚Œ์ด ๋“ค์–ด์„œ ์ง‘์ค‘๋„ ์ž˜ ๋˜๊ณ , ์ž๊ทน๋„ ๋œ๋‹ค.

 

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

CodeSquad Day 35 : Front-end Week 2  (0) 2022.02.26
CodeSquad Day 34 : Front-end Week 2  (0) 2022.02.25
CodeSquad Day 32 : Front-end Week 2  (0) 2022.02.23
CodeSquad Day 31 : Front-end Week 2  (0) 2022.02.22
CodeSquad Day 30 : Front-end Week 1  (0) 2022.02.19