The journey to becoming a developer

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

What I learned/CodeSquad Log

CodeSquad Day 61 : Team Project Week 1

Millie 2022. 4. 5. 13:39

 

CodeSquad๐Ÿ”นDay 61

Team Project

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

 

Class by Crong - Webpack, Babel

์ดˆ๋ฐ˜์—๋Š” ํŒ€ ํ”„๋กœ์ ํŠธ๋ฅผ ์–ด๋–ค ์‹์œผ๋กœ ์ง„ํ–‰ํ•ด์•ผ ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ์กฐ์–ธ๋“ค๊ณผ ์ด์•ผ๊ธฐ๋ฅผ ์œ„์ฃผ๋กœ ํ–ˆ๋‹ค. 4์›”์€ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์“ฐ๊ธฐ ๋•Œ๋ฌธ์— JS์— ์ต์ˆ™ํ•ด์งˆ ์ˆ˜ ์žˆ๋Š” ์‹œ๊ฐ„์ด ๋” ์ƒ๊ฒจ์„œ ์ข‹์•˜๋‹ค. React๋Š” 5์›”๋ถ€ํ„ฐ ์‹œ์ž‘ํ•œ๋‹ค.

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

 

Algorithms

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

 

[ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค Level 1] ์ตœ๋Œ€๊ณต์•ฝ์ˆ˜์™€ ์ตœ์†Œ๊ณต๋ฐฐ์ˆ˜ (์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ)

Description ๋‘ ์ˆ˜๋ฅผ ์ž…๋ ฅ๋ฐ›์•„ ๋‘ ์ˆ˜์˜ ์ตœ๋Œ€๊ณต์•ฝ์ˆ˜์™€ ์ตœ์†Œ๊ณต๋ฐฐ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜, solution์„ ์™„์„ฑํ•ด ๋ณด์„ธ์š”. ๋ฐฐ์—ด์˜ ๋งจ ์•ž์— ์ตœ๋Œ€๊ณต์•ฝ์ˆ˜, ๊ทธ๋‹ค์Œ ์ตœ์†Œ๊ณต๋ฐฐ์ˆ˜๋ฅผ ๋„ฃ์–ด ๋ฐ˜ํ™˜ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

jaypedia.tistory.com

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค์˜ ๋ ˆ๋ฒจ 2 ๋ฌธ์ œ๋ฅผ ํ’€๋ฉด์„œ ์œ ํด๋ฆฌ๋“œ ํ˜ธ์ œ๋ฒ•์„ ๋ณต์Šตํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

LeetCode ๋ฌธ์ œ๋Š” Binary Search Tree๋ฅผ ์ˆœํšŒํ•˜๋Š” ๊ฒƒ์„ ๋ณต์Šตํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

 

Code Review with Jinnie, Alan

๋ฐค 12์‹œ์— ๊ฒŒ๋”ํƒ€์šด์—์„œ ๋งŒ๋‚˜, ์—ด์ •์ ์œผ๋กœ ๋ฆฌ๋ทฐ๋ฅผ ํ•œ ๋•์— 1์‹œ๊ฐ„ 30๋ถ„ ํ›„์— ๋์ด ๋‚ฌ๋‹ค. ์›๋ž˜ ์ €๋ฒˆ ์ฃผ์— ํ–ˆ์–ด์•ผ ํ•˜๋Š” ์ฝ”๋“œ ๋ฆฌ๋ทฐ์ด์ง€๋งŒ ์˜คํžˆ๋ ค ์•ฝ๊ฐ„ ๋Šฆ๊ฒŒ ํ•˜๋‹ˆ ๋ณต์Šต๋„ ๋˜์–ด์„œ ์ข‹์•˜๋‹ค. ์•จ๋Ÿฐ์ด ์ ์šฉํ•œ MVVM ํŒจํ„ด์„ ๊ทธ๋ƒฅ ๋ดค์„ ๋•Œ๋Š” ์ •๋ง ์ดํ•ดํ•˜๊ธฐ ์–ด๋ ค์› ๋Š”๋ฐ ์ž์„ธํ•œ ์„ค๋ช…์„ ๋“ฃ๊ณ , ๋ชจ๋ฅด๋Š” ๊ฒƒ์€ ๊ทธ๋•Œ๊ทธ๋•Œ ์งˆ๋ฌธํ•ด์„œ ํ•ด์†Œ๋ฅผ ํ•˜๋‹ˆ ์–ด๋Š์ •๋„ ์™€๋‹ฟ๊ฒŒ ๋˜์—ˆ๋‹ค. ํŠนํžˆ ์˜์กด์„ฑ์„ ์ค„์˜€๋‹ค๋Š” ์ ๊ณผ ๊ทธ ๊ณผ์ •์—์„œ ์•จ๋Ÿฐ์˜ ์˜๊ฒฌ์„ ๋“ค์„ ์ˆ˜ ์žˆ๋˜ ๊ฒƒ์ด ์œ ์ตํ–ˆ๋‹ค.

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

 


 

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

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

CodeSquad Day 63 : Team Project Week 1  (0) 2022.04.07
CodeSquad Day 62 : Team Project Week 1  (0) 2022.04.06
CodeSquad Day 60 : Front-end Week 7  (0) 2022.04.02
CodeSquad Day 59 : Front-end Week 7  (0) 2022.04.01
CodeSquad Day 58 : Front-end Week 7  (0) 2022.03.31