CodeSquad Day 60 : Front-end Week 7
CodeSquad๐นDay 60
Mission & Group Review
๋ฆฌํฉํ ๋ง์ ์์ฃผ๋ก ์งํํ๋ค. ๊ทธ๋ฃน ๋ฆฌ๋ทฐ์์๋ ๋ด ์ฝ๋๋ฅผ ๋ฐ๋ก ๋ฆฌ๋ทฐํ์ง ์์๋ค. ๊ทธ๋ฐ๋ฐ๋ 1์๊ฐ ๋ฐ ์ ๋๊ฐ ํ์ฉ ์ง๋ฌ๋ค.
์์ค๊ฐ ์ถ์ฒํด ์ค ํจํด ์ ๋ฆฌ ์ฌ์ดํธ์ธ๋ฐ ์ ๋ง ์ ๋ฆฌ๊ฐ ์ ๋์ด ์๋ค. ์์ด๋ก ๋์ด ์์ด์ ๊ฒธ์ฌ๊ฒธ์ฌ ๊ณต๋ถ๊ฐ ๋๊ฒ ๋ค.
Observer Pattern
Use observables to notify subscribers when an event occurs
www.patterns.dev
๋์ ์ด clientHeight, scrollHeight, offsetHeigt ๋ฑ์ ์์ฑ์ ์ด์ฉํด์ ์นดํ ๊ณ ๋ฆฌ ์๋ ์คํฌ๋กค์ ๊ตฌํํ๋๋ฐ, ๋ฏธ์ ์ธ์ ๊ฒ์ ์ค์ค๋ก ๊ณ ๋ฏผํด์ ๊ตฌํ๊น์ง ํด๋ธ ๊ฒ์ด ์ฐธ์ ํ๊ณ ๋๋จํ๋ค๊ณ ๋๊ผ๋ค.
6์์ ๋ค์ ์ฃผ ํ์ด ๋ฐํ๊ฐ ๋์ด์ ๋ค์ ์ฃผ ๋ฏธ์ ์ด ๋ญ๊น์ ๋ํ ์ด์ผ๊ธฐ๋ ๋ง์ด ๋๋ด๋ค. ๋ค์ ์ฃผ๋ถํฐ๋ ํ ํ๋ก์ ํธ๊ฐ ๋ณธ๊ฒฉ์ ์ผ๋ก ์์๋๊ธฐ๋ ํ๊ณ ์ ๋ด ๋ฆฌ๋ทฐ์ด๊น์ง ์๋ค.
JavaScript
๋ง์ฐ์ ๊ธฐ๋ ์ผ๋ก ์ธํ๋ฐ์์ React ๊ฐ์๋ฅผ ์ฒ ์์ ํ๋ ํ์ฌ๋ฅผ ํ๊ณ ์์๋ค. React๋ฅผ ์์ ๊ธฐ์ด๋ถํฐ ๊ฐ๋ฅด์ณ์ฃผ๋ ๊ฒ์ ๋ณด๊ณ ๋ฐ๋ก ๊ฐ์ ๊ตฌ๋งค๋ฅผ ํ๋ค. ์ฒ์๋ถํฐ React๋ก ๋ฐ๋ก ๋์ ํ๋ ๊ฒ ์๋๋ผ JS ๊ฐ๋ ๋ ์๋ ค์ฃผ๊ณ ์์๋ค. ๋ณต์ตํ๋ ๊ฒธ ๋ค์๊ณ , ๋ด๊ฐ ์ ๋ชฐ๋๋ ๊ฒ๋ ์ค๊ฐ์ ๋ผ์ด ์์๋ค. ์๋ฅผ ๋ค์ด findIndex ๋ฉ์๋๋ ์ ์ ์จ๋ด์ ๊ฐ๋ฌผ๊ฐ๋ฌผํ๋๋ฐ ์ฐ๋ ๋ฐฉ๋ฒ์ ๋ค์ ํ ๋ฒ ๋ณต์ตํ ์ ์๊ฒ ๋์๋ค.
๊ธ์์ผ์ ํผ๊ณคํด์ ๋ฏธ์ฒ ์์ฑํ์ง ๋ชปํด์ ํ ์์ผ์ ์ด ๊ธ์ ์ฐ๊ณ ์๋ค.
3์ 30์ผ์ ๋ดค๋ ์์ด ์ธํฐ๋ทฐ ๊ฒฐ๊ณผ๊ฐ ๋์๋ค. ๋ฌธ์ + ์ ํ๋ก ํฉ๊ฒฉ ์์์ ๋ฐ์๋ค. ์ฌ์ค ์ด ์ ๋ฌด๊ฐ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ง๋ฌด์ ์ฐ๊ด์๋ ๊ฒ์ ์๋๋ผ์ ๊ณ ๋ฏผ์ด ๋๊ธด ํ์ง๋ง, ์ฅ๊ธฐ์ ์ธ ์์ผ๋ก ๋ดค์ ๋๋ ๊ฐ๋ฐ์ ์ปค๋ฆฌ์ด์ ๋์์ด ๋๋ ๋ฉด์ด ์์ ๊ฒ์ด๋ผ ์๊ฐํด์ ์ผ๋จ ํ๋ ๊ฒ์ผ๋ก ๊ฒฐ์ ํ๋ค. ์ถํ ๋ฌด์จ ์ ๋ฌด์ธ์ง, ๋๋ ๋ฌด์์ ๋ฐฐ์ ๋์ง๋ ๋ธ๋ก๊ทธ์ ์จ๋ณผ๊น ์๊ฐ์ค์ด๋ค.
๋ค์ ์ฃผ๊น์ง ์ ์ถํด์ผ ํ๋ ์๋ฅ๋ค์ด ์์๊ณ , ๋ฏธ๋ฆฌ ์ค๋นํ๋๋ผ ๋ฎ ์๊ฐ์ ๋ฏธ์ ์ ์๊ฐ์ ๋ง์ด ํฌ์ํ์ง๋ ๋ชปํ๋ค. ์ด๋ ๊ฒ ์ฝ๋์ค์ฟผ๋ ์ ๊ท ์๊ฐ์ ๊ฐ์ธ์ ์ธ ์ ๋ฌด๋ฅผ ์ฒ๋ฆฌํ๋ ๊ฒ์ ์ด ๋ ์ด ๋ง์ง๋ง์ผ ๊ฒ์ด๋ค. ์ด๋ฒ ์ฃผ๊น์ง๋ ๊ฐ์ธ ํ๋ก์ ํธ์์ง๋ง ๋ค์ ์ฃผ๋ถํฐ๋ ํ ํ๋ก์ ํธ์ด๊ธฐ ๋๋ฌธ์ด๋ค. ๊ฐ๋ฅํ ํ ๊ฐ์ธ์ ์ธ ์ ๋ฌด๋ ๋ชจ๋ ์ฃผ๋ง์ ๋ชฐ์์ ์ฒ๋ฆฌํ๊ณ , ์ด์ ์ ๋ง ํ์ผ์๋ ์ฝ๋์ค์ฟผ๋์๋ง 100% ์ฌ์ธํด์ผ ํ๋ค.