프로젝트로 쉽게 배우는 Svelte 기본편(SvelteKit + Supabase)

Svelte 소개 및 기본 개념과 타 프레임워크들과의 차이점을 설명합니다. 이를 통해 현대적인 웹 애플리케이션의 개발 흐름과 방향을 이해할 수 있습니다.

개발환경과 추가적인 패키지 설치에 필요한 Node.js와 npm(node package manager)을 설치합니다.

프론트엔드 개발 도구인 Vite를 통해 Svelte 프로젝트를 생성합니다.

• 데이터 변수들을 화면에 출력하는 방법

• 스타일 및 이미지 속성등을 데이터로 다루는 방법

반복문 #each를 이용하여 영화정보 데이터를 문서에 표시합니다.

on: 지시어(directive)로 사용자의 입력에 반응하는 이벤트 기능을 연결할 수 있습니다. 이를 이용하여 좋아요 버튼을 구현합니다.

좋아요 버튼의 카운트를 각각의 영화정보에 개별적으로 반영합니다.

이미지 콘텐츠를 추가하고 전역 스타일과 지역 스타일로 컴포넌트들을 디자인 하는 방법에 대해 학습합니다.

영화 상세정보를 보여주는 모달창을 열고 닫는 기능을 학습합니다.

• 외부에 작성한 영화데이터를 export로 내보내고 import로 가져옵니다.

• 데이터 및 라이브러리 관리를 위한 export & import 활용 방법에 대해 다룹니다.

모달 창에 클릭한 영화정보를 동적으로 표시합니다.

영화정보 홈페이지의 주요 UI 요소들을 component로 분리하여 작성합니다.

• 네비게이션 UI를 component로 추가합니다.

• 모달창을 component로 분리합니다.

• 컴포넌트로 분리된 상세정보(모달)창에 데이터를 전달합니다.

• props 문법으로 부모 컴포넌트에서 하위 컴포넌트에게 데이터를 전달합니다.

bind 지시어를 사용하여 props를 전달하면 부모 컴포넌트에게 데이터 변경을 요청할 수 있습니다. 해당 기능을 이용하여 모달 컴포넌트에서 창을 닫는 기능까지 완성합니다.

component간 데이터 통신의 종합적인 응용입니다.

• 영화목록을 component로 만들어 props를 통해 영화 데이터를 전달합니다.

• 좋아요 버튼과 상세보기(모달창) 관련 props를 전달하고 해당 기능이 동작할 수 있도록 합니다.

• 상태변수로 class를 동적으로 추가하는 방법을 다룹니다.

• class를 동적으로 추가하는 방법에 대해 알아보고 이를 이벤트 창에 적용하여 닫기 기능을 구현합니다.

• 스벨트의 효과 기능을 통해 다이네믹한 이벤트 창을 구현합니다.

• 검색창에 사용자의 입력을 받는 기능을 구현합니다.

• bind 지시어로 사용자의 입력을 간편하게 처리할 수 있습니다.

리액티브 선언문($)으로 검색창에 텍스트가 입력될 때 어떤 텍스트가 입력되었는지 검사하는 기능을 추가합니다.

• 입력한 문자가 포함되어 있는 영화자료를 찾을 수 있도록 검색 로직을 수정합니다.

• 배열 데이터 복사를 다루는 방법에 대해 학습합니다.

• 사용자가 검색창에 입력한 결과를 화면에 업데이트 합니다.

• 검색 결과 표시 이후, 원본 데이터를 다시 가져와 전체 데이터를 보여주도록 합니다.

• 전체보기 기능을 추가합니다.

• 검색결과가 없는 상태에서 전체보기를 클릭 했을 때 경고창이 사라지지 않는 문제를 수정합니다.

영화 데이터를 검색하여 좋아요 버튼이나 상세보기 창으로 연결시 정보가 올바르게 업데이트가 되지 않는 이유와 그 해결책으로 영화 데이터에 고유 id 속성을 부여하여 조회하는 방법에 대해 학습합니다

컴포넌트가 실행되고 업데이트 되고 종료되는 상태에 따라 작업을 처리하는 개념이 있습니다.

이를 라이프사이클(Lifecycle), 즉 생명주기라고 하는데 간단한 개념과 실습으로 다루어 봅니다.

라이프사이클 훅(Lifecycle hook)을 이용하여 이벤트 창의 광고 텍스트가 일정 시간이 지나면 다른 내용으로 업데이트 되도록 합니다.

setInterval을 이용하여 이벤트 창의 광고 텍스트가 계속 순환되도록 하고 onDestroy 훅으로 컴포넌트 종료시 정리하는 작업에 대한 사례를 학습합니다.

$(리액티브선언문)으로 setInterval 함수를 쉽게 다루는 방법도 소개합니다.

디자인 프로토타입을 통해 구현할 홈페이지의 세부 내용과 기능들을 검토합니다.

• Vite로 프로젝트를 생성합니다.

• CSS를 확장한 Sass(SCSS)문법을 사용하기 위해 관련 모듈을 설치합니다.

자주 사용하는 변수, 중첩 선택자, 믹스인 등 Sass의 핵심문법을 학습합니다.

프로젝트에 필요한 이미지들과 동영상을 추가합니다.

• Home 컴포넌트를 추가하고 공통 레이아웃에 들어갈 Header, Footer 영역을 컴포넌트화 합니다.

• Sass(scss) 문법으로 컴포넌트 별 디자인을 추가합니다.

• Home 컴포넌트를 추가하고 공통 레이아웃에 들어갈 Header, Footer 컴포넌트를 활용합니다.

router 라이브러리를 설치하여 페이지를 연결하는 라우팅 기능을 구현합니다.

• News 페이지 영역의 컴포넌트를 제작하고 라우팅에 반영합니다.

• 뉴스 데이터를 추가하여 정보를 표시합니다.

반복문으로 뉴스기사 목록을 표시합니다.

상세페이지 component를 추가하고 라우팅으로 연결합니다

• news 데이터 파일에 id값을 받아 해당하는 자료만 전달하는 유틸리티 함수를 작성합니다.

• url parameter로 상세페이지에 데이터를 전달할 수 있게 합니다.

• news 데이터를 가져오는 함수(getNews) 호출시 결과값이 undefined가 뜨는 문제를 수정합니다.

• news 데이터를 상세페이지에 표시합니다.

about 페이지에 지도와 연락처를 추가합니다

터미널에서 build 커맨드로 프로젝트를 빌드하고 테스트 합니다.

별도의 빌드 과정 없이 깃허브와 클라우드 배포 서비스를 이용해 빠르게 배포하고 업데이트 합니다.

본 섹션에서 제작할 게임의 미리보기 영상입니다.

게임 만들기의 교본인 짝찾기 게임(Pair Game)을 만듭니다. 게임에 대한 소개 및 미리 디자인 된 구성안을 검토합니다.

vite로 프로젝트를 생성하고 문서와 스타일을 초기화합니다.

주요 게임화면을 컴포넌트로 작성하고 추가합니다.

라우터를 사용하지 않고 상태변수로 주요 화면을 연결하고 돌아가는 기능을 구현합니다.

구글 웹폰트를 설치하고 게임 화면에 필요한 디자인과 이미지를 추가합니다.

게임 플레이 영역에서 점수 표시와 스테이지, 제한시간 등을 표시하는 GameInfo영역을 컴포넌트로 모듈화 합니다.

카드가 배치되는 게임 그리드 영역을 컴포넌트화 하고 카드 데이터를 생성해 화면에 배치합니다.

• 카드의 앞면과 뒷면의 상태를 정의하고 해당하는 디자인을 추가합니다.

• 카드를 랜덤하게 섞는 함수를 추가합니다.

## Game Rule

- 모든 카드는 초기 뒷면 상태

- 클릭하면 앞면을 보여주고 2번째 카드를 클릭시 판정 들어감

    - 1초 후에 카드는 다시 뒤집힘

    - 클릭한 두 카드가 일치하지 않으면 1초 후 닫힘

    - 클릭한 두 카드가 일치하면 해당 카드들을 열림 상태로 변경

- 모든 카드를 맞추면 점수를 획득하고 다음 라운드로 이동

- 시간이 초과되면 게임오버

• 게임 시작시 전체 카드를 뒷면으로 초기화 합니다

• 사용자가 카드를 클릭하면 앞면을 보여주고 1초 후 다시 닫히게 합니다.

카드 클릭 요소에 이벤트를 추가했는데 접근성 경고가 발생합니다. 해당 문제가 발생하는 이유와 수정하는 방법에 대해 다룹니다.

선택한 2개의 카드 짝이 맞는지 여부를 판정하기 위한 배열과 함수를 추가합니다.

• 같은 위치의 카드는 채크 예외처리 하는 로직을 추가합니다.

• 카드 매칭을 채크하는 함수에 짝이 맞은 카드들을 채크하는 로직을 추가합니다.

• 일치된 카드의 결과를 화면에 반영합니다.

• 사용자가 카드를 선택했을 이전 카드가 보일때만 매칭 여부를 판정하도록 합니다.

• 게임 재시작시 카드를 초기화 시킵니다.

카드의 짝이 모두 맞았을 때 게임 클리어 조건을 판정하는 로직을 추가합니다.

모든 카드의 짝이 매칭이 되면 게임 클리어 결과창을 표시합니다.

게임 오버 시에도 동일한 모달 컴포넌트를 활용하여 정보를 표시합니다.

표시되는 내용이 다르기 때문에 모달창에 표시될 변수를 규칙에 맞게 추가하고 props로 바인딩하여 전달 합니다.

스벨트의 store 기능을 사용하기에 앞서 props와 전역상태관리에 대한 이해를 돕고 게임정보를 어떻게 다룰지 살펴봅니다.

store를 통해 게임점수 관련 데이터들을 전역 상태변수로 만들어 컴퍼넌트들에 업데이트 할 수 있도록 합니다.

• 게임 결과창(Game Clear, Game Over)에 store에 저장된 게임 점수(score)를 가져와 표시합니다.

• '게임 클리어' 시와 '게임 오버' 시 버튼의 역할을 다르게 적용합니다.

• store에서 가져온 score, round, time 상태변수 들을 각각의 상황에 맞게 업데이트 하거나 초기화 합니다. 

모달 창에서 Home으로 이동하는 기능을 추가합니다. 이를 위해 page를 변경하는 상태변수를 store에 작성하여 핸들링 합니다.

제한시간 타이머 기능을 추가해서 시간을 1초씩 감소시키고, 0이되면 게임 오버 처리를 합니다.

1. Replay 버튼 클릭 시 게임 초기화하기

2. Game Over시 타이머 초기화 하기

게임 최고기록과 마지막 게임 기록을 컴퓨터의 저장소(localStorage)에 저장하고 Game Score 화면에서 조회가 가능하도록 합니다.

게임결과창 Replay 버튼의 기능을 올바르게 수정합니다.

store에 게임 초기화 함수를 추가하여 코드 중복을 줄이고 데이터 관리를 일원화합니다.

게임에 꼭 필요한 사운드 효과를 추가합니다. 오디오 API를 이용하여 사운드와 배경음악을 재생할 수 있습니다.

SvelteKit에 대한 소개와 주요 특징에 대해 설명합니다.

우리가 만들게 될 Diary(일기장) 앱의 화면구성과 기능에 대해 설명합니다.

SvelteKit 프로젝트를 생성하고 폴더 구조에 대해 살펴봅니다.

파일 시스템 기반 라우팅을 사용하여 페이지를 연결하는 방법에 대해 학습합니다.

• 페이지에 공통으로 들어가는 UI 영역(Header)을 레이아웃 문서로 구성합니다.

• 컴포넌트에 자식 콘텐츠를 전달할 수 있는 slot 요소를 활용합니다.

Header 영역을 컴포넌트로 만들고 /lib경로를 별칭으로 간략화 합니다.

• Sass 모듈을 추가합니다.

• 전역 스타일(Global Style) 문서를 추가하고 변수, 서체, 공통 스타일을 전체 문서에 반영할 수 있도록 합니다.

• 주요 색상 값들을 CSS 전역변수로 선언하고 별도의 문서로 분리합니다.

• Header 영역을 디자인 합니다.

• Header 컴포넌트에서 이동한 페이지의 위치를 알기 위해 페이지 경로명을 구분하는 방법($app/stores 모듈)을 다룹니다.

• Home을 제외한 나머지 페이지들은 완료 버튼이 표시되고 기능을 구분할 수 있도록 합니다.

$app/navigation 모듈을 이용하여 프로그래밍 방식으로 페이지를 이동(Programmatically navigate)하는 방법을 학습합니다.

일기 데이터를 store에 추가하고 가져옵니다.

store에서 일기 데이터를 가져와 목록으로 표시합니다.

범용 아이콘 라이브러리를 추가하고 수정, 삭제 기능에 해당하는 버튼 모양을 아이콘으로 꾸며줍니다.

url parameter를 이용하여 home 일기 목록에서 읽고자 하는 글 상자를 클릭하면 해당 일기를 보여주는 상세 페이지(read)로 이동합니다.

Home 글목록에서는 표시되는 최대 글자수를 제한하고 중략하여 표시하도록 합니다.

홈 하단에 이미지 형태의 글쓰기 버튼을 추가하고 일기 쓰기(write) 페이지로 연결시킵니다.

글을 입력 받는 글상자를 추가하고 날짜를 표시 지역에 맞게 포매팅 하는 기능을 추가합니다.

기본 textarea로 불가능한 줄내림시 자동 높이조절이 가능한 textarea 컴포넌트를 도입합니다.

글쓰기(write) 페이지의 입력 내용을 store에 저장하여 Header에서 완료 버튼 클릭시 store를 참조할 수 있도록 합니다.

store에 글쓰기 함수를 추가하고 쓰기 페이지에서 완료 버튼 클릭시 새글이 추가되도록 합니다.

home 글목록에서 수정 버튼 클릭시 글수정 페이지에 수정할 글번호를 params로 전달하고 연결하는 기능을 추가합니다.

store에 글수정 함수를 추가하고 수정한 글을 저장할 수 있도록 합니다

수정, 삭제 버튼을 담고 있는 버튼 UI 공통 영역을 컴포너트화 합니다.

수정하기 페이지에서는 수정 버튼을 보이지 않게 조건부 처리합니다.

기존 커스텀 제작한 textarea는 글자 깨짐 현상이 존재합니다. 개선된 방식의 svelte 전용 모듈로 교체합니다.

store에 글 삭제 함수를 추가하고 버튼 컴포넌트에서 삭제 버튼 클릭시 글이 삭제되도록 합니다.

클라우드 기반의 간편한 백엔드 서비스인 Supabase를 이용하여 데이터베이스를 추가합니다.

supabase 클라이언트 라이브러리를 설치하고 DB서버에 접속하여 글을 가져옵니다.