The journey to becoming a developer

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

What I learned/CodeSquad Log

CodeSquad Day 46 : Front-end Week 5

Millie 2022. 3. 15. 00:45

 

CodeSquad๐Ÿ”นDay 46

Group Scrum

์›”์š”์ผ์ด๊ณ  ์ƒˆ๋กœ์šด ์กฐ๋ฅผ ๋งŒ๋‚ฌ๋‹ค. ์ด์•ผ๊ธฐ๋„ ๋‚˜๋ˆ„๊ณ , ์Šคํฌ๋Ÿผ ๊ทœ์น™์„ ์งœ๊ณ , ๋˜ ์ด๋ฒˆ์—๋Š” ํŠน์ดํ•˜๊ฒŒ 1๋Œ€ 1 ํŽ˜์–ด๋ฅผ ๋งบ์–ด์„œ ๋ฆฌ๋ทฐํ•˜๋Š” ๊ฒŒ ์žˆ์—ˆ๋‹ค. ์‚ฌ๋‹ค๋ฆฌ ํƒ€๊ธฐ๋ฅผ ๋Œ๋ ค์„œ ์ง์„ ์ •ํ–ˆ๋‹ค.

 

Class by Crong

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

์ˆ˜์—…์ด ๋๋‚˜์ž๋งˆ์ž ๋„ˆ๋ฌด ํ”ผ๊ณคํ•ด์„œ ๋‚ฎ์ž ์„ ์žค๋Š”๋ฐ, ๊ทธ๋ฃน ๋งˆ๋ฌด๋ฆฌ ์Šคํฌ๋Ÿผ ํ•˜๊ธฐ ์ง์ „์— ์ผ์–ด๋‚˜์„œ ์•„์Šฌ์•„์Šฌํ–ˆ๋‹ค. ๋ณดํ†ต ๋‚ฎ์ž ์€ ์•ˆ ์ž๋Š”๋ฐ ์˜ค๋Š˜์€ ์ข€ ํ”ผ๊ณคํ•จ์ด ์‹ฌํ–ˆ๋‹ค.

 

Mission: SCSS!

์ฟ ํŒก ์‚ฌ์ดํŠธ๋ฅผ ํด๋ก ํ•˜๋Š” ๊ฒƒ์ด์—ˆ๋Š”๋ฐ, HTML ๋งˆํฌ์—…์€ ์ตœ๋Œ€ํ•œ ๊ฐ„๋‹จํžˆ ๋นจ๋ฆฌ ๋๋‚ด๊ณ  SCSS๋กœ ๋„˜์–ด๊ฐ”๋‹ค.

ํ™˜๊ฒฝ ์„ค์ •ํ•˜๊ณ , ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ ์žก๋Š” ๋ฐ ์‹œ๊ฐ„์ด ๊ฝค ๊ฑธ๋ ธ๋‹ค. ๋ณธ๊ฒฉ์ ์œผ๋กœ ์ฝ”๋“œ๋Š” ์ž‘์„ฑํ•˜์ง€๋„ ์•Š์•˜๋Š”๋ฐ ๋ฒŒ์จ 12์‹œ๊ฐ€ ๋„˜์—ˆ๋‹ค. ์ด๋ฒˆ์—” npm์ด ์•„๋‹Œ yarn์„ ํ™œ์šฉํ•ด ๋ณด์•˜๊ณ , dart-sass๋„ ์„ค์น˜ํ•˜๊ณ , package.json์˜ scripts ๋ถ€๋ถ„๋„ ์ž‘์„ฑํ•ด์คฌ๋‹ค.

ํ™˜๊ฒฝ ์„ค์ •ํ•˜๋ฉด์„œ ์งˆ๋ฌธ์ด ๋ช‡ ๊ฐœ ์ƒ๊ฒจ์„œ ๋‚ด์ผ ํ•ด๊ฒฐํ•ด๋ณด๊ณ , ๋˜ ์ฝ”๋“œ๋„ ๋ณธ๊ฒฉ์ ์œผ๋กœ ์ž‘์„ฑํ•ด ๋ณด๋ ค๊ณ  ํ•œ๋‹ค. SCSS๋Š” ์ œ๋Œ€๋กœ ์จ ๋ณธ ์ ์€ ์—†๊ณ , ์–ด๋–ป๋‹ค๋Š” ๋ง๋งŒ ๋งŽ์ด ๋“ค์–ด๋ด์„œ ์“ฐ๋ฉด์„œ ์ œ๋Œ€๋กœ ์ตํ˜€ ๋ด์•ผ ๋  ๊ฒƒ ๊ฐ™๋‹ค. SCSS๊ฐ€ ํŽธํ•ด์ง€๋ฉด ์•ž์œผ๋กœ CSS๋Š” ๋ชป ์“ฐ๊ฒŒ ๋  ์ˆ˜๋„?

๋‚ด์ผ์€ SCSS๋„ ์–ด๋Š ์ •๋„ ๋งˆ๋ฌด๋ฆฌํ•˜๊ณ , ๋” ์ค‘์š”ํ•œ JS ์„ค๊ณ„์™€ ๋กœ์ง ๊ตฌํ˜„๊นŒ์ง€ ํ•˜๊ณ  ์‹ถ๋‹ค. ๋‚ด์ผ์€ ๋˜ ๊ทธ๋ฃน ๋ฆฌ๋ทฐ๊ฐ€ ์žˆ๋‹ค ๋ณด๋‹ˆ ์ข€ ๋” ์ œ๋Œ€๋กœ ํ•ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ ๋‹ค.

 

Algorithm

๋‚ด์ผ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์Šคํ„ฐ๋””๋ฅผ ์œ„ํ•ด์„œ ์ค€๋น„๋ฅผ ํ–ˆ๋‹ค. ์ €๋…์— ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฌธ์ œ๋ฅผ 1๊ฐœ ํ’€์—ˆ๋‹ค.

 

์ฝ”๋”ฉํ…Œ์ŠคํŠธ ์—ฐ์Šต - ์‹ ๊ณ  ๊ฒฐ๊ณผ ๋ฐ›๊ธฐ

๋ฌธ์ œ ์„ค๋ช… ์‹ ์ž…์‚ฌ์› ๋ฌด์ง€๋Š” ๊ฒŒ์‹œํŒ ๋ถˆ๋Ÿ‰ ์ด์šฉ์ž๋ฅผ ์‹ ๊ณ ํ•˜๊ณ  ์ฒ˜๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ๋ฉ”์ผ๋กœ ๋ฐœ์†กํ•˜๋Š” ์‹œ์Šคํ…œ์„ ๊ฐœ๋ฐœํ•˜๋ ค ํ•ฉ๋‹ˆ๋‹ค. ๋ฌด์ง€๊ฐ€ ๊ฐœ๋ฐœํ•˜๋ ค๋Š” ์‹œ์Šคํ…œ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ฐ ์œ ์ €๋Š” ํ•œ ๋ฒˆ์— ํ•œ ๋ช…์˜

programmers.co.kr

 

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

CodeSquad Day 48 : Front-end Week 5  (0) 2022.03.16
CodeSquad Day 47 : Front-end Week 5  (0) 2022.03.16
CodeSquad Day 44 : Pair Programming  (0) 2022.03.11
CodeSquad Day 42 : Pair Programming  (0) 2022.03.09
CodeSquad Day 40 : Front-end Week 3  (0) 2022.03.05