1. ๋ ธ์ ํด๋ก
Notion ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉํ๋ฉด ์ํฌํ๋ก๋ฅผ ์ต์ ํํ๊ณ , ๋ฌธ์ ์์ ์ ํ๊ณ , ์์ ์ ์์ฝํ๊ณ , ์ฅ์น ๊ฐ ๋ฐ์ดํฐ๋ฅผ ๋๊ธฐํํ ์ ์์ต๋๋ค.
Notion ํด๋ก ์ ์์ฑํ์ฌ ๋ฐฐ์ธ ์ ์๋ ๋ด์ฉ:
HTML ๋๋๊ทธ ์ค ๋๋กญ API . ์ฌ์ฉ์๋ "๋ง์ฐ์ค๋ก ์ก์" ์ ์์ต๋๋ค. ๋๋๊ทธ ๊ฐ๋ฅ ์์๋ฅผ ๋ฐฐ์นํ๊ณ ๋จ์ด ๋จ๋ฆด ์์๋ ์กด.- ์ปดํจํฐ์ ์ค๋งํธํฐ ๊ฐ์ ์ค์๊ฐ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๋๊ธฐํํ๋ ๋ฐฉ๋ฒ.
- ์ฌ์ฉ์๊ฐ ๋ ์ฝ๋๋ฅผ ์์ฑ, ์ฝ๊ธฐ, ์ ๋ฐ์ดํธ ๋ฐ ์ญ์ ํ ์ ์๋๋ก ํ์ฌ CRUD ๊ธฐ์ ์ ๊ต์กํฉ๋๋ค.
์ด ๊ธฐ์ฌ๋ EDISON Software์ ์ง์์ผ๋ก ๋ฒ์ญ๋์์ต๋๋ค.์ ํ๋ฆฌ์ผ์ด์ ๋ฐ ์น์ฌ์ดํธ ๊ฐ๋ฐ ๊ณผ์คํํธ์ ์ ํฌ์ํ๋ค .
2. Repl.it ํด๋ก
Repl.it์ ์ค์๊ฐ ๊ณต๋ ์ฝ๋ ํธ์ง์ ์ํ ๋๊ตฌ์ ๋๋ค. JavaScript, Python, Go ๋ฑ ์ฌ๋ฌ ์ธ์ด๋ฅผ ์ ํํ๊ณ ๋ธ๋ผ์ฐ์ ์์ ์ง์ ์ฝ๋๋ฅผ ์คํํ ์ ์์ต๋๋ค. ๋น ๋ฅธ ๋ฐ๋ชจ ๋ฐ ์ฝ๋ ์ธํฐ๋ทฐ์ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.
Repl.it ๋ณต์ ๋ณธ์ ์์ฑํ์ฌ ๋ฐฐ์ธ ๋ด์ฉ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ๋ธ๋ผ์ฐ์ (ํด๋ผ์ด์ธํธ ์ธก)์์ ์ฝ๋(์๋ฒ ์ธก)๋ฅผ ์คํํ๊ณ ์คํํ๋ ๋ฐฉ๋ฒ์ ๋๋ค.
- ์ ๋ ฅ ๋ฐ์ดํฐ(์์ค ์ฝ๋)๋ฅผ ์ฝ๊ณ ์คํ ๊ฒฐ๊ณผ๋ฅผ ํ์ํฉ๋๋ค.
- ์น์์ ํ์ผ๊ณผ ํด๋๋ฅผ ์์ฑํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ์ ์ฅํ๋ ๋ฐฉ๋ฒ.
- ์ฝ๋ ๊ตฌ๋ฌธ์ ๊ฐ์กฐํ๋ ๋ฐฉ๋ฒ
3. Google ํฌํ ๋ณต์
Google ํฌํ ๋ ์ฌ์ง์ ์ ์ฅํ๊ณ ๊ณต์ ํ๋ ์๋น์ค์
๋๋ค.
๋ชจ๋ ์ต์ ์ฌ์ง ์ ํ๋ฆฌ์ผ์ด์
์ ์
๋ก๋, ์๋ฅด๊ธฐ ๋ฑ์ ๊ธฐ๋ณธ ๊ธฐ๋ฅ์ ์ํํ ์ ์์ต๋๋ค. ์ฌ๋๋ค์ ์์ ๋ง์ ์๋ฐํ๋ฅผ ๋ง๋ค๊ณ ๊ณ ์์ด ์ฌ์ง์ ๊ณต์ ํ๊ธฐ๋ฅผ ์ํ๋ฏ๋ก ์ด๋ฏธ์ง ์์
์ ํ ์ ์์ด์ผ ํฉ๋๋ค.
Google ํฌํ ํด๋ก ์ ๋ง๋ค์ด์ ๋ฐฐ์ธ ์ ์๋ ๋ด์ฉ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ํด๋ํฐ, ํ๋ธ๋ฆฟ, ๋ ธํธ๋ถ์ ๋ฌผ๋ก ๋ํ TV ํ๋ฉด์์๋ ๋ฐ์ํ ์ด๋ฏธ์ง๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ.
- ์ด๋ฏธ์ง ์ ๋ก๋, ํนํ ๋์ฉ๋ ์ด๋ฏธ์ง(>1MB) ๋ฐ ๋๋ ์ ๋ก๋๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ.
- ์ด๋ฏธ์ง ํ์ผ์ ์ฒ๋ฆฌํ๊ณ , ์ธ๋ค์ผ์ฉ์ผ๋ก ๋๋ ๊ฐค๋ฌ๋ฆฌ๋ฅผ ์ด ๋ ์ฌ์ง์ ์๋ฅด๊ณ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํฉ๋๋ค.
- ๋ณด๋์ค : ํด๋ผ์ฐ๋๋ ๋ก์ปฌ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ด๋ฏธ์ง๋ฅผ ์ ์ฅํ๋ ๋ฐฉ๋ฒ.
4. ๊ธฐํ์คํค ํด๋ก
Gifski ํด๋ก ์ ์์ฑํ์ฌ ๋ฐฐ์ธ ๋ด์ฉ:
- ๋น๋์ค ํ์ผ(.mp4์์ .gif๋ก)์ ๋ณํํ๋ ๋ฐฉ๋ฒ.
- ๋๋๊ทธ ์ค ๋๋กญ HTML API๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ.
- ์ด๋ฏธ์ง ์ต์ ํ ๋ฐ ์ฒ๋ฆฌ ์๋ ๋ฐฉ์.
์ฐธ๊ณ :
5. ์ํธํํ ํ์จ ๋ชจ๋ํฐ๋ง
React Native ์ํธํํ ์ถ์ ๊ธฐ
ํ์จ ์ถ์ ๊ธฐ๋ฅผ ๋ง๋ค์ด์ ๋ฐฐ์ธ ๋ด์ฉ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- API๋ก ์์ ํ๊ณ API์์ ์๊ฒฉ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ ๋ฐฉ๋ฒ.
- ๋ฐ์ดํฐ๋ฅผ ๋ชฉ๋ก์ผ๋ก ํ์ํ๋ ๋ฐฉ๋ฒ.
- ๋ณด๋์ค : ๊ด์ฌ์ด ์์ผ์๋ฉด ์ ๊ฐ ์ต๊ทผ์ ๊ธ์ ์ผ์ต๋๋ค.
๊ฐ๊ฒฉ ์ถ์ ๊ธฐ ์์ฑ์ ๋ํ ํํ ๋ฆฌ์ผ React Native๋ฅผ ์ฌ์ฉํ ์ํธํํ์ฉ.
์ฐธ๊ณ : ์ฌ๊ธฐ์
์ด์ ์ถํ๋ฌผ์์ ํ๋ก์ ํธ๋ฅผ ์ ํํ์ต๋๋ค.
์ธต
๋ ์ด์ด(Layer)๋ ๋๊ตฌ๋ ๊ณต์ ํ๋ '๋ณด๋'์ ํฝ์ ์ ๊ทธ๋ฆด ์ ์๋ ์ปค๋ฎค๋ํฐ์ ๋๋ค. ์๋ ์์ด๋์ด๋ Reddit์์ ํ์ํ์ต๋๋ค. r/Layer ์ปค๋ฎค๋ํฐ๋ ๋ชจ๋ ์ฌ๋์ด ์ฐฝ์์๊ฐ ๋์ด ๊ณตํต์ ๋์์ ๊ธฐ์ฌํ ์ ์๋ค๋ ๊ณต์ ์ฐฝ์์ฑ์ ๋ํ ์์ ์ ๋๋ค.
๋๋ง์ ๋ ์ด์ด ํ๋ก์ ํธ๋ฅผ ๋ง๋ค ๋ ๋ฐฐ์ฐ๊ฒ ๋๋ ๋ด์ฉ:
- JavaScript ์บ๋ฒ์ค ์๋ ๋ฐฉ์ ์บ๋ฒ์ค๋ฅผ ์๋ํ๋ ๋ฐฉ๋ฒ์ ์๋ ๊ฒ์ ๋ง์ ์์ฉ ํ๋ก๊ทธ๋จ์์ ์ค์ํ ๊ธฐ์ ์ ๋๋ค.
- ์ฌ์ฉ์ ๊ถํ์ ์กฐ์ ํ๋ ๋ฐฉ๋ฒ. ๊ฐ ์ฌ์ฉ์๋ ๋ก๊ทธ์ธํ์ง ์๊ณ ๋ 15๋ถ๋ง๋ค ํ ํฝ์ ์ ๊ทธ๋ฆด ์ ์์ต๋๋ค.
- ์ฟ ํค ์ธ์ ์ ์์ฑํฉ๋๋ค.
Squoosh
Squoosh๋ ๋ค์ํ ๊ณ ๊ธ ์ต์ ์ ๊ฐ์ถ ์ด๋ฏธ์ง ์์ถ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋ค.
GIF 20MB
๋๋ง์ Squoosh ๋ฒ์ ์ ๋ง๋ค๋ฉด ๋ค์ ๋ด์ฉ์ ๋ฐฐ์ธ ์ ์์ต๋๋ค.
- ์ด๋ฏธ์ง ํฌ๊ธฐ ์์ ๋ฐฉ๋ฒ
- Drag'n'Drop API์ ๊ธฐ๋ณธ ์ฌํญ ์์๋ณด๊ธฐ
- API ๋ฐ ์ด๋ฒคํธ ๋ฆฌ์ค๋์ ์๋ ๋ฐฉ์ ์ดํด
- ํ์ผ์ ์ ๋ก๋ํ๊ณ ๋ด๋ณด๋ด๋ ๋ฐฉ๋ฒ
์ฐธ๊ณ : ์ด๋ฏธ์ง ์์ถ๊ธฐ๋ ๋ก์ปฌ์ ๋๋ค. ์ถ๊ฐ ๋ฐ์ดํฐ๋ฅผ ์๋ฒ์ ๋ณด๋ผ ํ์๋ ์์ต๋๋ค. ์์ถ๊ธฐ๋ฅผ ์ง์ ๋ ์๋ ์๊ณ ์๋ฒ์์ ์ฌ์ฉํ ์๋ ์์ต๋๋ค.
๊ณ์ฐ๊ธฐ
์ด์ ํด๋ด์? ์ง์งํ๊ฒ? ๊ณ์ฐ์? ๋ค, ์ ํํ๋ ๊ณ์ฐ๊ธฐ์ ๋๋ค. ์ํ ์ฐ์ฐ์ ๊ธฐ๋ณธ๊ณผ ํจ๊ป ์๋ํ๋ ๋ฐฉ์์ ์ดํดํ๋ ๊ฒ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋จ์ํํ๋ ๋ฐ ์ค์ํ ๊ธฐ์ ์ ๋๋ค. ์กฐ๋ง๊ฐ ์ซ์๋ฅผ ๋ค๋ฃจ์ด์ผ ํ๋ฉฐ ๋น ๋ฅผ์๋ก ์ข์ต๋๋ค.
๋๋ง์ ๊ณ์ฐ๊ธฐ๋ฅผ ๋ง๋ค๋ฉด ๋ค์ ๋ด์ฉ์ ๋ฐฐ์ธ ์ ์์ต๋๋ค.
- ์ซ์ ๋ฐ ์ํ ์ฐ์ฐ ์์
- ์ด๋ฒคํธ ๋ฆฌ์ค๋ API ์ฐ์ต
- ์์๋ฅผ ์ ๋ ฌํ๊ณ ์คํ์ผ์ ์ดํดํ๋ ๋ฐฉ๋ฒ
ํฌ๋กค๋ฌ(๊ฒ์ ์์ง)
๋๊ตฌ๋ ๊ฒ์ ์์ง์ ์ฌ์ฉํด ๋ณธ ์ ์ด ์์ ๊ฒ์ ๋๋ค. ์์ ๋ง์ ๊ฒ์ ์์ง์ ๋ง๋ค์ด ๋ณด๋ ๊ฒ์ ์ด๋จ๊น์? ์ ๋ณด๋ฅผ ๊ฒ์ํ๋ ค๋ฉด ํฌ๋กค๋ฌ๊ฐ ํ์ํฉ๋๋ค. ๋ชจ๋ ์ฌ๋์ด ๋งค์ผ ์ด๋ฅผ ์ฌ์ฉํ๋ฉฐ ์ด ๊ธฐ์ ๊ณผ ์ ๋ฌธ๊ฐ์ ๋ํ ์์๋ ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ ์ฆ๊ฐํ ๊ฒ์ ๋๋ค.
๊ตฌ๊ธ ๊ฒ์ ์์ง
์์ ๋ง์ ๊ฒ์ ์์ง์ ๋ง๋ค์ด์ ๋ฐฐ์ธ ์ ์๋ ๋ด์ฉ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ํฌ๋กค๋ฌ ์๋ ๋ฐฉ์
- ์ฌ์ดํธ๋ฅผ ์์ธํํ๋ ๋ฐฉ๋ฒ๊ณผ ํ์ ๋ฐ ํํ์ ๊ธฐ์ค์ผ๋ก ์์๋ฅผ ๋งค๊ธฐ๋ ๋ฐฉ๋ฒ
- ์์ธํ๋ ์ฌ์ดํธ๋ฅผ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ ์ฅํ๋ ๋ฐฉ๋ฒ ๋ฐ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์์ ๋ฐฉ๋ฒ
๋ฎค์ง ํ๋ ์ด์ด(์คํฌํฐํ์ด, ์ ํ ๋ฎค์ง)
๋ชจ๋๊ฐ ์์ ์ ๋ฃ์ต๋๋ค. ์์ ์ ์ฐ๋ฆฌ ์ถ์ ํ์์ ์ธ ๋ถ๋ถ์ ๋๋ค. ํ๋ ์์ ์คํธ๋ฆฌ๋ฐ ํ๋ซํผ์ ๊ธฐ๋ณธ ๋ฉ์ปค๋์ฆ์ด ์ด๋ป๊ฒ ์๋ํ๋์ง ๋ ์ ์ดํดํ๊ธฐ ์ํด ์์ ํ๋ ์ด์ด๋ฅผ ๋ง๋ค์ด ๋ณด๊ฒ ์ต๋๋ค.
์คํฌํฐ ํ์ด
๋๋ง์ ์์ ์คํธ๋ฆฌ๋ฐ ํ๋ซํผ์ ๋ง๋ค์ด์ ๋ฐฐ์ธ ์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- API๋ก ์์ ํ๋ ๋ฐฉ๋ฒ. Spotify ๋๋ Apple Music์ API ์ฌ์ฉ
- ๋ค์/์ด์ ํธ๋ ์ฌ์, ์ผ์ ์ ์ง, ๋๊ฐ๊ธฐ ๋ฐฉ๋ฒ
- ๋ณผ๋ฅจ์ ๋ณ๊ฒฝํ๋ ๋ฐฉ๋ฒ
- ์ฌ์ฉ์ ๋ผ์ฐํ ๋ฐ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ก์ ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ
React๋ฅผ ์ฌ์ฉํ ์ํ ๊ฒ์ ์ฑ(ํํฌ ํฌํจ)
๊ฐ์ฅ ๋จผ์ ์์ํ ์ ์๋ ์ผ์ React๋ฅผ ์ฌ์ฉํ์ฌ ์ํ ๊ฒ์ ์ฑ์ ๋ง๋๋ ๊ฒ์ ๋๋ค. ์๋๋ ์ต์ข ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ชจ์ต์ ๋ณด์ฌ์ฃผ๋ ์ด๋ฏธ์ง์ ๋๋ค.
๋ฌด์์ ๋ฐฐ์ธ ๊ฒ์ธ๊ฐ
์ด ์ฑ์ ๊ตฌ์ถํ๋ฉด ์๋์ ์ผ๋ก ์๋ก์ด Hooks API๋ฅผ ์ฌ์ฉํ์ฌ React ๊ธฐ์ ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. ์์ ํ๋ก์ ํธ์์๋ React ๊ตฌ์ฑ ์์, ๋ง์ ํํฌ, ์ธ๋ถ API ๋ฐ ์ผ๋ถ CSS ์คํ์ผ์ ์ฌ์ฉํฉ๋๋ค.
๊ธฐ์ ์คํ ๋ฐ ๊ธฐ๋ฅ
- ํํฌ๋ก ๋ฐ์
- ๋ฐ์ ํ ์ฑ ๋ง๋ค๊ธฐ
- JSX
- CSS
ํด๋์ค๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋ ์ด ํ๋ก์ ํธ๋ ๊ธฐ๋ฅ์ React์ ๋ํ ์๋ฒฝํ ์ง์
์ ์ ์ ๊ณตํ๋ฉฐ 2020๋
์ ํ์คํ ๋์์ด ๋ ๊ฒ์
๋๋ค. ๋น์ ์ ์ฐพ์ ์ ์์ต๋๋ค
Vue์ ์ฑํ ์ฑ
๋ ๋ค๋ฅธ ํ๋ฅญํ ํ๋ก์ ํธ๋ ์ ๊ฐ ๊ฐ์ฅ ์ข์ํ๋ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ VueJS๋ฅผ ์ฌ์ฉํ์ฌ ์ฑํ ์ฑ์ ๋ง๋๋ ๊ฒ์ ๋๋ค. ์์ฉ ํ๋ก๊ทธ๋จ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ฌด์์ ๋ฐฐ์ธ ๊ฒ์ธ๊ฐ
์ด ํํ ๋ฆฌ์ผ์์๋ ๊ตฌ์ฑ ์์ ์์ฑ, ์ํ ์ฒ๋ฆฌ, ๊ฒฝ๋ก ์์ฑ, ํ์ฌ ์๋น์ค ์ฐ๊ฒฐ, ์ธ์ฆ ์ฒ๋ฆฌ ๋ฑ Vue ์ฑ์ ์ฒ์๋ถํฐ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋๋ค.
๊ธฐ์ ์คํ ๋ฐ ๊ธฐ๋ฅ
- ๋ทฐ
- ๋ทฐ์์ค
- Vue ๋ผ์ฐํฐ
- ๋ทฐ CLI
- ๋ฏธ๋ ์ฌ๋
- CSS
์ด๋ Vue๋ฅผ ์์ํ๊ฑฐ๋ ๊ธฐ์กด ๊ธฐ์ ์ ํฅ์ํ์ฌ 2020๋
๊ฐ๋ฐ์ ์ฐฉ์ํ ์ ์๋ ์ ๋ง ํ๋ฅญํ ํ๋ก์ ํธ์
๋๋ค. ๋น์ ์ ์ฐพ์ ์ ์์ต๋๋ค
Angular 8์ ์ฌ์ฉํ ์๋ฆ๋ค์ด ๋ ์จ ์ฑ
์ด ์๋ Angular 8์ ์ฌ์ฉํ์ฌ ์๋ฆ๋ค์ด ๋ ์จ ์ฑ์ ๋ง๋๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
๋ฌด์์ ๋ฐฐ์ธ ๊ฒ์ธ๊ฐ
์ด ํ๋ก์ ํธ๋ ์ค๊ณ๋ถํฐ ๊ฐ๋ฐ, ๋ฐฐํฌ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์
์ ์ด๋ฅด๊ธฐ๊น์ง ์ฒ์๋ถํฐ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ๋ ๋ฐ ํ์ํ ๊ท์คํ ๊ธฐ์ ์ ๊ฐ๋ฅด์ณ์ค๋๋ค.
๊ธฐ์ ์คํ ๋ฐ ๊ธฐ๋ฅ
- ๊ฐ๋ 8
- ์คํฌ ๊ธฐ์ง
- ์๋ฒ ์ธก ๋ ๋๋ง
- ๊ทธ๋ฆฌ๋์ Flexbox๊ฐ ํฌํจ๋ CSS
- ๋ชจ๋ฐ์ผ ์นํ์ ์ด๊ณ ์ ์์ฑ
- ๋คํฌ ๋ชจ๋
- ํฌ๋ผ์๋ฐ ์ธํฐํ์ด์ค
์ด ํฌ๊ด์ ์ธ ํ๋ก์ ํธ์์ ์ ๊ฐ ์ ๋ง ์ข์ํ๋ ์ ์ ๊ณ ๋ฆฝ๋ ์ํ์์ ๊ณต๋ถํ์ง ์๋๋ค๋ ๊ฒ์ ๋๋ค. ๋์ ์ค๊ณ๋ถํฐ ์ต์ข ๋ฐฐํฌ๊น์ง ์ ์ฒด ๊ฐ๋ฐ ํ๋ก์ธ์ค๋ฅผ ๋ฐฐ์๋๋ค.
Svelte๋ฅผ ์ฌ์ฉํ To-Do ์ ํ๋ฆฌ์ผ์ด์
Svelte๋ ์ต์ํ React, Vue ๋ฐ Angular์ ์ ์ฌํ ๊ตฌ์ฑ ์์ ๊ธฐ๋ฐ ์ ๊ทผ ๋ฐฉ์์ ์๋ก์ด ์์ด์ ๊ฐ์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๊ฒ์ 2020๋ ๊ฐ์ฅ ํซํ ์ ์ ํ ์ค ํ๋์ ๋๋ค.
To-Do ์ฑ์ ๋ฐ๋์ ๊ฐ์ฅ ์ธ๊ธฐ ์๋ ์ฃผ์ ๋ ์๋์ง๋ง Svelte ๊ธฐ์ ์ ์ฐ๋งํ๋ ๋ฐ ์ค์ ๋ก ๋์์ด ๋ ๊ฒ์ ๋๋ค. ๋ค์๊ณผ ๊ฐ์ด ๋ณด์ผ ๊ฒ์ ๋๋ค:
๋ฌด์์ ๋ฐฐ์ธ ๊ฒ์ธ๊ฐ
์ด ํํ ๋ฆฌ์ผ์์๋ ์ฒ์๋ถํฐ ๋๊น์ง Svelte 3๋ฅผ ์ฌ์ฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค. ๊ตฌ์ฑ์์, ์คํ์ผ, ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์ฌ์ฉํ๊ฒ ๋ฉ๋๋ค.
๊ธฐ์ ์คํ ๋ฐ ๊ธฐ๋ฅ
- ๋ ์ฌํ 3
- ๊ตฌ์ฑ ์์
- CSS๋ฅผ ์ฌ์ฉํ ์คํ์ผ๋ง
- ES 6 ๊ตฌ๋ฌธ
์ข์ Svelte ์คํํฐ ํ๋ก์ ํธ๊ฐ ๋ง์ง ์์์ ์ฐพ์์ต๋๋ค.
Next.js๋ฅผ ์ฌ์ฉํ ์ ์์๊ฑฐ๋ ์ฑ
Next.js๋ ์ฆ์ ์๋ฒ ์ธก ๋ ๋๋ง์ ์ง์ํ๋ React ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ๊ฐ์ฅ ๋๋ฆฌ ์ฌ์ฉ๋๋ ํ๋ ์์ํฌ์ ๋๋ค.
์ด ํ๋ก์ ํธ์์๋ ๋ค์๊ณผ ๊ฐ์ ์ ์ ์๊ฑฐ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค.
๋ฌด์์ ๋ฐฐ์ธ ๊ฒ์ธ๊ฐ
์ด ํ๋ก์ ํธ์์๋ Next.js๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋ฐํ๋ ๋ฐฉ๋ฒ, ์ฆ ์ ํ์ด์ง์ ๊ตฌ์ฑ ์์๋ฅผ ๋ง๋ค๊ณ , ๋ฐ์ดํฐ๋ฅผ ์ถ์ถํ๊ณ , Next ์ ํ๋ฆฌ์ผ์ด์
์ ์คํ์ผ์ ์ง์ ํ๊ณ ๋ฐฐํฌํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋๋ค.
๊ธฐ์ ์คํ ๋ฐ ๊ธฐ๋ฅ
- ๋ค์ .js
- ๊ตฌ์ฑ ์์ ๋ฐ ํ์ด์ง
- ๋ฐ์ดํฐ ์ํ๋ง
- ์คํ์ผ๋ง
- ํ๋ก์ ํธ ๋ฐฐํฌ
- SSR ๋ฐ SPA
์๋ก์ด ๊ฒ์ ๋ฐฐ์ฐ๊ธฐ ์ํด ์ ์์๊ฑฐ๋ ์ฑ๊ณผ ๊ฐ์ ์ค์ ์ฌ๋ก๋ฅผ ๊ฐ๋ ๊ฒ์ ํญ์ ์ข์ ์ผ์
๋๋ค. ๋น์ ์ ํ ์ ์์ต๋๋ค
Nuxt.js๋ฅผ ์ฌ์ฉํ ๋ณธ๊ฒฉ์ ์ธ ๋ค๊ตญ์ด ๋ธ๋ก๊ทธ
Nuxt.js๋ Vue์ฉ์ด๊ณ Next.js๋ React์ฉ์
๋๋ค. ์๋ฒ ์ธก ๋ ๋๋ง๊ณผ ๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์
์ ์ฑ๋ฅ์ ๊ฒฐํฉํ๊ธฐ ์ํ ํ๋ฅญํ ํ๋ ์์ํฌ์
๋๋ค.
๋ง๋ค ์ ์๋ ์ต์ข
์ ํ๋ฆฌ์ผ์ด์
์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ฌด์์ ๋ฐฐ์ธ ๊ฒ์ธ๊ฐ
์ด ์ํ ํ๋ก์ ํธ์์๋ ์ด๊ธฐ ์ค์ ๋ถํฐ ์ต์ข ๋ฐฐํฌ๊น์ง Nuxt.js๋ฅผ ์ฌ์ฉํ์ฌ ์์ ํ ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ๊ฒ ๋ฉ๋๋ค.
ํ์ด์ง, ๊ตฌ์ฑ ์์, SCSS๋ฅผ ์ฌ์ฉํ ์คํ์ผ๋ง ๋ฑ Nuxt๊ฐ ์ ๊ณตํ๋ ๋ฉ์ง ๊ธฐ๋ฅ์ ๋ง์ด ํ์ฉํฉ๋๋ค.
๊ธฐ์ ์คํ ๋ฐ ๊ธฐ๋ฅ
- Nuxt.js
- ๊ตฌ์ฑ ์์ ๋ฐ ํ์ด์ง
- ์คํ ๋ฆฌ๋ธ๋ก ๋ชจ๋
- ๋จน์ฅ์ด
- ์ํ ๊ด๋ฆฌ๋ฅผ ์ํ Vuex
- ์คํ์ผ๋ง์ ์ํ SCSS
- Nuxt ๋ฏธ๋ค์จ์ด
๊ฐ์ธ ๋น์ ํจ๊ปํ๋ ๋ธ๋ก๊ทธ
Gatsby๋ React์ GraphQL์ ์ฌ์ฉํ๋ ๋ฐ์ด๋ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ์ ๋๋ค. ํ๋ก์ ํธ์ ๊ฒฐ๊ณผ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ฌด์์ ๋ฐฐ์ธ ๊ฒ์ธ๊ฐ
์ด ํํ ๋ฆฌ์ผ์์๋ Gatsby๋ฅผ ์ฌ์ฉํ์ฌ React ๋ฐ GraphQL์ ์ฌ์ฉํ์ฌ ์์ ๋ง์ ๊ธฐ์ฌ๋ฅผ ์์ฑํ๋ ๋ฐ ์ฌ์ฉํ ๋ธ๋ก๊ทธ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋๋ค.
๊ธฐ์ ์คํ ๋ฐ ๊ธฐ๋ฅ
- ๊ฐ์ธ ๋น
- ๋ฐ์
- GraphQL
- ํ๋ฌ๊ทธ์ธ ๋ฐ ํ ๋ง
- MDX/๋งํฌ๋ค์ด
- ๋ถํธ ์คํธ๋ฉ CSS
- ํ ํ๋ฆฟ
๋ธ๋ก๊ทธ๋ฅผ ์์ํ๊ณ ์ถ์๋ ์ ์ด ์๋ค๋ฉด,
WordPress๊ฐ ๋์ ์ ํ์ด๋ผ๊ณ ๋งํ๋ ๊ฒ์ ์๋์ง๋ง Gatsby๋ฅผ ์ฌ์ฉํ๋ฉด React๋ฅผ ์ฌ์ฉํ์ฌ ๊ณ ์ฑ๋ฅ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ์ด๋ ๋๋ผ์ด ์กฐํฉ์ ๋๋ค.
Gridsome๊ณผ ํจ๊ปํ๋ ๋ธ๋ก๊ทธ
Vue์ฉ Gridsome... ์ข์ต๋๋ค. Next/Nuxt์์๋ ์ด๋ฏธ ์ด ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ต๋๋ค.
๊ทธ๋ฌ๋ Gridsome๊ณผ Gatsby์ ๊ฒฝ์ฐ๋ ๋ง์ฐฌ๊ฐ์ง์
๋๋ค. ๋ ๋ค GraphQL์ ๋ฐ์ดํฐ ๊ณ์ธต์ผ๋ก ์ฌ์ฉํ์ง๋ง Gridsome์ VueJS๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด๊ฒ์ ๋ํ ํ๋ฅญํ ๋ธ๋ก๊ทธ๋ฅผ ๋ง๋๋ ๋ฐ ๋์์ด ๋๋ ๋๋ผ์ด ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ์
๋๋ค.
๋ฌด์์ ๋ฐฐ์ธ ๊ฒ์ธ๊ฐ
์ด ํ๋ก์ ํธ์์๋ Gridsome, GraphQL ๋ฐ Markdown์ ์์ํ๊ธฐ ์ํด ๊ฐ๋จํ ๋ธ๋ก๊ทธ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์๋ ค์ค๋๋ค. ๋ํ Netlify๋ฅผ ํตํด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐฐํฌํ๋ ๋ฐฉ๋ฒ๋ ๋ค๋ฃน๋๋ค.
๊ธฐ์ ์คํ ๋ฐ ๊ธฐ๋ฅ
- ๊ทธ๋ฆฌ์ฌ
- ๋ทฐ
- GraphQL
- ์ธํ
- ๋คํฐ ํ์ด
์ด๊ฒ์ ํ์คํ ๊ฐ์ฅ ํฌ๊ด์ ์ธ ํํ ๋ฆฌ์ผ์ ์๋์ง๋ง Gridsome์ ๊ธฐ๋ณธ ๊ฐ๋
๊ณผ
Quasar๋ฅผ ์ฌ์ฉํ๋ SoundCloud์ ์ ์ฌํ ์ค๋์ค ํ๋ ์ด์ด
Quasar๋ ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋๋ ๋ฐ ์ฌ์ฉํ ์ ์๋ ๋ ๋ค๋ฅธ Vue ํ๋ ์์ํฌ์ ๋๋ค. ์ด ํ๋ก์ ํธ์์๋ ๋ค์๊ณผ ๊ฐ์ ์ค๋์ค ํ๋ ์ด์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ญ๋๋ค.
๋ฌด์์ ๋ฐฐ์ธ ๊ฒ์ธ๊ฐ
๋ค๋ฅธ ํ๋ก์ ํธ๋ ์ฃผ๋ก ์น ์ ํ๋ฆฌ์ผ์ด์
์ ์ค์ ์ ๋์ง๋ง, ์ด ํ๋ก์ ํธ์์๋ Vue ๋ฐ Quasar ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค.
Android Studio/Xcode๊ฐ ๊ตฌ์ฑ๋ ์ํ์์ Cordova๊ฐ ์ด๋ฏธ ์คํ ์ค์ด์ด์ผ ํฉ๋๋ค. ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ ์ค๋ช
์์๋ ๋ชจ๋ ์ค์ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ฃผ๋ Quasar ์น์ฌ์ดํธ ๋งํฌ๊ฐ ์์ต๋๋ค.
๊ธฐ์ ์คํ ๋ฐ ๊ธฐ๋ฅ
- ํ์ด์ฌ
- ๋ทฐ
- ์ฝ๋ฅด๋๋ฐ
- ์จ์ด๋ธ์ํผ
- UI ๊ตฌ์ฑ์์
์ ์ฉ์นด๋ ์์
๋ถ๋๋ฝ๊ณ ์ฆ๊ฑฐ์ด ๋ง์ดํฌ๋ก ์ธํฐ๋์
์ ๊ฐ์ถ ๋ฉ์ง ์ ์ฉ์นด๋ ๋ชจ์์
๋๋ค. ์ซ์ ํ์ ์ง์ , ํ์ธ ๋ฐ ์๋ ์นด๋ ์ ํ ๊ฐ์ง๊ฐ ํฌํจ๋ฉ๋๋ค. Vue.js๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ตฌ์ถ๋์์ผ๋ฉฐ ์๋ฒฝํ๊ฒ ๋ฐ์ํฉ๋๋ค. (๋๋ ๋ณผ ์์์ด
๋น์ ์ด ๋ฐฐ์ธ ๋ด์ฉ:
- ์์ ์ฒ๋ฆฌ ๋ฐ ์ ํจ์ฑ ๊ฒ์ฌ
- ์ด๋ฒคํธ ์ฒ๋ฆฌ(์: ํ๋๊ฐ ๋ณ๊ฒฝ๋๋ ๊ฒฝ์ฐ)
- ํ์ด์ง์ ์์, ํนํ ์์ ์๋จ์ ํ์๋๋ ์ ์ฉ ์นด๋ ์ ๋ณด๋ฅผ ํ์ํ๊ณ ๋ฐฐ์นํ๋ ๋ฐฉ๋ฒ์ ์ดํดํฉ๋๋ค.
๋ง๋ ๊ทธ๋ํ
ํ์คํ ๊ทธ๋จ์ ๋ํ๋ด๋ ๊ฐ์ ๋น๋กํ๋ ๋์ด๋ ๊ธธ์ด๋ฅผ ๊ฐ๋ ์ง์ฌ๊ฐํ ๋ง๋๋ก ๋ฒ์ฃผํ ๋ฐ์ดํฐ๋ฅผ ๋ํ๋ด๋ ์ฐจํธ ๋๋ ๊ทธ๋ํ์ ๋๋ค.
์์ง ๋๋ ์ํ์ผ๋ก ์ ์ฉํ ์ ์์ต๋๋ค. ์์ง ๋ง๋ ์ฐจํธ๋ฅผ ์ ์ฐจํธ๋ผ๊ณ ๋ ํฉ๋๋ค.
๋น์ ์ด ๋ฐฐ์ธ ๋ด์ฉ:
- ์ฒด๊ณ์ ์ด๊ณ ์ดํดํ๊ธฐ ์ฌ์ด ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ํ์ํฉ๋๋ค.
- ์ถ๊ฐ: ์์ ์ฌ์ฉ ๋ฐฉ๋ฒ ์์๋ณด๊ธฐ
canvas
๊ทธ๋ฆฌ๊ณ ๊ทธ๊ฒ์ผ๋ก ์์๋ฅผ ๊ทธ๋ฆฌ๋ ๋ฐฉ๋ฒ
ํธ์ํฐ ํํธ ์ ๋๋ฉ์ด์
2016๋ ์ ํธ์ํฐ๋ ํธ์์ ์ด ๋๋ผ์ด ์ ๋๋ฉ์ด์ ์ ์ ๋ณด์์ต๋๋ค. 2019๋ ๊ธฐ์ค์ผ๋ก ์ฌ์ ํ ๊ทธ ๋ถ๋ถ์ด ์ค์ํด ๋ณด์ ๋๋ค. ์ง์ ๋ง๋ค์ด ๋ณด๋ ๊ฒ์ ์ด๋จ๊น์?
๋น์ ์ด ๋ฐฐ์ธ ๋ด์ฉ:
- CSS ์์ฑ์ผ๋ก ์์
keyframes
- HTML ์์ ์กฐ์ ๋ฐ ์ ๋๋ฉ์ด์
- JavaScript, HTML ๋ฐ CSS ๊ฒฐํฉ
๊ฒ์ ๊ฐ๋ฅํ GitHub ์ ์ฅ์
์ฌ๊ธฐ์๋ ๋ฉ์ง ๊ฒ์ด ์์ต๋๋ค. GitHub ์ ์ฅ์๋ ๋จ์ง ๋ฏธํ๋ ๋ชฉ๋ก์ผ ๋ฟ์
๋๋ค.
๋ชฉํ๋ ์ ์ฅ์๋ฅผ ํ์ํ๊ณ ์ฌ์ฉ์๊ฐ ์ด๋ฅผ ํํฐ๋งํ ์ ์๋๋ก ํ๋ ๊ฒ์
๋๋ค. ์ฌ์ฉ
GitHub ํ๋กํ ํ์ด์ง -
๋น์ ์ด ๋ฐฐ์ธ ๋ด์ฉ:
- API์์ ๋ฐ์ดํฐ ์์
- API์ ๋ฐ์ดํฐ ํ์
- ๊ฐ ๊ฒ์์ ๋ํ ๊ด๋ จ ๋ฐ์ดํฐ ํํฐ๋ง ๋ฐ ํ์
- ์ ํ ์ฌํญ: ๋์ ์ ์ํ๊ณ ์ถ๋ค๋ฉด ๋ค์์ ์ฌ์ฉํ์ธ์.
API v4 , GraphQL์ ์ฌ์ฉํ์ฌ ๊ตฌ์ถ๋์์ต๋๋ค.GraphQL์ ๋ฐฐ์ฐ๊ณ ์ถ๋ค๋ฉด ์ด์ ๊ธฐ์ฌ ์ค ํ๋๋ก ์ด๋ํ์ธ์. .
Reddit ์คํ์ผ ์ฑํ
์ฑํ ์ ๋จ์์ฑ๊ณผ ์ฌ์ฉ ์ฉ์ด์ฑ์ผ๋ก ์ธํด ๋๋ฆฌ ์ฌ์ฉ๋๋ ์์ฌ์ํต ๋ฐฉ๋ฒ์ ๋๋ค. ํ์ง๋ง ํ๋ ์ฑํ ๋ฐฉ์ ์ค์ ๋ก ํ๋ ฅ์ ๋ถ์ด๋ฃ๋ ๊ฒ์ ๋ฌด์์ผ๊น์? ์น์์ผ!
๋น์ ์ด ๋ฐฐ์ธ ๋ด์ฉ:
- WebSocket, ์ค์๊ฐ ํต์ ๋ฐ ๋ฐ์ดํฐ ์ ๋ฐ์ดํธ ์ฌ์ฉ
- ์ฌ์ฉ์ ์ก์ธ์ค ์์ค ์์
(์: ์ฑํ
์ฑ๋ ์์ ์์๊ฒ ์ญํ ์ด ์์)
admin
๋ฐ ๋ฐฉ์ ์๋ ๋ค๋ฅธ ์ฌ๋๋ค -user
) - ์์ ์ฒ๋ฆฌ ๋ฐ ์ ํจ์ฑ ๊ฒ์ฌ - ๋ฉ์์ง ์ ์ก์ ์ํ ์ฑํ
์ฐฝ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
input
- ๋ค์ํ ์ฑํ ์์ฑ ๋ฐ ์ฐธ์ฌ
- ๊ฐ์ธ ๋ฉ์์ง๋ก ์์ ํ์ธ์. ์ฌ์ฉ์๋ ๋ค๋ฅธ ์ฌ์ฉ์์ ๋น๊ณต๊ฐ๋ก ์ฑํ ํ ์ ์์ต๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ๋ ์ฌ์ฉ์ ๊ฐ์ WebSocket ์ฐ๊ฒฐ์ ์ค์ ํ๊ฒ ๋ฉ๋๋ค.
์คํธ๋ผ์ดํ ์คํ์ผ ํ์
์ด ํ์์ ๋ ํนํ๊ฒ ๋ง๋๋ ๊ฒ์ ํ์ค๋ฒ ์ปจํ ์ด๋๊ฐ ์ฝํ ์ธ ์ ๋ง๊ฒ ๋ณํ๋๋ค๋ ๊ฒ์ ๋๋ค. ์๋ก์ด ํ์ค๋ฒ๋ฅผ ์ด๊ณ ๋ซ๋ ์ ํต์ ์ธ ๋์์ ๋นํด ์ด ์ ํ์๋ ์ฐ์ํจ์ด ์์ต๋๋ค.
๋น์ ์ด ๋ฐฐ์ธ ๋ด์ฉ:
- CSS ์ ๋๋ฉ์ด์ ์ ์ ํ๊ณผ ๊ฒฐํฉ
- ์ฝํ ์ธ ๋ฅผ ์ด๋ก๊ฒ ํ๊ณ ํ๋กํ ์์์ ํ์ฑ ํด๋์ค๋ฅผ ์ ์ฉํฉ๋๋ค.
ํฉ๋งจ
๋๋ง์ ํฉ๋งจ ๋ฒ์ ์ ๋ง๋ค์ด๋ณด์ธ์. ์ด๊ฒ์ ๊ฒ์์ด ์ด๋ป๊ฒ ๊ฐ๋ฐ๋๋์ง์ ๋ํ ์์ด๋์ด๋ฅผ ์ป๊ณ ๊ธฐ๋ณธ์ ์ดํดํ๋ ์ข์ ๋ฐฉ๋ฒ์
๋๋ค. JavaScript ํ๋ ์์ํฌ์ธ React ๋๋ Vue๋ฅผ ์ฌ์ฉํ์ธ์.
ะั ะทะฝะฐะตัะต:
- ์์๊ฐ ์ด๋ํ๋ ๋ฐฉ๋ฒ
- ๋๋ฅผ ํค๋ฅผ ๊ฒฐ์ ํ๋ ๋ฐฉ๋ฒ
- ์ถฉ๋ ์๊ฐ์ ๊ฒฐ์ ํ๋ ๋ฐฉ๋ฒ
- ๋ ๋์๊ฐ ๊ณ ์คํธ ์ด๋ ์ปจํธ๋กค์ ์ถ๊ฐํ ์ ์์ต๋๋ค.
์ด ํ๋ก์ ํธ์ ์๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค
์ฌ์ฉ์ ๊ด๋ฆฌ
๊ณํ
์ฌ์ฉ์ ๊ด๋ฆฌ๋ฅผ ์ํ CRUD ์ ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ฑํ๋ฉด ๊ฐ๋ฐ์ ๊ธฐ๋ณธ ์ฌํญ์ ๋ฐฐ์ธ ์ ์์ต๋๋ค. ์ด๋ ํนํ ์๋ก์ด ๊ฐ๋ฐ์์๊ฒ ์ ์ฉํฉ๋๋ค.
ะั ะทะฝะฐะตัะต:
- ๋ผ์ฐํ ์ด๋ ๋ฌด์์ ๋๊น?
- ๋ฐ์ดํฐ ์ ๋ ฅ ์์์ ์ฒ๋ฆฌํ๊ณ ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ๋ด์ฉ์ ํ์ธํ๋ ๋ฐฉ๋ฒ
- ๋ฐ์ดํฐ๋ฒ ์ด์ค ์์ ๋ฐฉ๋ฒ - ์์ ์์ฑ, ์ฝ๊ธฐ, ์ ๋ฐ์ดํธ ๋ฐ ์ญ์
ํ์ฌ ์์น์ ๋ ์จ ํ์ธํ๊ธฐ
๊ณํ
์ฑ์ ๋ง๋ค๊ณ ์ถ๋ค๋ฉด ๋ ์จ ์ฑ์ผ๋ก ์์ํด ๋ณด์ธ์. ์ด ํ๋ก์ ํธ๋ Swift๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฃํ ์ ์์ต๋๋ค.
์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ ๊ฒฝํ์ ์๋ ๊ฒ ์ธ์๋ ๋ค์์ ๋ฐฐ์ฐ๊ฒ ๋ฉ๋๋ค.
- API๋ก ์์ ํ๋ ๋ฐฉ๋ฒ
- ์์น์ ๋ณด๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ
- ํ ์คํธ ์ ๋ ฅ์ ์ถ๊ฐํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋์ฑ ๋์ ์ผ๋ก ๋ง๋์ธ์. ์ฌ๊ธฐ์ ์ฌ์ฉ์๋ ์์ ์ ์์น๋ฅผ โโ์ ๋ ฅํ์ฌ ํน์ ์์น์ ๋ ์จ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
API๊ฐ ํ์ํฉ๋๋ค. ๋ ์จ ๋ฐ์ดํฐ๋ฅผ ์ป์ผ๋ ค๋ฉด OpenWeather API๋ฅผ ์ฌ์ฉํ์ธ์. OpenWeather API์ ๋ํ ์ถ๊ฐ ์ ๋ณด
์ฑํ ์ฐฝ
๋ด ์ฑํ
์ฐฝ์ด ๋ ๊ฐ์ ๋ธ๋ผ์ฐ์ ํญ์์ ์ด๋ฆฝ๋๋ค.
์ฑํ ์ฐฝ์ ๋ง๋๋ ๊ฒ์ ์์ผ์ ์์ํ๋ ์๋ฒฝํ ๋ฐฉ๋ฒ์ ๋๋ค. ๊ธฐ์ ์คํ์ ์ ํ์ ์์ฒญ๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด Node.js๋ ์๋ฒฝํฉ๋๋ค.
์์ผ์ ์๋ ๋ฐฉ์๊ณผ ๊ตฌํ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ๊ฒ ๋ฉ๋๋ค. ์ด๊ฒ์ด ์ด ํ๋ก์ ํธ์ ๊ฐ์ฅ ํฐ ์ฅ์ ์ด๋ค.
์์ผ ์์
์ ์ํ๋ Laravel ๊ฐ๋ฐ์๋ผ๋ฉด ์ ๊ธ์ ์ฝ์ด๋ณด์ธ์.
๊น๋ฉ CI
CI(์ง์์ ํตํฉ)๋ฅผ ์ฒ์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ GitLab CI๋ฅผ ์ฌ์ฉํด ๋ณด์ธ์. ๋ช ๊ฐ์ง ํ๊ฒฝ์ ์ค์ ํ๊ณ ๋ช ๊ฐ์ง ํ ์คํธ๋ฅผ ์คํํด ๋ณด์ธ์. ๋ณ๋ก ์ด๋ ค์ด ํ๋ก์ ํธ๋ ์๋์ง๋ง, ์ด ํ๋ก์ ํธ๋ฅผ ํตํด ๋ง์ ๊ฒ์ ๋ฐฐ์ธ ์ ์์ ๊ฑฐ๋ผ ํ์ ํฉ๋๋ค. ํ์ฌ ๋ง์ ๊ฐ๋ฐํ์ด CI๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค. ์ฌ์ฉ๋ฒ์ ์์๋๋ฉด ์ ์ฉํฉ๋๋ค.
ะั ะทะฝะฐะตัะต:
- GitLab CI ๋ ๋ฌด์์ ๋๊น?
- ๊ตฌ์ฑ ๋ฐฉ๋ฒ
.gitlab-ci.yml
GitLab ์ฌ์ฉ์์๊ฒ ๋ฌด์์ ํด์ผ ํ ์ง ์๋ ค์ค๋๋ค. - ๋ค๋ฅธ ํ๊ฒฝ์ ๋ฐฐํฌํ๋ ๋ฐฉ๋ฒ
์น์ฌ์ดํธ ๋ถ์๊ธฐ
์น์ฌ์ดํธ์ ์๋ฏธ๋ฅผ ๋ถ์ํ๊ณ ๋ฑ๊ธ์ ๋งค๊ธฐ๋ ์คํฌ๋ ์ดํผ๋ฅผ ๋ง๋์ธ์. ์๋ฅผ ๋ค์ด ์ด๋ฏธ์ง์ ๋๋ฝ๋ ๋์ฒด ํ๊ทธ๊ฐ ์๋์ง ํ์ธํ ์ ์์ต๋๋ค. ๋๋ ํ์ด์ง์ SEO ๋ฉํ ํ๊ทธ๊ฐ ์๋์ง ํ์ธํ์ธ์. ์คํฌ๋ ์ดํผ๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ์์ด ์์ฑ๋ ์ ์์ต๋๋ค.
ะั ะทะฝะฐะตัะต:
- ์คํฌ๋ ์ดํผ๋ ์ด๋ป๊ฒ ์๋ํ๋์?
- DOM ์ ํ์๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ
- ์๊ณ ๋ฆฌ์ฆ์ ์์ฑํ๋ ๋ฐฉ๋ฒ
- ๊ฑฐ๊ธฐ์ ๋ฉ์ถ๊ณ ์ถ์ง ์๋ค๋ฉด ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋์ธ์. ํ์ธํ๋ ๊ฐ ์น์ฌ์ดํธ์ ๋ํ ๋ณด๊ณ ์๋ฅผ ์์ฑํ ์๋ ์์ต๋๋ค.
์์ ๋คํธ์ํฌ์์ ๊ฐ์ ๊ฐ์ง
์์ ๋ฏธ๋์ด์ ๊ฐ์ ๊ฐ์ง๋ ๊ธฐ๊ณ ํ์ต์ ์๊ฐํ๋ ์ข์ ๋ฐฉ๋ฒ์ ๋๋ค.
ํ๋์ ์์ ๋คํธ์ํฌ๋ง ๋ถ์ํ๋ ๊ฒ๋ถํฐ ์์ํ ์ ์์ต๋๋ค. ๋ชจ๋ ์ฌ๋์ ๋๊ฐ ํธ์ํฐ๋ก ์์ํฉ๋๋ค.
์ด๋ฏธ ๋จธ์ ๋ฌ๋ ๊ฒฝํ์ด ์๋ค๋ฉด ๋ค์ํ ์์ ๋คํธ์ํฌ์์ ๋ฐ์ดํฐ๋ฅผ ์์งํ๊ณ ๊ฒฐํฉํด ๋ณด์ธ์.
ะั ะทะฝะฐะตัะต:
- ๋จธ์ ๋ฌ๋์ด๋?
ํธ๋ ๋ก ํด๋ก
๋น์ ์ด ๋ฐฐ์ธ ๋ด์ฉ:
- ์์ฒญ ์ฒ๋ฆฌ ๊ฒฝ๋ก ๊ตฌ์ฑ(๋ผ์ฐํ )
- ๋์ด์ ๋๊ธฐ.
- ์ ๊ฐ์ฒด(๋ณด๋, ๋ชฉ๋ก, ์นด๋)๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ.
- ์ ๋ ฅ ๋ฐ์ดํฐ ์ฒ๋ฆฌ ๋ฐ ํ์ธ.
- ํด๋ผ์ด์ธํธ ์ธก: ๋ก์ปฌ ์ ์ฅ์๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ, ๋ก์ปฌ ์ ์ฅ์์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ ๋ฐฉ๋ฒ, ๋ก์ปฌ ์ ์ฅ์์์ ๋ฐ์ดํฐ๋ฅผ ์ฝ๋ ๋ฐฉ๋ฒ.
- ์๋ฒ ์ธก์์: ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ, ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ ๋ฐฉ๋ฒ, ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ๋ฐ์ดํฐ๋ฅผ ์ฝ๋ ๋ฐฉ๋ฒ.
๊ด๋ฆฌ์ ํจ๋
๊ธฐ๋ณธ ์ฌํญ์ ํ์ตํ๋ ๋ฐ ์ด์์ ์ธ ๊ฐ๋จํ CRUD ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋ค. ๋ฐฐ์ฐ์:
- ์ฌ์ฉ์๋ฅผ ์์ฑํ๊ณ ์ฌ์ฉ์๋ฅผ ๊ด๋ฆฌํฉ๋๋ค.
- ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ํธ ์์ฉ - ์ฌ์ฉ์ ์์ฑ, ์ฝ๊ธฐ, ํธ์ง, ์ญ์ .
- ์ ๋ ฅ ์ ํจ์ฑ ๊ฒ์ฌ ๋ฐ ์์ ์์ .
์ํธํํ ์ถ์ ๊ธฐ(๊ธฐ๋ณธ ๋ชจ๋ฐ์ผ ์ฑ)
๋ฌด์์ด๋ : Swift, Objective-C, React Native, Java, Kotlin.
์ฐ๋ฆฌ๋ ๊ณต๋ถํฉ๋๋ค :
- ๊ธฐ๋ณธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋ ๋ฐฉ์.
- API์์ ๋ฐ์ดํฐ๋ฅผ ๊ฒ์ํ๋ ๋ฐฉ๋ฒ.
- ๊ธฐ๋ณธ ํ์ด์ง ๋ ์ด์์์ ์๋ ๋ฐฉ์.
- ๋ชจ๋ฐ์ผ ์๋ฎฌ๋ ์ดํฐ๋ก ์์ ํ๋ ๋ฐฉ๋ฒ.
๊ด์ฌ์ด ์๋ค๋ฉด ์ฌ๊ธฐ๋ก
์ฒ์๋ถํฐ ์์ ๋ง์ ์นํฉ ๊ตฌ์ฑ ์ค์
๊ธฐ์ ์ ์ผ๋ก ์ด๊ฒ์ ์ ํ๋ฆฌ์ผ์ด์
์ ์๋์ง๋ง, webpack์ด ๋ด๋ถ์์ ์ด๋ป๊ฒ ์๋ํ๋์ง ์ดํดํ๋ ๊ฒ์ ๋งค์ฐ ์ ์ฉํ ์์
์
๋๋ค. ์ด์ ๊ทธ๊ฒ์ "๋ธ๋๋ฐ์ค"๊ฐ ์๋๋ผ ์ดํดํ ์ ์๋ ๋๊ตฌ๊ฐ ๋ ๊ฒ์
๋๋ค.
์๊ตฌ ์ฌํญ :
- es7์ es5๋ก ์ปดํ์ผํฉ๋๋ค(๊ธฐ๋ณธ).
- jsx๋ฅผ js๋ก ์ปดํ์ผํ๊ฑฐ๋ - .vue๋ฅผ .js๋ก ์ปดํ์ผํฉ๋๋ค(๋ก๋๋ฅผ ๋ฐฐ์์ผ ํฉ๋๋ค).
- webpack ๊ฐ๋ฐ ์๋ฒ ๋ฐ ํซ ๋ชจ๋ ์ฌ๋ก๋ฉ์ ์ค์ ํฉ๋๋ค. (vue-cli์ create-react-app ๋ ๋ค ์ฌ์ฉ)
- Heroku, now.sh ๋๋ Github๋ฅผ ์ฌ์ฉํ์ฌ ์นํฉ ํ๋ก์ ํธ๋ฅผ ๋ฐฐํฌํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
- CSS(scss, less, stylus)๋ฅผ ์ปดํ์ผํ๊ธฐ ์ํด ์ ํธํ๋ ์ ์ฒ๋ฆฌ๊ธฐ๋ฅผ ์ค์ ํ์ธ์.
- webpack์์ ์ด๋ฏธ์ง์ SVG๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
ํด์ปค๋ด์ค ํด๋ก
๋ชจ๋ ์ ๋ค์ด๋ ์์ ๋ง์ Hackernews๋ฅผ ๋ง๋ค์ด์ผ ํฉ๋๋ค.
๊ทธ ๊ณผ์ ์์ ๋ฐฐ์ธ ๋ด์ฉ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- hackernews API์ ์ํธ์์ฉํ๋ ๋ฐฉ๋ฒ.
- ๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋๋ ๋ฐฉ๋ฒ.
- ๋๊ธ๋ณด๊ธฐ, ๊ฐ๋ณ๋๊ธ, ํ๋กํ ๋ฑ์ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋๋ค.
- ์์ฒญ ์ฒ๋ฆฌ ๊ฒฝ๋ก ๊ตฌ์ฑ(๋ผ์ฐํ )
ํฌ๋์ ฐ์น์นด
์ง์งํ๊ฒ? ํฌ๋์์นด? ์์ฒ ๊ฐ๊ฐ ์์ต๋๋ค. ํ์ง๋ง ์ด๋ฐ ์ธ๊ธฐ์๋ ์ด์ ๊ฐ ์๋ค๊ณ ๋ฏฟ์ต๋๋ค.
Tudu ์ฑ์ ๊ธฐ๋ณธ ์ฌํญ์ ํ์คํ ์ดํดํ ์ ์๋ ์ข์ ๋ฐฉ๋ฒ์
๋๋ค. ๋ฐ๋๋ผ Javascript๋ก ํ๋์ ์ ํ๋ฆฌ์ผ์ด์
์ ์์ฑํ๊ณ , ์ ํธํ๋ ํ๋ ์์ํฌ๋ก ํ๋์ ์ ํ๋ฆฌ์ผ์ด์
์ ์์ฑํด ๋ณด์ญ์์ค.
๋ฐฐ์ฐ๋ค:
- ์ ์์ ์ ๋ง๋ญ๋๋ค.
- ํ๋๊ฐ ์ฑ์์ก๋์ง ํ์ธํ์ธ์.
- ์์
์ ํํฐ๋งํฉ๋๋ค(์๋ฃ, ํ์ฑ, ๋ชจ๋). ์ฌ์ฉ
filter
ะธreduce
. - ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ๋ณธ์ ์ดํดํฉ๋๋ค.
์ ๋ ฌ ๊ฐ๋ฅํ ๋๋๊ทธ ์ค ๋๋กญ ๋ชฉ๋ก
์ดํดํ๋ ๋ฐ ๋งค์ฐ ๋์์ด ๋จ
๋ฐฐ์ฐ์:
- ๋๋๊ทธ ์ค ๋๋กญ API
- ํ๋ถํ UI ๋ง๋ค๊ธฐ
๋ฉ์ ์ ํด๋ก (๋ค์ดํฐ๋ธ ์ฑ)
์น ์ ํ๋ฆฌ์ผ์ด์
๊ณผ ๊ธฐ๋ณธ ์ ํ๋ฆฌ์ผ์ด์
์ด ์ด๋ป๊ฒ ์๋ํ๋์ง ์ดํดํ๊ฒ ๋์ด ํ์ ๋ฉ์ด๋ฆฌ์ ์ฐจ๋ณํ๋ฉ๋๋ค.
์ฐ๋ฆฌ๊ฐ ๊ณต๋ถํ ๋ด์ฉ:
- ์น ์์ผ(์ธ์คํดํธ ๋ฉ์์ง)
- ๊ธฐ๋ณธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋ ๋ฐฉ์.
- ๊ธฐ๋ณธ ์ ํ๋ฆฌ์ผ์ด์ ์์ ํ ํ๋ฆฟ์ด ์๋ํ๋ ๋ฐฉ์.
- ๊ธฐ๋ณธ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์์ฒญ ์ฒ๋ฆฌ ๊ฒฝ๋ก๋ฅผ ๊ตฌ์ฑํฉ๋๋ค.
ํ ์คํธ ์๋ํฐ
ํ
์คํธ ํธ์ง๊ธฐ์ ๋ชฉ์ ์ ์์์ ์ ํจํ HTML ๋งํฌ์
์ผ๋ก ๋ณํํ๋ ค๋ ์ฌ์ฉ์์ ๋
ธ๋ ฅ์ ์ค์ด๋ ๊ฒ์
๋๋ค. ์ข์ ํ
์คํธ ํธ์ง๊ธฐ๋ฅผ ์ฌ์ฉํ๋ฉด ์ฌ์ฉ์๊ฐ ๋ค์ํ ๋ฐฉ์์ผ๋ก ํ
์คํธ ์์์ ์ง์ ํ ์ ์์ต๋๋ค.
์ด๋ ์์ ์์ ๋ชจ๋ ์ฌ๋์ด ํ
์คํธ ํธ์ง๊ธฐ๋ฅผ ์ฌ์ฉํด ๋ณธ ์ ์ด ์์ ๊ฒ์
๋๋ค. ๊ทธ๋์ ์ ์๋ผ
๋ ๋ง ํด๋ก
Reddit์ด ๋๋ถ๋ถ์ ์๊ฐ์ ์ฐจ์งํ์ง๋ง ๊ณ์ํด์ Reddit์ ์ฐธ์ฌํ๊ณ ์์ต๋๋ค. Reddit ๋ณต์ ๋ณธ์ ์์ฑํ๋ ๊ฒ์ (Reddit์ ํ์ํ๋ ๋์์) ํ๋ก๊ทธ๋๋ฐ์ ๋ฐฐ์ฐ๋ ํจ๊ณผ์ ์ธ ๋ฐฉ๋ฒ์ ๋๋ค.
Reddit์ ๋งค์ฐ ํ๋ถํ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค.
๋๋ํ ๊ณ ๊ฐ์ ์์ ์ด ์ ๋๋ก ์ํ๋์ง ์๊ณ ์์์ ์ฆ์ ๊นจ๋ซ๊ณ ๋ค๋ฅธ ์ฌ๋์ ์ฐพ์ ๊ฒ์ ๋๋ค.
์คํ์์ค NPM ํจํค์ง ๊ฒ์
Javascript ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฒฝ์ฐ ํจํค์ง ๊ด๋ฆฌ์๋ฅผ ์ฌ์ฉํ ๊ฐ๋ฅ์ฑ์ด ์์ต๋๋ค. ํจํค์ง ๊ด๋ฆฌ์๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค๋ฅธ ์ฌ๋์ด ์์ฑํ๊ณ ๊ฒ์ํ ๊ธฐ์กด ์ฝ๋๋ฅผ ์ฌ์ฌ์ฉํ ์ ์์ต๋๋ค.
ํจํค์ง์ ์ ์ฒด ๊ฐ๋ฐ ์ฃผ๊ธฐ๋ฅผ ์ดํดํ๋ ๊ฒ์ ๋งค์ฐ ์ข์ ๊ฒฝํ์ ์ ๊ณตํ ๊ฒ์ ๋๋ค. ์ฝ๋๋ฅผ ๊ฒ์ํ ๋ ์์์ผ ํ ์ฌํญ์ด ๋ง์ด ์์ต๋๋ค. ๋ณด์, ์๋ฏธ๋ก ์ ๋ฒ์ ๊ด๋ฆฌ, ํ์ฅ์ฑ, ๋ช ๋ช ๊ท์น ๋ฐ ์ ์ง ๊ด๋ฆฌ์ ๋ํด ์๊ฐํด์ผ ํฉ๋๋ค.
ํจํค์ง๋ ๋ฌด์์ด๋ ๋ ์ ์์ต๋๋ค. ์์ด๋์ด๊ฐ ์์ผ๋ฉด ๋๋ง์ Lodash๋ฅผ ๋ง๋ค์ด ๊ฒ์ํ์ธ์.
๋ก๋ค์ฌ:
์จ๋ผ์ธ์์ ์ด๋ค ์ผ์ ํ๋ค๋ฉด ๋ค๋ฅธ ์ฌ๋๋ณด๋ค 10% ๋ ์์๊ฒ ๋ฉ๋๋ค.
freeCodeCamp ์ปค๋ฆฌํ๋ผ
freeCodecamp๋ ๋ง์ ๊ฒ์ ์์งํ์ต๋๋ค
freeCodeCamp๋ ๋น์๋ฆฌ ๋จ์ฒด์ ๋๋ค. ์ด๋ ๋ํํ ์น ๊ธฐ๋ฐ ํ์ต ํ๋ซํผ, ์จ๋ผ์ธ ์ปค๋ฎค๋ํฐ ํฌ๋ผ, ๋ํ๋ฐฉ, ๋งค์ฒด ๊ฐํ๋ฌผ ๋ฐ ๋ชจ๋ ์ฌ๋์ด ํ์ต ์น ๊ฐ๋ฐ์ ์ ๊ทผํ ์ ์๋๋ก ํ๋ ค๋ ์ง์ญ ์กฐ์ง์ผ๋ก ๊ตฌ์ฑ๋ฉ๋๋ค.
์ ์ฒด ๊ณผ์ ์ ์ด์ํ๋ค๋ฉด ์ฒซ ๋ฒ์งธ ์ง์
์ ๋ํ ์๊ฒฉ์ ์ถฉ๋ถํ ๊ฐ์ถ๊ฒ ๋ ๊ฒ์
๋๋ค.
์ฒ์๋ถํฐ HTTP ์๋ฒ ๋ง๋ค๊ธฐ
HTTP ํ๋กํ ์ฝ์ ์ธํฐ๋ท์์ ์ฝํ ์ธ ๊ฐ ์ด๋ํ๋ ๋ฐ ์ฌ์ฉ๋๋ ์ฃผ์ ํ๋กํ ์ฝ ์ค ํ๋์ ๋๋ค. HTTP ์๋ฒ๋ HTML, CSS, JS์ ๊ฐ์ ์ ์ ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
HTTP ํ๋กํ ์ฝ์ ์ฒ์๋ถํฐ ๊ตฌํํ ์ ์์ผ๋ฉด ์ฌ๋ฌผ์ด ์ํธ ์์ฉํ๋ ๋ฐฉ์์ ๋ํ ์ง์์ด ํ์ฅ๋ฉ๋๋ค.
์๋ฅผ ๋ค์ด NodeJ๋ฅผ ์ฌ์ฉํ๋ค๋ฉด Express๊ฐ HTTP ์๋ฒ๋ฅผ ์ ๊ณตํ๋ค๋ ๊ฒ์ ์ ์ ์์ต๋๋ค.
์ฐธ๊ณ ๋ก ๋ค์์ ์ํํ ์ ์๋์ง ํ์ธํ์ธ์.
- ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ์๋ฒ ์ค์
- ์๋ฒ๋ HTML, CSS ๋ฐ JS ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํด์ผ ํฉ๋๋ค.
- ๋ผ์ฐํฐ๋ฅผ ์ฒ์๋ถํฐ ๊ตฌํํ๊ธฐ
- ๋ณ๊ฒฝ ์ฌํญ ๋ชจ๋ํฐ๋ง ๋ฐ ์๋ฒ ์ ๋ฐ์ดํธ
์ด์ ๋ฅผ ๋ชจ๋ฅธ๋ค๋ฉด ๋ค์์ ์ฌ์ฉํ์ธ์.
๋ฉ๋ชจ์ฉ ๋ฐ์คํฌํ ์ฑ
์ฐ๋ฆฌ ๋ชจ๋ ๋ฉ๋ชจ๋ฅผ ํด์, ๊ทธ๋ ์ฃ ?
๋ฉ๋ชจ ์ฑ์ ๋ง๋ค์ด ๋ณด๊ฒ ์ต๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฉ๋ชจ๋ฅผ ์ ์ฅํ๊ณ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋๊ธฐํํด์ผ ํฉ๋๋ค. Electron, Swift ๋๋ ์ํ๋ ๊ฒ์ ์ฌ์ฉํ์ฌ ์์คํ ์ ์ ํฉํ ๊ธฐ๋ณธ ์ฑ์ ๊ตฌ์ถํ์ธ์.
์ด๊ฒ์ ์ฒซ ๋ฒ์งธ ์ฑ๋ฆฐ์ง(ํ ์คํธ ํธ์ง๊ธฐ)์ ์์ ๋กญ๊ฒ ๊ฒฐํฉํด ๋ณด์ธ์.
๋ณด๋์ค๋ก ๋ฐ์คํฌํฑ ๋ฒ์ ์ ์น ๋ฒ์ ๊ณผ ๋๊ธฐํํด ๋ณด์ธ์.
ํ์บ์คํธ(์ค๋ฒ์บ์คํธ ํด๋ก )
ํ์บ์คํธ๋ฅผ ๋ฃ์ง ์๋ ์ฌ๋์ ๋๊ตฌ์
๋๊น?
๋ค์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ญ๋๋ค.
- ๊ณ์ ์์ฑ
- ํ์บ์คํธ ๊ฒ์
- ํ์บ์คํธ ํ๊ฐ ๋ฐ ๊ตฌ๋
- 30์ด ๋์ ์ ์ง ๋ฐ ์ฌ์, ์๋ ๋ณ๊ฒฝ, ์์ผ๋ก ๋ฐ ๋ค๋ก ๊ธฐ๋ฅ์ ์ํํฉ๋๋ค.
iTunes API๋ฅผ ์ถ๋ฐ์ ์ผ๋ก ์ฌ์ฉํด ๋ณด์ธ์. ๋ค๋ฅธ ์๋ฃ๋ฅผ ์์๋ ๋ถ์ ๋๊ธ์ ์ฌ๋ ค์ฃผ์ธ์.
ํ๋ฉด ์บก์ฒ
์๋
ํ์ธ์! ์ง๊ธ ํ๋ฉด์ ์ดฌ์ํ๊ณ ์์ด์!
ํ๋ฉด์ ์บก์ฒํ๊ณ ํด๋ฆฝ์ ๋ค๋ฅธ ์ด๋ฆ์ผ๋ก ์ ์ฅํ ์ ์๋ ๋ฐ์คํฌํฑ ๋๋ ์น ์ฑ์ ๋ง๋ญ๋๋ค. .gif
์ฌ๊ธฐ์
์์ค
๊ฐ๋ฐ์๋ฅผ ์ํ 5๊ฐ์ง ๋๋ดํ ๊ต์ก ํ๋ก์ ํธ(Layer, Squoosh, Calculator, Website Crawler, Music Player) ํ๋ก ํธ์๋ ๊ธฐ์ ์ ์ฐ๋งํ๊ธฐ ์ํ 9๊ฐ์ง ํ๋ก์ ํธ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ฅผ ์ํ XNUMX๊ฐ์ง ๊ณผ์ ๊ฐ๋ฐ์๋ฅผ ์ํ ์ฌ๋ฏธ์๋ ์ฐ์ต -
8๊ฐ ๊ต์ก ํ๋ก์ ํธ -
์ฐ์ตํ ๋ ๋ค๋ฅธ ํ๋ก์ ํธ ๋ชฉ๋ก
์ถ์ฒ : habr.com