๐Ÿ“ฎ SENDY | Main Project ํšŒ๊ณ 

Haizelยท2023๋…„ 4์›” 17์ผ
1

๐Ÿ“ฎ SENDY | Main Project

๋ชฉ๋ก ๋ณด๊ธฐ
1/6
post-thumbnail
post-custom-banner

๐Ÿ’ญ ๋ฉ”์ธ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ์— ์•ž์„œ


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


๐Ÿ’Œ ์•„์ด๋””์–ด ๋นŒ๋”ฉ


ํ”„๋กœ์ ํŠธ ๋ชฉํ‘œ
์•„์ด๋””์–ด๋ฅผ ์ƒ๊ฐํ•˜๊ธฐ ์•ž์„œ ๋ฉ”์ธ ํ”„๋กœ์ ํŠธ ๋ชฉํ‘œ๋ฅผ ๋จผ์ € ์„ค์ •ํ–ˆ๋‹ค.

  1. ๋งค๋ ฅ์ ์ด์—ฌ์•ผ ํ•œ๋‹ค โ†’ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ๋ดค์„ ๋•Œ ๋ป”ํ•˜์ง€ ์•Š์•„์•ผ ํ•จ(์ด๋ฏธ ์ฑ„์šฉ์‹œ์žฅ์— ๋งŽ์€ ํ”Œ์ ์ด ์กด์žฌํ•จ)
  2. ํ•˜๋ฉด์„œ ์žฌ๋ฐŒ์–ด์•ผ ํ•œ๋‹ค. โ†’ ๊ทธ๋ž˜์•ผ ํ”Œ์ ์— ๋” ์• ์ •์ด ์ƒ๊ธด๋‹ค!
  3. ๋‚ด ์—ญ๋Ÿ‰์„ ์ตœ๋Œ€ํ•œ์œผ๋กœ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค.

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

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

๋‹คํ–‰ํžˆ ๋‹ค๋ฅธ ํŒ€์›๋“ค๋„ ์•„์ด๋””์–ด์— ๋Œ€ํ•ด ์ข‹๊ฒŒ ์ƒ๊ฐํ•ด์ฃผ์–ด ํŒ€์›๋“ค๊ณผ ๊ฐ™์ด ์„ธ๋ถ€์ ์ธ ์•„์ด๋””์–ด๋ฅผ ์Œ“์•„ ์ตœ์ข… ๋ฉ”์ธ ํ”„๋กœ์ ํŠธ, ์˜จ๋ผ์ธ ํŽธ์ง€ ์„œ๋น„์Šค | ๐Ÿ“ฎ Sendy(์ƒŒ๋””) ๋ฅผ ์™„์„ฑํ•˜์˜€๋‹ค.


๐Ÿ“ฎ ์˜จ๋ผ์ธ ํŽธ์ง€ ์„œ๋น„์Šค | Sendy


ํ”„๋กœ์ ํŠธ ์†Œ๊ฐœ

โฐ ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„ : 2023.03.03 ~ 2023.04.03

๐Ÿ”ง ์‚ฌ์šฉ ์Šคํƒ : JavaScript, React, React-router-Dom, React-Hook-form, Zustand, Axios, Styled components, React-cookie, yup ๋“ฑ

๐Ÿ”— ๋ฐฐํฌ ๋งํฌ : https://www.sendy.site

๐Ÿ‘ค ์œ ์ €ํ”Œ๋กœ์šฐ : https://www.figma.com/community/file/1213394864275727705
์œ ์ €ํ”Œ๋กœ์šฐ

๐Ÿ“„ ์„œ๋น„์Šค ๋ฉ”๋‰ด์–ผ : ์„œ๋น„์Šค ๋ฉ”๋‰ด์–ผ

โœ๏ธ ์„œ๋น„์Šค ๊ฐ„๋žต ์†Œ๊ฐœ :

ํ”„๋กœ์ ํŠธ ์†Œ๊ฐœ์„œ๋น„์Šค ์ฃผ์š” ๊ธฐ๋Šฅ

โ›„๏ธ ๋‚ด๊ฐ€ ๋‹ด๋‹นํ•œ ํŽ˜์ด์ง€ ๋ฐ ๊ธฐ๋Šฅ


1๏ธโƒฃ ํšŒ์›์ธ์ฆ

ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€๋กœ๊ทธ์ธ ํŽ˜์ด์ง€
1. ์œ ์ €์ด๋ฆ„ ์ค‘๋ณต๊ฒ€์‚ฌ
2. ์ด๋ฉ”์ผ ์ค‘๋ณต๊ฒ€์‚ฌ
3. ์ค‘๋ณต์ฒดํฌ๋œ ์ด๋ฉ”์ผ์— ๋Œ€ํ•ด ์ธ์ฆ๋ฉ”์ผ ๋ฐœ์†ก
4. ์ธ์ฆ์ฝ”๋“œ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ
5. ๋น„๋ฐ€๋ฒˆํ˜ธ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ๋ฐ ์ผ์น˜ ํ™•์ธ
6. Oauth๋ฅผ ํ†ตํ•ด ํšŒ์›๊ฐ€์ž…
1. ์ด๋ฉ”์ผ, ๋น„๋ฐ€๋ฒˆํ˜ธ ๊ฒ€์‚ฌ ๋ฐ ๋กœ๊ทธ์ธ
2. Oauth๋ฅผ ํ†ตํ•ด ๋กœ๊ทธ์ธ

2๏ธโƒฃ ํŽธ์ง€ ์กฐํšŒ

ํŽธ์ง€ ๋น„๋ฐ€๋ฒˆํ˜ธ ๊ฒ€์ฆ๋ณด๊ด€ ์‹œ ๋กœ๊ทธ์ธ ๋ชจ๋‹ฌ
1. ๋น„๋ฐ€๋ฒˆํ˜ธ๊ฐ€ ๊ฑธ๋ฆฐ ํŽธ์ง€์— ๋Œ€ํ•ด ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ
2. ๊ฒ€์ฆ ์‹œ ํŽธ์ง€ ๋‚ด์šฉ์€ ๋ชจ์ž์ดํฌ ์ฒ˜๋ฆฌ
1. ํŽธ์ง€ ์กฐํšŒ ํŽ˜์ด์ง€์—์„œ ๋ณด๊ด€ ์‹œ
๋น„๋กœ๊ทธ์ธ ์ƒํƒœ๋ผ๋ฉด ๋กœ๊ทธ์ธ ๋ชจ๋‹ฌ์„ ํ†ตํ•ด ๋กœ๊ทธ์ธ
ํŽธ์ง€ ์กฐํšŒํŽ˜์ด์ง€ (์•ž๋ฉด)ํŽธ์ง€ ์กฐํšŒํŽ˜์ด์ง€ (๋’ท๋ฉด)
1. ์šฐํŽธํ•จ ๋˜๋Š” URL์ฃผ์†Œ๋ฅผ ํ†ตํ•ด ํŽธ์ง€ ์กฐํšŒ
2. ์Œ์„ฑ TTS ์„œ๋น„์Šค๋กœ ํ…์ŠคํŠธ ์Œ์„ฑ ๋ณ€ํ™˜
3. ์ด๋ฏธ์ง€๋กœ ์ €์žฅ ๊ธฐ๋Šฅ
4. ๋‚ด ์šฐํŽธํ•จ์— ํŽธ์ง€ ๋ณด๊ด€ํ•˜๊ธฐ
5. ํŽธ์ง€ ์‚ญ์ œ ๊ฐ€๋Šฅ(์‚ญ์ œ ์‹œ ํœด์ง€ํ†ต์œผ๋กœ ์ด๋™)
6. ํŽธ์ง€ ์šฐ์ธก ์ƒ๋‹จ ํด๋ฆญ ์‹œ ๋’ท๋ฉด์œผ๋กœ ํ”Œ๋ฆฝ
1. ์ฒจ๋ถ€๋œ ์‚ฌ์ง„ ํ™•์ธ ๊ฐ€๋Šฅ
2. ํŽธ์ง€ ์ขŒ์ธก ์ƒ๋‹จ ํด๋ฆญ ์‹œ ์•ž๋ฉด์œผ๋กœ ํ”Œ๋ฆฝ

๐Ÿ”ฎ ๋‚ด๊ฐ€ ๊ตฌํ˜„ํ•œ ๊ธฐ๋Šฅ ์ •๋ฆฌ

(์ถ”ํ›„ ์ฐจ๋ก€๋Œ€๋กœ ํฌ์ŠคํŒ… ์˜ˆ์ •)

1. React-hook-form & Yup

3. Oauth ๊ตฌํ˜„

4. ์Œ์„ฑ TTS ๊ธฐ๋Šฅ

5. ์ด๋ฏธ์ง€ ์ €์žฅ ๊ธฐ๋Šฅ (dom-to-image & FileSaver)


๐Ÿ’ซ KPT (Keep โ€“ Problem โ€“ Try) ํšŒ๊ณ 


Keep

์ข‹์•˜๋˜ ์ ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์•ž์œผ๋กœ ๊ณ„์† ์ง€์†ํ•  ์‚ฌํ•ญ

1. ์ผ๋‹จ์œ„๋กœ ํ• ์ผ์„ ๋ถ„๋ฐฐํ•ด ์‹œ๊ฐ„๊ด€๋ฆฌ๋ฅผ ํ•˜์˜€๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋งค์ผ ์ „์ฒด ํšŒ์˜์— ๋Œ€ํ•ด ํšŒ์˜ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜์˜€๋‹ค.

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

2. JWT๋ฅผ ์ข€ ๋” ์•ˆ์ „ํ•˜๊ฒŒ ๋ณด๊ด€ํ•˜๊ธฐ ์œ„ํ•ด ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€, ์„ธ์…˜์Šคํ† ๋ฆฌ์ง€, ์ฟ ํ‚ค์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•˜๊ณ , React-cookie ๋ฅผ ์ ์šฉํ–ˆ๋‹ค.

3. React-Hook-Form ๊ณผ YUP ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ƒˆ๋กœ ๋ฐฐ์šฐ๊ณ  ์ ์šฉํ–ˆ๋‹ค.

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

4.๊ธฐ์ƒ ์‹œ๊ฐ„๊ณผ ์ˆ˜๋ฉด์‹œ๊ฐ„์„ ์ž˜ ์ง€์ผฐ๋‹ค.

  • ๋งค์ผ 8์‹œ ์ด์ „์— ์ผ์–ด๋‚˜ ์ตœ๋Œ€ํ•œ 1์‹œ ์ด์ „์—” ์ž๋ ค๊ณ  ๋…ธ๋ ฅํ–ˆ๋‹ค. ํ”„๋กœ์ ํŠธ ํ›„๋ฐ˜๋ถ€์—๋Š” ์‹œ๊ฐ„์ด ๋ถ€์กฑํ•ด ์ƒˆ๋ฒฝ์— ์ž๊ธฐ๋„ ํ–ˆ์ง€๋งŒ, ์ตœ๋Œ€ํ•œ ํ•˜๋ฃจ์— 6์‹œ๊ฐ„ ์ด์ƒ ์ˆ˜๋ฉด ์‹œ๊ฐ„์„ ์ง€์ผœ ์ปจ๋””์…˜์„ ์กฐ์ ˆํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ–ˆ๋‹ค.

5. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋”ฅ๋‹ค์ด๋ธŒ ์Šคํ„ฐ๋””๋ฅผ ๊พธ์ค€ํžˆํ–ˆ๋‹ค.

  • ์ด๊ฑด ์ง„์ฃผ์™€ ์‹œ์˜จ์ด ๋•์ด ํŒ”ํ• ์ด๋‹ค. ๋‘˜์ด ๋“ ๋“ ํ•˜๊ฒŒ ๋ฒ„ํ…จ์ค€ ๋•์— ๋‚˜๋„ ๋’ค์ณ์ง€์ง€ ์•Š๊ณ  ์Šคํ„ฐ๋””์— ์ฐธ์—ฌํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.
  • ์•„์ง๋„ ๊ธˆ์š”์ผ์— ๋ชฐ์•„ ์ฝ๊ธด ํ•˜์ง€๋งŒ, ์ด์   ์–ด๋Š์ •๋„ ์Šต๊ด€์ด ์žกํžŒ๊ฑฐ ๊ฐ™์•„ ๋ฟŒ๋“ฏํ•˜๋‹ค.

Problem

์•„์‰ฌ์› ๋˜ ์ ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์•ž์œผ๋กœ ๊ฐœ์„ ํ•ด์•ผํ•  ์‚ฌํ•ญ

1. ์ฒด๋ ฅ๊ด€๋ฆฌ

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

2. ๋ฐ˜์‘ํ˜• ์›น ๊ตฌํ˜„

  • ๋ฉ˜ํ† ๋‹˜์ด ๋ฐ˜์‘ํ˜• ์›น์„ ๊ตฌํ˜„ํ•  ๋•Œ ๋ชจ๋ฐ”์ผ โžก๏ธ ์›น ์ˆœ์œผ๋กœ ๊ตฌํ˜„ํ•˜๋Š”๊ฒŒ ์ข‹๋‹ค ํ•˜์…จ๋Š”๋ฐ, ํ™”๋ฉด ๊ตฌํ˜„์— ๊ธ‰๊ธ‰ํ•ด์„œ ์›น โžก๏ธ ๋ชจ๋ฐ”์ผ ์ˆœ์œผ๋กœ ์ง„ํ–‰ํ•˜๋‹ˆ ์ฃฝ์„ ๋ง›์ด์˜€๋‹ค. ๐Ÿ˜‡
  • ๊ฐœ๋ฐœ์ž ๋ชจ๋“œ๋กœ ๊ตฌํ˜„ํ•ด๋„ ์‹ค์ œ ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์—์„œ ๋ณด๋Š” ํ™”๋ฉด์ด ๋‹ฌ๋ž๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํฌ๋กฌ, ์‚ฌํŒŒ๋ฆฌ ๋“ฑ ํŠน์ • ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์Šคํฌ๋กค ์Šคํƒ€์ผ์ด๋‚˜ radius๊ฐ€ ์ ์šฉ๋˜์ง€ ์•Š๋Š” ๋ฌธ์ œ ๋“ฑ ํฌ๊ณ  ์ž‘์€ ๋ฌธ์ œ๋“ค์ด ์žˆ์—ˆ๋‹ค.
  • ๋ฐ˜์‘ํ˜• ์›น์„ ํ”„๋กœ์ ํŠธ ๋งˆ๋ฌด๋ฆฌ์ฏค ๊ตฌํ˜„ํ•˜๋‹ˆ ์•„์‰ฝ๊ฒŒ ๊ตฌํ˜„๋œ ๊ฒƒ๋„ ๋งŽ์•˜๊ณ , ์‹œ๊ฐ„์— ์ซ’๊ฒจ ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ•œ๊ฒƒ๋„ ์žˆ์—ˆ๋‹ค.
  • ์ „๋ฐ˜์ ์œผ๋กœ ๋‚ด๊ฐ€ ๋ฐ˜์‘ํ˜• ์›น์— ๋Œ€ํ•œ ์ดํ•ด๋„๊ฐ€ ๋ถ€์กฑํ•˜๋‹ค๋Š” ๊ฒƒ์„ ๋Š๊ผˆ๊ณ , ์ถ”ํ›„์— ๋”ฐ๋กœ ์ฑ… ํ˜น์€ ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•ด์„œ ๊ณต๋ถ€ํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค.

3. ๋ถ€์กฑํ•œ ์™„์„ฑ๋„

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

Try

์ด๋ฒˆ ๊ฒฝํ—˜์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์•ž์œผ๋กœ ์‹œ๋„ํ•  ์‚ฌํ•ญ

1. Clean Code(ํด๋ฆฐ ์ฝ”๋“œ)

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


2. ์ƒˆ๋กœ์šด ์–ธ์–ด/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ/ํ”„๋ ˆ์ž„์›Œํฌ ๊ณต๋ถ€

  • ํ”„๋กœ์ ํŠธ ์ดˆ์ฐฝ๊ธฐ์— TypeScript๋กœ ์ง„ํ–‰ํ•˜๋ ค ํ–ˆ๋Š”๋ฐ, ๋ฉ˜ํ† ๋‹˜์˜ ์กฐ์–ธ + ์ƒˆ๋กœ์šด ์–ธ์–ด์— ๋Œ€ํ•œ ๋ถ€๋‹ด๊ฐ ๋•Œ๋ฌธ์— JavaScript ๋กœ ์ง„ํ–‰ํ–ˆ๋‹ค.
  • ์ด์— ๋Œ€ํ•œ ์•„์‰ฌ์›€ + ์ฑ„์šฉ ๊ณต๊ณ ๋ฅผ ์ฐพ์•„๋ณด๋ฉฐ ์š”์ฆ˜ ํ˜„์—…์—์„œ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ  ์š”๊ตฌํ•˜๋Š” ์–ธ์–ด/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ/ํ”„๋ ˆ์ž„์›Œํฌ์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•˜๋ ค๊ณ  ํ•œ๋‹ค.
  • ๊ณต๋ถ€ํ•  ๊ฒƒ : TypeScript, NextJS, Recoil, Redux, React-query

3. ์šด๋™

  • ์ •๋ง ์šด๋™ํ•˜์ž. ๋น„๋‹จ ์ทจ์—… ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ์˜ค๋ž˜์˜ค๋ž˜ ๊ฑด๊ฐ•ํžˆ ์ผ ํ•˜๋ ค๋ฉด ๊ฑด๊ฐ•์ด ํ•„์ˆ˜๋‹ค.


4. ๊ธฐ์ดˆ๋ฅผ ํƒ„ํƒ„ํžˆ

  • ๊ธฐ์ดˆ์˜ ์ค‘์š”์„ฑ์„ ๋‹ค์‹œ ํ•œ๋ฒˆ ๊นจ๋‹ฌ์•˜๋‹ค. ๊ธฐ์ดˆ๊ฐ€ ํŠผํŠผํ•ด์•ผ ๊ฑด๋ฌผ์ด ์˜ค๋ž˜๊ฐ„๋‹ค. ํŠผํŠผํ•œ ๊ฑด๋ฌผ์ด ๋˜๊ธฐ ์œ„ํ•ด ๊ธฐ์ดˆ๋ถ€ํ„ฐ ๋‹ค์‹œ ํŠผํŠผํžˆ ์Œ“์•„์˜ฌ๋ฆฌ์ž.

๐Ÿ’ญ ์ƒˆ๋กœ์šด ์‹œ์ž‘์„ ์•ž๋‘๋ฉฐ


๋ ์ด๋ผ๋Š”๊ฑด ์ •๋ง ๋ฌ˜ํ•˜๋‹ค. ๋ === ์ƒˆ๋กœ์šด ์‹œ์ž‘ ์ด๋ผ๋Š” ๋ง์ด ์‚ฌ์‹ค์ธ ๊ฒƒ ๊ฐ™๋‹ค.
์กธ์—…์„ ํ•ด์•ผ ์ƒˆ๋กœ์šด ์ž…ํ•™์ด ์žˆ๊ณ , 12์›”์ด ์ง€๋‚˜์•ผ 1์›”์ด ์˜ค๊ณ , ํ•ด๊ฐ€ ์ ธ์•ผ ์ƒˆ๋กœ์šด ํ•˜๋ฃจ๊ฐ€ ์‹œ์ž‘๋œ๋‹ค.


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


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

๋ฏธ๋ž˜์˜ ๋ฉ‹์Ÿ์ด ๊ฐœ๋ฐœ์ž๊ฐ€ ๋œ ๋‚˜ ๐Ÿ˜Ž
profile
ํ•œ์ž… ํฌ๊ธฐ๋กœ ๋ฒ ์–ด๋จน๋Š” ๊ฐœ๋ฐœ์ง€์‹ ๐Ÿฐ
post-custom-banner

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