The journey to becoming a developer

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

What I learned/CodeSquad Log

CodeSquad Day 29 : Front-end Week 1

Millie 2022. 2. 18. 01:39

 

CodeSquad๐Ÿ”นDay 29

Morning Scrum

๋งค์ผ ํ•˜๋Š” ์•„์นจ ์Šคํฌ๋Ÿผ์ด ์ ์  ๋„ˆ๋ฌด ํ˜•์‹์ ์œผ๋กœ ์งค๋ง‰ํ•˜๊ฒŒ ๋˜์–ด๊ฐ€๋Š” ๊ฒƒ ๊ฐ™์•„์„œ, ๋‚ด๊ฐ€ ์ œ์•ˆ์„ ํ–ˆ๋‹ค. ์ž์‹ ์ด ํ•  ์ผ์„ ์ข€ ๋” ๊ตฌ์ฒด์ ์œผ๋กœ ๋ช…์‹œํ•ด ์ฃผ๊ณ , ๋˜ ๋งํ•˜๊ณ  ๋‚˜์„œ ๋ฐ”๋กœ ๋‹ค์Œ ํ„ด์œผ๋กœ ๋„˜๊ธฐ๊ธฐ๋ณด๋‹ค๋Š” ๊ธ์ •์ ์ธ ์ฝ”๋ฉ˜ํŠธ๋ฅผ ๋ช‡ ๋งˆ๋”” ์ฃผ๊ณ ๋ฐ›๋Š” ์‹์œผ๋กœ. ๊ทธ๋žฌ๋”๋‹ˆ ์•ฝ๊ฐ„ ์‚ญ๋ง‰ํ–ˆ๋˜ ์•„์นจ ์Šคํฌ๋Ÿผ์ด ์ข€ ๋” ํ™œ๊ธฐ๋ฅผ ๋ ๋Š” ๋Š๋‚Œ์ด ๋“ค์—ˆ๋‹ค. ๊ทธ๋ƒฅ ๋ญ ํ–ˆ๋‹ค, ๋ผ๊ณ  ๋๋‚˜๊ณ  ๋งˆ๋Š” ๊ฒƒ๋ณด๋‹ค๋Š” ๋Œ€ํ™”๋ฅผ ํ•˜๋Š” ์‹์œผ๋กœ ์ง„ํ–‰๋˜๊ณ  ๋Œ€ํ™”ํ•˜๋ฉด์„œ ์–ป๋Š” ๊ฒƒ๋„ ์žˆ์—ˆ๋‹ค. ์ œ์•ˆํ•˜๊ธธ ์ž˜ํ–ˆ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค!

 

Class by Crong

ํฌ๋กฑ์˜ ๋‘ ๋ฒˆ์งธ ํ”„๋ก ํŠธ์—”๋“œ ์ˆ˜์—…. ์ด๋ฒˆ์—๋Š” CSS, DOM์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ์ค‘์ ์œผ๋กœ ์ง„ํ–‰๋˜์—ˆ๋‹ค. ์ด๋ฒˆ์—๋„ ๋‚ด๊ฐ€ ๋ชจ๋ฅด๋Š” ๊ฒƒ๋“ค๋„ ๋งŽ์ด ๋‚˜์™€์„œ ๊ณต๋ถ€ํ•  ๊ฒŒ ์ฐธ ๋งŽ๋‹ค๊ณ  ๋Š๊ผˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ผ๋ถ€ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ๋ฏธ์…˜์„ ๋ฆฌ๋ทฐํ•ด์ฃผ๊ธฐ๋„ ํ–ˆ๋Š”๋ฐ ์ž˜ํ•˜์‹  ๋ถ„๋“ค์ด ๋งŽ์•„์„œ ์ž๊ทน๋„ ๋งŽ์ด ๋˜๊ณ , ๋งŽ์ด ๋ฐฐ์›Œ๊ฐ”๋‹ค.

 

Things to know

- Pseudo element (CSS)

- Z-index, stacking context

- user agent stylesheet

- e.target vs e.currentTarget

- event bubbling

- closest

- reset vs revert

- ์ •์  ์›น๊ณผ ๋™์  ์›น

 

Mission 2

์˜คํ›„ 5์‹œ ๊ทธ๋ฃน ๋ฆฌ๋ทฐ ์ „๊นŒ์ง€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ tab์„ ๋ˆŒ๋ €์„ ๋•Œ ํ™”๋ฉด ์ „ํ™˜์ด ๋˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด ๋ณด์•˜๋‹ค.

 

Group Review

๋‹ค๋ฅธ ๋ถ„๋“ค์ด ํ•˜์‹  ๊ฒƒ์„ ๋ณด๋ฉด์„œ ์‹œ์•ผ๊ฐ€ ๋„“์–ด์ง€๋Š” ๋Š๋‚Œ์ด ๋“ค์—ˆ๋‹ค. ํ•ญ์ƒ ๋‚ด๊ฐ€ ๋ฏธ์ฒ˜ ์ƒ๊ฐํ•˜์ง€๋„ ๋ชปํ•œ ๊ฒƒ์„ ์ƒ๊ฐํ•ด์„œ ๊ตฌํ˜„ํ•˜๋Š” ๋ถ„๋“ค์ด ์žˆ๋‹ค.

๊ทธ๋ฃน ๋ฆฌ๋ทฐ๊ฐ€ ๋๋‚˜๊ณ  ๊ฒŒ๋”ํƒ€์šด์— ์žˆ์—ˆ๋Š”๋ฐ, ๋„ํ† ๋ฆฌ๊ฐ€ ๋ฏธ์…˜์„ ๊ฐˆ์•„ ์—Ž์–ด์•ผ๋˜๋‚˜ ๊ณ ๋ฏผ์ด๋ผ๊ณ  ํ•ด์„œ ์ฆ‰ํฅ์ ์œผ๋กœ ๋ฆฌ๋ทฐ๋ฅผ ํ•ด ๋ณด์•˜๋‹ค. ๋„ํ† ๋ฆฌ๋Š” ์ •๋ง ๊ผผ๊ผผํ•˜๊ฒŒ CSS๋ฅผ ์ž‘์„ฑํ–ˆ๋‹ค! ๋””ํ…Œ์ผ๊นŒ์ง€ ๋‹ค ์‹ ๊ฒฝ ์“ฐ๊ณ , ๋ ˆ์ด์•„์›ƒ์„ ์ž˜ ์ง  ๊ฒƒ์„ ๋ณด๋ฉด์„œ ๋ฐ˜์„ฑ์ด ๋˜์—ˆ๋‹ค. ๋‚ด ๊ฒƒ๋„ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ฆฌ๋ทฐ๋ฅผ ํ–ˆ๋‹ค. ์ด์•ผ๊ธฐ๋ฅผ ํ•˜๋‹ค๊ฐ€ ์ •์  ์›น๊ณผ ๋™์  ์›น ์ด์•ผ๊ธฐ๊ฐ€ ๋‚˜์™€์„œ ์ด๊ฒƒ์— ๋Œ€ํ•ด์„œ๋„ ์ข€ ์ œ๋Œ€๋กœ ์•Œ์•„์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

 

Algorithm

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

LeetCode ๋ฌธ์ œ๋„ ํ•˜๋‚˜ ๋„์ „ํ–ˆ๋Š”๋ฐ ๋ชป ํ’€์—ˆ๋‹ค. ๋‚ด์ผ ๋‹ค์‹œ ๋„์ „ํ•˜๋ ค๊ณ  ํ•œ๋‹ค.

 

DOM, Critical Rendering Path

์˜ค๋Š˜๋„ ์–ด์ œ์ฒ˜๋Ÿผ ๋ฏธ์…˜ ๊ตฌํ˜„๋ณด๋‹ค๋Š” ํ•™์Šต์— ์ค‘์ ์„ ๋‘์—ˆ๋‹ค. ์–ด์ œ ๋ธŒ๋ผ์šฐ์ € ์ž‘๋™ ์›๋ฆฌ๋ฅผ ๊ณต๋ถ€ํ–ˆ์—ˆ๋Š”๋ฐ ๊ทธ ๋ถ€๋ถ„์„ ์งง๊ฒŒ ํ•œ ๋ฒˆ ํ›‘๊ณ , DOM์— ๋Œ€ํ•ด์„œ ์ข€ ๋” ์ œ๋Œ€๋กœ ์•Œ๊ณ  ์‹ถ์–ด์„œ ๊ณต๋ถ€ํ•ด ๋ณด์•˜๋‹ค.

์˜์–ด๋กœ ๋œ ๋ฌธ์„œ๋ฅผ ์ž˜ ์ฝ๊ณ  ์‹ถ๋‹ค๋Š” ์—ด๋ง์ด ์žˆ์–ด์„œ ์ด๋ฒˆ์—” ์›์„œ๋ฅผ ์ฝ์–ด๋ณด์•˜๋‹ค. DOM Enlightenment ์ฑ…์„ ์•„์ฃผ ์กฐ๊ธˆ ์ฝ์—ˆ๋Š”๋ฐ ์–ด๋ ค์›Œ์„œ MDN์œผ๋กœ ์˜ฎ๊ฒจ๊ฐ”๋‹ค.

Critical rendering path - Web Performance | MDN (mozilla.org)

 

Critical rendering path - Web Performance | MDN

The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance.The critical rendering path includes the Docum

developer.mozilla.org

์ตœ์ ํ™”๊นŒ์ง€๋Š” ์•„์ง ์ž˜ ์™€๋‹ฟ์ง€ ์•Š๋Š”๋‹ค. ์ผ๋‹จ ์ „๋ฐ˜์ ์ธ ํ๋ฆ„์€ ํŒŒ์•…ํ–ˆ๋‹ค.

์•„์ง ์˜์–ด ๋ฌธ์„œ ์ฝ๋Š” ์†๋„๊ฐ€ ํ•œ๊ตญ์–ด๋กœ ๋œ ๊ฒƒ์„ ์ฝ๋Š” ๊ฒƒ๋ณด๋‹ค ํ™•์—ฐํžˆ ๋Š๋ฆฐ๋ฐ ๊ฒฐ๊ตญ ๋งŽ์ด ์ฝ๋Š” ์ˆ˜๋ฐ–์— ์—†๋Š” ๊ฒƒ ๊ฐ™๋‹ค.

https://en.wikipedia.org/wiki/Document_Object_Model

 

Document Object Model - Wikipedia

From Wikipedia, the free encyclopedia Jump to navigation Jump to search Convention for representing and interacting with objects in HTML, XHTML and XML documents The Document Object Model (DOM) is a cross-platform and language-independent interface that tr

en.wikipedia.org

์œ„ํ‚คํ”ผ๋””์•„๋„ ์„ค๋ช…์ด ์ฐธ ์ž˜ ๋˜์–ด ์žˆ๋‹ค. ์•ž๋ถ€๋ถ„๋งŒ ์กฐ๊ธˆ ์ฐธ๊ณ ํ–ˆ๋‹ค.

์˜์–ด ๋ฌธ์„œ๋„ ํ•œ๊ธ€๋กœ ๋œ ๊ฒƒ์ฒ˜๋Ÿผ ์ˆ ์ˆ  ์ฝ๋Š” ๋‚ ์ด ์˜ค๊ธธ ๊ธฐ๋Œ€ํ•˜๋ฉด์„œ, ์–ด๋ ต๋‹ค๊ณ  ํ•œ๊ตญ์–ด๋งŒ ์ฐพ์ง€ ๋ง๊ณ  ๊พธ์ค€ํžˆ ์ฝ์–ด์•ผ๊ฒ ๋‹ค. ๋‹ค๋งŒ ์‹œ๊ฐ„์ด ์ข€ ๊ฑธ๋ ค์„œ ์•ž์œผ๋กœ ๋ฏธ์…˜์ด ์–ด๋ ค์›Œ์ง€๋ฉด ํ•™์Šต์— ํˆฌ์žํ•  ์ˆ˜ ์žˆ๋Š” ์‹œ๊ฐ„์ด ์ค„์–ด๋“คํ…๋ฐ ๊ทธ ๋ถ€๋ถ„์ด ์ข€ ๊ฑฑ์ •์€ ๋œ๋‹ค.

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

CodeSquad Day 31 : Front-end Week 2  (0) 2022.02.22
CodeSquad Day 30 : Front-end Week 1  (0) 2022.02.19
CodeSquad Day 28 : Front-end Week 1  (0) 2022.02.17
CodeSquad Day 27 : Front-end Week 1  (0) 2022.02.16
CodeSquad Day 26 : Front-end Week 1  (0) 2022.02.15