๋จผ์ ํ๋ก์ ํธ๋ช wellseecoding ์ '์ฝ๋ฉ์ ๊ณง ์ ์๊ฒ๋ ๊ฑฐ์ผ' ๋ผ๋ ๋ป ์ ๋๋ค.
IT์ ๊ณ ์ทจ์ค์, ํ์ ์๋ค์ ์ํ ์น์ฑ์ด๋ฉฐ, ํผ์ ๊ณต๋ถํ๋ ๊ฒ๋ณด๋ค ํจ๊ป ๋ชฉ์ ๋ฌ์ฑ์ ํ๊ธฐ ์ํ ์ฌ๋๋ค์ ๋งค์นญ ์์ผ์ฃผ๋ ํ๋ซํผ ์ ๋๋ค. ์๋ง์ IT ์ปค๋ฎค๋ํฐ๋ค๊ณผ ๋น๊ต ํด๋ดค์ ๋,wellSeeCoding
์ด ๋ฝ๋ผ๋งํ ์ฐจ๋ณ์ ์ ์ค๋ช ์ ๋ก ํ์ฌ๊ธ ์คํฐ๋๋ ์ฌ์ด๋ ํ๋ก์ ํธ๋ฅผ ๊ตฌํ ์, ๋ณด๋ค ๋ ์ ๋ขฐ๋๋ฅผ ๊ฐ์ง ์ ์๋ค๋ ์ ๊ณผ ํจ๊ป ํ ๊ตฌ์ฑ์๋ค์ ์คํฐ๋์ฅ์ด ์ ์ฒญ์์ ๋ง์ดํ์ด์ง ์ด๋ ฅ๋ค์ ๋ณด๊ณ ํ์ด ๋ง๋ ์ฌ๋์ผ๋ก ์ปจํํ ์ ์๋ค๋ ์ ์ ๋๋ค. ๋ ๋ด์ธ์ธ๋ง ํ ์ฐจ๋ณ์ ์ด๋ผ๋ฉด ์ฌ๋๋ค์ด ์ด์ฉํ๊ธฐ ํธ๋ฆฌํ๋๋ก ์ ์๋ UI/UX ์ ๋๋ค.
(์ค์ ๋ก IT์ ๊ณ์ ์ข ์ฌํ๋ 50๋ช ๋ด์ธ์ ๋ค์ํ ์ง๊ตฐ์ ์ฌ๋๋ค์ ์ง์ ์ค๋ฌธ์กฐ์ฌ ํ ๊ฒฐ๊ณผ๋ฌผ์ ์ฐธ๊ณ ํ์ฌ ์ ์ ๋ค์ ๋์ฆ์ ๋ง์ถฐ ๊ธฐํํ๊ณ ๋์์ธํ๊ณ ๊ฐ๋ฐํ์ต๋๋ค.)
ํ๋ช | MIC (May I clone?) |
---|---|
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ | ์ดํ์ฃผ |
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ | ์ด์คํฌ |
๊ธฐํ & UI/UX ๋์์ด๋ | ๋ฐ์ง์ |
์ญํ | ์คํ๋ช |
---|---|
ํ๋ ์์ํฌ | |
CSS-in-JS | |
์ํ๊ด๋ฆฌ | |
๊ธฐ๋ณธ ์ธ์ด | |
ํฌ๋งทํ | |
ํจํค์ง ๋งค๋์ | |
ํ ํฐ ๊ด๋ฆฌ | |
์๋ฒ | |
๋ฒ์ ์ปจํธ๋กค |
์ญํ | ์คํ๋ช |
---|---|
ํ๋ ์์ํฌ | |
์๋ฒ | |
ํ ํฐ ๊ด๋ฆฌ | |
๋ฐ์ดํฐ ๋ฒ ์ด์ค | |
CI/CD | |
API ๊ด๋ฆฌ | |
๋ฒ์ ์ปจํธ๋กค |
์์ ์ | ์์ ๋ด์ฉ |
---|---|
์ด์คํฌ | - ๋ก๊ทธ์ธ ๋ฐ ์์
๋ก๊ทธ์ธ(NAVER, KAKAO) ๊ด๋ฆฌ - ํ/ ํจ๊ปํด์/ ์๋ฆผ/ ๊ฒ์ ํ์ด์ง์ ๋ํ ๋ฐ์ํ ์น ํ์ด์ง ๊ตฌํ - ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ชจ๋ฌ ์ปดํฌ๋ํธ ๊ตฌํ - ํจ๊ปํด์ ํ์ด์ง ๊ฒ์ํ CRUD ์์ - ๋๊ธ ํ์ด์ง ๊ด๋ จ CRUD ์์ - ๊ฒ์ ํ์ด์ง ๊ตฌํ - ๋ฉ์ธ ํ์ด์ง ๊ธฐ๋ฅ ๊ตฌํ - ์๋ฆผ ํ์ด์ง ๊ตฌํ - ์ํ ๊ด๋ฆฌ ๋ฐ ์ ๋ฐ์ ์ธ ํ๋ฆ ์ ์ด - ์ฝ๋ ๋ฆฌ๋ทฐ - ๋ฐฑ์๋ API ๊ฐ๋ฐ ๋ฐ ์ฐ๋ |
์ดํ์ฃผ | - ์์ด๋์ด ๊ธฐํ ๋ฐ ํ๋น๋ฉ ๊ตฌ์ฑ - ๋์์ด๋์ ํจ๊ป ํ๋ก์ฐ ์ฐจํธ ๊ธฐํ - ์ ํ์ด์ง UI/UX ๋ ์ด์์ ๋งํฌ์ ์์ - ํ์๊ฐ์ ํผ ์กฐ๊ฑด์ ๋ฐ๋ผ ์ ํจ์ฑ ๊ฒ์ฌ - ํ์๊ฐ์ ์ ์ฐจ (์ ์ ์ ์ ๋ณด ์ ๋ ฅํผ ์์ ) - ํ์๊ฐ์ ์ ํตํด POST์ํจ ๋ง์ดํ์ด์ง ์ ๋ณด GET ์ผ๋ก ๋ถ๋ฌ์ค๊ธฐ - ๋ง์ดํ์ด์ง ์์ - ์ํ ๊ด๋ฆฌ ๋ฐ ํ๋ฆ ์ ์ด - ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ ๊ตฌํ |
๋ก๊ทธ์ธ ๊ธฐ๋ฅ์ ์ด 3๊ฐ์ง์ ๊ฒฝ์ฐ๋ฅผ ์ง์ํฉ๋๋ค
- ์ด๋ฉ์ผ๋ก ๋ก๊ทธ์ธ
- ์นด์นด์ค๋ก ๋ก๊ทธ์ธ
- ๋ค์ด๋ฒ๋ก ๋ก๊ทธ์ธ
๊ฐ์ ํ ์ ๋ณด๋ฅผ ๋ฐํ์ผ๋ก ์์ ์ ์๊ฐํ ์ ์๋ ์ ๋ณด๋ฅผ ์ ๋ ฅํฉ๋๋ค.
- ํ์ฌ ์์ ์ ์ํ (ํ์/์ทจ์ค์/ํ์ ๊ฐ๋ฐ์)
- ๊ฐ๋จํ ์๊ธฐ์๊ฐ
- ์์ ์ ๋ํ๋ผ ์ ์๋ ํฌํธํด๋ฆฌ์ค
- ๊ฒฝ๋ ฅ ์ ๋ณด
๋ฑ ์ ๊ธฐ์ ํ ์ ์์ต๋๋ค
ํจ๊ปํด์ ํ์ด์ง๋ ์ฌ์ฉ์๊ฐ ๊ฒ์๊ธ ์์ฑ์์ ์์ฑํ ํด์ํ๊ทธ ๋ฑ์ ๋ฐํ์ผ๋ก ๋๋ค์ผ๋ก ๊ฒ์๊ธ์ ๊ฐ์ ธ์ฌ ์ ์๋ ๊ตฌ์กฐ์ ๋๋ค.
์์ ์ ์ ๋ณด๋ฅผ ๋ฐํ์ผ๋ก ๊ธ์ ์์ฑํ ์ ์์ผ๋ฉฐ, ์์ ์ ๊ธ์ ๋ํ ํค์๋๋ฅผ ํด์ํ๊ทธ๋ก ์ถ๊ฐํ์ฌ ๊ธ์ ๋ํ ์ ๋ณด๋ฅผ ํ๋์ ๋ณผ ์ ์์ต๋๋ค.
๊ฒ์ ๊ธฐ๋ฅ์ ํตํด ๋ชจ์ '์ด๋ฆ/ ์๊ฐ / ํ๊ทธ' ๋ฅผ ๋ฐํ์ผ๋ก ํ ๊ฒ์๊ธ์ ๋ถ๋ฌ์ฌ ์ ์์ต๋๋ค.
๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ์ ์ฅ๋ ์ ๋ณด๋ฅผ ๋ฐํ์ผ๋ก ์ต๊ทผ ๊ฒ์์ด๋ฅผ ์ ์ง์์ผ์ค๋๋ค.
ํ ํ์ด์ง๋ ๋์ ํ๋์ ํ๋์ ๋ณผ ์ ์์ต๋๋ค.
- ๋ด๊ฐ ๋ง๋ ๋ชจ์
- ๋ด๊ฐ ๊ฐ์ ํ ๋ชจ์,
- ๋ด๊ฐ ๊ฐ์ ์ ์ฒญํ ๋ชจ์
- ์ข์์ ํ ๋ชจ์
์ ์ธ๋ถํํ์ฌ ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
๋ํ ์๋ฆผ ๊ธฐ๋ฅ์ ํตํด ๋์ ๊ด๋ จ๋ ์๋ฆผ์ ๋ฐ์ ์ต๋๋ค.
- ๋ด ๊ฒ์๊ธ์ ๋ฌ๋ฆฐ ๋๊ธ์ ๋ํ ์๋ฆผ
- ๋ด ๊ฒ์๋ฌผ์ ๊ฐ์ ์ ์ฒญํ ์ฌ๋์ ๋ํ ์๋ฆผ
- ๋ด๊ฐ ๊ฐ์ ์ ์ฒญํ ๋ชจ์์ ๊ฐ์ ์ฌ๋ถ์ ๋ํ ์๋ฆผ
์ ์๋ฆผ ํ์ด์ง์์ ํ์ธํ ์ ์์ต๋๋ค.
ํ์ ๊ฐ์ ์์ ์์ฑํ๋ ์ ๋ณด๋ฅผ ์์ ํ ์ ์๋ ํ์ด์ง์ ๋๋ค.
์ถ๊ฐ์ ์ผ๋ก ์์ ์ ์ ๋ณด๋ฟ๋ง ์๋๋ผ ๋ค๋ฅธ ์ฌ๋์ ์ ๋ณด๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
์ด๋ฆ, ์ด๋ฉ์ผ, ๋น๋ฐ๋ฒํธ, ๋น๋ฐ๋ฒํธ ํ์ธ ๊น์ง ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ์ฒ ์ ํ ๋ง์น ํ ํ์๊ฐ์ ์ด ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๋๋ฉด ๋ง์ดํ์ด์ง์ ์๊ฐ ๋ ํ๋กํ์ ์ ๋ ฅํฉ๋๋ค.
๋๋ค ํฌ์คํธ ๋ถ๋ฌ์ค๊ธฐ
๊ฒ์๊ธ ์์ฑํ๊ธฐ
๊ฒ์๊ธ ์์ ํ๊ธฐ
ํจ๊ปํด์ ๊ฐ์ ํํฉ ๋ณด๊ธฐ
๋๊ธ ์ฐ๊ธฐ / ์์ ํ๊ธฐ / ์ญ์ ํ๊ธฐ / ๋ต๊ธ ์ฐ๊ธฐ
ํ ๋ฉ์ธ / ์๋ฆผ ๊ธฐ๋ฅ
๋ด๊ฐ ์์ฑํ ๊ฒ์๊ธ์ ๋ชจ์ ๋งํฌ ์ถ๊ฐํ๊ธฐ
๊ฒ์ ๊ธฐ๋ฅ ๊ตฌํ (์ต๊ทผ ๊ฒ์์ด ์ ์ฅ ํฌํจ)
ํ์๊ฐ์ ์ ์ฐจ์์ ์ ๋ ฅ๋ ํ๋กํ ๋ด์ฉ๋ฌผ๋ค์ ๋ง์ดํ์ด์ง์์ ํ์ธํด ๋ณผ ์ ์์ต๋๋ค ! ๐๐ปโโ๏ธ ์ถํ์ ์์ ์์ ๋ ๊ฐ๋ฅํฉ๋๋ค.
๋ถ์กฑํ์
์์ง ๊ฒฝํํด ๋ณด์ง ๋ชปํ ๋ถ๋ถ์ด๋ผ ์กฐ์ฌ์ค๋ฝ๊ฒ ์ ์ง๋ง, ์๋ฐ์คํฌ๋ฆฝํธ์์๋ 'Jest'์ ๊ฐ์ ํ ์คํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์กด์ฌํ๋ค๊ณ ์ ์ ์๋ค. ๋น์ฅ ์ฐ๋ฆฌ๊ฐ ์ฌ์ด๋ ํ๋ก์ ํธ๋ก ๋ง๋๋ ์๋น์ค์ ๊ท๋ชจ๊ฐ ์๋, ์ค์ ๋ก ์์ญ ์๋ฐฑ๋ง๋ช ์ด ์ฌ์ฉํ๋ ์๋น์ค๊ฐ ๋ ๊ฒฝ์ฐ ๋ด๊ฐ ๋ก์ปฌ์์ ๋ธ๋์น๋ฅผ ๋ฐ์ $ yarn build ๋ง์ผ๋ก ์ด์ ์์์ ํ์ธํ๊ณ ๋ฐฐํฌ ํ๊ฒฝ์ ๋จธ์งํ์ง๋ ์์ ๊ฒ์ด๋ค.
์ง๊ธ๊น์ง๋ ๊ฒฝํํ์ง ๋ชปํ ๋ถ๋ถ์ด๊ณ ํ์ ์ ๋ค์ด๊ฐ๊ธฐ ์ ์ ํ๊ธฐ์๋ ์์ง ๋ด๊ฐ ๋ถ์กฑํ ๋ถ๋ถ์ ๋ฉ์ฐ๊ธฐ ์ํด ์ฐ์ ์์์์๋ ๋ฐ๋ ค์๋ ์ํฉ์ด๋ค. ๋ก์ปฌ์์ ๋ฌธ์ ๊ฐ ์๋ ๋ถ๋ถ๋ค์ด ๋ฐฐํฌํ๊ฒฝ์์ ๋จธ์ง๋์ ๋ ๊ฐ์์ค๋ฝ๊ฒ ๋ชจ๋์ ๋ชป์ฐพ๋ ๋ฑ์ ๋ฌธ์ ๋ก ์ธํด ๋ฉ์ธ ๋ธ๋์น์ ๊ธํ hotfix ์ปค๋ฐ์ ๋ ๋ฆฐ ๊ฒฝํ์ด ์๋ค. ํด๋น ๋ถ๋ถ์ ํ์ ์์ ์ค๋ฌด๋ก ๋ฐฐ์ ๋ค์ ์ฌ์ด๋ ํ๋ก์ ํธ ์งํ ์์๋ ๋ถํ์ํ ์ปค๋ฐ๊ณผ ์๋ฌ๋ฅผ ์ค์ด๋ ๋ฐฉํฅ์ผ๋ก ๊ฐ๊ณ ์ถ๋ค
Next ํ๋ ์์ํฌ๋ฅผ ํตํด ์ด๊ธฐ HTML ํ์ผ์ ๋ํ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง, SEO ๋ฑ ์ ์ ์ฉํ์ง๋ง, pre-render๋ฅผ ์ํ getServerSideProps ๋ฑ์ ์ด๊ธฐ ํจ์๋ฅผ ์ค์ ํ์ง ๋ชปํ๋ค. ๋ํ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ ๋ฐํ์ผ๋ก ๋ก์ง์ด ์ ์ด๊ฐ ๋๋ฉด์ ์น API์ ๊ธฐ๋ฅ ๋ฑ์ ์ฌ์ฉํ๊ธฐ ์ํด useEffect ๋ด๋ถ์ ๋ฐฉ์ด ์ฝ๋๋ฅผ ๋ง์ด ์ ๊ฒ ๋์๋ค.
useEffect(() => {
if (typeof window !== 'undefined') {
...
}
}, [])
๋๋ถ๋ถ์ ํ์ด์ง๋ ๋ค์ด๋๋ฏน ๋ผ์ฐํ ์ ๋ฐํ์ผ๋ก ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ์ ์ฅ๋ ํ ํฐ์ ๋ฐํ์ผ๋ก HTTP ์์ฒญ์ ๋ณด๋ด๋ ๋ฐฉํฅ์ผ๋ก ๊ตฌ์ฑํ๊ธฐ ๋๋ฌธ์ ํด๋น ๋ก์ง์ด ๋ฐ๋์ ํ์ํ์๊ณ , ๋๋ถ๋ถ์ ํ์ด์ง ๋ฐ ํ์ ์ปดํฌ๋ํธ์๋ ํด๋น ๋ฐฉ์ด ์ฝ๋๊ฐ ๋ค์ด๊ฐ ๊ฒ ๊ฐ๋ค. '๋ค๋ค ์ด๋ ๊ฒ ์ง๋?' ๋ผ๊ณ ๊น์ง๋ ์๊ฐํด๋ดค์ง๋ง ์ด๊ฑธ ์ด๋ป๊ฒ ๋ฆฌํฉํ ๋งํ ์ง์ ๋ํด์๋ ์๊ฐํ์ง ์์๋ ๊ฒ ๊ฐ๋ค. ๋ค๋ฅธ ์๋์ ์ผ๋ก ๋ ๋ฐ์ด๋, ๋ ์ ์๋ ๊ฐ๋ฐ์๋ถ๋ค์ ์ฝ๋๋ฅผ ๋ง์ด ์ ํด์ ๋ถ์ํ๊ณ ์ค์ค๋ก ๋ฆฌํฉํ ๋ง ํ๊ณ ์ถ์ ๋ถ๋ถ์ด๋ค.
1,2 ๋ฅผ ์ข ํฉํ ๋ด์ฉ์ด๋ค. ๋ด ์ค์ค๋ก๋ ๋์์ง ์์ ์ฝ๋๋ผ๊ณ ์๊ฐํ ์ ์์ง๋ง, ํ๊ฐ๋ฅผ ๋ฐ์ง ์๋๋ค๋ฉด ๊ณ์ ์ฐ๋ฌผ ์ ๊ฐ๊ตฌ๋ฆฌ๋ก ์ด ์๋ฐ์ ์๋ค. ๋น์ทํ ์ค๋ ฅ์ ๊ฐ์ง ๋๋ฃ ๊ฐ๋ฐ์์ ์์ ์ ํ๊ธฐ ๋๋ฌธ์ ๋ด ์ฝ๋์ ๋ํด์ ์ ๋๋ก ์๊ฒฌ์ ์ฃผ๊ฑฐ๋ ์กฐ์ธ์ ๋ฐ์ ๊ฒฝํ์ด ์์๋ ๊ฒ ๊ฐ๋ค. ์ง๊ธ๊น์ง์ ๋ฐฐ์์ ์์ง๋ฅผ ๋ฐํ์ผ๋ก ์ฝ๋ ๋ฆฌ๋ทฐ๊ฐ ๋ํด์ง๋ค๋ฉด ์ง๊ธ๋ณด๋ค ํจ์ฌ ๋ ์ฑ์ฅํ ์ ์์ ๊ฒ์ด๋ผ ์๊ฐํ๋ค.