2์ฃผ ํ๋ฆฌ ํ๋ก์ ํธ๋ฅผ ๋ง์น๊ณ ๋๋ 4์ฃผ ๋ฉ์ธํ๋ก์ ํธ๊ฐ ์ฑํผ ๋ค๊ฐ์๋ค. ์ผ๋จ ๋ณด์ด๋ ๊ธฐ๊ฐ๋ง ํด๋ ํ๋ฆฌ ํ๋ก์ ํธ ๋ณด๋ค 2์ฃผ๊ฐ ๋ ์ฃผ์ด์ง๊ธฐ ๋๋ฌธ์ ์กฐ๊ธ ๋ ์ฌ์ ๋กญ์ง ์์๊นํ๊ณ ์ ์๋๋ง ์๊ฐํ์๋๋ฐ, ์ญ์๋ ํฌ๋ํฐ ์ค์ฐ์ด์๋ค ๐
์ด๊ธฐ์ ์๊ฐํ๋ ์์ด๋์ด๊ฐ ์ฌ์ฉํ ์ ์๋ ๋ง๋
ํ ์คํ API๊ฐ ์์ด ์คํ ๋ถ๊ฐ๋ฅํ๋ค. ๊ทธ๋์ ๊ฐ์ ๋ช๊ฐ์ง ์์ด๋์ด๋ฅผ ์๊ฐํด ๋น๋ฉํ๊ธฐ๋ก ํ์๊ณ , ์ต์ข
์ ์ผ๋ก ๋ด ์์ด๋์ด๊ฐ ์ฑํ๋์ด ํ๋ก์ ํธ๋ฅผ ์งํํ๊ฒ ๋์๋ค.
ํ๋ก์ ํธ ๋ชฉํ
์์ด๋์ด๋ฅผ ์๊ฐํ๊ธฐ ์์ ๋ฉ์ธ ํ๋ก์ ํธ ๋ชฉํ๋ฅผ ๋จผ์ ์ค์ ํ๋ค.
- ๋งค๋ ฅ์ ์ด์ฌ์ผ ํ๋ค โ ๋ค๋ฅธ ์ฌ๋์ด ๋ดค์ ๋ ๋ปํ์ง ์์์ผ ํจ(์ด๋ฏธ ์ฑ์ฉ์์ฅ์ ๋ง์ ํ์ ์ด ์กด์ฌํจ)
- ํ๋ฉด์ ์ฌ๋ฐ์ด์ผ ํ๋ค. โ ๊ทธ๋์ผ ํ์ ์ ๋ ์ ์ ์ด ์๊ธด๋ค!
- ๋ด ์ญ๋์ ์ต๋ํ์ผ๋ก ๋ณด์ฌ์ค ์ ์์ด์ผ ํ๋ค.
์์ด๋์ด ์ฐฉ์
ํ์ ๋๋ ๊ฐ์กฑ๋ค, ์น๊ตฌ๋ค์ ์์ผ์ ๊ผญ๊ผญ ์์ผ ํธ์ง๋ฅผ ์จ์ ์ฃผ๋ ํธ์ด๋ค. ๋ง์ฝ ๋ง๋์ง ๋ชปํ๋ ์ํฉ์ด๋ผ๋ฉด ์นด์นด์คํก์ผ๋ก๋๋ง ํธ์ง๋ฅผ ๋จ๊ธฐ๋ ํธ์ด๋ค. ํ์ง๋ง ๋์ด๋ฅผ ๋จน์ผ๋ฉด์ ์น๊ตฌ๋ค๊ณผ ์ผ์ ๋ง์ถ๊ธฐ๊ฐ ์ฝ์ง ์์์ก๊ณ , ์ฃผ๊ฑฐ์ง๋ ๋ณํ๋ฉด์ ์์ ์ฒ๋ผ ๋ง๋๋ ์ผ์ด ์ฝ์ง ์์๋ค. ๊ทธ๋ฌ๋ค๋ณด๋ ์์ผ ํธ์ง๋ณด๋จ ์นดํก์ผ๋ก ์์ผ ์ถํ๋ฅผ ํ๋ ์ผ์ด ๋ง์์ง๊ฒ ๋์ด, ํธ์ง๋ฅผ ํตํด ๋ง์์ ์ ๋ฌํ๋๊ฑธ ์ข์ํ๋ ์๋ ๋ก๊ทธ ์ธ๊ฐ
์ผ๋ก์จ ๊ต์ฅํ ์์ฝ๊ณ ์ญ์ญํ ๋ง์์ด์๋ค.
๊ทธ๋ฌ๋ ์ค ๐ก "์จ๋ผ์ธ์ผ๋ก ํธ์ง๋ฅผ ์์ฑํด ์ ๋ฌํด์ค ์ ์๋ ์๋น์ค๋ฅผ ๋ง๋ค์ด๋ณด๋ฉด ์ด๋จ๊น ?"
ํ๋ ์๊ฐ์ด ๋ฒ๋ฉ ๋ค์๋ค.
์ฌ๋ฌ ์ํฉ์ ๋ง๋ ํธ์ง์ง๋ฅผ ์ ๊ณตํด ์ฌ์ฉ์๊ฐ ์ํ๋ ํฐํธ๋ก ๊ธ์จ๋ฅผ ์ฐ๊ณ ์ฌ์ง์ ์ฒจ๋ถํด ํธ์ง๋ฅผ ์ ํ ์ ์๋ค๋ฉด? ๊ทธ๋ฆฌ๊ณ ์์ํ ํธ์ง๋ฅผ ๋ณด๊ดํ ์ ์๋ค๋ฉด ? ์ ๋ง ์ข์๊ฑฐ ๊ฐ์๋ค. ๋๋ถ์ด ๋ณด๊ดํ๊ธฐ ์ด๋ ค์ด ํธ์ง๋ค์ ํ๋ฐ ๋ชจ์ ํ๋์ ๋ฉ๋ด์์ ๋ณผ ์ ์๋ค๋ฉด
ํธ์ง์ง๋ฅผ ๊ฐ์ง๊ณ ์์ง ์๋๋ผ๋ ์ธ์ ๋ ์ง ๊ธฐ์ต์ ์ถ์ตํ ์ ์๋ค !
๋คํํ ๋ค๋ฅธ ํ์๋ค๋ ์์ด๋์ด์ ๋ํด ์ข๊ฒ ์๊ฐํด์ฃผ์ด ํ์๋ค๊ณผ ๊ฐ์ด ์ธ๋ถ์ ์ธ ์์ด๋์ด๋ฅผ ์์ ์ต์ข ๋ฉ์ธ ํ๋ก์ ํธ, ์จ๋ผ์ธ ํธ์ง ์๋น์ค | ๐ฎ 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. ์ ์ ์ด๋ฆ ์ค๋ณต๊ฒ์ฌ 2. ์ด๋ฉ์ผ ์ค๋ณต๊ฒ์ฌ 3. ์ค๋ณต์ฒดํฌ๋ ์ด๋ฉ์ผ์ ๋ํด ์ธ์ฆ๋ฉ์ผ ๋ฐ์ก 4. ์ธ์ฆ์ฝ๋ ์ ํจ์ฑ ๊ฒ์ฌ 5. ๋น๋ฐ๋ฒํธ ์ ํจ์ฑ ๊ฒ์ฌ ๋ฐ ์ผ์น ํ์ธ 6. Oauth๋ฅผ ํตํด ํ์๊ฐ์ | 1. ์ด๋ฉ์ผ, ๋น๋ฐ๋ฒํธ ๊ฒ์ฌ ๋ฐ ๋ก๊ทธ์ธ 2. Oauth๋ฅผ ํตํด ๋ก๊ทธ์ธ |
ํธ์ง ๋น๋ฐ๋ฒํธ ๊ฒ์ฆ | ๋ณด๊ด ์ ๋ก๊ทธ์ธ ๋ชจ๋ฌ |
---|---|
1. ๋น๋ฐ๋ฒํธ๊ฐ ๊ฑธ๋ฆฐ ํธ์ง์ ๋ํด ์ ํจ์ฑ ๊ฒ์ฌ 2. ๊ฒ์ฆ ์ ํธ์ง ๋ด์ฉ์ ๋ชจ์์ดํฌ ์ฒ๋ฆฌ | 1. ํธ์ง ์กฐํ ํ์ด์ง์์ ๋ณด๊ด ์ ๋น๋ก๊ทธ์ธ ์ํ๋ผ๋ฉด ๋ก๊ทธ์ธ ๋ชจ๋ฌ์ ํตํด ๋ก๊ทธ์ธ |
ํธ์ง ์กฐํํ์ด์ง (์๋ฉด) | ํธ์ง ์กฐํํ์ด์ง (๋ท๋ฉด) |
---|---|
1. ์ฐํธํจ ๋๋ URL์ฃผ์๋ฅผ ํตํด ํธ์ง ์กฐํ 2. ์์ฑ TTS ์๋น์ค๋ก ํ ์คํธ ์์ฑ ๋ณํ 3. ์ด๋ฏธ์ง๋ก ์ ์ฅ ๊ธฐ๋ฅ 4. ๋ด ์ฐํธํจ์ ํธ์ง ๋ณด๊ดํ๊ธฐ 5. ํธ์ง ์ญ์ ๊ฐ๋ฅ(์ญ์ ์ ํด์งํต์ผ๋ก ์ด๋) 6. ํธ์ง ์ฐ์ธก ์๋จ ํด๋ฆญ ์ ๋ท๋ฉด์ผ๋ก ํ๋ฆฝ | 1. ์ฒจ๋ถ๋ ์ฌ์ง ํ์ธ ๊ฐ๋ฅ 2. ํธ์ง ์ข์ธก ์๋จ ํด๋ฆญ ์ ์๋ฉด์ผ๋ก ํ๋ฆฝ |
(์ถํ ์ฐจ๋ก๋๋ก ํฌ์คํ ์์ )
์ข์๋ ์ ์ ๊ธฐ๋ฐ์ผ๋ก ์์ผ๋ก ๊ณ์ ์ง์ํ ์ฌํญ
1. ์ผ๋จ์๋ก ํ ์ผ์ ๋ถ๋ฐฐํด ์๊ฐ๊ด๋ฆฌ๋ฅผ ํ์๋ค. ๊ทธ๋ฆฌ๊ณ ๋งค์ผ ์ ์ฒด ํ์์ ๋ํด ํ์ ๋ด์ฉ์ ์ ๋ฆฌํ์๋ค.
ํ ์ค์ผ์ค๋ฌ | ๊ฐ์ธ ์ค์ผ์ค๋ฌ |
---|---|
2. JWT๋ฅผ ์ข ๋ ์์ ํ๊ฒ ๋ณด๊ดํ๊ธฐ ์ํด ๋ก์ปฌ์คํ ๋ฆฌ์ง, ์ธ์
์คํ ๋ฆฌ์ง, ์ฟ ํค
์ ๋ํด ๊ณต๋ถํ๊ณ , React-cookie
๋ฅผ ์ ์ฉํ๋ค.
3. React-Hook-Form
๊ณผ YUP
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์๋ก ๋ฐฐ์ฐ๊ณ ์ ์ฉํ๋ค.
4.๊ธฐ์ ์๊ฐ๊ณผ ์๋ฉด์๊ฐ์ ์ ์ง์ผฐ๋ค.
5. ์๋ฐ์คํฌ๋ฆฝํธ ๋ฅ๋ค์ด๋ธ ์คํฐ๋๋ฅผ ๊พธ์คํํ๋ค.
์์ฌ์ ๋ ์ ์ ๊ธฐ๋ฐ์ผ๋ก ์์ผ๋ก ๊ฐ์ ํด์ผํ ์ฌํญ
1. ์ฒด๋ ฅ๊ด๋ฆฌ
2. ๋ฐ์ํ ์น ๊ตฌํ
3. ๋ถ์กฑํ ์์ฑ๋
์ด๋ฒ ๊ฒฝํ์ ๊ธฐ๋ฐ์ผ๋ก ์์ผ๋ก ์๋ํ ์ฌํญ
1. Clean Code(ํด๋ฆฐ ์ฝ๋)
2. ์๋ก์ด ์ธ์ด/๋ผ์ด๋ธ๋ฌ๋ฆฌ/ํ๋ ์์ํฌ ๊ณต๋ถ
TypeScript
๋ก ์งํํ๋ ค ํ๋๋ฐ, ๋ฉํ ๋์ ์กฐ์ธ + ์๋ก์ด ์ธ์ด์ ๋ํ ๋ถ๋ด๊ฐ ๋๋ฌธ์ JavaScript
๋ก ์งํํ๋ค.TypeScript
, NextJS
, Recoil
, Redux
, React-query
3. ์ด๋
4. ๊ธฐ์ด๋ฅผ ํํํ
๋
์ด๋ผ๋๊ฑด ์ ๋ง ๋ฌํ๋ค. ๋ === ์๋ก์ด ์์
์ด๋ผ๋ ๋ง์ด ์ฌ์ค์ธ ๊ฒ ๊ฐ๋ค.
์กธ์
์ ํด์ผ ์๋ก์ด ์
ํ์ด ์๊ณ , 12์์ด ์ง๋์ผ 1์์ด ์ค๊ณ , ํด๊ฐ ์ ธ์ผ ์๋ก์ด ํ๋ฃจ๊ฐ ์์๋๋ค.
์ฝ๋์คํ
์ด์ธ ์๊ฐ
๋ ๋น์ฅ์ ๋์ฒ๋ผ ๋๊ปด์ง๊ฒ ์ง๋ง, ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก์ ์ทจ์
์ ์ค๋นํด์ผ ํจ์ ์๋ฏธํ๊ณ , ๋ ํ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ์ทจ์
ํจ
์ ์๋ฏธํ ๊ฒ์ด๋ค.
๊ฐ๋์ ๋์ด ์๋ ๊ฒ์ฒ๋ผ ๋ถ์ํ๊ณ , ๋ด๊ฐ ์ ๋ง ํ ์ ์์๊น ๊ฑฑ์ ๋๊ณ , ํ ์์ด ๋ถ์กฑํ๋ค๊ณ ๋๋ผ๋ ๋ ๋ ๋ถ๋ช
์ด ์ฌ ๊ฒ์ด๋ค.
๊ทธ๋ผ์๋ ๋ถ๋ช
ํ ๊ฑด ๋์ ๋ถ๋ช
์ด ์๊ณ , ์๋ก์ด ์์์ด ์๋ค๋ ๊ฒ!
๋ด๊ฐ ํ ์ผ์ ๋ฌต๋ฌตํ ํ ์ผ์ ํ๊ณ ์ด์ฌํ ๋
ธ๋ ฅํ๋ ๊ฒ์ด๋ค. ํ๋ฃจํ๋ฃจ๋ฅผ ์ค์ค๋ก ์ ๋ณด๋๋ค! ๋งํ ์ ์๊ฒ ์์ฐจ๊ฒ ์ฑ์์ผ๊ฒ ๋ค. ๋ด๊ฐ ์ข์ํ๋, ์ฑ์ฅ์ ๊ณ๋จ์์ด๋ค
๋ผ๋ ๋ง์ฒ๋ผ, ๋น์ฅ์ ๋์ ๋์ง ์๋๋ผ๋ ์ฐจ๊ทผ ์ฐจ๊ทผ ์๋ค๋ณด๋ฉด ์ด๋๋ง ๋ง์ ๊ณ๋จ์ ์ฌ๋ผ์ ์์ ๊ฒ์ด๋ผ๊ณ ๋ฏฟ๋๋ค.
ํ๋ค๋ฆฌ์ง ๋ง๊ณ ๊พธ์คํ
์ฑ์คํ
์ด์ฌํ
ํด๋ณด์ ! ๋น ์ด๋ ๐ฅ