The journey to becoming a developer

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

What I learned/CodeSquad Log

CodeSquad Day 30 : Front-end Week 1

Millie 2022. 2. 19. 01:54

 

CodeSquad๐Ÿ”นDay 30

Mission

์•„์นจ ์Šคํฌ๋Ÿผ์„ ํ•˜๊ณ , 12์‹œ๊นŒ์ง€ PR์„ ๋ณด๋‚ด๊ธฐ ์œ„ํ•ด์„œ HTML & CSS ๋ฆฌํŒฉํ† ๋ง์„ ํ–ˆ๋‹ค. ์ž๊พธ ๋ญ”๊ฐ€ ๋ถ€์กฑํ•จ์ด ๋ณด์ด๋Š” ๊ฒƒ ๊ฐ™์•„์„œ ๊ณ ์น˜๋‹ค๊ฐ€ ๊ฒฐ๊ตญ ๋Šฆ๊ฒŒ PR์„ ๋ณด๋ƒˆ๋‹ค. ๊ฑฐ์˜ 1์‹œ์ฏค.

์˜คํ›„์—๋Š” pseudo element๋ฅผ ์ด์šฉํ•ด์„œ ๋‹ค์‹œ ๊ตฌํ˜„๋„ ํ•ด ๋ณด๊ณ , Readme ์ž‘์„ฑ๋„ ํ–ˆ๋‹ค.

๋ฆฌ๋ทฐ๋Š” ์•„์ง ๋ชป ๋ฐ›์•˜๋Š”๋ฐ ์•„๋ฌด๋ž˜๋„ ๋Šฆ๊ฒŒ ์ œ์ถœํ•ด์„œ ๊ทธ๋Ÿฐ ๊ฒƒ ๊ฐ™๋‹ค. ๋‚ด์ผ๋„ ๋ฆฌํŒฉํ† ๋ง๊ณผ ๋ณด์™„ํ•ด์•ผ ํ•˜๋Š” ๋ถ€๋ถ„์„ ๋” ๋ณด์™„ํ•ด์•ผ ํ•œ๋‹ค.

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

 

Group Review

๊ฐ์ž ๋งŒ๋“  ํŽ˜์ด์ง€์˜ ๋ฐ๋ชจ๋ฅผ ํ•˜๊ณ  ์–ด๋–ค ์‹์œผ๋กœ ๋ฏธ์…˜์„ ํ’€์–ด๋‚˜๊ฐ€๊ณ  ์žˆ๋Š”์ง€ ๋ฆฌ๋ทฐ๋ฅผ ํ–ˆ๋‹ค. ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜์ง€ ๋ชปํ•œ ๋ฐฉ์‹, ์ œ๊ฐ๊ธฐ ๋‹ค๋ฅธ ๋ฐฉ์‹์œผ๋กœ ๋ฌธ์ œ๋ฅผ ํ’€์–ด๋‚˜๊ฐ€๋Š” ์กฐ์›๋“ค์„ ๋ณด๋ฉด์„œ ํ•ญ์ƒ ์‹œ์•ผ๊ฐ€ ๋„“์–ด์ง„๋‹ค. ํ˜ผ์ž๋งŒ ํ‘ผ๋‹ค๋ฉด ๋ชป ๋Š๊ผˆ์„ ๊ฒƒ๋“ค์ด๋‹ค.

๋„๋ฆฌ๊ฐ€ history API๋ฅผ ํ•™์Šตํ•ด์„œ ๋ฏธ์…˜์— ์ ์šฉํ•œ ๊ฒƒ๋„ ์ธ์ƒ๊นŠ์—ˆ๋‹ค. ๋‚˜๋„ ํ•™์Šตํ•ด๋ด์•ผ๊ฒ ๋‹ค.

https://developer.mozilla.org/en-US/docs/Web/API/History_API

 

History API - Web APIs | MDN

The DOM Window object provides access to the browser's session history (not to be confused for WebExtensions history) through the history object. It exposes useful methods and properties that let you navigate back and forth through the user's history, and

developer.mozilla.org

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

 

Algorithm

1์ผ 1์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ์ง€์ผฐ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ ˆ๋ฒจ 2์˜ ๋ฌธ์ œ๋ฅผ ํ•˜๋‚˜ ํ’€์—ˆ๋‹ค. ์ฒ˜์Œ์—๋Š” ๋ฌธ์ œ๊ฐ€ ์ž˜ ์ดํ•ด๋„ ์•ˆ ๋˜๊ณ  ํ’€ ์ˆ˜ ์žˆ์„๊นŒ ํ–ˆ๋˜ ๋ฌธ์ œ๊ฐ€ ๊ณ„์† ๋…ธํŠธ์— ์จ ๊ฐ€๋ฉด์„œ ํ’€์–ด๋‚˜๊ฐ€๋‹ˆ ์ง„์งœ ํ’€์–ด์ ธ์„œ ์„ฑ์ทจ๊ฐ์ด ์žˆ์—ˆ๋‹ค. ๋‚ด์ผ์€ ์ฃผ๋ง์ด๋‹ˆ 2๊ฐœ๋ฅผ ๋„์ „ํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

 

DOM

์–ด์ œ์— ์ด์–ด์„œ ์˜ค๋Š˜๋„ DOM์„ ํ•™์Šตํ–ˆ๋‹ค. DOM Enlightenment ์ฑ…์˜ 1์žฅ๋„ ์ฝ๊ณ , ์œ ํŠœ๋ธŒ ์˜์ƒ๋„ ์ฐพ์•„๋ณด๋ฉด์„œ DOM๊ณผ์˜ ๊ฑฐ๋ฆฌ๋ฅผ ์ขํ˜€๋‚˜๊ฐ€๋ ค๊ณ  ๋…ธ๋ ฅ์ค‘์ด๋‹ค. ์ฃผ๋ง ๋™์•ˆ์—๋„ ๊ณ„์† DOM์„ ํ•™์Šตํ•  ์˜ˆ์ •์ด๋‹ค.

๋‚ด์ผ์€ ์–ด๋ ดํ’‹์ด ์•Œ๊ณ  ์žˆ๋Š” Capturing, Bubbling์ข€ ์ œ๋Œ€๋กœ ์ดํ•ดํ•ด ๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

 

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

CodeSquad Day 32 : Front-end Week 2  (0) 2022.02.23
CodeSquad Day 31 : Front-end Week 2  (0) 2022.02.22
CodeSquad Day 29 : Front-end Week 1  (0) 2022.02.18
CodeSquad Day 28 : Front-end Week 1  (0) 2022.02.17
CodeSquad Day 27 : Front-end Week 1  (0) 2022.02.16