The journey to becoming a developer

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

What I learned/CodeSquad Log

CodeSquad Day 64 : Team Project Week 1

Millie 2022. 4. 8. 01:28

 

CodeSquad๐Ÿ”นDay 64

Morning Algo & Algorithm

๋ชฉ์š”์ผ 9์‹œ, ์–ด๊น€์—†์ด ๊ฒŒ๋”ํƒ€์šด์— ๋ชจ์—ฌ ์Šคํ„ฐ๋””๋ฅผ ์ง„ํ–‰ํ–ˆ๋‹ค. ์•„ํ”ˆ ํ–„๋””๋ฅผ ์ œ์™ธํ•˜๊ณ  ๋„๋‹ˆ, ํ˜ธ์ด์™€ ๋ชจ์˜€๋‹ค.

์˜ค๋Š˜์€ Greedy Algorithm์„ ์ ์šฉํ•ด์„œ ํ’€์–ด์•ผ ํ•˜๋Š” 2๋ฌธ์ œ์— ๋Œ€ํ•ด์„œ ์ด์•ผ๊ธฐ๋ฅผ ํ–ˆ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ ˆ๋ฒจ 2์˜ ํฐ ์ˆ˜ ๋งŒ๋“ค๊ธฐ, ์กฐ์ด์Šคํ‹ฑ ๋ฌธ์ œ์ด๋‹ค. ํฐ ์ˆ˜ ๋งŒ๋“ค๊ธฐ ๋ฌธ์ œ๋Š” ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ํ‘ผ ํ’€์ด๋ฅผ ์ฐธ๊ณ ํ•ด์„œ ํ•ด๊ฒฐํ–ˆ๋˜ ๊ณผ์ •์„ ์„ค๋ช…ํ–ˆ๊ณ , ์กฐ์ด์Šคํ‹ฑ ๋ฌธ์ œ๋Š” ๊ฒฐ๊ตญ ์†์„ ๋Œ€์ง€ ๋ชปํ•ด์„œ ํ˜ธ์ด์˜ ์„ค๋ช…์„ ์—ด์‹ฌํžˆ ๋“ค์—ˆ๋‹ค. ์‹œ๊ฐ„์„ ๋‚ด์„œ ์Šค์Šค๋กœ ํ’€์–ด๋ด์•ผ ํ•œ๋‹ค.

 

 

์ฝ”๋”ฉํ…Œ์ŠคํŠธ ์—ฐ์Šต - ๊ด„ํ˜ธ ๋ณ€ํ™˜

์นด์นด์˜ค์— ์‹ ์ž… ๊ฐœ๋ฐœ์ž๋กœ ์ž…์‚ฌํ•œ "์ฝ˜"์€ ์„ ๋ฐฐ ๊ฐœ๋ฐœ์ž๋กœ๋ถ€ํ„ฐ ๊ฐœ๋ฐœ์—ญ๋Ÿ‰ ๊ฐ•ํ™”๋ฅผ ์œ„ํ•ด ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ž‘์„ฑํ•œ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ๋ถ„์„ํ•˜์—ฌ ๋ฌธ์ œ์ ์„ ๋ฐœ๊ฒฌํ•˜๊ณ  ์ˆ˜์ •ํ•˜๋ผ๋Š” ์—…๋ฌด ๊ณผ์ œ๋ฅผ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ์†Œ์Šค๋ฅผ

programmers.co.kr

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

 

Team Project

ํ˜ธ์ด์™€ ์˜ค์ „ 10์‹œ 15๋ถ„์— ์คŒ์—์„œ ๋งŒ๋‚˜ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ–ˆ๋‹ค. ๋์€ ๊ฑฐ์˜ ์˜คํ›„ 7์‹œ์— ๋‚ฌ๋‹ค. ์ ์‹ฌ์‹œ๊ฐ„์„ ์ œ์™ธํ•˜๊ณ  ๊ฑฐ์˜ 7์‹œ๊ฐ„์„ ์ด์•ผ๊ธฐํ•œ ์…ˆ์ด๋‹ค. ์ด๋ฒˆ์—๋„ ๋ถ„์—…๋ณด๋‹ค๋Š” ํŽ˜์–ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ฒ˜๋Ÿผ ์ง„ํ–‰์„ ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

์˜ค์ „์—๋Š” ๋‚ด๊ฐ€ ํ‚ค๋ณด๋“œ๋ฅผ ์žก์•˜๋‹ค. webpack.config.js ํŒŒ์ผ์„ ์ˆ˜์ •ํ–ˆ๋Š”๋ฐ sass-loader ๋ชจ๋“ˆ์„ ์„ค์น˜ํ•ด์„œ module์˜ rules๋ฅผ ๋ณ€๊ฒฝํ•ด์ฃผ์—ˆ๋‹ค. package.json์˜ script ๋ถ€๋ถ„๋„ npm run build๋งŒ ์ž…๋ ฅํ•˜๋ฉด ์›นํŒฉ์œผ๋กœ ๋นŒ๋“œ๊ฐ€ ๋  ์ˆ˜ ์žˆ๋„๋ก watch ์˜ต์…˜์„ ์ฃผ์—ˆ๋‹ค.

 

sass-loader | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

 

์ ์‹ฌ์‹œ๊ฐ„์—๋Š” ๋น„๋™๊ธฐ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™€ todo list๋ฅผ ๊ทธ๋ ค์ค„ ์ˆ˜ ์žˆ๋„๋ก ๊ธฐ๋ฐ˜ ์ž‘์—…์„ ์ข€ ํ•ด ๋ณด์•˜๋‹ค. json-server๋ฅผ ์„ค์น˜ํ•ด ๊ฐ„๋‹จํ•˜๊ฒŒ server๋ฅผ ๋งŒ๋“ค๊ณ  json ํ˜•์‹์œผ๋กœ ๋œ mock data๋ฅผ ๋งŒ๋“ค์–ด์ฃผ์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ตฌ์ฒญ์— ๊ฐˆ ์ผ์ด ์žˆ์–ด์„œ ๋น ๋ฅด๊ฒŒ ๋‹ค๋…€์™”๋‹ค. json-server๋ฅผ ์˜ค๋žœ๋งŒ์— ์จ์„œ ๋ฐ˜๊ฐ€์šด ๋Š๋‚Œ์ด ๋“ค์—ˆ๋‹ค.

 

3-1. json-server ์ดํ•ดํ•˜๊ธฐ · GitBook

3-1 json-server ์‚ฌ์šฉํ•˜๊ธฐ json server ๋Š” ์•„์ฃผ ์งง์€ ์‹œ๊ฐ„์— REST API ๋ฅผ ๊ตฌ์ถ•ํ•ด์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ, REST API ์„œ๋ฒ„์˜ ๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋Šฅ์„ ๋Œ€๋ถ€๋ถ„ ๊ฐ–์ถ”๊ณ  ์žˆ๋Š”๋ฐ์š”, ํ”„๋กœ๋•์…˜ ์ „์šฉ์€ ์•„๋‹™๋‹ˆ๋‹ค. ํ”„๋กœ

redux-advanced.vlpt.us

์œ„ ๊ธ€์—์„œ ๋งค์šฐ ์นœ์ ˆํ•˜๊ณ  ์ž์„ธํ•˜๊ฒŒ ์„ค๋ช…ํ•˜๊ณ  ์žˆ๋‹ค. redux์˜ ํ•œ ๋ถ€๋ถ„์ธ๋ฐ ๋‚˜์ค‘์— redux๋„ ๊ณต๋ถ€ํ•ด์•ผ์ง€.

 

์˜คํ›„ ์‹œ๊ฐ„๋ถ€ํ„ฐ๋Š” ํ˜ธ์ด๊ฐ€ ํ‚ค๋ณด๋“œ๋ฅผ ์žก๊ณ  JS ๋กœ์ง์„ ์งœ ๋‚˜๊ฐ€๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ์ง„์ž…์ ์ด ๋˜๋Š” index.js ํŒŒ์ผ์„ ์ข€ ๊ฐ€๋ณ๊ฒŒ ๋งŒ๋“ค๊ณ , ์ปฌ๋Ÿผ์— + ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ์นด๋“œ๊ฐ€ ์ถ”๊ฐ€๋˜๊ฒŒ ํ•˜๋Š” ์ด๋ฒคํŠธ ๋กœ์ง์„ ์ž‘์„ฑํ–ˆ๋‹ค. ๋˜ ์นด๋“œ ์•ˆ์— ๋‚ด์šฉ์„ ์ž…๋ ฅํ•  ๋•Œ ์นด๋“œ๊ฐ€ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋Š˜์–ด๋‚  ์ˆ˜ ์žˆ๋„๋ก ๋ฆฌ์‚ฌ์ด์ง•์„ ํ•  ์ˆ˜ ์žˆ๋Š” ๋กœ์ง๋„ ๊ตฌ๊ธ€๋ง์œผ๋กœ ์•Œ์•„๋‚ด์„œ ์ถ”๊ฐ€ํ–ˆ๋‹ค.

 

textarea ์ž๋™ ๋†’์ด ์กฐ์ ˆ

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

velog.io

 

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

 

Discussion

์ •๊ทœ์‹œ๊ฐ„ ์ดํ›„, ์ง€๋ฏธ๊ฐ€ ์Šฌ๋ž™ DM์œผ๋กœ ์งˆ๋ฌธ์„ ์š”์ฒญํ•ด์™€์„œ ๊ฒŒ๋”์— ์ ‘์†ํ–ˆ๋‹ค. ๋งˆ์นจ ์šด๋™์ด ๋๋‚˜๊ณ  ์‰ฌ๊ณ  ์žˆ๋˜ ์ฐธ์ด์—ˆ๊ณ  ๋ฐ”๋กœ ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๋‚ด๊ฐ€ ์˜ˆ์ „์— ์ฟ ํŒก ํด๋ก  ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ–ˆ์„ ๋•Œ, state๋ฅผ ์ž˜ ํ™œ์šฉํ–ˆ๋˜ ๊ฒƒ์„ ๋ณด๊ณ  ์งˆ๋ฌธ์„ ํ•œ ๊ฒƒ์ด์—ˆ๋‹ค. ๋„๋น„ & ์ง€๋ฏธ ํŒ€์€ MVC ํŒจํ„ด์„ ํ™œ์šฉํ•˜์—ฌ ๊ตฌํ˜„ ์ค‘์ด์—ˆ๊ณ  ๊ฑฐ๊ธฐ์„œ state๋ฅผ ๊ตฌํ˜„ํ•ด Todo List์—์„œ ์ƒˆ๋กœ์šด ์นด๋“œ๋ฅผ ์ƒ์„ฑํ•  ๋•Œ, ์ƒ์„ฑ ์—ฌ๋ถ€๋ฅผ true/false๋กœ state๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์—ˆ๋‹ค. ๋‚ด๊ฐ€ ๊ณผ๊ฑฐ์— ๋ถˆ๋ฆฌ์–ธ์„ ํ™œ์šฉํ•œ ๋ฐฉ์‹๊ณผ ์ด๋ ‡๊ฒŒ ์‹œ๋„ํ•ด ๋ณธ ๊ฒƒ์ด ์ข‹๋‹ค๊ณ  ์ „ํ•ด๋“œ๋ ธ๊ณ , ๋‘ ๋ถ„๋„ ๋‚˜์˜ ์˜๊ฒฌ์„ ๋“ค์„ ์ˆ˜ ์žˆ์–ด์„œ ๋„์›€์ด ๋˜์—ˆ๋‹ค๊ณ  ํ–ˆ๋‹ค. ์‹ค์งˆ์ ์œผ๋กœ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋„์›€์ด ์•„๋‹ˆ๋”๋ผ๋„ ์ด๋ ‡๊ฒŒ ๋‚˜์˜ ๊ณผ๊ฑฐ ๊ฒฝํ—˜์œผ๋กœ ์ถ•์ ๋œ ์˜๊ฒฌ์„ ๋‚˜๋ˆ”์œผ๋กœ์จ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ๊ฒฝํ—˜์„ ํ•ด์„œ ์ข‹์•˜๋‹ค.  

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

 


์ƒˆ๋ฒฝ 1์‹œ 21๋ถ„์˜ ๊ฒŒ๋”ํƒ€์šด

์˜ค๋Š˜์€ ๋Šฆ๊ฒŒ๊นŒ์ง€ ๊ฒŒ๋”ํƒ€์šด์— ์‚ฌ๋žŒ๋“ค์ด 17๋ช…์ด๋‚˜ ๋‚จ์•„์žˆ์—ˆ๋‹ค. ์ƒˆ๋ฒฝ์ด์ง€๋งŒ ์—ด๋ค ํ† ๋ก ์„ ํ•˜๊ณ  ์žˆ๋Š” ํŒ€๋„ ๋ณด์˜€๋‹ค. ๊ทธ๋“ค์˜ ์—ด์ •์— ๋‚˜๋„ ์˜ํ–ฅ์„ ๋ฐ›๊ณ  ์žˆ๋‹ค!

 

 

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

CodeSquad Day 66 : Team Project Week 2  (0) 2022.04.12
CodeSquad Day 65 : Team Project Week 1  (0) 2022.04.09
CodeSquad Day 63 : Team Project Week 1  (0) 2022.04.07
CodeSquad Day 62 : Team Project Week 1  (0) 2022.04.06
CodeSquad Day 61 : Team Project Week 1  (0) 2022.04.05