The journey to becoming a developer

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

What I learned/CodeSquad Log

CodeSquad Day 54 : Front-end Week 6

Millie 2022. 3. 25. 00:46

 

CodeSquad๐Ÿ”นDay 54

Morning Algo & Algorithm

์˜ค๋Š˜์€ ๋ชฉ์š”์ผ, ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์Šคํ„ฐ๋””๊ฐ€ ์žˆ๋Š” ๋‚ ์ด์–ด์„œ ์–ด๊น€์—†์ด ์˜ค์ „ 9์‹œ์— ๊ฒŒ๋”ํƒ€์šด์—์„œ ๋ชจ์˜€๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค์˜ '์œ„์žฅ' ๋ฌธ์ œ๋ฅผ ์„ค๋ช…ํ•  ๋•Œ ๋ง‰ํ˜€์„œ, ์•ž์œผ๋กœ๋Š” ํ’€๋ฉด์„œ ๋กœ์ง์„ ์ž˜ ์ •๋ฆฌํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค. ๋ถ„๋ช… ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ์ธ๋ฐ๋„ ๋‹จ ํ•˜๋ฃจ ์ดํ‹€ ์ •๋„๋งŒ ์ง€๋‚˜๋„ "์™œ ์ด๋ ‡๊ฒŒ ์งฐ์ง€?"ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ข…์ข… ์ƒ๊ธฐ๊ณค ํ•œ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์˜ค๋Š˜ ์•„๋ž˜ LeetCode ๋ฌธ์ œ๋ฅผ ํ•˜๋‚˜ ํ•ด๊ฒฐํ–ˆ๋‹ค.

 

Missing Number - LeetCode

Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

leetcode.com

 

Class by Crong

์˜ค๋Š˜์€ ์˜ค์ „ 10์‹œ ๋ฐ˜๋ถ€ํ„ฐ 12์‹œ ๋ฐ˜๊นŒ์ง€, ํฌ๋กฑ์˜ ์ˆ˜์—…์ด ์žˆ๋Š” ๋‚ ์ด์—ˆ๋‹ค. ์•ž๋ถ€๋ถ„์€ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ์ง„ํ–‰ํ–ˆ๊ณ  ๋’ท๋ถ€๋ถ„์€ MVC ํŒจํ„ด์— ๊ด€๋ จํ•ด์„œ ์„ค๋ช…์„ ๋“ค์—ˆ๋‹ค. ์‚ฌ์‹ค ์ด๋ฒˆ ๋ฏธ์…˜์˜ ์ค‘์š”ํ•œ ํ•ต์‹ฌ์ด์ง€๋งŒ ๋‚˜๋Š” ํŒจํ„ด ๊ณต๋ถ€๋ณด๋‹ค ๊ธฐ๋Šฅ ๊ตฌํ˜„๋งŒ ํ•˜๊ณ  ์žˆ์—ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์ˆ˜์—…์„ ๋“ฃ๊ณ  ๋‚˜๋‹ˆ ํŒจํ„ด ๊ณต๋ถ€๋„ ๊ผญ ํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค. ๋” ์ด์ƒ ๋ฏธ๋ฃฐ ์ˆœ ์—†์—ˆ๋‹ค. MVC ํŒจํ„ด์€ ์•ž์œผ๋กœ React๋ฅผ ๋ฐฐ์šธ ๋•Œ์—๋„ ์•„์ฃผ ์ข‹์€ ๊ธฐ๋ฐ˜์ด ๋˜๋Š” ํŒจํ„ด์ด๊ธฐ๋„ ํ•˜๋‹ค.

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

 

Mission

PR์— ๋Œ€ํ•œ ๋ฆฌ๋ทฐ๋ฅผ ํฌ๋กฑ์œผ๋กœ๋ถ€ํ„ฐ ๋ฐ›์•˜๊ณ  ๋ฆฌํŒฉํ† ๋ง์„ ์ง„ํ–‰ํ–ˆ๋‹ค.

๊ฒŒ๋”ํƒ€์šด์—์„œ ์ด๋ˆ„๊ฐ€ setState ๊ด€๋ จํ•ด์„œ ์งˆ๋ฌธ์„ ํ•ด ์™”๊ณ  ๋‚˜๋ฆ„๋Œ€๋กœ์˜ ๋‹ต๋ณ€์„ ํ•ด์คฌ๋‹ค. ๋‚˜๋„ ์ด ๋•Œ๋ฅผ ํ‹ˆํƒ€์„œ ๊ทธ๋™์•ˆ ๊ถ๊ธˆํ–ˆ๋˜ ๊ฒƒ์— ๋Œ€ํ•ด ์งˆ๋ฌธ์„ ํ–ˆ๋‹ค. ํ•จ์ˆ˜๋งˆ๋‹ค querySelector๋ฅผ ์จ์„œ ์š”์†Œ๋ฅผ ์ฐพ๋Š” ๊ฒŒ ๋ฐ˜๋ณต๋˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ์ด๊ฒƒ์„ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ• ์ง€์— ๋Œ€ํ•œ ๊ณ ๋ฏผ์ด์—ˆ๋‹ค. ์ด๋ˆ„๊ฐ€ ์ž˜ ๋‹ต๋ณ€์„ ํ•ด์ค˜์„œ ๊ทธ๊ฒƒ๋„ ๋ฆฌํŒฉํ† ๋ง์— ๋ฐ˜์˜์„ ํ–ˆ๋‹ค.

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

 

 

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

CodeSquad Day 56 : Front-end Week 7  (0) 2022.03.29
CodeSquad Day 55 : Front-end Week 6  (0) 2022.03.26
CodeSquad Day 53 : Front-end Week 6  (0) 2022.03.24
CodeSquad Day 52 : Front-end Week 6  (0) 2022.03.23
CodeSquad Day 51 : Front-end Week 6  (0) 2022.03.22