The journey to becoming a developer

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

What I learned/CodeSquad Log

CodeSquad Day 60 : Front-end Week 7

Millie 2022. 4. 2. 20:58

 

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% ์˜ฌ์ธํ•ด์•ผ ํ•œ๋‹ค.

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

CodeSquad Day 62 : Team Project Week 1  (0) 2022.04.06
CodeSquad Day 61 : Team Project Week 1  (0) 2022.04.05
CodeSquad Day 59 : Front-end Week 7  (0) 2022.04.01
CodeSquad Day 58 : Front-end Week 7  (0) 2022.03.31
CodeSquad Day 57 : Front-end Week 7  (0) 2022.03.30