The journey to becoming a developer

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

What I learned/CodeSquad Log

CodeSquad Day 51 : Front-end Week 6

Millie 2022. 3. 22. 11:02

 

CodeSquad๐Ÿ”นDay 51

Pair Review

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

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

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

 

Mission

์›”์š”์ผ 10์‹œ, ๋ฏธ์…˜์ด ๊ณต๊ฐœ๋˜์—ˆ๋‹ค. ์ €๋ฒˆ ์ฃผ ๋ฏธ์…˜์— ์ด์–ด์„œ ์ฟ ํŒก ์‚ฌ์ดํŠธ์— ๊ธฐ๋Šฅ์„ ์ข€ ๋” ์ถ”๊ฐ€ํ•ด ๋ณด๋Š” ๊ฒƒ์ด๋‹ค. ์ฃผ์š” ์ฃผ์ œ๋Š” Debounce & Throttling, MVC pattern์ด๋‹ค. ์• ๋งคํ•˜๊ฒŒ ์•Œ๊ณ  ์žˆ๋Š” Debounce, Throttling์„ ์ •๋ง ์ž˜ ํ•™์Šตํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ๋Š๊ผˆ๋‹ค. ์ด๊ฒƒ์ด ๋ฌด์—‡์ธ์ง€ ์งˆ๋ฌธ์ด ๋“ค์–ด์˜ค๋ฉด ์ด๋ก ์ ์ธ ์„ค๋ช…๊ณผ ํ•จ๊ป˜ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ฝ”๋“œ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์„ ์ •๋„๋กœ.

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

 

Class by Crong

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

MVC ํŒจํ„ด์— ๋Œ€ํ•ด ์„ค๋ช… ์ค‘, Separation of concerns(๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ)๋ผ๋Š” ๋ง์ด ๋‚˜์™”๋Š”๋ฐ ์•„์ง ์ „๋ถ€ ์ดํ•ดํ•˜์ง„ ๋ชปํ–ˆ์ง€๋งŒ ํ”„๋กœ๊ทธ๋žจ์„ ํ•˜๋‚˜๋กœ ํ‰์ณ์„œ ๋งŒ๋“ค์ง€ ๋ง๊ณ  ์ž‘์€ ์กฐ๊ฐ์œผ๋กœ ๋ถ„ํ• ํ•ด์„œ ๋‚˜๋ˆ ์„œ ๊ฐœ๋ณ„์ ์œผ๋กœ ๋งŒ๋“ค๋ผ๋Š” ๋Š๋‚Œ์ด๋ผ๋Š” ๊ฒƒ์œผ๋กœ๋งŒ ์ดํ•ดํ•ด๋ณด์•˜๋‹ค.

 

 

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

CodeSquad Day 53 : Front-end Week 6  (0) 2022.03.24
CodeSquad Day 52 : Front-end Week 6  (0) 2022.03.23
CodeSquad Day 49 : Front-end Week 5  (0) 2022.03.18
CodeSquad Day 48 : Front-end Week 5  (0) 2022.03.16
CodeSquad Day 47 : Front-end Week 5  (0) 2022.03.16