CodeSquad Day 54 : Front-end Week 6
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๋ ์ ์ฉํ ์์ ์ด๋ค.