์ด ๊ฐ์๋ ์ ๊ฐ ์งํํ โ์ค๋ฒจํธ๋ก ์์ํ๋ ์น ํ๋ฐํธ์๋โ ๋ผ๋ ์ฑ ์ ํ๋ฐ๋ถ SLOG ํ๋ก์ ํธ ๋ง๋ค๊ธฐ ๋ถ๋ถ์ ๋ํ ์์ ๊ฐ์์ ๋๋ค. ์ฑ ์์ ์กฐ๊ธ ๋ถ์กฑํ๋ ๋ถ๋ถ๋ค์ ๋ณด์ํด, ์ข ๋ ๋ง์ ๋ถ๋ค์ด Svelte๋ผ๋ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ์ ๋ํด ๊ด์ฌ์ ๊ฐ๊ธธ ๋ฐ๋ผ๋ ๋ง์์์ ์ด ๊ฐ์๋ฅผ ๋ง๋ จํ์ต๋๋ค.
Svelte ์ค๊ธ ์ฌ์ฉ ๋ฐฉ๋ฒ
Rest API๋ฅผ ์ด์ฉํ ํต์ ๋ฐฉ๋ฒ
Axios๋ฅผ ์ด์ฉํ ํจ์จ์ ์ธ ์๋ฒ ํต์ ๋ฐฉ๋ฒ
infinite scroll(๋ฌดํ์คํฌ๋กค)์ ์ด์ฉํ ํ์ด์ง๋ค์ด์ ๊ตฌํ
JWT ํ ํฐ์ ์ด์ฉํ ์ธ์ฆ ๋ฐฉ๋ฒ
ํผ ๊ฒ์ฆ
๋ ์ค๋ฅด๋ FE ๋์ธ ์ค๋ฒจํธ(Svelte)
์ค๊ธ ๊ฐ๋ฐ์์๊ฒ ํ์ํ ํต์ฌ์ ๋น ๋ฅด๊ฒ!
Svelte ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ์ ์ตํ๋ค๋ฉด ๋ค์์ ๋น์ฐํ ์ค์ ํ๋ก์ ํธ์ ๋๋ค. Svelte REST-API ํ๋ก์ ํธ ๊ฐ์๋ฅผ ํตํด ์ค์ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ ๊ธฐ์ด ๊ฒฝํ์ ์์๋ณด์ธ์!
์ด ๊ฐ์๋ Svelte๋ฅผ ์ด์ฉํด CRUD: ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ฐ๊ณ (Create), ์ฝ๊ณ (Read), ์์ ํ๊ณ (Update), ์ญ์ (Delete)ํ๋ ๋ฐฉ๋ฒ์ ์์๊ฐ๊ฒ ๋ฉ๋๋ค. ์ฌ๊ธฐ์ JWT ํ ํฐ์ ์ด์ฉํ ์ธ์ฆ๋ฐฉ๋ฒ๊ณผ ๋ฌดํ ์คํฌ๋กค์ ์ด์ฉํ ํ์ด์ง๋ค์ด์ ๋ฑ ํ๋ฐํธ์๋๋ก ํ๋ก์ ํธ๋ฅผ ์งํํ๋ ๋ฐ ํ์๋ก ์์์ผ ํ๋ ์์๋ค์ ํ์ตํ ์ ์์ต๋๋ค.
๊ฒ์๊ธ ์์ฑ ํ์ด์ง
์ฝ๋ฉํธ ํ์ด์ง
๋ก๊ทธ์ธ ํ์ด์ง
์ด ๊ฐ์๋ โ์ค๋ฒจํธ๋ก ์์ํ๋ ์น ํ๋ฐํธ์๋โ ๋์์ ๋ง์ง๋ง ์ฑํฐ๋ฅผ ์์์ผ๋ก ๋ง๋ ๊ฐ์์
๋๋ค.
(์ ์ ์ง์: HTML/CSS ๋ฐ JavaScript ๊ธฐ์ด, Svelte ๊ธฐ์ด)
ํ๋ฐํธ์๋ ๊ฐ๋ฐ์ ํ๋ฉด์ ๊ฐ์ฅ ๋ง์ด ํ๋ ์ผ์ ์๋ง๋ REST API์ ํต์ ํ๋ ์ด๋ค ์๋น์ค๋ฅผ ๋ง๋๋ ์์ ์ผ ๊ฒ์ ๋๋ค. ์๋ฒ๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ , ์์ฒญ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ ํ๋ฉด์ ๋ณด์ฌ์ฃผ๊ณ , ๋ฐ์ดํฐ์ ์ถ๊ฐ, ์์ , ์ญ์ (CRUD) ๋ฑ์ ์์ฒญํ๋ ๊ณผ์ ์ ํ๋ฐํธ์๋ ๊ฐ๋ฐ์ ํ๋ ๋๊ตฌ๋ผ๋ ๊ผญ ์์์ผ ํ๋ ์์์ ๋๋ค.
์ด ๊ฐ์์์๋ ํ๋ฐํธ์๋ ๊ด์ ์์ ์ด๋ฐ REST API ํ์ ์ฌ์ฉ๋ฒ์ ๋ํ ๋ด์ฉ์ ๋ค๋ฃน๋๋ค.
REST API ํ์ ์ฌ์ฉ๋ฒ ์ธ์๋, Svelte์ Store๋ฅผ ํ์ฉํด ๋ชฉ๋ก์ ๋ณํ๊ฐ ์์ ๋ ๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ๋ค์ ๋ถ๋ฌ์ค๋ ๊ฒ์ด ์๋ ๋ถ๋ถ ์์ ์ ํตํ ํต์ ํจ์จ์ ๋์ด๋ ๋ฐฉ๋ฒ ๋ฑ์ ๋ํ ๊ณ ๋ฏผ๋ถํฐ, ํ์ฌ ๋๋ฆฌ ์ฐ์ด๋ ๋ฌดํ์คํฌ๋กค ๋ฐฉ์์ UI๋ฅผ ๊ตฌํํ ๋ ๋ฐ์ํ ์ ์๋ ๋ฌธ์ ์ ๊ทธ ํด๊ฒฐ ๋ฐฉ๋ฒ ๋ฑ๋ ์ค๋น๋์ด ์์ต๋๋ค.
๋ง๋ถ์ฌ JWT๋ฅผ ์ด์ฉํ ์ธ์ฆ ๋ฐฉ๋ฒ๊ณผ ์ฑ์ ์์ฑ๋๋ฅผ ๋์ด๊ธฐ ์ํ ํผ ๊ฒ์ฆ, ์ข ๋ ์ง๊ด์ ์ธ ๋ ์ง ๋ณด๊ธฐ ๋ชจ๋, ๊ทธ๋ ๋ฆฝ์ ์ผ๋ก ์ฌ์ฌ์ฉํ ์ ์๋ ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ ๋ฑ์ ํตํด์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ด๊ธ์ ๋์ด์ ์ค๊ธ ๊ฐ๋ฐ์๊ฐ ๋์์ ๋ ํ ๋ฒ์ฏค ๊ณ ๋ฏผํด์ผ ํ๋ ๋ถ๋ถ๋ค์ ํ์ตํ ์ ์๋๋ก ์ค๋นํ์ต๋๋ค. ํจ๊ป ๋์ ํด๋ด ์๋ค! (Svelte, Axios, Yup, Datejs)
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ๊ด์ฌ์ด ์๋ ๋ถ
์น์ผ๋ก ์ข ๋ ๋น ๋ฅด๊ฒ ๋ฌด์ธ๊ฐ๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋ถ
HTML, JavaScript ๊ธฐ๋ณธ๊ธฐ๋ฅผ ํตํด ๋ฌด์ธ๊ฐ ๊ตฌํํ๊ณ ์ถ์ ๋ถ
์ค๊ธ FE ๊ฐ๋ฐ์๋ก ๋ฐ๋์ํ๊ณ ์ถ์ ์ด๋ณด ํ๋ฐํธ์๋ ๊ฐ๋ฐ์
ํ๋ฐํธ์๋ ์์ ์ ๋ง์ณค๋ค๋ฉด ํด๋น ์๋น์ค์ API์๋ฒ๋ฅผ ๋ง๋๋ ๊ณผ์ ์ ๋ค์ด๋ณด์๊ธธ ์ถ์ฒ๋๋ฆฝ๋๋ค. ์ต์ Node.js ๊ธฐ์ ๋ค์ธ Fastify, Prisma ๊ทธ๋ฆฌ๊ณ Typescript๋ฅผ ์ด์ฉํ๋ ๋ฐฑ์๋ ๊ณผ์ ์ ์ค๋นํ์ต๋๋ค.
๊ฐ์ข ๋งํฌ: https://inf.run/mpCv8
Q. Svelte ๊ธฐ์ด ์ฌ์ฉ๋ฒ์ ์์์ผ ํ๋์?
Svelte ๊ธฐ์ด๋ ์ ๋ค๋ฅธ ๋ฌด๋ฃ ๊ฐ์๋ฅผ ํตํด 1~2์๊ฐ์ด๋ฉด ํ์ตํ ์ ์์ต๋๋ค. ํด๋น ๊ฐ์๋ฅผ ๋จผ์ ์๊ฐํ ๋ค์ ์ด ๊ฐ์๋ฅผ ์ถ๊ฐ๋ก ๋ค์ผ์๊ธธ ์ถ์ฒ๋๋ฆฝ๋๋ค.
Q. ๊ฐ๋ฐ ํ๊ฒฝ์ ์ด๋ป๊ฒ ๋๋์?
macOS, Windows, Linux ๋ฑ Node.js๋ฅผ ์ค์นํ ์ ์๋ ์ด๋ค PC์์๋ผ๋ ๊ฐ๋ฐํ๊ฒฝ์ ํ์ํ ํ๋ก๊ทธ๋จ์ ์ค์นํ๊ณ ์งํํ ์ ์์ต๋๋ค.
Q. ์ฑ โ์ค๋ฒจํธ๋ก ์์ํ๋ ์นํ๋ฐํธโ์์์ ํ๋ก์ ํธ ๋ด์ฉ๊ณผ ์์ ํ ๊ฐ์๊ฐ์?
ํ๋ก์ ํธ ์์ฒด๋ ๊ฐ์ง๋ง ์ฑ ๋ด์ฉ ์ค ์๋น ๋ถ๋ถ์ ๋ณด์ํด์ ์์์ ๋ง๋ค์์ต๋๋ค. JWT ํ ํฐ์ ์ด์ฉํ ์ธ์ฆ๋ฐฉ๋ฒ๊ณผ ์คํฌ๋กค๊ณผ ๊ด๋ จ๋ ๋ถ๋ถ์ ํ๋์ ๋ ๋ฆฝ๋ ์ปดํฌ๋ํธ๋ก ๋ถ๋ฆฌํ๋ ๊ณผ์ ๋ฑ์ด ์ถ๊ฐ๋์์ผ๋ ํน์ ์ฑ ์ ์ด๋ฏธ ํ์ตํ ๋ถ๋ค๋ ํ ๋ฒ์ฏค ๋ค์ด๋ณด๋ ๊ฒ์ ์ถ์ฒ๋๋ฆฝ๋๋ค.
๐พ ์์ ์ฐธ๊ณ ์๋ฃ
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
ํ๋ฐํธ์๋ ๊ฐ๋ฐ์ ๊ด์ฌ์ด ์๋ ๋ถ
์น์ผ๋ก ์ข ๋ ๋น ๋ฅด๊ฒ ๋ฌด์ธ๊ฐ๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋ถ
HTML, Javascript ๊ธฐ๋ณธ ์ฌ์ฉ ๋ฐฉ๋ฒ์ ์ตํ ํ ์ด๋ฅผ ํตํด ๋ฌด์ธ๊ฐ ๊ตฌํํด ๋ณด๊ณ ์ถ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML, CSS ๊ธฐ์ด ์ง์
Javascript ๊ธฐ์ด
Svelte ๊ธฐ์ด
2,313
๋ช
์๊ฐ์
48
๊ฐ
์๊ฐํ
81
๊ฐ
๋ต๋ณ
4.9
์
๊ฐ์ ํ์
5
๊ฐ
๊ฐ์
2000๋ ๋ ์ค๋ฐ๋ถํฐ ๋ณธ๊ฒฉ์ ์ผ๋ก ์น๊ฐ๋ฐ์ ์์ํ์ฌ ํ์ฌ๊น์ง ํ๋ฆฌ๋์ ๊ฐ๋ฐ์๋ก ํ๋ํ๊ณ ์์ต๋๋ค. ์ฝ5๋ ๊ฐ Amplix BI ์๋ฃจ์ ์ค๋ฌด์ ๊ต์ก์ ์งํํ๊ณ ๊ฐ๋ฐ์ ์ง์ํ๋ฉฐ ์๋ก์ด ๊ธฐ์ ์ ํจ์จ์ ์ผ๋ก ์ ๋ฌํ๋ ๊ฒ์ ๋ํ ๋ง์ ๊ฒฝํ๊ณผ ๊ณ ๋ฏผ์ ํ์ต๋๋ค.
ํ์ฌ๋ ๊ฐ๋ฐ ์ ๋ฌด์ ํจ๊ป ๊ฐ๋ฐ์๋ค์๊ฒ ๋์์ด ๋ ๋งํ ์น๊ด๋ จ ๋ถ์ผ์ ์๋ก์ด ๊ธฐ์ ์ ์ฐพ๊ณ ๊ฐ์ข์ ์ฑ ์ ํตํด ๊ณต์ ํ๊ณ ์์ต๋๋ค.
ํ) ํ๋ฆฌ๋์
์ ) (์ฃผ) ๋น์ฆํ๋ฌ๊ทธ ์ ๋ต์๋ฃจ์ ์ฌ์ ๋ถ ํ์ฅ
์ ) (์ฃผ) ํผ๋๋ชฝํค์ค ์๋์คํ ๋ฆฌ ์๋น์ค ๊ฐ๋ฐ ํ์ฅ
youtube: https://www.youtube.com/channel/UC3cJspjF4TRTyD_RS0azeaw
email: freeseamew@gmail.com
blog1: https://medium.com/freeseamew
blog2: https://dev.to/freeseamew
์ฐจ์ธ๋ Node.js ๋ฐฑ์๋ ์๋ฒ ๊ฐ๋ฐ(Fastify & Prisma & Typescript์ ํจ๊ปํ๋)
GraphQL ์์ ์ ๋ณต (๊ฐ์์ ํค์ค์คํฌ๋ฅผ ๊ตฌํํ๋ฉฐ ๋ฐฐ์ฐ๋ ํ์คํ ๊ณผ์ )
yes24, ๊ต๋ณด๋ฌธ๊ณ , ์๋ผ๋
์ ์ฒด
20๊ฐ โ (3์๊ฐ 14๋ถ)
SLOG ํ๋ก์ ํธ ์ค๋ช
02:44
๋ผ์ฐํฐ ์ค์
08:40
์คํ ์ด ๋ฐฐ์น
03:20
๋ง๋ฌด๋ฆฌ
01:28
๋ฌด๋ฃ