The journey to becoming a developer

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

What I learned/CodeSquad Log

CodeSquad Day 47 : Front-end Week 5

Millie 2022. 3. 16. 00:51

CodeSquad๐Ÿ”นDay 47

Morning Algo & Algorithm

์˜ค๋Š˜์€ ์˜ค์ „ 9์‹œ์— ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์Šคํ„ฐ๋””๊ฐ€ ์žˆ์—ˆ๋˜ ๋‚ ์ด๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค 1๋ฌธ์ œ, LeetCode 1๋ฌธ์ œ์— ๋Œ€ํ•ด์„œ ํ† ๋ก ํ–ˆ๋Š”๋ฐ ์ด๋ฒˆ์—” ๋ฌธ์ œ ๋‚œ์ด๋„๊ฐ€ ๊ทธ๋ ‡๊ฒŒ ๋†’์ง€ ์•Š์•„์„œ์ธ์ง€ 30๋ถ„๋งŒ์— ๋์ด ๋‚ฌ๋‹ค. ๊ทธ ํ›„์— ์ด์•ผ๊ธฐ๋ฅผ ์ข€ ํ•˜๋‹ค๊ฐ€ ๋‚˜๋Š” ๋ฐ”๋žŒ์„ ์ข€ ์ฌ๋ ค๊ณ  ๋ฐ–์— ๋‚˜๊ฐ”๋‹ค ์™”๋‹ค.

๋ฐค์—๋Š” LeetCode์˜ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ํ•œ ๋ฌธ์ œ๋ฅผ ํ’€์–ด๋ณด์•˜๋‹ค. ์‹œ๊ฐ„ ๋ณต์žก๋„๊ฐ€ ๋„ˆ๋ฌด ์•ˆ์ข‹๊ฒŒ ํ’€์–ด์„œ ๋‹ค์‹œ ์ข€ ๋” ํšจ์œจ์ ์ธ ํ’€์ด๋กœ ํ’€์–ด์•ผ ํ•œ๋‹ค.

 

Mission: SASS!

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

mixin์ด ์ •๋ง ์œ ์šฉํ–ˆ๊ณ , SASS๋Š” ์ž˜๋งŒ ๋ฐฐ์šฐ๋ฉด ์ •๋ง ํ™œ์šฉ๋„๊ฐ€ ์—„์ฒญ๋‚  ๊ฒƒ ๊ฐ™๋‹ค.

๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ ์งœ๋Š” ๊ฒƒ, dart-sass ์„ค์น˜์™€ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์ถ•๋งŒ ์ข€ ๋” ์ต์ˆ™ํ•ด์ง€๋ฉด ์ข‹๊ฒ ๋‹ค. ๋‹ค์Œ ํ”„๋กœ์ ํŠธ ๋•Œ์—๋„ ์›ฌ๋งŒํ•˜๋ฉด SASS๋ฅผ ์จ์•ผ๊ฒ ๋‹ค.

 

SASS Architecture | 7-1 Pattern | Kiran Workspace

7-1 SASS Pattern means 7 Folders and 1 FIle. 7 Folders have their meaningful labels which include sass snippets or partials.

kiranworkspace.com

๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ์งค ๋•Œ ๋ง‰๋ง‰ํ–ˆ๋Š”๋ฐ ๋„์›€์„ ์ค€ ์‚ฌ์ดํŠธ์ด๋‹ค.

 

Group Review

5์‹œ 15๋ถ„๋ถ€ํ„ฐ ๋ฆฌ๋ทฐ๋ฅผ ์‹œ์ž‘ํ–ˆ๋‹ค. ์›๋ž˜ 5์‹œ๋ถ€ํ„ฐ์ด์ง€๋งŒ ์˜ค๋Š˜์€ ๋ฆฌ๋ทฐํ•  ๋‚ด์šฉ์ด ๋น„๊ต์  ์ ์„ ์ˆ˜ ์žˆ์–ด์„œ 15๋ถ„ ๋Šฆ๊ฒŒ ์‹œ์ž‘ํ–ˆ๋‹ค. ์ฒ˜์Œ์—๋Š” ๋ง๋กœ๋งŒ ๋ฌด์—‡์„ ํ–ˆ๊ณ  ๊ณต๋ถ€ํ–ˆ๋Š”์ง€ ์–˜๊ธฐํ•˜๋‹ค๊ฐ€, ํ™”๋ฉด ๊ณต์œ ๋ฅผ ํ–ˆ๋‹ค. ๊ฑฐ์˜ SASS๋ฅผ ํ•˜๊ณ  ์žˆ๋Š” ๋ถ„๋“ค์ด ๋งŽ์•˜์ง€๋งŒ JS ์„ค๊ณ„๋ฅผ ๋ฉ‹์ง€๊ฒŒ ํ•˜๊ณ  ๋ฒŒ์จ JS ์ฝ”๋“œ๋ฅผ ์งœ๊ณ  ์žˆ๋Š” ๋ฉค๋ฒ„, JSON ๋ฐ์ดํ„ฐ๋ฅผ ์งœ์„œ ๊ทธ๊ฑธ ๋ Œ๋”๋งํ•œ ๋ฉค๋ฒ„๋„ ์žˆ์—ˆ๋‹ค. ์—ญ์‹œ ๊ฐ™์€ ๋ฏธ์…˜์„ ํ•˜์ง€๋งŒ ์ž์‹ ์˜ ์†๋„์— ๋งž์ถฐ์„œ ๋‚˜๊ฐ€๋Š” ์ง„๋„๋Š” ์ฒœ์ฐจ๋งŒ๋ณ„์ด๋‹ค. ๋‚˜๋Š” ๋‚ด ์†๋„๋Œ€๋กœ, ๋‚จ๋“ค์ด ๋น ๋ฅด๋‹ค๊ณ  ํ•ด์„œ ์กฐ๊ธ‰ํ•ดํ•˜์ง€ ๋ง๊ณ  ํ•œ ๋ฐœ ํ•œ ๋ฐœ์”ฉ ๋‚˜์•„๊ฐ€๋ ค๊ณ  ํ•œ๋‹ค.

 


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

 

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

CodeSquad Day 49 : Front-end Week 5  (0) 2022.03.18
CodeSquad Day 48 : Front-end Week 5  (0) 2022.03.16
CodeSquad Day 46 : Front-end Week 5  (0) 2022.03.15
CodeSquad Day 44 : Pair Programming  (0) 2022.03.11
CodeSquad Day 42 : Pair Programming  (0) 2022.03.09