๊ฐ๋ฐ์๋ก์์ ์ปค๋ฆฌ์ด๋ฅผ ์์ํ ์ง 3๊ฐ์, ์์ต๋ฑ์ง๋ฅผ ๋ผ๊ณ ์ฃผ๋์ด ๊ฐ๋ฐ์๋ก์ ์์ํ๋ ์์ ์ด ๋์ด ์ด ๊ธฐ๋ถ์ ๊ธฐ๋กํ ๊ฒธ, ๋ด ์ปค๋ฆฌ์ด์ ์์์ ๋์์ค ํญํด99 ๋ถํธ์บ ํ์ ๋ํ ํ๊ธฐ๋ฅผ ๋จ๊ฒจ๋ณผ๊น ํ๋ค. >์ด์ ์ ํ๊ธฐ๋ฅผ ํ ์ฐจ๋ก ๋จ๊ธฐ๊ธด ํ์์ง๋ง, ๊ทธ ๋์๋ ๋ด๊ฐ ๋ง๋ ๊ฒฐ๊ณผ๋ฌผ
๋ช ์ฌ ์ํํธ์จ์ด์ ๊ฒ๋ณด๊ธฐ ๋์์ ์ ์งํ ์ฑ, ์ฝ๋๋ฅผ ์ดํดํ๊ณ ์์ ํ๊ธฐ ์ฝ๋๋ก ๋ด๋ถ ๊ตฌ์กฐ๋ฅผ ๋ณ๊ฒฝํ๋ ๊ธฐ๋ฒ๋์ฌ ์ํํธ์จ์ด์ ๊ฒ๋ณด๊ธฐ ๋์์ ๊ทธ๋๋ก ์ ์งํ ์ฑ, ์ฌ๋ฌ๊ฐ์ง ๋ฆฌํฉํฐ๋ง ๊ธฐ๋ฒ์ ์ ์ฉํด์ ์ํํธ์จ์ด๋ฅผ ์ฌ๊ตฌ์ฑํ๋ค.๋ฆฌํฉํฐ๋ง ์ ์์์์ ํต์ฌ์ 'ํน์ ํ ๋ฐฉ์'์ ๋ฐ๋ผ ์ฝ๋๋ฅผ
ํจ์์ ๊ฒฐ๊ณผ๊ฐ์ type์ ๋ฐ๋ผ ๋ฏธ๋ฆฌ return๊ฐ์ ํ์ฉํ ์์ฉ return๊ฐ์ ์ฌ๋ฌ๊ฐ ์ค๋นํด๋๊ธฐํ ์คํธ ํ๋ ์์ํฌ ๋ฑ์ ํ์ฉํ์ฌ ํ ์คํธ ๊ณผ์ ๋จ์ถํ๊ธฐ (๋จ์ถํค๋ฅผ ํ์ฉํ ํ ์คํธ ์ฝ๋ ์คํ)ํ ์คํธ ๊ฒฐ๊ณผ ํ์ธ ์ RED / GREEN ๋ฑ ์ฑ๊ณต๊ณผ ์คํจ๋ฅผ ์ค์ค๋ก ํ๋จํ๋ ์๊ฐ
์น์ฌ์ดํธ์ ๊ท๋ชจ๊ฐ ์ปค์ง์ ๋ฐ๋ผ ํ์ผ ํ๋์ ๋ด๊ธฐ๋ ์ฝ๋์ ์๊ณผ ์น์ ๊ตฌ์ฑํ๋ ํ์ผ์ ์๊ฐ ๋์ด๋๊ฒ ๋๊ณ , ์ด์ ๋ฐ๋ผ ์ ์ญ ์ค์ฝํ์์ ์ ์ธ ๋ฐ ํ ๋น๋ ํจ์, ๋ณ์ ๋ฑ์ด ์ถฉ๋๋๋ ์ํฉ์ด ๋ฐ์ํ๊ฑฐ๋, ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ ์๋๊ฐ ์ค๋ ๊ฑธ๋ ค ์ฌ์ฉ์์ ๋ถํธ์ด ๊ฐ์ค๋์๋ค. ์ต๊ทผ์ ์น
ERD๋ (Entity Relationshop Diagram) DB ๊ตฌ์ถ ์ ๊ธฐ๋ฐ์ด ๋๋ ๋ผ๋ ์ญํ ์ ํ๋ฉฐ, ๋ฆด๋ ์ด์ ๊ฐ์ ๊ด๊ณ๋ฅผ ์ ์ํ ๊ฒ์ด๋ค.ERD๋ ์์คํ ์ ์๊ตฌ ์ฌํญ์ ๊ธฐ๋ฐ์ผ๋ก ์์ฑ๋๋ฉฐ ERD๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ๊ตฌ์ถํ๋ค. ๊ด๊ณํ ๊ตฌ์กฐ์ ๋ฐ์ดํฐ๋ฅผ ๊ตฌ์ฑํ ๋๋
์ต๋น๊ฐ์ ์ฃผ์ด์ง ๊ฐ ์ค์์ ๊ฐ์ฅ ์์ฃผ ๋์ค๋ ๊ฐ์ ์๋ฏธํฉ๋๋ค. ์ ์ ๋ฐฐ์ด array๊ฐ ๋งค๊ฐ๋ณ์๋ก ์ฃผ์ด์ง ๋, ์ต๋น๊ฐ์ return ํ๋๋ก solution ํจ์๋ฅผ ์์ฑํด๋ณด์ธ์. ์ต๋น๊ฐ์ด ์ฌ๋ฌ ๊ฐ๋ฉด -1์ return ํฉ๋๋ค.0 < array์ ๊ธธ์ด < 1000
๋ฐ์ดํฐ๋ฒ ์ด์ค(DB, DataBase)๋ ์ผ์ ํ ๊ท์น, ํน์ ๊ท์ฝ์ ํตํด ๊ตฌ์กฐํ๋์ด ์ ์ฅ๋๋ ๋ฐ์ดํฐ์ ๋ชจ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ์ ์ด, ๊ด๋ฆฌํ๋ ํตํฉ ์์คํ ์ DBMS(DataBase Management System)๋ผ๊ณ ํ๋ฉฐ,DB ๋ด ๋ฐ์ดํฐ๋ค์ ํน์ DBMS๋ง๋ค ์ ์๋ ์ฟผ๋ฆฌ
๋๋ฆผ์ฝ๋ฉ์ Goals-Projects-Actions๋ก ์ด์ด์ง๋ Planning ๋ ธ์ ํ ํ๋ฆฟ์ ํ์ฉํ์ฌ ๋๋ต์ ์ธ 2023๋ ์ ๊ณํ์ ์ธ์๋ดค๋ค. ๊ฐ GOALS์ ํ์ PROJECTS๋ก 1depth์ TASK๋ฅผ ๋ถ๋ฅํด์ ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๊ธฐ ์ํ ์ธ๋ถ ๊ณํ๊ณผ ์ผ์ ์ ์ชผ๊ฐ์๋ค. ์ด
Typescript๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ฝ์ ์ ์๊ธฐ ๋๋ฌธ์, ์ปดํ์ผ ์์๋ Javascript๋ก ๋ณํํ๋ ๊ณผ์ ์ ๊ฑฐ์น๋ค. ๊ทธ๋ผ์๋ ๋ถ๊ตฌํ๊ณ ๊ตณ์ด Typescript๋ฅผ ์ฌ์ฉํ๊ณ , ๋ค์ Javascript๋ฅผ ๊ฑฐ์ณ ๋ธ๋ผ์ฐ์ ๋ก ๋ ๋๋งํ๋ ํ๋ก์ธ์ค๋ก ์์ ํ๋๊ฑด ์๊ทธ๋ด๊น? ๊ฐ๋ฐ์๋ค์
ํญํด99 9๊ธฐ React ์๋ฃ ์ฝ์๋ชป์์ ์๋น๊ฐ๋ฐ์๋ก! ๊ธฐํ์๋ก ์ผ์ ํ๋ฉด์ ๊ฐ๋ฐ์๋ค๊ณผ ์ํต์ ํด์๊ณ ๋๋ก๋ ๊ฐ๋ฐ์๋๊ตฌ๋ก ์ฝ๋๋ฅผ ๋ค์ฌ๋ค๋ณด๋ฉฐ ์๊ตฌ์ฌํญ์ ์ ๋ฆฌํ๊ธฐ๋ ํ์์ง๋ง ๊ทธ๊ฑฐ์ผ ๋ญ ๋ชจ๋ฅด๋ ํ ์ ์๋ ์ผ์ด ์๋์์๊น. html ํํ์ด์ง ๋งํฌ์ ๋ ํด๋ณธ ์ ์๋ ๋ด๊ฐ ์ฝ
ChatGPT์ ๊ดํ ์์์ ์ฌ๋ฌ ์ํฐํด๊ณผ ์ ํ๋ธ๋ฅผ ํตํด ๋ค์ด์๋ค. ChatGPT๋ Chat์ด๋ผ๋ ์ด๋ฆ์์๋ถํฐ ์ ์ ์๋ค์ํผ ๋ํํ์์ผ๋ก ์ ๊ทผ์ด ๊ฐ๋ฅํ๋ฐ, ์ง๋ฌธ์ ๋์ง๋ฉด ์น์์ ํผ์ง ์ ๋ณด๋ฅผ ๋ฐํ์ผ๋ก ๊ฐ์ฅ ์ ํํ๋ค๊ณ ํ๋จ๋๋ ์ ๋ณด๋ฅผ ์ถ๋ ค๋ด๊ณ , ๋ฌธ์ฅ์ผ๋ก ์ฎ๊ฒจ ๋ํํ์์
๊ธฐ์กด ํ๋ก์ ํธ๋ CSS-in-JS ํ์ ์ Styled-components์ ๋ฏธ๋ฆฌ ๋ง๋ค์ด์ง ์ ํธ๋ฆฌํฐ ํด๋์ค์ ์ปค์คํ ํด๋์ค๋ฅผ ํจ๊ป ํ์ฉํ ์ ์๋ Tailwind CSS ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํด๋ณด์๋๋ฐ, ์ด๋ ฅ์๋ฅผ ์์ฑํ๊ธฐ ์์ํ๋ฉด์ ์ฑ์ฉ๊ณต๊ณ ๋ค์ ๋๋ฌ๋ณด๋, Sass๋ Scss
๋ค์ํ ์ง๋ฌด์์ ์ํํ ํ์ ์ ์ด๋์ด๋ด๋ ์ปค๋ฎค๋์ผ์ด์ ์ญ๋์ฃผ์ฅ์ ๋ํ ๋ ผ๋ฆฌ์ ์ธ ๊ทผ๊ฑฐ์ ํ๋ฆ์ ํ์ ํ๋ ๋ฅ๋ ฅ๋๋ ทํ ์ฃผ๊ด๊ณผ ๊ธฐ์ ์ ๋ฐ์ ์ ์ํ ๋ ผ๋ฆฌ์ ์ธ ์๊ฒฌ์๋ ์ธ์ ๋ ์ด๋ ค์๋ ์คํ๋ง์ธ๋๋์๋ ํธ๊ธฐ์ฌ๊ณผ ์๋ก์ด ๊ฒ์ ๋ํ ๋๋ ค์์ด ์๋ ํธ, ํ๊ณ๋ฅผ ์ ํด๋์ง ์๊ณ ํ์ฅ๊ณผ ์ฑ์ฅ
## ์ต์ข ๋ฐํ ์ค๋น ### ๋ฐํ์๋ฃ - ๊ธฐ์กด MVP ์๋ฃ๋ฅผ ๋ฐํ์ผ๋ก ์์๋ฅผ ๊ตฌ์ฑํ๊ณ `Figma`๋ฅผ ํ์ฉํ์ฌ ๋ฐํ์๋ฃ ์ ์ - ์๋น์ค ์ํคํ ์ณ > ๊ตฌํ ๊ธฐ๋ฅ > ์๋น์ค ์์ฐ > ๊ธฐ์ ์ ์์ฌ๊ฒฐ์ (๋ผ์ด๋ธ๋ฌ๋ฆฌ) > ํธ๋ฌ๋ธ์ํ ์์ผ๋ก ๊ตฌ์ฑ
โข ์์ธ์ ์ค์๊ฐ ๋์๋ฐ์ดํฐ ๊ณต๊ณต API ๊ธฐ๋ฐ ์ ๋ณด์ ๊ณตํ ์ปค๋ฎค๋ํฐ, ๋ถ๋น๋ถ๋น! โข ํ์ฅ์ผ๋ก ํ๋ก์ ํธ ์ ์ฒด ์ผ์ ๊ด๋ฆฌ ๋ฐ ๊ฐ๋ฐ๋ฒ์ ์กฐ์จ, ํ๋ก์ ํธ ๋ฆฌ๋ฉ โข ์ค์ ์ ์ ๋ฅผ ๋ชจ์งํ์ฌ ์ด 182๋ช ์ ์ ์ , 63๊ฑด์ ์๋ต ๋ฐ ๊ฐ์ ์์ฒญ์ฌํญ 83๊ฑด ์์ง ๋ฌ์ฑ โข ์ ์ ํ ์คํธ ๊ธฐ๋ฐ ์
- ์์ ๊ฐ์ ๊ธฐ๋ณธ ์์ฑ์ ๊ธฐ๋ฐ์ผ๋ก, ๋ชจ๋ ๋ฌธ์๊ฐ ํด๋น๋๋ค๊ณ ์๊ฐํ์์ผ๋, ์ธ์ด๋ณ๋ก๋ ์ ์ฉ๋๋ ๋ฒ์์ ์ฐจ์ด๊ฐ ๋ฐ์ํ ์ ์์ผ๋ฉฐ, ํน์๋ฌธ์์ ๊ฒฝ์ฐ ํด๋น๋์ง ์๋๋ค๋ ์ฌ์ค์ ๋ค๋ฆ๊ฒ ๋ฐ๊ฒฌํ๋ค.
์ค๊ฐ๋ฐํํ์์ ๋ฐ์ ํผ๋๋ฐฑ์ ๋ฐํ์ผ๋ก **์ ์ ์ญ์ํ๋ก ๊ด๋ฆฌํด์ผ ํ๋๊ฐ**, **์ redux๋ฅผ ์ฌ์ฉํ๋๊ฐ** ์ ๋ํ ๊ณ ๋ฏผ์ ๋ฐํ์ผ๋ก, ์ ์ฒด์ ์ธ ์๋ฒ์คํ ์ดํธ๋ฅผ ์ง์ญ ์คํ ์ดํธ๋ก ๋ฆฌํฉํ ๋ง ์งํ - ์ ์ฒด ์ํ๋ฅผ `local state`๋ก ๋ณ๊ฒฝํ๊ณ ๋์, ์ข์์์ ๋ฌดํ์คํฌ๋กค
## โจ ์ด๋ฒ์ฃผ์ ํ ์ผ ### ๋ฐฐํฌ์ค๋น โ ์ฌ์ฉ์ ๋ฐฐํฌ๋ฅผ ์ํ ๋ด๋ถ ํ ์คํธ ์งํ โ ๋ฐฐํฌ ์ดํ ์ถ๊ฐ ๊ฐ๋ฐํ ๋ฒ์์ ๋ฐฐํฌ ๋ด ์งํ๋ฒ์ ๋ถ๋ฅ โ ํผ๋ธ๋ฆฌ์ฑ ๋ง๋ฌด๋ฆฌ ์์ โ ์ฌ์ฉ์ ๋ง์กฑ๋ ์กฐ์ฌ ์ค๋ฌธ์์ฑ โ ๋ง์กฑ๋ ์กฐ์ฌ ํ๋ณด์ฉ ์นด๋๋ด์ค ์ ์ โ ์ธ์คํ๊ทธ๋จ/๊ตฌ๊ธ ๊ณ์ ์์ฑ
ํ๋ก ํธ์๋๋ ์์ ๋ก๊ทธ์ธ > Vercel APP(PWA) > ๋ฆฌ์กํธ, ๋ฆฌ๋์ค(thunk), ๋ฆฌ์กํธ ๋ผ์ฐํฐ๋, ์ ์์ค์ค ํ๊ฒฝ์ผ๋ก ๋ฐฑ์๋์ ํต์ ๋ฐฑ์๋๋ ์ผํธ๋ฆฌ, ์ค์จ๊ฑฐ๋ก ํ๋ก ํธ์๋์ ์ํต ๋ฐ Spring data JPA ๊ธฐ๋ฐ ์ฝ๋ ๋ํ๋ก์ด์ ๊นํ๋ธ ์ก์ ์ ํ์ฉํ ๋ฌด์ค๋จ ๋ฐฐํฌ
๊ธฐ๋ฅ๊ฐ๋ฐ ์์ธ์ ๋์ ๋ฐ์ดํฐ(๊ณต๊ณต๋ฐ์ดํฐ ์คํ API) - ํ๋ก ํธ์์๋ ์งํต์ ์ ์๋ํด๋ณด๋๊ฒ ๋ชฉํ์์ผ๋, ๊ฐ์ด๋๋ฌธ์์์๋ json ํ์ ์ด ์ง์๋๋๊ฑธ๋ก ๋์์ง๋ง, ์ค์ ํต์ ์ ์๋ํด๋ณด๋ xml ํ์ ๋ง ์ ๊ณตํ๊ณ , ํน์ ๋ฐ์ดํฐ๋ฅผ ๊ณจ๋ผ์ ์์ฒญํ๋๊ฒ ๋ถ๊ฐํด์ ๋ฐฑ์๋์