[Project] Pre-onboarding: Sir.Loin- ํšŒ๊ณ ๋ก

Cottonmycottonยท2022๋…„ 4์›” 19์ผ
0

Project

๋ชฉ๋ก ๋ณด๊ธฐ
6/10

๐Ÿ“ธ Sir.Loin ํ”„๋กœ์ ํŠธ

์ƒํ’ˆ๊ณผ ๊ด€๋ จ๋œ ๊ธฐ๋ณธ ์ •๋ณด, ๋“ฑ๋ก, ์ฃผ๋ฌธ, ๋ฐฐ์†ก, ํ”„๋กœ๋ชจ์…˜ ๋“ฑ ์—ฌ๋Ÿฌ ์˜ต์…˜์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ์‚ฌ์ดํŠธ๋ฅผ ๊ตฌํ˜„ํ•œ ํ”„๋กœ์ ํŠธ์ž…๋‹ˆ๋‹ค.

๐Ÿ“† ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„

2022.01.27 ~ 2022.01.29

๐Ÿ”Ž ํŒ€ ๊ตฌ์„ฑ

  • Front-end: 3๋ช…

๐Ÿ’ก ๊ธฐ์ˆ  ์Šคํ…

Front-end

  • React.js
  • Styled-components

Common

  • Git
  • Slack

๐Ÿ“ธ ๊ณผ์ œ ๊ตฌํ˜„ ๋ชฉ๋ก

๋…ธ์ถœ ๋ฐ ํŒ๋งค๊ธฐ๊ฐ„ ์„ค์ •

  • Material-UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ™œ์šฉํ•˜์—ฌ ๋‹ฌ๋ ฅ ๋ฐ ์‹œ๊ฐ„ ์ง€์ • ์ปดํฌ๋„ŒํŠธ.
  • ์„ค์ •ํ•œ ๊ธฐ๊ฐ„์ด ๋งŒ๋ฃŒ๋˜์—ˆ์„ ๊ฒฝ์šฐ, ์ž๋™์œผ๋กœ state ๋ณ€๊ฒฝ๋˜๋Š” ๊ธฐ๋Šฅ.
  • ์„ค์ •ํ•œ ๊ธฐ๊ฐ„๋‚ด ๋‚ ์งœ ์„ ํƒ ๋น„ํ™œ์„ฑํ™” ๊ธฐ๋Šฅ.
  • ํ•œ ๋ฒ„ํŠผ์ด ํ™œ์„ฑํ™”๋˜๋ฉด ๋‹ค๋ฅธ ๋ฒ„ํŠผ์ด ๋น„ํ™œ์„ฑํ™”๋˜๋Š” ๊ธฐ๋Šฅ.

์ƒํ’ˆ ๊ธฐ๋ณธ ์ •๋ณด(๋ณธ์ธ ๋‹ด๋‹น)

  • ์ฒดํฌ๋ฐ•์Šค ์„ ํƒ ๋ฐ ํ•ด์ œ๋ฅผ ํ†ตํ•ด ์ƒํ’ˆ์— ์นดํ…Œ๊ณ ๋ฆฌ ์ง€์ • ๋ฐ ํ•ด์ œ ๊ธฐ๋Šฅ.
  • ์ธ๋„ค์ผ ์ด๋ฏธ์ง€ ํ•˜๋‚˜์˜ ์ด๋ฏธ์ง€๋งŒ ์—…๋กœ๋“œ ๊ฐ€๋Šฅ.
  • ์ƒํ’ˆ๋ช… ์„ ํƒ์‹œ ํ•ด๋‹น ์ƒํ’ˆ์ฝ”๋“œ ํ™”๋ฉด ์ถœ๋ ฅ.

์ƒํ’ˆ ์˜ต์…˜

  • ์ถ”๊ฐ€ ๋ฐ ์‚ญ์ œ ๋ฒ„ํŠผ ๋ˆŒ๋ €์„ ๋•Œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ถ”๊ฐ€๋กœ ์ƒ์„ฑ ๋ฐ ์‚ญ์ œ๋˜๋Š” ๊ธฐ๋Šฅ.

์ƒํ’ˆ ์†Œ๊ฐœ์ด๋ฏธ์ง€, ๊ตฌ๋งค์ž ์ถ”์ฒœ ์ด๋ฏธ์ง€

  • ์‚ฌ์šฉ์ž์—๊ฒŒ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ ์˜์—ญ ์ œ๊ณต ๋ฐ ์—…๋กœ๋“œ๋œ ์ด๋ฏธ์ง€ ํŒŒ์ผ๋ช… ๋…ธ์ถœ ๊ธฐ๋Šฅ.
  • ์—…๋กœ๋“œ๋œ ์ด๋ฏธ์ง€ ์‚ญ์ œ ๋ฒ„ํŠผ์„ ํ†ตํ•ด ์—…๋กœ๋“œ ์ƒํƒœ์—์„œ ์‚ญ์ œ.

์ƒํ’ˆ ๋ฐฐ์†ก ์„ค์ •

  • ์ปค์Šคํ…€ ํ† ๊ธ€ ๋ฒ„ํŠผ

์ƒํ’ˆ ํ˜œํƒ ํ—ˆ์šฉ ์„ค์ •, ๊ธฐํƒ€ ์„ค์ •

  • ์ปค์Šคํ…€ ํ† ๊ธ€ ๋ฒ„ํŠผ

๐Ÿคท๐Ÿปโ€โ™€๏ธ ๊ฐœ์ธ์ ์ธ ์†Œ๊ฐ

โœจ ์ข‹์•˜๋˜ ์ 

  • ์ฒดํฌ๋ฐ•์Šค๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ธฐ๋Šฅ(checked, value ๋“ฑ)์„ ์ ์ ˆํ•œ ๋กœ์ง์œผ๋กœ ์งœ์„œ ์ž˜ ํ™œ์šฉํ–ˆ๋‹ค๋Š” ์ ๊ณผ ํ•„ํ„ฐํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ์—…๋ฐ์ดํŠธ ํ•ด์คฌ๋‹ค๋Š” ์ ์ด ๊ธฐ์–ต์— ๋‚จ๋Š”๋‹ค. ์ฒดํฌ ํ™œ์„ฑํ™”๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  useState๋ฅผ ์ด์šฉํ•ด ์ƒํƒœ๊ฐ’์„ ๊ด€๋ฆฌํ–ˆ๋Š”๋ฐ ์ด ๊ณผ์ •์ด ์ฒ˜์Œ๋ถ€ํ„ฐ ์ˆœ์กฐ๋กญ์ง€๋Š” ์•Š์•˜๋‹ค. ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ๋ฐค์ƒˆ ๋ฌธ์„œ๋ฅผ ์ฐพ์•„๋ณด๊ณ  ์˜ˆ์ œ๋ฅผ ๋ณด๋ฉฐ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช์—ˆ๋Š”๋ฐ ์ด ๊ณผ์ •์„ ํ†ตํ•ด์„œ ๋‚ด๊ฐ€ ์ง  ๋กœ์ง๊ณผ ์นœํ•ด์งˆ ์ˆ˜ ์žˆ์—ˆ๊ณ  ํ•„ํ„ฐํ•จ์ˆ˜๋Š” ์ด ํ”„๋กœ์ ํŠธ ์ด์ „์—” ๋ณดํ†ต ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ๋ฅผ ํ’€๋•Œ๋งŒ ์‚ฌ์šฉํ•˜๊ณค ํ–ˆ๋Š”๋ฐ ์ด๋ฒˆ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ํ†ตํ•ด ํ•„ํ„ฐํ•จ์ˆ˜์˜ ์†์„ฑ์— ๋Œ€ํ•ด ์ž˜ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.
  • ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋˜ ์ค‘ ๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ถ€๋ถ„์—์„œ ๋ง‰ํ˜€ ์ƒ๊ฐํ–ˆ๋˜ ๊ฒƒ ๋ณด๋‹ค ์‹œ๊ฐ„์ด ์ง€์ฒด๋˜์—ˆ๋˜ ๋•Œ๊ฐ€ ์žˆ์—ˆ๋‹ค. ์ด๋•Œ ์กฐ์›๋“ค๊ณผ ๊ฒŒ๋”ํƒ€์šด์—์„œ ๋ชจ์—ฌ ํ™”๋ฉด ๊ณต์œ ๋ฅผ ํ†ตํ•ด ๋ผ์ด๋ธŒ์ฝ”๋”ฉ์„ ์ง„ํ–‰ํ–ˆ์—ˆ๋Š”๋ฐ ์ธ๋ฑ์Šค๋ฅผ ํ†ตํ•ด ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ๊ฐ€์ง€๊ณ  ์˜ค๋Š” ๋ฐ์„œ ๋ฐœ์ƒํ•œ ๋ฌธ์ œ์—ฌ์„œ ๊ฒฐ๋ก ์ ์œผ๋กœ๋Š” ๋น ๋ฅด๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์กฐ์›๋“ค๊ณผ ๋ฌธ์ œ๋ฅผ ๋‚˜๋ˆ„๊ณ  ํ•จ๊ป˜ ์ ‘๊ทผํ•˜์—ฌ ํ•ด๊ฒฐํ•œ ๊ณผ์ •์—์„œ ๋ฌธ์ œ์— ๋Œ€ํ•œ ๊ฐ์ž์˜ ์ ‘๊ทผ๋ฒ•๊ณผ ๋ฌธ์ œ๋ฅผ ๋ฐ”๋ผ๋ณด๋Š” ์‹œ๊ฐ์„ ์•Œ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์–ด ๋œป๊นŠ์€ ์‹œ๊ฐ„์œผ๋กœ ๋‚จ์•˜๋‹ค.

โ˜„๏ธ ์•„์‰ฌ์› ๋˜ ์ 

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

๐ŸŽ‰ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ์น˜๋ฉฐ

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

0๊ฐœ์˜ ๋Œ“๊ธ€