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 |