이 강의는 제가 집필한 ‘스벨트로 시작하는 웹 프런트엔드’ 라는 책의 후반부 SLOG 프로젝트 만들기 부분에 대한 영상 강의입니다. 책에서 조금 부족했던 부분들을 보완해, 좀 더 많은 분들이 Svelte라는 프런트엔드 프레임워크에 대해 관심을 갖길 바라는 마음에서 이 강의를 마련했습니다.
Svelte 기본 사용법을 익혔다면 다음은 당연히 실제 프로젝트입니다. Svelte REST-API 프로젝트 강의를 통해 실제 프로젝트를 진행하는 기초 경험을 쌓아보세요!
이 강의는 Svelte를 이용해 CRUD: 서버에 데이터를 쓰고(Create), 읽고(Read), 수정하고(Update), 삭제(Delete)하는 방법을 알아가게 됩니다. 여기에 JWT 토큰을 이용한 인증방법과 무한 스크롤을 이용한 페이지네이션 등 프런트엔드로 프로젝트를 진행하는 데 필수로 알아야 하는 요소들을 학습할 수 있습니다.
게시글 작성 페이지
코멘트 페이지
로그인 페이지
이런 것들을 배워요 ✒️
스벨트 도서 저자 직강!
이 강의는 ‘스벨트로 시작하는 웹 프런트엔드’ 도서의 마지막 챕터를 영상으로 만든 강의입니다. (선수 지식: HTML/CSS 및 JavaScript 기초, Svelte 기초)
프런트엔드 개발을 하면서 가장 많이 하는 일은 아마도 REST API와 통신하는 어떤 서비스를 만드는 작업일 것입니다. 서버로부터 데이터를 요청하고, 요청받은 데이터를 화면에 보여주고, 데이터의 추가, 수정, 삭제(CRUD) 등을 요청하는 과정은 프런트엔드 개발을 하는 누구라도 꼭 알아야 하는 요소입니다.
이 강의에서는 프런트엔드 관점에서 이런 REST API 필수 사용법에 대한 내용을 다룹니다.
✅ Svelte 중급 사용법
✅ Rest API를 이용한 통신
✅ Axios를 이용한 효율적인 서버 통신
✅ 무한 스크롤(Infinite Scroll)을 이용한 페이지네이션 구현
✅ JWT 토큰을 이용한 인증
✅ 폼 검증, Router 사용법
REST API 데이터 통신, 각종 해결방법... 중급 FE 개발자라면 꼭 알아야 할 내용!
REST API 필수 사용법 외에도, Svelte의 Store를 활용해 목록에 변화가 있을 때 모든 데이터를 다시 불러오는 것이 아닌 부분 수정을 통한 통신 효율을 높이는 방법 등에 대한 고민부터, 현재 널리 쓰이는 무한스크롤 방식의 UI를 구현할 때 발생할 수 있는 문제와 그 해결 방법 등도 준비되어 있습니다.
덧붙여 JWT를 이용한 인증 방법과 앱의 완성도를 높이기 위한 폼 검증, 좀 더 직관적인 날짜 보기 모드, 그독립적으로 재사용할 수 있는 컴포넌트 만들기 등을 통해서 프론트엔드 개발의 초급을 넘어서 중급 개발자가 되었을 때 한 번쯤 고민해야 하는 부분들을 학습할 수 있도록 준비했습니다. 함께 도전해봅시다! (Svelte, Axios, Yup, Datejs)
이런 분들께 추천합니다 🙆♀️
프론트엔드 개발에 관심이 있는 분
웹으로 좀 더 빠르게 무언가를 만들고 싶은 분
HTML, JavaScript 기본기를 통해 무언가 구현하고 싶은 분
중급 FE 개발자로 발돋움하고 싶은 초보 프런트엔드 개발자
프런트엔드 수업을 마쳤다면 해당 서비스의 API서버를 만드는 과정을 들어보시길 추천드립니다. 최신 Node.js 기술들인 Fastify, Prisma 그리고 Typescript를 이용하는 백엔드 과정을 준비했습니다.