1๋ ๊ฐ 300์ฌ๋ช ์ ๊ฐ๋ฐ์๋ฅผ ๋ฐฐ์ถํ โ์ง์งโ ๋ถํธ์บ ํ์ ๊ณ ๋์ถ ์ปค๋ฆฌํ๋ผ ์ ๋๋ค. ์ด ๊ฐ์ ํ๋๋ก ์ฌ๋ฌ๋ถ์ ํ์ ์ฃผ๋์ด ๊ฐ๋ฐ์ ์์ค๊น์ง ์ฑ์ฅ ๊ฐ๋ฅํ๋ฉฐ, ํ๋ก ํธ์๋ ๊ธฐ์ ์คํ์ ํ์ฉ ๋ฅ๋ ฅ๊ณผ ์ง์์ ์ป๊ฒ ๋ ๊ฑฐ์์. ๋๊ตฌ๋ ์ฌํ์ , ๊ฒฝ์ ์ , ๊ต์ก์ ๋ฐฐ๊ฒฝ์ ์๊ด์์ด ์ปค๋ฆฌ์ด๋ฅผ ์์ ์ ์๋๋ก, [์ธํ๋ฐX์ฝ๋์บ ํ]๊ฐ ์ค๋นํ์ต๋๋ค :)
์ด๋ฐ ๊ฑธ
๋ฐฐ์์!
์ค๋ฌด ํฌํธํด๋ฆฌ์ค 2๊ฐ
์ต์ ๊ธฐ์ ์คํ์ ํ์ฉํ 8๊ฐ์ ํ๋ก์ ํธ ๊ตฌํ
์ ์ฒด์ ์ธ ๊ฐ๋ฐ ์ฌ์ดํด ์๋ฒฝ ์ดํด
์ค๋ฌด ์ปค๋ฎค๋์ผ์ด์ ์ญ๋ ์ฆ์ง
+ฮฑ ๋ฐฑ์๋์ ๊ธฐ๋ณธ CRUD๊น์ง ์ต๋
๋
ธ๋ฒ ์ด์ค ๋น์ ๊ณต์๋
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ์ปค๋ฆฌ์ด์ ํ! โญ
2025๋
์ ์ํ ์๋ก์ด ํ๋ก ํธ์๋ ๋ถํธ์บ ํ ๊ฐ์๊ฐ ๋ ๊ฐ๋ ฅํ๊ณ , ๋ ๊ผผ๊ผผํ ๋ด์ฉ์ผ๋ก ์๋กญ๊ฒ ์คํํ์ด์!
๋ฌด๋ ค 4๊ฐ์ ํํธ๋ก ๊ตฌ์ฑ๋ '์๋ฒฝํ ํ๋ก ํธ์๋ ์ฝ์ค'๋ก ๋น ๋ฅด๊ณ ์ค์ง์ ์ธ ํ์ต ๋ด์ฉ์ผ๋ก ์ฑ์ฅํด๋ณด์ธ์.
[์์์ ํ๋ฆฌ์บ ํ], [CSS&Javascript Master]. [Web Front-end Bootcamp], [Hybrid App Bootcamp]
์์ ์ฉ๊ธฐ์ด๋ถํฐ ํ์ด๋ธ๋ฆฌ๋์ฑ ๊ณผ์ ๊น์ง 150์๊ฐ์ด ๋๋ ๊ณ ๋์ถ ํ๋ก ํธ ๊ฐ์๋ฅผ ๊ณ์ ์ด์ด๊ฐ๊ณ ์์ต๋๋ค:)
2025๋
๋ ๋์ ์ปค๋ฆฌ์ด์ ํ๋ฅผ ํด๋ณด์ธ์๐
์ฝ๋์บ ํ๋ ์ฌ๋ฌ๋ถ์ ์ฑ์ฅ์ ์์ํฉ๋๋ค.
๐ฅ Attention!
์ด ๊ฐ์๋ ์ฝ๋ฉ ๋ถํธ์บ ํ์์ ์ค์ ์ฌ์ฉํ๋ ๊ฐ์๋ก ๋
ธ๋ฒ ์ด์ค๋ถํฐ ๋น์ ๊ณต์ ๊ทธ๋ฆฌ๊ณ ์ฃผ๋์ด ๊ฐ๋ฐ์๊น์ง ๋ชจ๋ ์๊ฐ ๊ฐ๋ฅํ ์ปค๋ฆฌํ๋ผ์ผ๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค.
โ ๊ณต๋ถ๋ ์ค๋ฌด์ฒ๋ผ! ์ค๋ฌด์ ์ ์ฉํ๋ ๋ฒ์ ์๋ ค์ฃผ๋ ์ค๋ฌด ์ค์ฌ ๊ฐ์
โ ๋น์ ๊ณต์๋ถํฐ ์ ๊ณต์๊น์ง ๋ชจ๋๊ฐ ์ดํดํ ์ ์๋ ๊ณ๋จ์ ์ปค๋ฆฌํ๋ผ
โ [React, Next.js, Graphql] ์ต์ ๊ธฐ์ ์ ์ธ์ด ํ์ต๊ณผ ํ๋ก์ ํธ ๊ตฌํ
โ ์ทจ์ ๋ฅ 92%์ ์ธ์ฆ๋ '์ง์ง' ๋ถํธ์บ ํ์ ์ปค๋ฆฌํ๋ผ์ผ๋ก ์งํ
โ ๋ ธ๋ฒ ์ด์ค๋ ๊ฐ๋ฅํ ์์ ๊ธฐ์ด๋ถํฐ ๊ฐ๋ฐ์ ์ทจ์ ์์ค๊น์ง ์ฑ์ฅ
A to Z,
์ ๋ฌธ์ ์ธ ๊ฐ์๋ฅผ ์ํด์.
๊ฐ๋ฐ..? ์๋ฌด๊ฒ๋ ๋ชจ๋ฅด์ง๋ง
์ทจ์
์์ค๊น์ง ์ฑ์ฅํ๊ณ ์ถ์ด์.
์ค๋ฌด์์ ์ฌ์ฉํ๋ ๊ธฐ์ ๊ณผ
์ง์ง ๋
ธํ์ฐ๋ฅผ ๋ฐฐ์ฐ๊ณ ์ถ์ด์.
Next.js๋ React ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ ์์ํฌ์์. React์ ๋ฌ๋ฆฌ ๊ธฐ๋ณธ์ ์ผ๋ก Next.js๋ Server-Side Rendering (SSR)์ ํ๊ธฐ ๋๋ฌธ์ ๊ฒ์์์ง ์ต์ ํ(SEO, Search Optimiziation)์ ์ข์์. ๋ํ pre-rendering์ ํตํด ๋ฏธ๋ฆฌ ๋ฐ์ดํฐ๊ฐ ๋ ๋๋ง ๋ ํ์ด์ง๋ฅผ ๊ฐ์ ธ์ฌ ์ ์๊ฒ ํด์ฃผ๋ฏ๋ก ์ฌ์ฉ์ ๊ฒฝํ ๋ฉด์์๋ ์ ๋ฆฌํ์ฃ .
์ด ์ธ์๋ ํ์ด์ง ๊ธฐ๋ฐ ๋ผ์ฐํ , ์ด๋ฏธ์ง ์ต์ ํ, built-in-css๋ฑ์ ์ ๊ณตํด์ ํ๋ก์ ํธ ์ฑ๋ฅ์ ํฅ์ํด ์ฃผ๊ณ ๊ฐ๋ฐ์๋ค์ด ๊ฐ๋ฐํ๊ธฐ ํธํ ํ๊ฒฝ์ ์ ๊ณตํ๋, ํจ์จ์ฑ ์๊ณ ์ฑ๋ฅ ๋์ ๊ฐ๋ฐ์ ํ ์ ์๋ต๋๋ค :)
"์ฝ๋ฉ์ '์ฝ'์๋ ๋ชจ๋ฅด๋ ๋.. ๊ฐ๋ฐ์๋ก ์ทจ์
ํ ์ ์์๊น?" ๊ทธ๋ฐ ๊ฑฑ์ ์ ๋น์ฅ ๋ฃ์ด๋์ธ์. ์ด ๊ฐ์์์๋ ์ฉ์ด๋ณด๋ ํ์
๊ฐ๋ฐ์ ์์ค์ผ๋ก ์ฑ์ฅํ ์ ์๋๋ก ํํํ ๊ธฐ์ด ๊ฐ์๋ถํฐ ์์ํ๋๊น์!
๐งฉ ๊ธฐ์ด๋ฟ์๊ธฐ step01.
์ฝ๋ฉ์ด ๋ญ์ผ? ํ๋ก๊ทธ๋จ ์ค์น๋ถํฐ ๊ธฐ์ด์๊ธฐ
์นยท์ฑ ๊ฐ๋ฐ์ ๊ธฐ์ด ์ค์ ๊ธฐ์ด, HTML ยท CSS ยท Javascript์ ๊ธฐ๋ณธ์ ์ธ ๋ฌธ๋ฒ๊ณผ ํ์ฉ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ๊ณ , ๋ฐฐ์ด ๋ด์ฉ์ ํ ๋๋ก ํ์๊ฐ์ ๊ณผ ๋ฏธ๋ํํผ๋ฅผ ๊ตฌํํ ๊ฑฐ์์.
๐งฉ ๊ธฐ์ด๋ฟ์๊ธฐ step02.
60๊ฐ ์ด์์ ์ต์ ํ๋กํผํฐ๋ฅผ ํตํ CSS!
์ค๋ ๋ฐฐ์ด ๋ด์ฉ์ ์ค๋ ๋ณต์ตํ์! ๊ฐ์ ์๊ฐ ํ ์ถฉ๋ถํ ์ฐ์ต์ ํตํด ์์ ํ ๋ด ๊ฒ์ผ๋ก ํก์ํ ์ ์๊ฒ ๋์์ค ๊ฑฐ์์.
๐งฉ ๊ธฐ์ด๋ฟ์๊ธฐ step03.
Javascript๋ก ์นํ์ด์ง์ ๊ธฐ๋ฅ์ ๋ ํ์๋กญ๊ฒ.
ํจ๊ป ์ฌ์ฉํ๋ ๋๊ตฌ๋ค๊ณผ Javascript๊ฐ ๋์ํ๋ ์๋ฆฌ, ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฒ์ ์์ฃผ๋ก ํ์ตํ๋ฉฐ d-day counter์ to-do list๋ฅผ ๊ตฌํํ๋ฉฐ ๋ฐฐ์ด ๋ด์ฉ์ ์์ ํ ๋ด ๊ฒ์ผ๋ก ๋ง๋๋ ์๊ฐ์ด์์.
#01. React ๊ธฐ์ด
React์ ๊ธฐ์ด๋ถํฐ ์์ํด๋ณผ๊น์? ์ฐ์ , ๊ฐ์ข ํจํค์ง๋ฅผ ์ค์นํด์. ๊ทธ๋ฆฌ๊ณ Javascript ๋ฐํ์ ํ๊ฒฝ์ธ Node.js๋ฅผ ์ดํดํ๋ฉฐ React๋ก ํ๋ก์ ํธ๋ฅผ ์์ฑํฉ๋๋ค.
#02. ๋ฐ์ดํฐ ํต์
Rest-API์ GraphQL์ ์ฐจ์ด์ ๋ํด ์ดํดํ๊ณ , Apollo Client๋ฅผ ํตํด ๋ฐฑ์๋์์ ํต์ ๋ฐฉ๋ฒ์ ์ต๋ํด์.
#03. ๋ผ์ฐํ ๋ฐ ๋ฆฌ๋ ๋๋ง
ํ์ด์ง ์ด๋ ๋ฐฉ์์ธ Router์ Dynamic Routing์ ์ฐจ์ด๋ฅผ ์ดํดํ๊ณ ํ์ฉํ ์ ์์ด์.
#04. ํด๋ ๊ตฌ์กฐยทpropsยท์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ์ฑ
Container/Presenter ํจํด์ ๋ํด ์ดํดํ๊ณ , ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉํ๋ ๋ฒ์ ํตํด ํจ์จ์ ๋์ฌ์ค๋๋ค.
#05. ํ์ ์คํฌ๋ฆฝํธ
ํ์ ์คํฌ๋ฆฝํธ์ ์ฌ๋ฌ ๊ฐ์ง ํ์ ์ ๋ํด ์ดํดํ๊ณ ๋ด ํฌํธํด๋ฆฌ์ค์ ์ ์ฉํด๋ด ๋๋ค.
#06. ํ๋ ์์ํฌ / ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ ์ด์์
๊ตฌ์กฐ
์นํ์ด์ง๋ฅผ ๊พธ๋ฉฐ์ฃผ๋ ๋ค์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ. ๊ทธ๊ฒ๋ค์ ํ์ฉ๋ฒ์ ๋ฐฐ์ฐ๊ณ , ์ฌ์ฉ์ฑ์ ์ํ ํ์ด์ง๋ค์ด์ ๊ณผ ๋ฌดํ์คํฌ๋กค์ ๊ตฌํํด์.
#07. ์ปดํฌ๋ํธ์ ์๋ช ์ฃผ๊ธฐ
ํด๋์ค ์ปดํฌ๋ํธ์ ์๋ช ์ฃผ๊ธฐ์ ํจ์ํ ์ปดํฌ๋ํธ์ ์๋ช ์ฃผ๊ธฐ ์ฐจ์ด๋ฅผ ์ดํดํด๋ณด๊ณ , ์ด๋ฅผ ๋ฐํ์ผ๋ก ํ์ฉํ๋ ๋ฒ์ ํ์ตํฉ๋๋ค.
#08. ๋ฐฑ์๋ ๊ตฌ์กฐ ๋ฐ ํ์ด์ด๋ฒ ์ด์ค
API๋ฅผ ์ง์ ๋ง๋ค์ด ๋ณด๊ณ , ๋ฐฑ์๋์ ๊ธฐ์ด๋ฅผ ์ดํดํ ์ ์์ด์. ๋ํ BAAS ์๋น์ค์ธ ํ์ด์ด๋ฒ ์ด์ค๋ฅผ ํ์ฉํด๋ณผ ๊ฑฐ์์. ๋ฐฑ์๋๋ฅผ ์ดํดํ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ผ๋! ๋๋ฌด ๋งค๋ ฅ์ ์ด์ง ์๋์?
#09. ์ด๋ฏธ์ง ์ ๋ก๋
'ํํ์ด์ง์ ์์ ์ด๋ฏธ์ง๋ฅผ ์ฌ๋ฆฌ๊ณ ์ถ์ด์!' ์ด๋ฏธ์ง ์ ๋ก๋์ ๋ํ ํ๋ก์ธ์ค๋ฅผ ์ดํดํ๊ณ ๊ฒ์ฆ์ ํตํด ์ง์ ์ ๋ก๋ ํ ์ ์์ด์.
#10. ๊ฒ์
์นํ์ด์ง์ ๊ฒ์๊ธฐ๋ฅ์ ๋น ์ง ์ ์์ฃ . ๊ฒ์ ํ๋ก์ธ์ค๋ฅผ ์ดํดํ๊ณ ๋๋ฐ์ด์ฑ์ ์ ์ฉํด ๋ด ์นํ์ด์ง๋ฅผ ํ๊ป ๊ณ ๋ํํฉ๋๋ค.
#11. ๋ก๊ทธ์ธ๊ณผ ๊ถํ ๋ถ๊ธฐ
JWT ํ ํฐ ๋ฐฉ์์ ๋ก๊ทธ์ธ ํ๋ก์ธ์ค๋ฅผ ์ดํดํด์. ๋ํ ๋ก๊ทธ์ธ ์ ๋ฌด๋ก ๊ถํ ๋ถ๊ธฐ๋ฅผ ์ค์ ํ๊ณ Recoil์ ํ์ฉํด Globalstate๋ฅผ ๊ด๋ฆฌํ ์ ์์ด์.
#12. ํผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
React-Hook-Form๊ณผ yup์ ํ์ฉํด์ ๊ธฐ์กด ์ฝ๋๋ค์ ๋ฆฌํฉํฐ๋งํด์ ๋ ํจ์จ์ ์ผ๋ก ์๋น์ค๋ฅผ ๊ฐ์ ํ ์ ์์ด์.
#13. custom hooks
๊ตฌ์กฐ ๋ถํด ํ ๋น๊ณผ ํ์ ์คํฌ๋ฆฝํธ์ ์ ๋ค๋ฆญ ํ์ ์ ํ์ฉํด์ ์ปค์คํ ํ ์ ๋ง๋ค ์ ์์ด์.
#14. ์นด์นด์ค ์ง๋ ๋ฐ ์น์๋ํฐ
SSR๊ณผ CSR์ ์์๋์? ์ด ์ฐจ์ด์ ๋ํด ์ดํดํด ๋ณด๊ณ , ์นด์นด์ค ์ง๋์ ์น ์๋ํฐ๋ฅผ ์ฌ์ฉํ๋ ๋ฒ์ ๋ฐฐ์์.
#15. ๊ฒฐ์ ๋ฐ ์ด๋ฒคํธ ๋ฃจํ
E-commerce platform์ ํต์ฌ! ๊ฒฐ์ ํ๋ก์ธ์ค๋ฅผ ์ดํดํ๊ณ ๊ตฌํํด๋ด์. ๋ํ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ตฌ๋ ์๋ฆฌ์ ๋ํด ๋ ์ ํํ๊ฒ ์์๊ฐ ๊ฑฐ์์.
#16. refresh Token
refresh Token์ ์ฌ์ฉํด์ ์ค๋ฌด์์๋ ์ฌ์ฉํ ์ ์๋ ๋ก๊ทธ์ธ ํ๋ก์ธ์ค๋ฅผ ํ์ตํด์.
#17. ์ฑ๋ฅ ์ต์ ํ
useMemo์ useCallback, ์ด๋ฏธ์ง ์์ URL์ ํ์ฉํด์ ๊ธฐ์กด์ ์ฝ๋๋ค์ ๋ง์น ์ค๋ฌด์์์ฒ๋ผ ๋ฆฌํฉํ ๋งํ ์ ์์ด์.
* ๋ณ๋์ ์์ ์ฉ API๋ฅผ ์ ๊ณตํฉ๋๋ค.
#18. ํ ์คํธ ์ฝ๋ ๋ฐ ๋ฐฐํฌ
jest์ cypress๋ฅผ ํ์ฉํด์ ํ ์คํธ ์ฝ๋๋ฅผ ๋ง๋ค์ด ๋ณผ ๊ฑฐ์์. ์ด๋ฅผ ํตํด ๋จ์ ํ ์คํธ์ ํตํฉ ํ ์คํธ๋ฅผ ์งํํด์ ๋ด ์ฝ๋๋ฅผ ํ ์คํธํ๋ ์๊ฐ์ด์์.
โ๐ป ์ฌ์ด๋ฐ์ ์์ ๊ฒ์ํ
๋ธ๋ก๊ทธ, ์ปค๋ฎค๋ํฐ ๋ฑ ์น์ ์ด๋์์๋ ๋น ์ง์ง ์๋ ๊ฒ์ํ์ ์ง์ ๊ตฌํํ ์ ์์ด์. ์ฝ๋ฉ์ ์ด๋ก ๋ง ์๊ณ ํ๋ค๋ ๊ฒ์ ๋ถ๊ฐ๋ฅํด์! ํ๋ก์ ํธ ์ค์ต์ ํตํด ํ์ด์ง๋ค์ด์ , ๋ฌดํ ์คํฌ๋กค ๋ฑ ์ฌ๋ฌ ๊ธฐ๋ฅ์ผ๋ก ๋๋ง์ ์ฝ๋๋ฅผ ์ฑ์๋๊ฐ์. ๊ฒ๋ค๊ฐ ๋ด ๊ฐ์ฑ์ ๋ง๋ UI๋ก ๊พธ๋ฐ ์ ์์ผ๋ ํฅ๋ฏธ๋ฟ๋ง ์๋๋ผ ์ค๋ ฅ๋ ์ฌ๋ผ๊ฐ๊ฒ ์ฃ ?
โ๐ป ๊ฒ์ํ์ผ๋ก ๋ง๋๋ ์ด์ปค๋จธ์ค ํ๋ซํผ
"ํน์.. ๋น๊ทผ์ด์ธ์?๐ฅ" ์ฟ ํก, ๋น๊ทผ๋ง์ผ๊ณผ ๊ฐ์ E-commerce Platform์ด ์ด๋ป๊ฒ ๋ง๋ค์ด์ง๋์ง ์์๋์? ํ์๊ฐ์ , ๋ก๊ทธ์ธ, ๊ฒฐ์ , ์ปค๋ฎค๋ํฐ ๋ฑ ๋ง์ ๊ธฐ๋ฅ์ ๋ด๊ณ ์๋ E-commerce ์น์ฌ์ดํธ๋ฅผ ๋ด ์์ผ๋ก ๊ตฌํํ ์ ์์ด์. ์์ง์ ๋ง๋งํ๊ฒ ์ง๋ง ์ด ๊ฐ์๋ฅผ ์๊ฐํ๊ณ ๋๋ฉด ๋ฉ์ง ํฌํธํด๋ฆฌ์ค๊ฐ ๋ง๋ค์ด์ ธ ์์ ๊ฑฐ์์.
๐ฏ ์ด ๊ฐ์๋ก ์ป๋ ํฌํธํด๋ฆฌ์ค ์
๋๋ค.
ยท 01. ์์ ๊ฒ์ํ - UIยท๋ฆฌ์คํธ์
ยทํ์ด์ง ๋ค์ด์
ยท๊ธ ์์ ๋ฐ ์ญ์ ๋ฑ ์น์ ๊ฐ์ฅ ํต์ฌ์ด ๋๋ ๊ธฐ๋ฅ๋ค์ ๊ตฌํํ๊ณ ์ด๋ฅผ ๋ฐํ์ผ๋ก ํ๋์ ํฌํธํด๋ฆฌ์ค๋ฅผ ์์ฑํฉ๋๋ค.
ยท 02. ์ค๊ณ ๋ง์ผ - ์ฒซ๋ฒ์งธ ํฌํธํด๋ฆฌ์ค๋ก ์ ์ํ ๊ฒ์ํ์ ์ค๊ณ ๋ง์ผ์ผ๋ก ๊ณ ๋ํ ํ๋ ํฌํธํด๋ฆฌ์ค ์
๋๋ค. ๋ก๊ทธ์ธยท๊ถํ๋ถ๊ธฐยท๊ฒฐ์ ยท์ด๋ฏธ์ง ์ฒ๋ฆฌ ๋ฑ์ ๊ธฐ๋ฅ์ ๊ตฌํํฉ๋๋ค.
์ฌ๋ฌ ์ธ์ด๋ฅผ ํ ๋ฒ์ ์ดํดํ๋ ๊ฒ์ ์ด๋ ค์ด ์ผ์ด์ฃ . ์ด ๊ฐ์์์๋ ํ๋ก์ ํธ๋ฅผ ํตํด Javascript, Typescript, React, Next.js, Graphql ๋ฑ ๋ค์ํ ์คํ์ ์ง์ ํ์ฉํ๋ฉฐ ๋๋ง์ ์นํ์ด์ง๋ฅผ ์์ฑํด์. ํ๋์ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ ์ํด ์ ๊ธฐ์ ์ผ๋ก ์ฐ๊ฒฐ๋ ์ธ์ด๋ค์ ์ฌ์ฉ ๋ฐฉ๋ฒ์ ์ต๋ํ๋ฉฐ, ์์ฐ์ค๋ฝ๊ฒ ์ดํดํ๊ฒ ๋ ๊ฑฐ์์.
์ง์ง ์ค๋ฌด์์๋ ๋ค์ํ ์ธ์ด๋ฅผ ์ ์ ํ ์ฌ์ฉํ๋ฉฐ ์ต๊ณ ์ ํจ์จ์ ๋ผ ์ ์์ด์ผ ํ๋๊น์!
* version : ์๊ฐ ์ ์ฌ์ฉํ๋ ๋ฒ์ ์
๋๋ค. (ํ์์ ์ฐธ๊ณ ํด์ฃผ์ธ์!)
- next 12.1.0 - react": 17.0.2 - react-dom": 17.0.2 - typescript": ^4.8.4 - @types/node": 17.0.2 - @types/react": 17.0.2 - @apollo/client": ^3.6.9 - @emotion/styled": ^11.10.0 - @material-ui/core": 4.12.4 - antd": ^4.22.8 - eslint": ^8.0.1 - prettier": 2.7.1
'Version'๊ณผ ํด๋น ๊ธฐ์ ์คํ์ ๋ํ ์ดํด๊ฐ ์์ด๋ ๊ด์ฐฎ์์. ๊ฐ์์์ ๊ผผ๊ผผํ๊ณ ์น์ ํ๊ฒ ์ค๋ช ํด ๋๋ฆด๊ฒ์:)
๐ ์น์
๋ณ ํ์ต์๋ฃ
๊ฐ์๋ฅผ ์๊ฐํ๋ฉด์ ๋ด์ฉ์ ์ดํด๋ฅผ ๋์์ฃผ๋ ์๋ฃ์์. ์ค์ ๋ถํธ์บ ํ ์๊ฐ์๋ ์ฌ์ฉํ๋ ์๋ฃ์ธ ๋งํผ ์ ํ์ฉํ๋ค๋ฉด, ๋์น ๋ถ๋ถ์ด ์๋๋ผ๋ ํฐ ๋์์ด ๋ ๊ฑฐ์์.
๐ ์น์ ๋ณ ๊ณผ์ ์๋ฃ
์ค๋ ๋ฐฐ์ด ๋ด์ฉ์ ์ค๋ ๋ณต์ตํ์! ๊ฐ์ ์๊ฐ ํ ์ถฉ๋ถํ ์ฐ์ต์ ํตํด ์์ ํ ๋ด ๊ฒ์ผ๋ก ํก์ํ ์ ์๊ฒ ๋์์ค ๊ฑฐ์์.
๐ ์น์
๋ณ ํฌํธํด๋ฆฌ์ค
๊ฐ ์น์ ์์ ๋ฐฐ์ด ๊ธฐ๋ฅ์ ํ์ฉํด ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋ค ๋ ์ฐธ๊ณ ํ ์ ์๋ ์๋ฃ์์. ์ด ๊ฐ์๋ก ๋ด ํฌํธํด๋ฆฌ์ค์ ๋ ๊ฐ์ ํ๋ก์ ํธ๋ฅผ ์ถ๊ฐํด๋ณด์ธ์!
๐จ Artipul
๋ฏธ๋์์ ์ํ์ ์ฝ๊ฒ ๊ตฌ๋งคํ ์ ์๋ ์๋น์ค์์. ๋ฉ์ธํ์ด์ง๋ฟ๋ง ์๋๋ผ ๊ฒฐ์ ์คํ API๋ก ํฌ์ธํธ ์ถฉ์ , ๊ฒฐ์ ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํ๊ณ , Socket.io๋ฅผ ์ฌ์ฉํด ์ค์๊ฐ ์
์ฐฐ ๊ธฐ๋ฅ๊น์ง ๊ตฌํํ์ด์.
๐ Flog
์ฌํ ์ผ์ ยท ๊ฐ๊ณ๋ถ ยท ์ฌํ ๋ก๊ทธ๋ก ๊ตฌ์ฑ๋ ์ฌํ ๊ฐ์ด๋๋ถ ์๋น์ค์์. drag&drop ๊ธฐ๋ฅ์ผ๋ก ์ฌํ ์ผ์ ์ ์ง๋ฉด ์ค์๊ฐ์ผ๋ก DB์ ์ ์ฅ๋์ด ์ฌ์ฉ์ฑ์ ๋์์ด์. ๊ฒ๋ค๊ฐ ๋ค๋ฅธ ์ ์ ์ ์ผ์ ์ ๊ณต์ ํ ์ ์๋๋ก ๊ตฌํํ์ด์!
๐๐ปโโ๏ธ ์ค๋ฌด์ ๋ฐ๋ก ํ์ฉํ ์ ์๋ ํฌํธํด๋ฆฌ์ค 2๊ฐ
๐จ๐ปโ๐ ์ค์ค๋ก ์ฑ์ฅํ ์ ์๋ ํผํผํ ๊ฐ๋ฐ ์ง์ ๊ตฌ์ถ
๐๐ปโโ๏ธ ์ค๋ฌด์์ ๋ถ๋๋ฌ์ด ์ปค๋ฎค๋์ผ์ด์ ์ ํ๋ ์ฃผ๋์ด ๊ฐ๋ฐ์
๐จ๐ปโ๐ป ํ ๋ถ์์ ํ์ ๋ฅ๋ ฅ์ด ๋ฐ์ด๋ ํ๋ฐํธ์๋ ๊ฐ๋ฐ์
๐๐ปโโ๏ธ ํผ์์๋ ํ ์ ์๋ E-commerce Platform ๊ฐ๋ฐ
์ค์ต์ฉ API๋ฅผ ์ด์ฉํด ํ๋ก ํธ์๋ ์ต์ ๊ธฐ์ ์คํ๊ณผ ๊ฐ๋ฐ ์ฌ์ดํด์ ์ดํดํ๋ค๋ฉด, Node.js์ Nest๋ฅผ ์ค์ฌ์ผ๋ก ๋ฐฑ์๋๊น์ง ๋ ๊น๊ฒ ๋ฐฐ์๋ณด์ธ์. ํ์ํ API๋ฅผ ์ง์ ๋ง๋ค๊ณ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃจ๋ ๋ฒ๊ณผ ๊ฒ์, ๊ฒฐ์ , ๋ฐฐํฌ ๋ฑ ๋ฐฑ์๋์ ๋ชจ๋ ๊ฒ์ ์๋ ค๋๋ ค์. ๋ฐฑ์๋ ์ฝ์ค๊น์ง ์์ฃผํ๊ณ ํ์คํ ๊ฐ๋ฐ์๋ก ๋ ๋์ด ์ปค๋ฆฌ์ด ์ ํํ์ธ์๐
๐ก ์ปดํจํฐ ์ฌ์์ ํ์ธํด์ฃผ์ธ์.
ยท Mac OS๋ ์ฌ์ ๋ฌด๊ดํฉ๋๋ค.
ยท Window OS๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ, git-bash ์ค์น๊ฐ ํ์ํฉ๋๋ค.
- ์์ ์๋ฃ > ํ๊ฒฝ ์ธํ ์ ์ฐธ๊ณ ํด์ฃผ์ธ์.
- Intel Core i5 9์ธ๋ ์ด์ / AMD RYZEN 5 2์ธ๋ ์ด์
- RAM 16GB ์ด์ ์ถ์ฒ
๐ก ์ผ๊ณผํ๋ฅผ ๋ง๋ค์ด ๊ท์น์ ์ผ๋ก ๊พธ์คํ ํ์ตํ์๊ธธ ๊ถ์ฅํด์.
๐ก ํ์ต ์๋ฃ๋ฅผ ๋ฐ๊ธฐ ์ํด ํ์
ํด โ๋
ธ์
โ ๊ณ์ ์ ๋ง๋ค์ด์ฃผ์ธ์.
๐ก ์๊ฐ์ ํ์ํ ํ์ต์๋ฃ๋ ๋
ธ์
(๋งํฌ)์ผ๋ก ์ ๊ณต๋ฉ๋๋ค.
โป ํ์ต ์๋ฃ์ ์ ์๊ถ์ ์ฝ๋์บ ํ์๊ฒ ์์ต๋๋ค. ๋ฌด๋จ ๋์ฉ ยท ๋ฐฐํฌ ยท ๋ณต์ ๋ฅผ ๊ธ์งํฉ๋๋ค.
Q. ์๋ฌด๋ฐ ์ง์ ์์ด ์๊ฐํด๋ ๋ ๊น์?
๋ค. ์ฝ๋ฉ์ '์ฝ'์๋ ๋ชฐ๋ผ๋ ๊ด์ฐฎ์์. ๋ ๊น๊ณ ๋๊ฒ ์ดํดํ ์ ์๋๋ก HTMLยทCSSยทJavascript์ ์ฉ๊ธฐ์ด ๊ณผ์ ์ด ํฌํจ๋์ด ์์ด์.
Q. ๋ณ๋์ ๊ต์ฌ๊ฐ ์๋์?
๋
ธ์
์ผ๋ก ์ ๊ณตํด๋๋ฆฌ๋ [๊ฐ์ ์๋ฃ]๋ฅผ ํ์ฉํด์ฃผ์ธ์! ๋ณธ ์๋ฃ๋ ์ค์ ๋ถํธ์บ ํ์์ ์ฌ์ฉํ๋ ๊ทธ๋๋ก์ ์๋ฃ์์. ๋ฌด๋จ ๋์ฉยท๋ฐฐํฌยท๋ณต์ ๋ฅผ ๊ธ์งํฉ๋๋ค.
Q. ๊ธฐ์ด๊ฐ์ (์์์ ํ๋ฆฌ์บ ํ, CSS, Javascript)์ ์์
์๋ฃ ๋ฆฌ์คํธ๊ฐ ํท๊ฐ๋ ค์.
Q. ์๊ฐ ์ค ๊ถ๊ธํ ์ ์ด ์๊ฒผ์ด์.
์ปค๋ฎค๋ํฐ์ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์ฝ๋์บ ํ ํ์ด ๋น ๋ฅธ ์์ผ ๋ด์ ์ ์์ํ ๋ต๋ณ์ ๋ฌ์๋๋ฆด๊ฒ์ :)
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
์ ๋ฌธ ์ปค๋ฆฌํ๋ผ์ผ๋ก ์ ๋๋ก ์ฑ์ฅํ๊ณ ์ถ์ ๋๊ตฌ๋
๊ตญ๋น ๋๋ ๋ค๋ฅธ ๊ฐ์์ ๋ถ์กฑํจ์ ๋๋ผ์ ๋ถ
์ต์ ๊ธฐ์ ์คํ์ผ๋ก ๊ฐ๋ฐ ์ฌ์ดํด์ ์์ฑํ๊ณ ์ถ์ ์ฃผ๋์ด ๊ฐ๋ฐ์
ํธ๋ ๋์ ๋ง๋ ํฌํธํด๋ฆฌ์ค๋ก ์ทจ์ ํ๊ณ ์ถ์ ์ทจ์ค์
์ฒด๊ณ์ ์ผ๋ก ์ฝ๋ฉ ๊ณต๋ถ๋ฅผ ํ๊ณ ์ถ์ ๋ํ์
์ ์ ์ง์,
ํ์ํ ๊น์?
์ฝ๋ฉ์ ๋ํ ์ด์ ๊ณผ ์์ง๐ช๐ป
12,774
๋ช
์๊ฐ์
338
๊ฐ
์๊ฐํ
158
๊ฐ
๋ต๋ณ
4.8
์
๊ฐ์ ํ์
9
๊ฐ
๊ฐ์
"Try anything, Try everything!"
์ฝ๋์บ ํ๋ ์ ๋ฅํ ๊ฐ๋ฐ์๋ฅผ ์์ฑํ๋ฉฐ ๊ฐ๋ฐ์ ๋ฏธ๋๋ฅผ ๋ฐ๊พธ๊ณ ์ ํ๋ ๋ชฉํ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค. ์ฌํ์ , ๊ฒฝ์ ์ , ๊ต์ก์ ๋ฐฐ๊ฒฝ์ ์๊ด์์ด ๋๊ตฌ์๊ฒ๋ ์ปค๋ฆฌ์ด ์ ํ์ ๊ธฐํ๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด ์ธํ๋ฐ์ ๋ํ๋ฌ๋ต๋๋ค. ์ฝ์บ ๊ณผ ํจ๊ป ์ปค๋ฆฌ์ด ์ ํ์ ๋์ ํ์ธ์!
์ ์ฒด
341๊ฐ โ (128์๊ฐ 6๋ถ)
๊ฐ์์๊ฐ
04:56
ํ๊ฒฝ์ค์
09:25
โถ HTML์ ํต์ฌ
42:26
โถ CSS ๋ฐฐ์ฐ๊ธฐ
25:29
โถ CSS ์ ๋ ฌ
20:44
โถ ๋ณ์์ ์์
17:08
โถ ๋ฐฐ์ด
24:31
โถ ๊ฐ์ฒด
20:41
โถ ์กฐ๊ฑด๋ฌธ
19:54
โถ ๋ฐ๋ณต๋ฌธ
22:19
โถ ์ํ ๊ฐ์ฒด
06:44
โถ DOM
10:42
โถ ํจ์
09:14
โถ ๋ด์ฅํจ์
24:09
โถ final ๊ณผ์
07:56
โถ Git/Github
22:02
โถ CSS๋?
03:38
โถ ์ ํ์1
05:18
โถ ๋ฐ์ค ๋ชจ๋ธ
24:12
โถ inline vs block
12:26
โถ ์ค์ต1
48:17
โถ ์ ํ์2
07:22
โถ ์ค์ต2
17:14
โถ ์ ํ์3
33:22
โถ ์ค์ต3
08:35
โถ css ์์
11:23
โถ ์นํฐํธ
15:29
โถ ํฐํธ
26:31
โถ ๋จ์
06:59
โถ ์บ์ค์ผ์ด๋ฉ
16:33
โถ ๋ฐฐ๊ฒฝ
17:39
โถ ์์
04:28
โถ ๋จ์2
03:00
โถ ๋จ์ ์ฌํ
31:15
โถ position
24:45
โถ transition
10:35
โถ transform
17:57
โถ keyframes
02:34
โถ animation
09:29
โถ animation ์ค์ต
42:20
โถ grid ์์ฑ
18:39
โถ ๋ฏธ๋์ด ์ฟผ๋ฆฌ
13:10
โถ breakPoint
12:06
โถ ๋ฐ์ํ ์ค์ต
01:00:30
์ โฉ79,200
5๊ฐ์ ํ ๋ถ ์
โฉ396,000