[유튜브] 스벨트 실전프로젝트 - 무빙(완결)

 

 

 

 

 

안녕하세요. 오쌤입니다.

 

공부의 효과적인 전달을 위해 유튜브를 개설해보았습니다.

블로그와 함께 사용할 예정입니다.

웹프론트엔드의 모든 것을 담아볼 유튜브 계정입니다.

 

주소 : https://www.youtube.com/channel/UCAi3huK5H9VOtB_J5tYk4qg?view_as=subscriber

 

 

 

 

 

** 모든 파일들을 [node_modules]폴더가 없습니다.

** 용량 때문에 삭제하고 올렸기 때문에 [npm install]을 하고 봐야 정답을 확인할 수 있습니다. 

 

 

 

★ 오쌤의 니가스터디 - Svelte 실전프로젝트 - 무빙

Chapter 00.   인트로 : 

 

Chapter 01.   TMDB 사용법 : 

## 코드

<script>

</script>

<style>
	article{
		width: 500px; border: 3px solid black;
		padding: 20px; margin-bottom: 20px;
	}
</style>

 

ch44_tmdb_complete.zip

0.13MB

 

 

 

Chapter 02.   Swiper 사용법 : 

## 코드

<script>
	const urls = [
		'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fk0adz%2Fbtsydna0uHj%2F4EvYJ8EPiIOkSTazEroRQk%2Fimg.jpg',
		'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbmakiu%2FbtsyenIDeD8%2FKGR5sLarN6EEcLBtAVLv80%2Fimg.jpg',
		'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fl6QZI%2FbtsynB6Vt9I%2Fq3tczSGTJaKyzPIiFlvM60%2Fimg.jpg',
		'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbaN3Yb%2FbtsypwK3WoE%2FNtZmJDEaG93iJhyKBnRMw1%2Fimg.jpg',
		'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcfnV8L%2FbtsyaUglYOD%2F3wDuGISkVsw106pjsn3KA0%2Fimg.jpg'
	];
</script>

<div class="photo">
	
</div>

<style>
	.photo{ width: 300px; margin: 0 auto; }
</style>

 

ch45_swiper_complete.zip

0.17MB

 

 

 

Chapter 03.   무빙프로젝트설치 : 

source.zip

0.09MB

ch46_1_moving_프로젝트설치.zip

0.22MB

 

 

 

 

Chapter 04.   공통 컴포넌트 제작 : 

ch46_2_moving_공통컴포넌트.zip

0.22MB

 

 

 

Chapter 05.   스토어생성 : 

ch46_moving_스토어생성.zip

0.22MB

** 영상에서 errror로 쓴 부분은 error로 고쳤으니 확인해보세요.

 

 

 

 

Chapter 06.   메인이미지 슬라이더 : 

## Error.svelte 코드

<div class="error_box">
    <Icon icon="jam:alert" />
    <h3>죄송합니다. <span class="red">시스템 에러</span>입니다.</h3>
    <p class="basic_explain">
        현재 시스템 오류가 발생했습니다. <br />
        새로 고침 단추를 클릭하거나 나중에 다시 시도하십시오. <br />
        주소 표시줄에 페이지 주소를 입력하셨다면 올바르게 입력되었는지 확인하십시오.
    </p>
    <a href="#!">고객센터문의하기 &gt;</a>
    <p class="inquiry_explain">전화 : 0000-0000(평일 09시~18시) / 이메일 moving@gmail.com</p>
    <ul class="page_btn">
    	<li><a href="/" use:link>메인페이지로 이동</a></li>
    </ul>
</div>

 

ch46_moving_메인이미지완성.zip

0.43MB

 

 

 

Chapter 07.   header fixed 처리 : 

ch46_moving-headerfixed완성.zip

0.43MB

 

 

 

 

Chapter 08.   현재상영작 리스트 제작 : 

ch46_moving-현재상영작리스트완성.zip

0.43MB

 

 

 

Chapter 09.   현재상영작 서브페이지 제작 : 

## ListSub.svelte 일부 코드

<ul class="btn">
    <li class="view_btn"><a href="#!">▶ 영화 시청하기</a></li>
    <li class="bookmark_btn">
    	<a href="#!"><Icon icon="clarity:heart-line" />찜</a>
    </li>
    <li class="share_btn">
    	<a href="#!"><Icon icon="octicon:share-24" />공유</a>
    </li>
</ul>
<p>
    {#if overview === ''}
    	설명은 업데이트되면 추가하겠습니다.
    {:else}
    	{overview}
    {/if}
</p>

ch46_moving_현재상영작상세서브페이지.zip

0.44MB

 

 

 

 

Chapter 10.   인기영화 페이지 제작 : 

ch46_moving_인기영화페이지제작.zip

0.12MB

 

 

 

Chapter 11.   나머지 페이지 제작과 빌드 : 

ch46_moving_나머지페이지와빌드.zip

0.41MB