The journey to becoming a developer

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

What I learned/CodeSquad Log

CodeSquad Day 76 : Team Project 2 - Day 6

Millie 2022. 4. 26. 00:36

 

CodeSquad๐Ÿ”นDay 76

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

 

Scrum

์˜ค๋Š˜๋ถ€ํ„ฐ๋Š” ๋ฐฑ์—”๋“œ์˜ ๋™๊ธฐ๊ฐ€ ๊ฐœ์ธ์‚ฌ์ •์œผ๋กœ ํ”„๋กœ์ ํŠธ์—์„œ ๋น ์ง€๊ฒŒ ๋˜์–ด์„œ ์ค€์ด ํ˜ผ์ž์„œ ๋ฐฑ์—”๋“œ๋ฅผ ๋งก๊ฒŒ ๋˜์—ˆ๋‹ค. ์ด์ œ๋Š” ์„ธ ๋ช…์ด์„œ ํ•œ ํŒ€์ด ๋˜์–ด์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•œ๋‹ค. ์˜ค์ „ 10์‹œ๋ถ€ํ„ฐ 30๋ถ„๊ฐ„ ํ–„๋””, ์ค€๊ณผ ํ•จ๊ป˜ ์ด์•ผ๊ธฐ๋„ ํ•˜๊ณ  ์˜ค๋Š˜์˜ ํ•  ์ผ์„ ๊ณต์œ ํ–ˆ๋‹ค. ๋งˆ๋ฌด๋ฆฌ ์Šคํฌ๋Ÿผ์€ ์ข€ ์ผ์ฐ ํ•˜๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ, 5์‹œ์ฏค๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ ์˜ค๋Š˜ ํ•œ ์ผ์ด ๋ฌด์—‡์ด์—ˆ๋Š”์ง€๋ฅผ ๊ณต์œ ํ–ˆ๋‹ค. 

 

Class by Crong: Code Review, React

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

 

#1. Live Code Review by Crong!

๊ทธ๋ฆฌ๊ณ  ์ฝ”๋“œ๋ฆฌ๋ทฐ๋ฅผ ๋žœ๋ค์œผ๋กœ ๋ฐ›๋Š”๋ฐ ์ด๋ฒˆ์— ํ–„๋””์™€ ํ•จ๊ป˜ ํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ํฌ๋กฑ์œผ๋กœ๋ถ€ํ„ฐ ๋ผ์ด๋ธŒ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค! 

์ „๋‹ด ๋ฆฌ๋ทฐ์–ด์ธ json์œผ๋กœ๋ถ€ํ„ฐ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›๊ธด ํ•˜์ง€๋งŒ ์ถ”๊ฐ€์ ์œผ๋กœ ํฌ๋กฑ์˜ ์„ธ์„ธํ•œ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ์—ˆ์–ด์„œ ๋งค์šฐ ์œ ์ตํ–ˆ๋‹ค. 

  • status code
  • import ๋ฐฉ์‹
  • async ํ•  ๋•Œ try~catch ํ™œ์šฉํ•  ๊ฒƒ ๋“ฑ๋“ฑ 

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

 

#2. React

  • Styled Components์˜ tagged template literal์„ ๊ณต๋ถ€ํ•˜๊ณ  ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•˜๊ณ  ์‚ฌ์šฉํ•˜์ž 
  • useState, useEffect, useRef์˜ ์›๋ฆฌ๋ฅผ ์•Œ๊ณ  ์“ฐ์ž 

 

Team Project

# 1๋ถ€ ์˜ค์ „ (10:30~12:30)

  • PR ๋ฆฌ๋ทฐ ๋ฐ›์€ ๊ฒƒ ์ ์šฉ
  • ํด๋” ๊ตฌ์กฐ ๊ฐœํŽธ๊ณผ jsconfig ์ ์šฉํ•ด์„œ ์ ˆ๋Œ€ ๊ฒฝ๋กœ๋กœ ์ ์šฉ

 

# ์ ์‹ฌ์‹œ๊ฐ„ ํ™œ์šฉ

์˜ค๋Š˜ ์•„์นจ์— ์ผ์–ด๋‚  ๋•Œ ๋งค์šฐ ํž˜๋“ค์—ˆ์–ด์„œ ํ˜น์‹œ๋‚˜ ์ ์‹ฌ ์‹œ๊ฐ„์— ์ปจ๋””์…˜์ด ์ข‹์ง€ ์•Š์„๊นŒ ์—ผ๋ คํ–ˆ์—ˆ๋Š”๋ฐ ์ƒ๊ฐ๋ณด๋‹ค ์ข‹์•„์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ข€ ๋” ๊ณ ๋ฏผํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. ์Œ์‹์˜ ์นด๋“œ์— ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ ธ์„ ๋•Œ Hover ํšจ๊ณผ๋ฅผ ์ฃผ๋Š” ๊ฒƒ์ด์—ˆ๋Š”๋ฐ ์ด๊ฒƒ์„ ๊ตฌํ˜„ํ•˜๋ฉด์„œ brightness๋ผ๋Š” css ํ•จ์ˆ˜๋„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ฐ€์ƒ ์š”์†Œ after๋ฅผ ํ™œ์šฉํ•ด์„œ ์ฃผ๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ ์ด๊ฒŒ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๋Œ€๋กœ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒŒ ์‰ฝ์ง€ ์•Š์•„์„œ ๊ทธ๋ƒฅ svg๋ฅผ ๊ฐ€์ ธ์™€์„œ ํ•ด๊ฒฐํ–ˆ๋‹ค. ๋‚ด๊ฐ€ ๊ตฌํ˜„ํ•œ ๊ฒƒ์— ๋Œ€ํ•ด์„œ ํ–„๋””์—๊ฒŒ ์„ค๋ช…์„ ํ–ˆ๊ณ  ์กฐ๊ธˆ ๋” ๋กœ์ง์„ ์ถ”๊ฐ€ํ•ด์„œ ๋ฐ˜์˜ํ–ˆ๋‹ค. Mouseover ์ด๋ฒคํŠธ๋กœ ํ–ˆ์„ ๋•Œ ๋ฒ„๊ทธ๊ฐ€ ๋‚˜์„œ Mouseenter๋ฅผ ์ ์šฉํ–ˆ๋”๋‹ˆ ์ž˜ ๋˜์—ˆ๋‹ค. 

 

# 2๋ถ€ ๋ฐค (6:00~9:30)

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

  • Hover ํšจ๊ณผ ์™„์„ฑ
  • Slider UI ์™„์„ฑ
  • Slider ๊ธฐ๋Šฅ ๊ตฌํ˜„ ์ง„ํ–‰ ์ค‘ 

 

์˜ค๋Š˜ Wiki์— ๋‚จ๊ธด ํšŒ๊ณ . ์ฆ๊ธฐ๋ฉด์„œ ๋ฐฐ์›Œ๋‚˜๊ฐ€์ž!!

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

CodeSquad Day 77 : Team Project 2 - Day 7  (0) 2022.04.28
CodeSquad Day 78 : Team Project 2 - Day 8  (0) 2022.04.28
CodeSquad Day 75 : Team Project 2 - Day 5  (0) 2022.04.22
CodeSquad Day 74 : Team Project 2 - Day 4  (2) 2022.04.21
CodeSquad Day 73 : Team Project 2  (1) 2022.04.20