๐ FE๊ฐ๋ฐ์ 7Code ์ทจ์ ํ๊ฐ๋ก ์คํฐ๋/๋ฉํ ๋ง ๋ชจ์ง - 2๊ธฐ
๋ํ๊ต๋ ๊ฐ๋ฐ์ ์ทจ์ ์ ์ค๋นํ๋ฉด์ ๋ง์ ์ํ ์ฐฉ์ค๋ฅผ ๊ฒช์์ต๋๋ค.
๊ทธ๋์ ์ ์ฒ๋ผ ๊ณ ์ํ๋ ์ฌ๋์ด ์์์ผ๋ฉด ์ข๊ฒ ๋ค๋ผ๋ ๋ง์์ผ๋ก FE๊ฐ๋ฐ์ 7Code ์ทจ์ ํ๊ฐ๋ก ๊ฐ์ ๋ง๋ค๊ณ ์ถ์๊น์ง ํ์์ด์. ๊ทผ๋ฐ ์ทจ์ ๋ก๋๋งต ๊ฐ์๋ก ์ค์ ์ทจ์ ์ ๋์์ด ๋ ๊น? ๋ผ๋ ์๋ฌธ์ด ๋ค์์ต๋๋ค.
- ๐ญ ๊ทธ๋์ ๋ฑ 15๋ช ๋ชจ์งํด์ ์คํฐ๋/๋ฉํ ๋ง์ ์งํํด๋ณด๋ ค๊ณ ํฉ๋๋ค.
- ํ๋ก ํธ ๊ฐ๋ฐ์๋ฅผ ์ง๋งํ๋ ์๋น๊ฐ๋ฐ์๋ถ๋ค๊ณผ ๊ธด๋ฐํ๊ฒ win-win ํด๋ณด๋ฉด ์ข๊ฒ ์ด์.
> โ ์ฐธ์ฌํ๊ธฐ : https://abit.ly/o5ighr
2๊ธฐ๋ ์ถ๊ฐ๋ก Next.js ์ ํ๋ธ ๋ฎค์ง ํด๋ก ์ฑ๋ฆฐ์ง๋ฅผ ์ ํ์ ์ผ๋ก ์งํ ์์ ์ด์์.
๋ฌธ์ ์ฑ๋์ ์ธ์ ๋ ์ด๋ ค์์ผ๋ [์นด์นด์คํก 1:1๋ฌธ์] ๋ฅผ ์ด์ฉํด์ฃผ์ธ์.
- https://open.kakao.com/o/sfyIVQ5f
7Code FE ๊ฐ๋ฐ์ ์ทจ์ ์คํฐ๋/๋ฉํ ๋ง + Next.js ์ ํ๋ธ ๋ฎค์ง ํด๋ก ์ฑ๋ฆฐ์ง (2๊ธฐ)
๊ฐ๋ฐ์ ์ทจ์ ์ ๋ํ ๋ถ์๊ฐ์ด ์๋์?
์ฌํ์ & ์ทจ์ค์์ ๊ณ ๋ฏผ ๐ฅฒ
โ ์ทจ์ ์ค๋น ๊ธฐ๊ฐ๋์ ํฌํธํด๋ฆฌ์ค์ ์ฝ๋ฉํ ์คํธ์ ๊ณต๋ถ ๋น์ค ์กฐ์ ์ ์ด๋ ค์์ด ์๋ค.
โ ์ฝ๋ฉํ ์คํธ ๊ฐ์๋ฅผ ๊ณ ๋ฅด๋๋ฐ ์ด๋ ค์์ด ์๋ค.
โ ๋ํ๊ต 2,3,4 ํ๋ ๋ ๋ฌด์์ ํด์ผํ๋์ง ์ ๋ชจ๋ฅธ๋ค.
โ ๊ฐ์ฒด์งํฅ๊ณผ ๊ฐ์ ์ด๋ก ๊ณต๋ถ, CS๋ฅผ ์ผ๋ง๋ ๊น๊ฒ ํด์ผํ๋์ง ๊ณ ๋ฏผํ๋ค.
๋ฉํ ๋ง ํ๋์ผ๋ก ๋ง๋ ์ทจ์ค์์ ๊ณ ๋ฏผ ๐ฅฒ
โ ์ฌ๋ฐ๋ฅธ ๋ฐฉํฅ์ผ๋ก ์ทจ์ ์ ํ๊ณ ์๋์ง, ํจ๊ณผ์ ์ธ ์ทจ์ค ์ ๋ต์ ์ธ์ ๋์ง ?
โ ๊ธฐ์ ์ญ๋ ๊ฐํ์ ์ํด์ ๋ฌด์์ ํด์ผ ํ๋์ง ?
โ FE ๊ณต๋ถ๋ฅผ ์ ํ๊ณ ์๋์ง ํผ๋๋ฐฑ์ ๋ฐ๊ณ ์ถ๋ค.
โ ์ด๋์ ๋ ๋ ๋ฒจ์ ๊ธฐ์ ์ ๊ตฌํ์ ํด์ผ ์ทจ์ ์ ์ ๋ฆฌํ์ง ?
์ทจ์ , ์ฌ๋ฐ๋ฅธ ๋ฃจํธ์ค์ ์ด ์ค์ํฉ๋๋ค.
๋ฉํ ๋ง์ผ๋ก ์ทจ์ ๊ธฐ๊ฐ๋์ ๋ฐ์ํ๋ ์ํ์ฐฉ์ค๋ฅผ ์ค์ด๋๊ฒ์ด ๋ชฉํ์ ๋๋ค.
์ทจ์ ๊ธฐ๊ฐ์ ์๊ฐ๋ณด๋ค ๊ธธ์ด์ง ์ ์์ด์. ์ทจ์ ์ ๋ฌผ๋ก ๊ถ๊ทน์ ์ผ๋ก ์ฑ์ฅํ ์ ์๋๋ก ๋๊ณ ์ถ์ด์.
๐ ์ทจ์ ๊ธฐ๊ฐ ์ํ์ฐฉ์ค 1๋ ๋จ์ถ : ์ฐ 6000๋ง์์ ๊ธฐํ ๋น์ฉ ( 1๋ ๋น ๋ฅธ ์ทจ์ )
๐ ์ฑ์ฅ๊ฐ๋ฅํ ๋์ธ ํ๋ ํฉ๊ฒฉ : ์ฐ 1500๋ง์ ๊ธฐํ ๋น์ฉ ( ์ฅํ๊ธ ๋ฐ ๊ต์ก๋น์ 1000, ๋ฉํ ๋ง ๋น์ฉ 400 , ๊ณต๊ฐ ๋์ฌ 100 )
์์ฐจ๋ก์ ๋ฉํ ๋ง ํ ๋ฐฐ์ด ๊ตํ์ด ์์ต๋๋ค.
์ทจ์ ์ด ์ด๋ ค์ด ์ด์ ๋ ๋น๊ต์ ๋ช ํํ์ต๋๋ค.
- ์ค์ํ์ง ์์ ๊ณต๋ถ๋ฅผ ์ด์ฌํ ํ๋ ์ฌ๋.
- ๋๊ธฐ์ ์ ์ํ์ง๋ง, ์ ์ ์๊ณ ๋ฆฌ์ฆ ๊ณต๋ถ๊ฐ ์ด๋ ค์ ๋์น๋ ์ฌ๋.
์ฌ๋ฌ๋ถ์ ์ง๊ธ๊น์ง ๋จ ํ๋ฒ๋ ์ทจ์ ๋ฐฉ๋ฒ์ ๋ํด์ ๋ฐฐ์ฐ์ง ์์์ต๋๋ค.
๐ซ ์ด๋ ต๊ณ , ๊ณ ๋ฏผ์ด ๋ง์๊ฒ์ด ๋น์ฐํฉ๋๋ค.
์์กด๊ฐ์ด ๋จ์ด์ง ํ์๋ ์๊ณ , ์์ฑ ํ ํ์๋ ์์ต๋๋ค. ๊ณ ๋ฏผํ์๋ ๋ฌธ์ ๋ค์ ๊ฐ์ด ํ์ด์. ๐ซก
์คํ๋ผ์ธ์ผ๋ก ํจ๊ป ์งํํ๋ ๋ถ๋ค ๋ชจ๋ ๊ฐ์ฌํฉ๋๋ค. ๐
์ทจ์ ์คํฐ๋๋ ๋ฌด์์ ํ๋์?
1. 7Code FE๊ฐ๋ฐ์ ๋ก๋๋งต์ ๊ฐ์ด ๊ณต๋ถํด์. (ํ์)
๊ฐ๋ฐ์ ์ทจ์ ์ ๋ต ์ํฌ๋ฆฟ - 7CODE (Link) : 33,000์ -> ๋ฌด๋ฃ ์ ๊ณต
๐ญ ์ด 7๊ฐ ์ฝ๋ ์ค, ๋งค์ฃผ 2๊ฐ์ Code๋ฅผ ๋ค์ผ๋ฉด์ ๊ณต๋ถ ํด์.

์ปค๋ฆฌํ๋ผ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
Code 1. FE ๊ธฐ์ ์คํ ์๊ธฐ (1์ฃผ์ฐจ)
Code 2. ์๊ณ ๋ฆฌ์ฆ ์ฝ๋ฉ ํ ์คํธ ์ค๋น (1์ฃผ์ฐจ)
Code 3. ๋์ธํ๋ ๊ฐ์ด๋ (2์ฃผ์ฐจ)
Code 4. ํฌํธํด๋ฆฌ์ค ์ค๋น (2์ฃผ์ฐจ)
Code 5. ๊ณผ์ ํ ์คํธ ์ค๋น (3์ฃผ์ฐจ)
Code 6. ๊ธฐ์ ๋ฐ ์ธ์ฑ ๋ฉด์ ์ค๋น (3์ฃผ์ฐจ)
Code 7. ์ทจ์ ํ๋ ์ธ์ดํด (4์ฃผ์ฐจ)
2. ๊ธฐ์ด๋ถํฐ ๋ฐฐ์ฐ๋ Next YTMusic ํด๋ก ์ฝ๋ฉ (with next.js 14, UI ๋ง์คํฐ)์ ๊ฐ์ด ๊ณต๋ถํด์. (๊ถ์ฅ)

๊ธฐ์ด๋ถํฐ ๋ฐฐ์ฐ๋ Next YTMusic ํด๋ก ์ฝ๋ฉ (with next.js 14, UI ๋ง์คํฐ) ( Link )
- 46,000์ -> ๋ฌด๋ฃ ์ ๊ณต
๐ญ ๋งค์ฃผ ์ ํด์ง ์ง๋๋งํผ ๊ณต๋ถํ๊ณ ์ด๋ ค์ด ์ ๋ฐ ํผ๋๋ฐฑ์ ๋ฐ์์. (ํ์์ฌํญ)
๐ญ๊ฐ์ ์ํฌ๋ถ์ ๋ ์์๋ณด๊ธฐ & ๊ณ ๋ํ๋ฅผ ์งํํด์. - ์ํฌ๋ถ ๋ฏธ๋ฆฌ๋ณด๊ธฐ Link (์ ํ์ฌํญ)
- ํด๋ก ์ฝ๋ฉ ์์ฑ๋ณธ ๋ฏธ๋ฆฌ ๋ณด๊ธฐ : https://yt-music-clone-six.vercel.app/
์ปค๋ฆฌํ๋ผ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
์น์ 1. NextJS ์ค์นํ๊ธฐ
์น์ 2. NextJS ๋ฐฐํฌํ๊ธฐ
์น์ 3. NextJS ํต์ฌ ๊ฐ๋ (์ด๋ก )
์น์ 4. NextJS AppRouter
์น์ 5~6. NextJS Sidebar, NextJS Header
์น์ 7~11. YTMusicClone - Home, Explore, Library
์น์ 12. YTMusicClone - Player
3. ์ฃผ 1ํ ๊ทธ๋ฃน ๋ฉํ ๋ง์ ์งํํฉ๋๋ค. (ํ์)
1. 7Code FE๊ฐ๋ฐ์ ๋ก๋๋งต์ ๊ฐ ์ฝ๋๋ณ ๋ฏธ์ ์ ์ํํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ๊ณต์ ํด์. ( Code1~7 ๋ง๋ค ๋ณ๋์ ๋ฏธ์ ์ ์ฃผ์ฐจ ๋ฏธํ ์ ์๋ ค๋๋ ค์.)
2. ๊ธฐ์ด๋ถํฐ ๋ฐฐ์ฐ๋ Next YTMusic ํด๋ก ์ฝ๋ฉ ๊ฐ ์ฃผ์ฐจ๋ณ ๊ฐ์ ์๊ฐ ๋ฐ ๊ฒฐ๊ณผ๋ฅผ ๊ณต์ ํด์. (ํ ์ฃผ๋น 2์๊ฐ ๋ถ๋)
3. ํ์๋ค๊ณผ ์ํธ ํผ๋๋ฐฑ์ ์งํํด์. (ํผ์ด๋ฌ๋)
4. ๋น ํ ํฌ ํ ํฌํธ๋ฆฌ์ ๋ง์ถ์ด ๋งค์ฃผ ๋ชฉํ๋ฅผ ์ธ์ฐ๊ณ ๋ฌ์ฑ์ฌ๋ถ๋ฅผ ์ ๊ฒํ๋ฉฐ ํ๊ณ ๋ฅผ ์งํํด์. (์ฅ๊ธฐ ๋ชฉํ ๊ณํ)
5. ๊ณตํต์ ๋ชฉํ๋ฅผ ๊ฐ์ง ํ์๋ค๊ณผ ์์จ ์คํฐ๋๋ฅผ ๋ง๋ค๊ณ ์ฃผ๊ฐ ํผ๋๋ฐฑ ๋ฐ์์.
4. ๊ฐ๋ฐ์ ์ ์ฉ ๋ธ๋ก๊ทธ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์คํฐ๋ ํฉ๋๋ค. (์ ํ)
- Facebook์ด ๋ง๋ ๊ณต์ ๋ฌธ์ ์คํ์์ค ( https://docusaurus.io/ )๋ก ์ ์ํด์.
- github CI/CD + gh-pages + Https ๋๋ฉ์ธ + SearchConsole
- ์์ฑ๋ณธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ : Link
5. ๋น ํ ํฌ ๊ฐ๋ฐ์ ์ทจ์ ์๊ธฐ ์ธ์ (์ ํ)
- AI์คํํธ์ ์ ์ฌ์งํ๋ค๊ฐ, ๋น ํ ํฌ ์ค๊ณ ์ ์ ์ผ๋ก ์ด์ง์ฑ๊ณตํ ๊ฐ๋ฐ์๋ฅผ ๋ชจ์ ์ ์ทจ์ ์๊ธฐ ์ธ์ ๋ฐ QnA ์งํํฉ๋๋ค.
- *์คํฐ๋ ์ฐธ์ฌ๋น์ฉ ์ค ์ผ๋ถ๋ ์ทจ์ ์๊ธฐ๋ฅผ ๊ณต์ ํด์ฃผ์ ๋ถ๋ค๊ป ์ฌ์ฉ๋ฉ๋๋ค.
6. 1:1 ๋ฉํ ๋ง ์งํ (์ ํ)
- ๋๋ต 30๋ถ ๋์ 1:1 ๋ฉํ ๋ง์ ์งํํฉ๋๋ค.
- ๋ค์นด๋ผ์ฟ ๋ฐฐIT ์ถ์ , SW๋ง์์คํธ๋ก, BoostCamp ๋ ธํ์ฐ๋ฅผ ๋ด์ ์งํํด์.
- ์ด๋ ฅ์ ๊ฒํ , ํฌํธํด๋ฆฌ์ค ๊ฒํ , ์ฝ๋ ๋ฆฌ๋ทฐ ๋ฑ ์์ ์ฃผ์
7. ์์จ ๋ฉํ ๋ง + ์จ๋ผ์ธ ๋ชจ๊ฐ์ฝ ์งํ (์ ํ)
- ๋ชจ์ฌ์ ๊ฐ์ ์ฝ๋ฉ์ ์จ๋ผ์ธ์ผ๋ก ์งํํฉ๋๋ค.
- ๊ทธ ๋์ IT ๊ฐ๋ฐ์ ์ทจ์ ๋ฐ ๊ณต๋ถ๊ด๋ จํด์ ๊ถ๊ธํ๋ ๋ชจ๋ ๊ฒ์ ๋ฌผ์ด๋ณด์ธ์.!
- ์ด๋ ฅ์ ๊ฒํ , ํฌํธํด๋ฆฌ์ค ๊ฒํ , ์ฝ๋ ๋ฆฌ๋ทฐ ๋ฑ ์์ ์ฃผ์
8. ๋ฐ์ผ๋ฆฌ ์คํ ๋์ ๋ฏธํ (ํ์)
- ๊ฐ ์กฐ์ ํ์ฅ๋ ์ฃผ๋ํ์ ํ๋ฃจ 10๋ถ ๋ฏธํ ์ ์งํํฉ๋๋ค.
- ๊ทธ๋ฅ ํ๋ฃจ ๋ฌด์์ ํ๋์ง, ์ด๋ ค์ด์ , ๊ณ ๋ฏผ, ์ด๊ฒ์ ๊ฒ ์ก๋ด์ ๋จ์ด๋ณด์ธ์. ํฐ ๋์์ด ๋ฉ๋๋ค.
๋ต๋ณ 0





