Hollie  Ratke

Hollie Ratke

1603252800

Welcome to the WebDev Cave

Welcome to my Computer related Youtube channel, I have launched this channel to share with you all the things I have learned so far in web development, networking, programming and all the aspects that I am interested in concerning the computer world

#webdev

What is GEEK

Buddha Community

Welcome to the WebDev Cave
Hollie  Ratke

Hollie Ratke

1603252800

Welcome to the WebDev Cave

Welcome to my Computer related Youtube channel, I have launched this channel to share with you all the things I have learned so far in web development, networking, programming and all the aspects that I am interested in concerning the computer world

#webdev

Corey Brooks

Corey Brooks

1639724168

How to Integrate 3D Into React Website using Three.js

Three.js 3D Elements for your website using ReactJS

After learning the basics of web development, you probably want to learn more advanced techniques to improve your website. Enhancing interactions is one way to do this. The most common ones include animations, hovering on buttons, and swiping. In this tutorial, we will learn how to integrate 3D into your React website using Three.js.

Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL. 

You can find the initial code:

https://codesandbox.io/s/three-js-initial-x3ojl

The final code: https://codesandbox.io/s/three-js-final-5phhd 

00:00 Intro to Three.js
03:10 Dependencies
04:00 Box geometry
17:35 Animated Sphere
22:40 Import 3D models

#threejs #webdev #reactjs #react #webdev 

Toby Rogers

Toby Rogers

1643255600

Prisma Explained in 100 Seconds

Prisma in 100 Seconds

Prisma is an open-source ORM that makes it fun and safe to work with a database like MySQL, Postgres, SQL Server, or MongoDB. It generates a type-safe client library to provide an awesome DX in any Node.js or JavaScript project.

#database #webdev #100SecondsOfCode

๐Ÿ”— Resources

- Prisma Docs https://www.prisma.io/ 
- Prisma Source Code https://github.com/prisma/prisma 
 

๐Ÿ”– Topics Covered

- What is Prisma
- Is Prisma an ORM?
- Prisma Quickstart
- What is Prisma used for?
- How to use Prisma in Node.js
- Using Prisma with a relational database
- Prisma compared to Sequalize or TypeORM

#prisma #database #webdev 

Svelte Framework ๋ฐฐ์šฐ๊ธฐ: SvelteKit์œผ๋กœ ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ ๊ตฌ์ถ•

์ด ํŠœํ† ๋ฆฌ์–ผ์—์„œ๋Š” SvelteKit์œผ๋กœ ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. Netlify์— Sveltekit ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ฐฐํฌํ•ฉ๋‹ˆ๋‹ค. Sapper์—์„œ Sveltekit์œผ๋กœ ์ „ํ™˜ํ•˜๋Š” ์ด์œ ์™€ Sveltekit์—์„œ REST API๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

์ด ๋‹จ๊ณ„๋ณ„ ์ž์Šต์„œ๋ฅผ ํ†ตํ•ด ์ฒซ ๋ฒˆ์งธ SvelteKit ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด์„ธ์š”.

svelte์˜ ํŒ€์€ ๋ช‡ ๋‹ฌ ์ „์— Sveltekit์„ ์†Œ๊ฐœํ–ˆ์Šต๋‹ˆ๋‹ค. Sapper๋ฅผ ๋Œ€์ฒดํ•˜๋Š” ์ƒˆ๋กœ์šด ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ์•„๋ฆ„๋‹ค์šด ๊ฐœ๋ฐœ ๊ฒฝํ—˜๊ณผ ์œ ์—ฐํ•œ ํŒŒ์ผ ์‹œ์Šคํ…œ ๊ธฐ๋ฐ˜ ๋ผ์šฐํŒ…์œผ๋กœ ๋‚ ๋ ตํ•œ ์•ฑ์„ ๋นŒ๋“œํ•˜๋Š” ๊ฐ€์žฅ ๋น ๋ฅธ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ด ๊ธฐ์‚ฌ์—์„œ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ํ•„์š”ํ•œ ๋ชจ๋“  ์—…๋ฐ์ดํŠธ๋กœ ์ƒ˜ํ”Œ ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜์—ฌ Sveltekit์ด ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ์‚ดํŽด๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. Sveltekit์œผ๋กœ ์›น ์•ฑ ๊ตฌ์ถ•์— ๋Œ€ํ•œ ๋ชจ๋“  ๊ธฐ๋ณธ ๊ฐœ๋…, Sapper์—์„œ Sveltekit์œผ๋กœ ์ „ํ™˜ํ•˜๋Š” ์ด์œ , ์•ฑ ๋‚ด์— ๋ฐ๋ชจ ๋ธ”๋กœ๊ทธ๋ฅผ ๊ตฌ์ถ•ํ•˜์—ฌ Sveltekit์—์„œ REST API๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ Netlify์—์„œ Sveltekit ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

Sveltekit์ด๋ž€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

svelte ์›น์‚ฌ์ดํŠธ ์— ๋”ฐ๋ฅด๋ฉด Svelte๋ฅผ ์ฒ˜์Œ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์„ ์œ„ํ•ด :

Svelte is a radical new approach to building user interfaces. Whereas traditional         
frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that 
work into a compile step that happens when you build your app.
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically 
updates the DOM when the state of your app changes.
Svelte is a component-based Javascript framework - much like React, Vue, or angular and is 
used for building web applications in Javascript.

๋ฐ˜๋Œ€๋กœ Sveltekit์€ ๋ชจ๋“  ํฌ๊ธฐ์˜ ๋ฉ‹์ง„ ์•ฑ์„ ๋นŒ๋“œํ•˜๊ธฐ ์œ„ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ๋” ์ž‘์€ ์„ค์น˜ ๊ณต๊ฐ„์œผ๋กœ ๋” ์ค‘์š”ํ•œ ์•ฑ์„ ๋นŒ๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ฆ„๋‹ค์šด ๊ฐœ๋ฐœ ๊ฒฝํ—˜, ์œ ์—ฐํ•œ ํŒŒ์ผ ์‹œ์Šคํ…œ ๊ธฐ๋ฐ˜ ๋ผ์šฐํŒ…, SSR(์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง), ํด๋ผ์ด์–ธํŠธ ์ธก ์ˆ˜ํ™” ๋ฐ ๊ธฐํƒ€ ๊ณ ์œ  ๊ธฐ๋Šฅ์ด ํ•จ๊ป˜ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

Sapper์—์„œ Sveltekit์œผ๋กœ ์ „ํ™˜ํ•˜๋Š” ์ด์œ 

Svelte์˜ ์ฐฝ์‹œ์ž์ธ Richard Harris๋Š” Sapper์—์„œ sveltekit์œผ๋กœ์˜ ์ „ํ™˜์— ์˜ํ–ฅ์„ ๋ฏธ์นœ ๋ช‡ ๊ฐ€์ง€ ์ด์œ ๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์–ธ๊ธ‰ํ•ฉ๋‹ˆ๋‹ค.

  • Sapper๋Š” ์•ฝ๊ฐ„ ๋ณต์žกํ•ด ๋ณด์˜€์Šต๋‹ˆ๋‹ค. sveltejs/template ๊ณผ sveltejs/sapper-templated ์˜ ๊ตฌ๋ถ„์€ ํŠนํžˆ Svelte ๋ฅผ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ์•ฝ๊ฐ„ ํ˜ผ๋ž€์Šค๋Ÿฌ์›Œ ๋ณด์ž…๋‹ˆ๋‹ค.
  • Sapper ํ”„๋กœ์ ํŠธ๊ฐ€ 2017๋…„์— ์‹œ์ž‘๋œ ์ด๋ž˜๋กœ, ์ฝ”๋“œ๋ฒ ์ด์Šค๋Š” ๋ช‡ ๋…„ ๋™์•ˆ ์•ฝ๊ฐ„ ์ง€์ €๋ถ„ํ•ด์กŒ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์›น์ด ์ˆ˜๋…„์— ๊ฑธ์ณ ํฌ๊ฒŒ ๋ฐ”๋€Œ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋” ์ƒˆ๋กœ์šด ์ ‘๊ทผ ๋ฐฉ์‹์„ ์žฌ๊ณ ํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋˜ํ•œ svelte๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์•ฑ์„ ๋นŒ๋“œํ•˜๋Š” ๋ฐ ๊ถŒ์žฅ๋˜๋Š” ๋‹จ์ผ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค๋Š” ์•„์ด๋””์–ด๋Š” ์ƒ๋‹นํ•œ ์ด์ ์„ ๊ฐ€์ ธ์˜ฌ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์˜จ๋ณด๋”ฉ ํ”„๋กœ์„ธ์Šค๋ฅผ ๋‹จ์ˆœํ™”ํ•˜๊ณ  ์œ ์ง€ ๊ด€๋ฆฌ ๋ฐ ์ง€์› ๋ถ€๋‹ด์„ ์ค„์ž…๋‹ˆ๋‹ค.

Sveltekit ์‹œ์ž‘ํ•˜๊ธฐ

Sveltekit์€ ์ตœ์‹  ์›น ์•ฑ ๊ตฌ์ถ•์˜ ๋ชจ๋“  ๋ณ‘๋ชฉ ํ˜„์ƒ์„ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. ์ฐฝ์˜์ ์ธ ๋ถ€๋ถ„์— ์ง‘์ค‘ํ•˜๋Š” ๋™์•ˆ ์ง€๋ฃจํ•œ ์ž‘์—…์„ ๋ชจ๋‘ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ์ตœ์‹  ์›น์šฉ์œผ๋กœ ์„ค๊ณ„๋œ ๋ฒˆ๊ฐœ์ฒ˜๋Ÿผ ๋น ๋ฅธ ํ”„๋ก ํŠธ์—”๋“œ ๋นŒ๋“œ ๋„๊ตฌ์ธ Snowpack under the hood ์— ์˜ํ•ด ๊ตฌ๋™๋ฉ๋‹ˆ๋‹ค . Vite with Svelte ํ”Œ๋Ÿฌ๊ทธ์ธ ์„ ์‚ฌ์šฉ ํ•˜์—ฌ HMR(Hot Module Replacement)์„ ํ†ตํ•ด ๋ฒˆ๊ฐœ์ฒ˜๋Ÿผ ๋น ๋ฅด๊ณ  ๊ธฐ๋Šฅ์ด ํ’๋ถ€ํ•œ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ๋ธŒ๋ผ์šฐ์ €์— ์ฆ‰์‹œ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค.

Sveltekit์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์„ค์ •ํ•˜๋ ค๋ฉด ์ปดํ“จํ„ฐ์— NodeJS๊ฐ€ ์„ค์ •๋˜์–ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜ ๋ช…๋ น์„ ์‹คํ–‰ํ•˜์—ฌ sveltekit ๋ฐ๋ชจ ํ”„๋กœ์ ํŠธ๋ฅผ ์Šค์บํด๋“œํ•œ ๋‹ค์Œ ํด๋”๋กœ ์ด๋™ํ•˜์—ฌ ํ•„์š”ํ•œ ๋ชจ๋“  ์ข…์†์„ฑ์„ ์„ค์น˜ํ•˜์„ธ์š”.

npm init svelte@next my_portfolio_website 
cd my_portfolio_website
npm install 
npm run dev

์ฒซ ๋ฒˆ์งธ ๋ช…๋ น์€ 'my_portfolio_website' ๋””๋ ‰ํ† ๋ฆฌ์— ์žˆ๋Š” ์ƒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ์Šค์บํด๋”ฉํ•˜์—ฌ TypeScript์™€ ๊ฐ™์€ ๋ช‡ ๊ฐ€์ง€ ๊ธฐ๋ณธ ๋„๊ตฌ๋ฅผ ์„ค์ •ํ•  ๊ฒƒ์ธ์ง€ ๋ฌป๋Š” ๋ฉ”์‹œ์ง€๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค. ์ด ํ”„๋กœ์ ํŠธ์—์„œ๋Š” Typescript๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— '์•„๋‹ˆ์˜ค'๋ฅผ ์„ ํƒํ•˜์‹ญ์‹œ์˜ค. ํ›„์† ๋ช…๋ น์€ ์ข…์†์„ฑ์„ ์„ค์น˜ํ•˜๊ณ  localhost:3000 ์—์„œ ์„œ๋ฒ„๋ฅผ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค .

์•„๋ž˜๋Š” ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“ค๊ณ  ์žˆ๋Š” ์ƒ˜ํ”Œ ๋ฐ๋ชจ์ž…๋‹ˆ๋‹ค.

์ƒ˜ํ”Œ ๋ฐ๋ชจ

์ด ๊ธฐ์‚ฌ๋ฅผ ๋”ฐ๋ผ ํ•˜๊ธฐ ์œ„ํ•ด GitHub repo ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค .

ํŽ˜์ด์ง€ ๋ฐ ๊ตฌ์„ฑ ์š”์†Œ ๊ตฌ์„ฑ

Sveltekit์˜ ํ™˜์ƒ์ ์ธ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜๋Š” ํŒŒ์ผ ์‹œ์Šคํ…œ ๊ธฐ๋ฐ˜ ๋ผ์šฐํ„ฐ ์ž…๋‹ˆ๋‹ค. ์ด๋Š” ์ฝ”๋“œ๋ฒ ์ด์Šค์˜ ๊ตฌ์กฐ๊ฐ€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ํŽ˜์ด์ง€์™€ ์—”๋“œํฌ์ธํŠธ๋ผ๋Š” ๋‘ ๊ฐ€์ง€ ์œ ํ˜•์˜ ๊ฒฝ๋กœ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํŽ˜์ด์ง€๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ํŽ˜์ด์ง€๊ฐ€ ์‚ฌ์šฉ์ž์—๊ฒŒ ํ‘œ์‹œ๋˜๋Š” ๋ฐ ํ•„์š”ํ•œ HTML, CSS ๋ฐ JavaScript๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐ˜๋ฉด Endpoints๋Š” ์„œ๋ฒ„์—์„œ๋งŒ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค(๋˜๋Š” ์‚ฌ์ „ ๋ Œ๋”๋ง ์˜ ๊ฒฝ์šฐ ์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•  ๋•Œ ).

๋‹ค๋ฅธ ๊ตฌ์„ฑ ์š”์†Œ ๊ธฐ๋ฐ˜ ํ”„๋ ˆ์ž„์›Œํฌ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ Pages๋Š” .svelteํŒŒ์ผ(๋˜๋Š” config.extension ์— ๋‚˜์—ด๋œ ํ™•์žฅ๋ช…์„ ๊ฐ€์ง„ ํŒŒ์ผ๋กœ ์ž‘์„ฑ๋œ Svelte ๊ตฌ์„ฑ ์š”์†Œ์ž…๋‹ˆ๋‹ค . ์‚ฌ์šฉ์ž๊ฐ€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ฒ˜์Œ ๋ฐฉ๋ฌธํ•˜๋ฉด ๊ธฐ๋ณธ์ ์œผ๋กœ ํ•ด๋‹น ํŽ˜์ด์ง€์˜ ์„œ๋ฒ„ ๋ Œ๋”๋ง ๋ฒ„์ „์ด ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. ๊ฑฐ๊ธฐ์—์„œ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ์˜ ํƒ์ƒ‰์€ ์ „์ ์œผ๋กœ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

ํŒŒ์ผ ์ด๋ฆ„์€ ๊ฒฝ๋กœ๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, src/routes/index.svelte ๋Š” ๋ฐ๋ชจ ์‚ฌ์ดํŠธ์˜ ๋ฃจํŠธ์ž…๋‹ˆ๋‹ค.

์„ ํƒํ•œ ์ฝ”๋“œ ํŽธ์ง‘๊ธฐ๋กœ ํ”„๋กœ์ ํŠธ ํด๋”๋ฅผ ์—ด๊ณ  src/routes/index.svelte ๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค . ์•„๋ž˜์— ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์‚ฝ์ž…ํ•˜์‹ญ์‹œ์˜ค.

<!-- src/routes/index.svelte -->
<svelte:head>
 <title>David Adeneye</title>
</svelte:head>

<div class="container">
 <div class="info">
   <div class="animate-background">
     <div class="container info-container">
     <div class="info-text">
       <h1,
       <p class="animate-text-1">School-taught Computer Scientist,</p>
       <p class="text-2">Self-taught Software Engineer</p>
       </h1>
     </div>
     <h2 class="subtitle">
       On a mission to help SMEs across the globe do businesses 
       seamlessly and digitally.
     </h2>
     <div style="color:black" class="scroll-button animate-scroll" tabindex="0">
       <a href="/about">Click Here</a><div class="arrow">โ†’</div>
     </div>
     </div>
   </div>
 </div>
</div>

<div class="background-div"></div>

๋‘ ๋ฒˆ์งธ ์ค„ ์˜ <svelte:head>ํƒœ๊ทธ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฌธ์„œ ๋‚ด๋ถ€์— ์š”์†Œ๋ฅผ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋จธ์ง€ ์ฝ”๋“œ๋Š” ์ธ๋ฑ์Šค ํŽ˜์ด์ง€์— ๋Œ€ํ•œ HTML ํŽ˜์ด์ง€ ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ ์„น์…˜์—์„œ๋Š” Sveltekit์—์„œ ์Šคํƒ€์ผ๋ง์ด ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ์‚ดํŽด๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.<head>

SvelteKit์—์„œ ์•ฑ ์Šคํƒ€์ผ ์ง€์ •

Sveltekit์˜ ์Šคํƒ€์ผ๋ง ์ž‘์—… ๋ฐฉ์‹์€ ์ผ๋ฐ˜ HTML&CSS ํ”„๋กœ์ ํŠธ์™€ ๊ฑฐ์˜ ๋™์ผํ•œ ํ”„๋กœ์„ธ์Šค์ž…๋‹ˆ๋‹ค. app.html ์˜ head ํƒœ๊ทธ์—์„œ ๋ชจ๋“  ํŽ˜์ด์ง€์— ์ ์šฉ๋œ ์™ธ๋ถ€ CSS ํŒŒ์ผ ๋˜๋Š” ๋ฃจํŠธ ์Šคํƒ€์ผ์„ ์ฐธ์กฐ ํ•˜๊ณ  ๋ฌธ์„œ ํƒœ๊ทธ์— ์„ ํƒ๊ธฐ๋ฅผ ์ฒจ๋ถ€ํ•˜์—ฌ ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์œ„ ์˜ index.svelte ํŒŒ์ผ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•˜๋ ค๋ฉด ๋งˆ์ง€๋ง‰ ์ฝ”๋“œ ์•„๋ž˜์— ๋‹ค์Œ ์Šคํƒ€์ผ์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

<style>
   .info {
       text-align: center;
       position: relative;
   }       

   .info-container {
       height: 100%;
       display:flex;
       flex-direction: column;
       justify-content: center;
       text-align: left;
       align-items: start;
   }

   .container {
   max-width: 1400px;
       margin: 190px 0 0 2.5rem;
   }

   .info h1 {
       font-size: 4rem;
       margin: 0;
   }

   .info h1 p {
       position: relative;
       font: inherit;
       margin: 0;
   text-align: left;
       line-height: 130%;
       width: fit-content;
       font-weight: 800;
       letter-spacing: -0.03em;
   }

   .info h2 {
       max-width: 65ch;
       font-weight: 200;
       margin-top: 0.50rem;
   }

 .background-div {
   background-color: var(--background);
     width: 100%;
   height: 56vh;
   margin: -155px auto;
 }
  
 
   .info .info-text {
       position: relative;
   }

 .scroll-button {
   display: flex;
   border: none;
   outline: none;
   cursor: pointer;
 }

   .scroll-button .arrow {
     margin-left: 0.50rem;
 }
</style>

๋˜ํ•œ ๋‹ค๋ฅธ ํŽ˜์ด์ง€์—์„œ ๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ ์ง€์ •์ด ์ž‘๋™ํ•˜๋„๋ก ํ•˜๋ ค๋ฉด app.html์„ ์—ด๊ณ  html ๋‹ซ๋Š” ํƒœ๊ทธ ์•„๋ž˜์— ๋‹ค์Œ ์Šคํƒ€์ผ์„ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.

<style>
   body {
   background-position: left top;
   font-family: "Inter", sans-serif;
   margin: 0;
   background-repeat: no-repeat;
   }

   * {
   box-sizing: border-box;
  
   }

   a {
   text-decoration: none;
   color: black;
   }

   :root{
       --background: #ecebe8;
   }


   nav {
       position: sticky;
       top: 0;
       left: 0;
       right: 0;
       margin: 0 80px 0 80px;
       padding-top: 2rem;
       padding-bottom: 2rem;
   }

   nav .nav-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .nav-links {
       display: flex;
       justify-content: flex-end;
       align-items: center;
       margin: -1em 0;
       flex: 1 0 auto;
   }

   .nav-links .link {
       position: relative;
       margin: 1em;
       font-size: 0.85rem;
       letter-spacing: 1px;
       color: black;
   }

   .nav-logo {
       position: relative;
       line-height: 1;
       font-size: 1.1rem;
       color: black;
   }
</style>

๋˜ํ•œ Svelte์—์„œ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ฌ ๋•Œ ๊ฐ ๊ตฌ์„ฑ ์š”์†Œ ์Šคํƒ€์ผ ์ง€์ •์€ ๋‚ด๋ถ€์ ์œผ๋กœ ๋ฒ”์œ„๊ฐ€ ์ง€์ •๋ฉ๋‹ˆ๋‹ค. ์ฆ‰, ๊ฐ€์ ธ์˜จ ๊ตฌ์„ฑ ์š”์†Œ์— ์ ์šฉ๋œ ์Šคํƒ€์ผ์€ ๊ตฌ์„ฑ ์š”์†Œ ์ž์ฒด์—๋งŒ ์˜ํ–ฅ์„ ์ค๋‹ˆ๋‹ค.

Sveltekit์˜ ๋ ˆ์ด์•„์›ƒ ๋ฐ ํƒ์ƒ‰

์•ž์—์„œ ์„ค๋ช…ํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ํŽ˜์ด์ง€๋Š” ์™„์ „ํžˆ ๋…๋ฆฝ ์‹คํ–‰ํ˜• ๊ตฌ์„ฑ ์š”์†Œ๋กœ ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํƒ์ƒ‰ ์‹œ ๊ธฐ์กด ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์ œ๊ฑฐ๋˜๊ณ  ์ƒˆ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์ธ๊ณ„๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์š”์†Œ ๋˜๋Š” ๊ตฌ์„ฑ ์š”์†Œ๋Š” ํƒ์ƒ‰ ๋ฉ”๋‰ด ๋˜๋Š” ๋ฐ”๋‹ฅ๊ธ€๊ณผ ๊ฐ™์€ ๋งŽ์€ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ๋ชจ๋“  ํŽ˜์ด์ง€์— ํ‘œ์‹œ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ชจ๋“  ํŽ˜์ด์ง€์—์„œ ๋ฐ˜๋ณตํ•˜๋Š” ๋Œ€์‹  ๋ ˆ์ด์•„์›ƒ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์›น์‚ฌ์ดํŠธ์˜ ๋ชจ๋“  ํŽ˜์ด์ง€์— ์ ์šฉ๋˜๋Š” ๋ ˆ์ด์•„์›ƒ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“ค๋ ค๋ฉด src/routes/__layout.svelte ๋ผ๋Š” ํŒŒ์ผ์„ ๋งŒ๋“ค๊ณ  ์•„๋ž˜์— ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ๋ถ™์—ฌ๋„ฃ์Šต๋‹ˆ๋‹ค.

<!-- src/routes/__layout.svelte -->
<nav>
   <div class="nav-container">
       <a href="/" class="nav-logo" title="Back to Homepage">David Adeneye</a>
       <div class="nav-links">
           <a href="/about" class="link">About</a>
           <a href="/blog" class="link">Blog</a>
           <a href="/projects" class="link">Projects</a>
           <a href="/contact" class="link">Contact</a>
       </div>
   </div>
</nav>

<div class="container">
 <!-- Pages will be injected below -->
    <slot></slot>
</div>

<style>
    .container {
       max-width: 1400px;
       margin: 50px auto;
   }
</style>

์œ„์˜ ์ฝ”๋“œ๋Š” ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ์˜ ๋ชจ๋“  ํŽ˜์ด์ง€์— ์ ์šฉ๋˜๋Š” ํƒ์ƒ‰ ๋ฉ”๋‰ด๋ฐ”์ž…๋‹ˆ๋‹ค. Sveltekit์ด ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋ณธ ๋ ˆ์ด์•„์›ƒ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ํฌํ•จํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

<slot></slot>

๋˜ํ•œ ์›ํ•˜๋Š” ๋งˆํฌ์—…, ์Šคํƒ€์ผ ๋ฐ ๋™์ž‘์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์œ ์ผํ•œ ์š”๊ตฌ ์‚ฌํ•ญ์€ ์œ„์˜ __layout.svelte ํŒŒ์ผ<slot> ์—์„œ์™€ ๊ฐ™์ด ๊ตฌ์„ฑ ์š”์†Œ์— ํŽ˜์ด์ง€ ์ฝ˜ํ…์ธ  ๊ฐ€ ํฌํ•จ๋˜์–ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค.

Sveltekit์˜ ๋ผ์šฐํŒ…

๋‹ค๋ฅธ ๋ชจ๋“  ์ธ๊ธฐ ์žˆ๋Š” SSR ์†”๋ฃจ์…˜๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ Sveltekit์—๋Š” ํ›Œ๋ฅญํ•œ ํŒŒ์ผ ๊ธฐ๋ฐ˜ ๋ผ์šฐํŒ… ์‹œ์Šคํ…œ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์•ฑ์˜ ํŽ˜์ด์ง€๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ src/routes ํด๋”์— ์ €์žฅ๋ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ตฌ์กฐ๊ฐ€ ์ฝ”๋“œ๋ฒ ์ด์Šค์˜ ๊ตฌ์กฐ, ํŠนํžˆ src/routes ์˜ ๋‚ด์šฉ์— ์˜ํ•ด ์ •์˜๋œ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค .

ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ๋Š” ์•ฝ 6ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • ํ™ˆ - index.svelte(์œ„์—์„œ ์ด๋ฏธ ์ƒ์„ฑ)
  • ์ •๋ณด - about.svelte(์ด ์„น์…˜์—์„œ ๋งŒ๋“ค ๊ฒƒ์ž…๋‹ˆ๋‹ค)
  • ๋ธ”๋กœ๊ทธ - blog.svelte(๋‹ค์Œ ์„น์…˜์—์„œ ๋งŒ๋“ค ๊ฒƒ์ž…๋‹ˆ๋‹ค)
  • ํ”„๋กœ์ ํŠธ - projects.svelte(github ์ €์žฅ์†Œ์˜ ์ฝ”๋“œ ํŒŒ์ผ ๋ณต์‚ฌ)
  • ์—ฐ๋ฝ์ฒ˜ - contact.svelte(github ์ €์žฅ์†Œ์˜ ์ฝ”๋“œ ํŒŒ์ผ ๋ณต์‚ฌ)
  • [id].svelte - ๋™์  ๊ฒฝ๋กœ(github ์ €์žฅ์†Œ์˜ ์ฝ”๋“œ ํŒŒ์ผ ๋ณต์‚ฌ)

์œ„์˜ src/routes/__layout.svelte ์—์„œ ์ด๋Ÿฌํ•œ ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ํƒ์ƒ‰ ํ—ค๋” ๊ตฌ์กฐ๋ฅผ ์ƒ์„ฑํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— . about.svelte ๋ฅผ ์—ด๊ณ  ์•„๋ž˜์— ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์‚ฝ์ž…ํ•˜์‹ญ์‹œ์˜ค.

<!-- src/routes/about.svelte -->
<svelte:head>
   <title>About</title>
</svelte:head>

<div class="main_container">
   <section>
       <div class="inner-container">
         <h2 class="about-title">I'm David Adeneye๐Ÿ‘‹</h2>
         <div class="about-subtitle">
             <p>
               Software Engineer and a Technical Writer with a solid     
               background in Computer Science, I'm passionate about making 
               the web accessible for everyone. I design and develop visually compell                ing applications with user-friendly interaction that drive business g                owth and improve user experience. When I'm not solving problems,
               I love to create technical content for engineers and tech 
               startups across the globe.
             </p>
             <p>
               Creating magic daily on the internet. You can send me
                an email at <span class="info-text">adeneyeabiodun@gmail.com</span>
             </p>
         </div>
       </div>
     </section>
</div>

<style>
   .main_container {
       margin: 0 80px 0 65px;
   }

   .about-title {
       font-size: 4.2rem;
       font-weight: bold;
       margin-top: 11rem;
   }

   .about-subtitle {
       margin-top: -2rem;
   }

   .about-subtitle >p {
       width: 60%;
       font-weight: normal;
       font-size: 1rem;
       line-height: 2rem;
   }

   .info-text {
       font-style: italic;
       font-weight: bold;
   }
</style>

ํƒ์ƒ‰ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ํ•ญ์ƒ ํ‘œ์‹œ๋˜๋ฉฐ ํŽ˜์ด์ง€ ์‚ฌ์ด๋ฅผ ํด๋ฆญํ•˜๋ฉด ํ•ญ์ƒ ํŽ˜์ด์ง€ ์ฝ˜ํ…์ธ ๊ฐ€ ๋ฐ”๋€๋‹ˆ๋‹ค. ์ด์ œ ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ๊ฐ€ ์ž‘๋™ํ•˜๋Š” ๋ชจ์Šต์„ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค. ๊ท€ํ•˜์˜ ์ •๋ณด ํŽ˜์ด์ง€๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์˜คํ”ˆ ์†Œ์Šค ์„ธ์…˜ ์žฌ์ƒ

OpenReplay ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์›น ์•ฑ์—์„œ ์ˆ˜ํ–‰ํ•˜๋Š” ์ž‘์—…์„ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์˜คํ”ˆ ์†Œ์Šค ์„ธ์…˜ ์žฌ์ƒ ์ œํ’ˆ๊ตฐ์œผ๋กœ ๋ฌธ์ œ๋ฅผ ๋” ๋นจ๋ฆฌ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค. OpenReplay๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์™„๋ฒฝํ•˜๊ฒŒ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์ž์ฒด ํ˜ธ์ŠคํŒ…๋ฉ๋‹ˆ๋‹ค.

๋””๋ฒ„๊น… ๊ฒฝํ—˜์„ ์ฆ๊ธฐ์‹ญ์‹œ์˜ค . OpenReplay๋ฅผ ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค .

Sveltekit์—์„œ REST API ์‚ฌ์šฉ

REST API์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•๊ณผ Sveltekit์—์„œ ๋กœ๋“œํ•˜๋Š” ๊ฐœ๋…์„ ๋ฐฐ์šฐ๊ธฐ ์œ„ํ•ด ์›น์‚ฌ์ดํŠธ์— ๋ฐ๋ชจ ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์„ ๋งŒ๋“ค ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ…Œ์ŠคํŠธ ๋ฐ ํ”„๋กœํ† ํƒ€์ดํ•‘์„ ์œ„ํ•œ ๋ฌด๋ฃŒ ์˜จ๋ผ์ธ REST API ์ธ JSONPlaceholder ๋ผ๋Š” ๋ฌด๋ฃŒ ๊ฐ€์งœ REST API์™€ ์ƒํ˜ธ ์ž‘์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค .

์‹œ์ž‘ํ•˜๋ ค๋ฉด src/routes/blog.svelte ๋ฅผ ์—ด๊ณ  ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ๋ถ™์—ฌ๋„ฃ๊ฑฐ๋‚˜ ํ•จ๊ป˜ ์ œ๊ณต๋˜๋Š” ์†Œ์Šค ์ฝ”๋“œ์™€ ํ•จ๊ป˜ ์ฝ์œผ์‹ญ์‹œ์˜ค.

<!-- src/routes/blog.svelte -->
<svelte:head>
   <title>Blog</title>
</svelte:head>

<script context="module">
   export const load = async ({ fetch }) => {
       const res = await fetch("https://jsonplaceholder.typicode.com/posts");
       const blogposts = await res.json();
       return {
           props: {
               blogposts,
           }
       }
   }
</script>

<script>
   export let blogposts;
</script>

<div class="container">
   <h1>My Articles</h1>
   <div class="blogposts">
       {#each blogposts as post}
       <div class="post">
           <h2>{post.title.substring(0, 20)}</h2>
           <p>{post.body.substring(0, 80)}</p>
           <p class="readmore">
            <a style=" color: rgb(10, 10, 139);" href={`/blog/${post.id}`}>
              Read More
            </a>
          </p>
       </div>
       {/each}
   </div>
</div>

์œ„์˜ ์ฝ”๋“œ๋ฅผ ๋ถ„์„ํ•ด๋ณด์ž. 6๋ฒˆ์งธ ์ค„<script context="module"> ์— ์ฃผ๋ชฉํ•˜์„ธ์š” . ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๋ Œ๋”๋ง๋˜๊ธฐ ์ „์— ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค . ๊ตฌ์„ฑ์š”์†Œ๋ณ„ ์ธ์Šคํ„ด์Šค ์ฝ”๋“œ๋Š” ๋‘ ๋ฒˆ์งธ ํƒœ๊ทธ์— ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ jsonplaceholder ๊ฐ€์งœ API์—์„œ ๋ฐ๋ชจ ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์„ ๊ฐ€์ ธ์™€ ์›น์‚ฌ์ดํŠธ์— ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.load<script>load

sveltekit ์˜ load๊ธฐ๋Šฅ์€ ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ๋ชจ๋‘์—์„œ ์‹คํ–‰๋œ๋‹ค๋Š” ์ ์„ ์ œ์™ธํ•˜๋ฉด Next.js ์™€ ๋น„์Šท getStaticPropsํ•˜๊ฑฐ๋‚˜ ๋น„์Šทํ•ฉ๋‹ˆ๋‹ค.getServerSideProps

๋˜ํ•œ ํŽ˜์ด์ง€ ์Šคํƒ€์ผ ์ง€์ •์„ ์œ„ํ•ด ์ด ์ž์Šต์„œ์™€ ํ•จ๊ป˜ ๋นŒ๋“œํ•˜๋Š” ๊ฒฝ์šฐ ์ฝ”๋“œ ๋ธ”๋ก ๋‚ด์—์„œ ํ•จ๊ป˜ ์ œ๊ณต๋˜๋Š” CSS ์ฝ”๋“œ๋ฅผ ๋ณต์‚ฌํ•˜๋Š” ๊ฒƒ์„ ์žŠ์ง€ ๋งˆ์‹ญ์‹œ์˜ค.

๊ท€ํ•˜์˜ blog.svelte ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Sveltekit์—์„œ ๋™์  ๊ฒฝ๋กœ ์‚ฌ์šฉ

์ด์™€ ๊ฐ™์€ ๋ธ”๋กœ๊ทธ๋ฅผ ๊ตฌ์ถ•ํ•˜๋ ค๋ฉด ๋™์ ์œผ๋กœ ์ƒ์„ฑ๋œ ๊ฒฝ๋กœ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. Sveltekit์„ ์‚ฌ์šฉํ•˜๋ฉด ๋™์  ๊ฒฝ๋กœ๋ฅผ ํ†ตํ•ด ์ด๋ฅผ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฅผ ๊ตฌํ˜„ํ•˜๋ ค๋ฉด blog ๋ผ๋Š” ์ƒˆ ํด๋”๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค . Sveltekit์˜ ๋™์  ๋งค๊ฐœ๋ณ€์ˆ˜๋Š” [bracket]. ์˜ˆ๋ฅผ ๋“ค์–ด ๋ธ”๋กœ๊ทธ ํด๋” ์•ˆ์— [id].svelte ๋ผ๋Š” ํŒŒ์ผ์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค . ํŒŒ์ผ์„ ์—ด๊ณ  ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ๋ถ™์—ฌ๋„ฃ๊ฑฐ๋‚˜ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ๋”ฐ๋ฅด์‹ญ์‹œ์˜ค.

<script context="module">
   export const load = async ({ page, fetch }) => {
       const id = page.params.id;

       const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);

       const post = await res.json();

       return {
           props: {
               post,
           }
       }
   }
</script>

์ฝ”๋“œ์—์„œ load ํ•จ์ˆ˜ ๋‚ด์˜ ๋งค๊ฐœ๋ณ€์ˆ˜์— ์•ก์„ธ์Šคํ•˜์—ฌ ๋ณ€์ˆ˜์™€ ํ•จ๊ป˜ ์ €์žฅํ–ˆ์Šต๋‹ˆ๋‹ค id. ๊ทธ๋Ÿฐ ๋‹ค์Œ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๋‹น ID์˜ ์ •ํ™•ํ•œ ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์„ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค. blog.svelte ๋กœ ๋Œ์•„๊ฐ€์„œ ์•„๋ž˜ 33ํ–‰href ์—์„œ ๋™์ ์œผ๋กœ ์ƒ์„ฑ๋œ ํŽ˜์ด์ง€์— ์•ก์„ธ์Šคํ•œ ๋ฐฉ๋ฒ•์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค.

<p class="readmore">
  <a style="color: rgb(10, 10, 139);" href={`/blog/${post.id}`}> 
      Read More
  </a>
</p>

๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ •ํ™•ํ•œ ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์— ์•ก์„ธ์Šคํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค post.id. ๋”ฐ๋ผ์„œ ๋” ์ฝ๊ธฐ ๋ฅผ ํด๋ฆญ ํ•˜๋ฉด ์ „์ฒด ๋ธ”๋กœ๊ทธ๋ฅผ ์ฝ์„ ์ˆ˜ ์žˆ๋Š” ์ƒˆ ํŽ˜์ด์ง€๊ฐ€ ๋กœ๋“œ๋ฉ๋‹ˆ๋‹ค.

๋ฐฐํฌ Sveltekit ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ

Sveltekit์—์„œ ์•ฑ์„ ๋ฐฐํฌํ•˜๋ ค๋ฉด ๋จผ์ € ๊ฐœ๋ฐœ ๋Œ€์ƒ์— ๋งž๊ฒŒ ์กฐ์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์–ด๋Œ‘ํ„ฐ๋ผ๊ณ  ํ•˜๋Š” ์—ฌ๋Ÿฌ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ œ๊ณตํ•˜์—ฌ ๋ฐฐํฌ ํ”„๋กœ์„ธ์Šค๋ฅผ ๋‹จ์ˆœํ™”ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค. ์–ด๋Œ‘ํ„ฐ๋Š” ๋นŒ๋“œ๋œ ์•ฑ์„ ์ž…๋ ฅ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ๋ฐฐํฌ๋ฅผ ์œ„ํ•œ ์ถœ๋ ฅ์„ ์ƒ์„ฑํ•˜๋Š” ์ž‘์€ ํ”Œ๋Ÿฌ๊ทธ์ธ์ž…๋‹ˆ๋‹ค.

Sveltekit์€ ๊ณต์‹์ ์œผ๋กœ ์ง€์›๋˜๋Š” ๋ช‡ ๊ฐ€์ง€ ์–ด๋Œ‘ํ„ฐ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์ •์  ์–ด๋Œ‘ํ„ฐ : ์‚ฌ์ดํŠธ๋ฅผ Github ํŽ˜์ด์ง€ ๋“ฑ๊ณผ ๊ฐ™์€ ํ˜ธ์ŠคํŒ… ์„œ๋น„์Šค์™€ ํ˜ธํ™˜๋˜๋Š” ์ •์  ํŒŒ์ผ ๋ชจ์Œ์œผ๋กœ ์‚ฌ์ „ ๋ Œ๋”๋งํ•˜๋Š” Sveltekit ์•ฑ์šฉ ์–ด๋Œ‘ํ„ฐ์ž…๋‹ˆ๋‹ค.

์–ด๋Œ‘ํ„ฐ Vercel : ๋™์  ์„œ๋ฒ„ ๋ Œ๋”๋ง์„ ์œ„ํ•œ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ Vercel ์•ฑ์„ ์ƒ์„ฑํ•˜๋Š” Svelte ์•ฑ์šฉ ์–ด๋Œ‘ํ„ฐ์ž…๋‹ˆ๋‹ค. Vercel ํ˜ธ์ŠคํŒ… ํ”Œ๋žซํผ์— ์•ฑ์„ ๋ฐฐํฌํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

์–ด๋Œ‘ํ„ฐ Netlify : ํŽ˜์ด์ง€๋ฅผ ๋™์ ์œผ๋กœ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•œ ์„œ๋น„์Šค ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ Netlify ์•ฑ์„ ์ƒ์„ฑํ•˜๋Š” Svelte ์•ฑ์šฉ ์–ด๋Œ‘ํ„ฐ์ž…๋‹ˆ๋‹ค. Netlify ํ”Œ๋žซํผ์— ์•ฑ์„ ๋ฐฐํฌํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

Netlify์— ๋ฐ๋ชจ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

Netlify์— Sveltekit ๋ฐฐํฌ

Netlify์— Sveltekit์„ ๋ฐฐํฌํ•˜๋ ค๋ฉด netlify-sveltekit ์–ด๋Œ‘ํ„ฐ ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค .

์•„๋ž˜ ๋ช…๋ น์„ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ์— adpater๋ฅผ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

npm install -D @sveltejs/adapter-netlify@next

์„ค์น˜๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด ์–ด๋Œ‘ํ„ฐ๋ฅผ ํ”„๋กœ์ ํŠธ์˜ svelte.config.js ํŒŒ์ผ์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ํŒŒ์ผ์— ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์‚ฝ์ž…ํ•˜์‹ญ์‹œ์˜ค.

import adapter from '@sveltejs/adapter-netlify';

export default {
  kit: {
    adapter: adapter(),
    target: '#svelte'
  }
};

๊ทธ๋Ÿฐ ๋‹ค์Œ ํ”„๋กœ์ ํŠธ์˜ ๊ธฐ๋ณธ ๋””๋ ‰ํ„ฐ๋ฆฌ์— netlify.toml ํŒŒ์ผ์„ ๋งŒ๋“ค๊ณ  ๋นŒ๋“œ ๋ช…๋ น๊ณผ ๊ฒŒ์‹œ ๋””๋ ‰ํ„ฐ๋ฆฌ๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ํŒŒ์ผ์— ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์‚ฝ์ž…ํ•˜์‹ญ์‹œ์˜ค.

[build]
  command = "npm run build"
  publish = "build"

์ด ๋ชจ๋“  ์„ค์ •์ด ๋๋‚˜๋ฉด Git ๋˜๋Š” Netlify CLI๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Netlify์— ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐฐํฌํ•ฉ๋‹ˆ๋‹ค .

Netlify ์— ์ตœ์ข… ๋ฐฐํฌ๋œ ์›น ์‚ฌ์ดํŠธ์— ๋Œ€ํ•œ ๋งํฌ( jolly-franklin-11e50c.netlify.app )์ž…๋‹ˆ๋‹ค.

๊ฒฐ๋ก 

์ด ํŠœํ† ๋ฆฌ์–ผ์„ ํ†ตํ•ด ์ฆ๊ฒ๊ฒŒ ์ž‘์—…ํ•˜์…จ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์ƒ˜ํ”Œ ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜์—ฌ Sveltekit์˜ ๊ธฐ๋ณธ ๊ฐœ๋…์„ ์‚ดํŽด๋ณด๊ณ  ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฒƒ์€ ์•ฑ ๋‚ด ๋ฐ๋ชจ ๋ธ”๋กœ๊ทธ์—์„œ REST API๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ Netlify์— sveltekit ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‚ดํŽด๋ณด์•˜์Šต๋‹ˆ๋‹ค. ์ž์‹ ์„ ์œ„ํ•œ ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜๋ ค๋Š” ๊ฒฝ์šฐ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋ฅผ ๊ตฌ์ถ•ํ•˜์—ฌ ๋ฐฐ์šด ๋‚ด์šฉ์„ ์‹ค์Šต์— ์ ์šฉํ•˜๊ฑฐ๋‚˜ ์ด ๋ฐ๋ชจ๋ฅผ ์ทจํ–ฅ์— ๋งž๊ฒŒ ์—…๊ทธ๋ ˆ์ด๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ธฐ์‚ฌ์— ๋Œ€ํ•œ ์ง€์› ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๋Š” Github์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค .

https://blog.openreplay.com ์˜ ์›๋ณธ ๊ธฐ์‚ฌ ์ถœ์ฒ˜

#sveltekit #svelte #webdev #webdev 

Code  Camp

Code Camp

1576633843

APIs Tutorial for Beginners - What, Why and How to Use an API?

What is an API? Learn all about APIs (Application Programming Interfaces) in this full tutorial for beginners. You will learn what APIs do, why APIs exist, and the many benefits of APIs. APIs are used all the time in programming and web development so it is important to understand how to use them.

You will also get hands-on experience with a few popular web APIs. As long as you know the absolute basics of coding and the web, youโ€™ll have no problem following along.

โญ๏ธ Course Contents โญ๏ธ

โญ๏ธ Unit 1 - What is an API
โŒจ๏ธ Video 1 - Welcome (0:00:00)
โŒจ๏ธ Video 2 - Defining Interface (0:03:57)
โŒจ๏ธ Video 3 - Defining API (0:07:51)
โŒจ๏ธ Video 4 - Remote APIs (0:12:55)
โŒจ๏ธ Video 5 - How the web works (0:17:04)
โŒจ๏ธ Video 6 - RESTful API Constraint Scavenger Hunt (0:22:00)

โญ๏ธ Unit 2 - Exploring APIs
โŒจ๏ธ Video 1 - Exploring an API online (0:27:36)
โŒจ๏ธ Video 2 - Using an API from the command line (0:44:30)
โŒจ๏ธ Video 3 - Using Postman to explore APIs (0:53:56)
โŒจ๏ธ Video 4 - Please please Mr. Postman (1:03:33)
โŒจ๏ธ Video 5 - Using Helper Libraries (JavaScript) (1:14:41)
โŒจ๏ธ Video 6 - Using Helper Libraries (Python) (1:24:40)

โญ๏ธ Unit 3 - Using APIs
โŒจ๏ธ Video 1 - Introducing the project (1:34:18)
โŒจ๏ธ Video 2 - Flask app (1:36:07)
โŒจ๏ธ Video 3 - Dealing with API Limits (1:50:00)
โŒจ๏ธ Video 4 - JavaScript Single Page Application (1:54:27)
โŒจ๏ธ Video 5 - Moar JavaScript and Recap (2:07:53)
โŒจ๏ธ Video 6 - Review (2:18:03)

๐Ÿ”— Course Notes: https://github.com/craigsdennis/intro-to-apis-course/blob/master/course-notes.md

Shirts and Gifts for Your Friends & Loved โ˜ž https://bit.ly/36PHvXY

#api #webdev #python #javascript #web-development #webdev