[์์ฃผ ์ค์ํ ์ด์ผ๊ธฐ]
1.๐ฉ์์ฆ FE ๊ฐ๋ฐ์ ์ฑ์ฉ ๋ฌธ์ ์ถ์ธ
css, html์ ์์ ๋น์ฐํ ๊ธฐ๋ณธ, js๊ฐ ์ง์ง(์ด๋ณด์๋ ๋น์ฐํ ์ฒ์๋ถํฐ ํํํ๊ฒ!)
(1) ๋จ์ ui ๊ตฌํ(๋ฎ์ ์ฐ๋ด)
์ฝ๋ฉ ํ
์คํธ: ๋ค์ ๊ฒ์ > ์ต์ ์ํ ํ์ด์ง ๊ตฌํ ๋ฌธ์ ๊ธฐ์ถ (html, css)
๋ฉด์ : class ์ ์ด๋ ๊ฒ ์ผ๋์ง ๋ฑ tab ๋๋ฌ๋ณด๋ฉฐ ์น์ ๊ทผ์ฑ ํ์ธ
(2) ์๊ณ ๋ฆฌ์ฆ (์์ฃผ ๊ณ ์ฐ๋ด)
(3) js๋ก componentํ
๋๋ ๋ณด๋ ์ฝ๋ฉ ์ ๋ ๊ฐ์(ํผ๊ทธ๋ง, API)
ํ๋ก๊ทธ๋๋จธ์ค- ์ผํ๋ชฐ SPA (only js)
http://35.76.53.28:8080/mall (JSON ๋ฐ์ดํฐ ๊ฐ์ ธ์์ ๋ง๋ฆ)
* ์ปดํฌ๋ํธ(Component)๋ ํ๋ก๊ทธ๋๋ฐ์ ์์ด ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ ๊ฐ๊ฐ์ ๋
๋ฆฝ๋ ๋ชจ๋ ์๋ฏธ
2. ๐ป ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์ด์
https://paullabkorea.medium.com/%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EB%90%98%EA%B3%A0-%EC%8B%B6%EC%96%B4%EC%9A%94-5d90b7ad9be9
์ฝ๋ฉ์ ์ผ์์ด๋ค! ํ๋ค๊ณ ์กฐ๊ธํดํ์ง ๋ง์! ์ฝ๋ฉ์ ๊ธด ํธํก์ผ๋ก ๊ณต๋ถํด์ผ ํ๋ค.
ํนํ '๊ฑท๋ค๋ณด๋ฉด ๋ค๋ค๋ฅด์ง ๋ชปํ๋ ๊ณณ์ด ์๋ค.'๋ผ๋ ๋ง์ด ๊ธฐ์ต์ ๋จ๋๋ค. ์ง๊ธ์ ๋ต๋ตํ ์ ์์ง๋ง ํ๋ฃจ, ์ผ์ฃผ์ผ, ํ ๋ฌ ๋ค์๋ ๋ฌ๋ผ์ง ๋ด ๋ชจ์ต์ด ๊ธฐ๋ค๋ฆฌ๊ณ ์์๊ฑฐ๋ผ๊ณ ๋ฏฟ๋๋ค!
์ฌ๋๋์ ๋ณด์ด์ง ์์ง๋ง, ์
๋ ฅ์ ํ๊ณ ์ ์ถํ๋ฉด
hidden ํ๊ทธ์ ๋ฐ์ดํฐ๊ฐ ๋ฃ์ด์ ธ ๋ณด์ฌ์ง๊ณ , ๋ฐ์ดํฐ๋ ์๋ฒ๋ก ์ ์ก๋๋ค.
5. ๐์ถ์ฒ์ - github๊ธฐ์ค์ผ๋ก
- ๊นํ ๊ด๋ฆฌ: ์ถํ ์ด๋ ค์ด ๊ณผ์ ๋ ๋ฐ๋ก ์ฌ๋ฆด ๋ ํฌ์งํ ๋ฆฌ ๋ฐ๋ก ๋ง๋ค๊ธฐ
6. ๐ ์ฝ๋ฉ ์ ํ๋ธ ์ถ์ฒ
โ 1๋ถ์ฝ๋ฉ
โ Veamcamp ๐๐
์ค์์ด์ค ์๋ฆฌ์ฆ ๋ชจ๋ ๋ณด๊ธฐ ์ถ์ฒ
โ ์ํ์ฝ๋ฉ๐
โ ์ฝ๋๋ฆฌ๋ทฐ ๋
ธํ์ฐ
โ ๋๋ฆผ์ฝ๋ฉ: FE๋ถ๋ถ๋ง
โ ์ ํ์ฝ๋ฉ(์ผ๋ถ๋ฌ ์ฝ๊ฒ ์๋ ค์ค)
โ ๋ผ๋ง์ฝ๋ฉ: ๋ธ๋ก๊ทธ ๋ง๋ค๊ธฐ ํด๋ก ์ฝ๋ฉ
โ ๋น์ ๊ณต์์ ์์งํ ์ด์ผ๊ธฐ
โ zerocho
โ ์ํํ ์ฝ๋ฉ์ฌ์
๐ SI์ ์ด๋ ค์
https://www.youtube.com/watch?v=9u75fN2lbis
https://www.youtube.com/watch?v=4qMyX5yIiNo
baseline๊ณผ x-height์ ๋๋ ์์๋๊ธฐ