이미 소장하고 있다면 판매해 보세요.
|
1장 스벨트 소개
__1.1 적은 코드 __1.2 순수한 리액티비티(반응성) 2장 개발 환경 구성하기 __2.1 REPL로 시작해보기 __2.2 로컬에서 프로젝트 만들어 코드 작성하기 __2.3 폴더 및 파일 구성 3장 Hello, Svelte~! __3.1 〈script〉 __3.2 HTML 마크업 __3.3 〈style〉 __3.4 {} 표현식 __3.5 스벨트 컴포넌트를 document에 포함시키기 4장 템플릿 기본 표현식 __4.1 {#if ...} 블록 __4.2 {:else if ...} 블록 __4.3 {#each ...}를 사용해 배열 표시하기 __4.4 {#each} 루프 안에서 인덱스 사용하기 __4.5 {#each}로 JSON 객체 다루기, 다차원 배열 표시하기 __4.6 Promise와 {#await ...} 블록 사용하기 __4.7 fetch 결과를 {#await ...} 블록으로 표시하기 __4.8 {#key 표현식} HTML {/key} __4.9 {#key 표현식} 하위 컴포넌트 {/key} __4.10 {@html}로 돔에 HTML 엘리먼트 생성하기 __4.11 {@debug}로 디버깅, 리액티브하게 디버깅하기 5장 반응성 __5.1 스벨트의 반응성이란? __5.2 반응형 데이터 만들기 __5.3 센서 생성과 동작 정의 __5.4 할당을 통한 트리거 만들기 __5.5 센서의 사용하는 네 가지 패턴 __5.6 배열의 변화 감지하기 __5.7 JSON 객체의 변화 감지하기 6장 HTML 엘리먼트에 데이터 바인딩하기 __6.1 텍스트 / 텍스트 입력값 바인딩하기 __6.2 input에 숫자 값 바인딩하기 __6.3 체크박스 바인딩하기 __6.4 다중 객체(radio, check)에 그룹 바인딩하기 __6.5 textarea 바인딩하기 __6.6 단일 select, 다중 select 바인딩하기 __6.7 contenteditable 바인딩 __6.8 {#each ...} 블록에서 속성값 바인딩하기 __6.9 media의 속성값 바인딩하기 __6.10 크기 값 바인딩 __6.11 this 바인딩 __6.12 하위 컴포넌트 데이터 바인딩 7장 하위 컴포넌트 사용 __7.1 예제 프로젝트 생성하기 __7.2 하위 컴포넌트 작성하기 __7.3 하위 컴포넌트 불러오기 __7.4 HTML에서 사용하기 8장 props __8.1 props 선언하기 __8.2 props 사용하기 __8.3 spread 활용하기 9장 이벤트 __9.1 돔 이벤트 처리하기 __9.2 인라인으로 이벤트 처리하기 __9.3 이벤트 제한자 사용하기 __9.4 하위 컴포넌트의 커스텀 이벤트 처리하기 __9.5 이벤트 포워딩하기 __9.6 돔 이벤트 포워딩하기 10장 라이프사이클 __10.1 onMount __10.2 onDestroy __10.3 beforeUpdate와 afterUpdate __10.4 tick 11장 스토어 사용하기 __11.1 writable 스토어로 시작하기 __11.2 readable 스토어 사용하기 __11.3 derived 스토어 사용하기 __11.4 사용자 정의 스토어 만들기 __11.5 get 함수 사용하기 12장 모션 __12.1 트윈 __12.2 스프링 13장 트랜지션 __13.1 트랜지션 지시자 __13.2 파라미터 이용하기 __13.3 in/out 사용하기 __13.4 트랜지션 이벤트 정의하기 __13.5 로컬 트랜지션 14장 애니메이션 15장 액션 __15.1 use 지시자 사용하기 __15.2 파라미터 사용하기 16장 클래스 __16.1 class 속성을 확장하여 사용하기 __16.2 class 지시자 사용하기 17장 slot 사용하기 __17.1 slot이란? __17.2 slot 기본값 사용하기 __17.3 named slot 사용하기 __17.4 $$slots을 이용한 콘텐츠 체크 __17.5 slot의 props 사용하기 18장 컨텍스트 API __18.1 setContext와 getContext __18.2 hasContext __18.3 컨텍스트와 스토어 차이점 비교 19장 특수 엘리먼트 __19.1 〈svelte:self〉 __19.2 〈svelte:component〉 __19.3 〈svelte:window〉 __19.4 〈svelte:body〉 __19.5 〈svelte:head〉 __19.6 〈svelte:options〉 __19.7 〈svelte:fragment〉 20장 두뇌 개발 게임만들기 __20.1 게임 화면 미리 보기 __20.2 애플리케이션 아키텍처 __20.3 배포 아키텍처 __20.4 스벨트킷으로 프로젝트 생성 __20.5 코드 작성 준비하기 __20.6 라우터로 페이지 구성하기 __20.7 레이아웃으로 메뉴 구성하기 __20.8 스토어 구성하기 __20.9 홈(이번 주의 점수) 구현 __20.10 게임 구현 __20.11 점수 저장 구현 __20.12 몽고디비 연결하기 __20.13 REST API 구현 __20.14 이번 주의 점수를 REST로 구현 __20.15 점수 저장을 REST로 구현 __20.16 깃허브 클라이언트 설치하기 __20.17 SSH로 깃허브에 연결하기 __20.18 깃허브로 소스 배포하기 __20.19 AWS 서버 만들기 __20.20 터미널에서 접속하기 __20.21 AWS 앱 서버로 설정하기 __20.22 로컬 개발 환경에서 빌드 __20.23 운영(AWS) 환경에서 빌드 및 실행 |
박승현의 다른 상품
|
[예제 코드]
- 길벗 예제 소스 https://github.com/gilbutITbook/080278 [지은이의 말] 지인 소개로 우연히 알게 된 스벨트(Svelte)! 관련된 글들을 찾아 읽다가 호기심이 생겨 튜토리얼을 차곡차곡 해보고 이거다 싶었습니다. 스벨트는 리액티비티를 충실하게 구현하고, 버추얼 돔 같은 아키텍처 이해 없이, 일반적인 자바스크립트 문법만으로 양방향 바인딩(two-way binding) 코딩을 할 수 있게 해 줍니다. 스벨트는 정말 쉬운 자바스크립트 프레임워크입니다. 쉽게 배워서 바로 코딩하기에 이보다 더 나은 프레임워크는 당분간 찾기 쉽지 않을 것입니다. 본격적으로 개발자로서 삶을 살고 싶은데 어디서부터 시작할지 모르겠다면 스벨트를 배워 프런트엔드 개발자부터 시작할 수 있습니다. 혹은 풀스택 개발자가 되고 싶은데 프런트엔드가 약하다고 느끼거나, UI를 빠르게 구현할 수 있는 프레임워크 하나쯤 익히고 싶은 분들도, 이 책으로 그 시작의 첫걸음을 내디딜 수 있습니다. 본문의 예제를 찬찬히 따라 하다 보면 스벨트라는 본인만의 무기가 생길 거라고 생각합니다. “훌륭한 사수를 찾으면 능력 있는 개발자가 될 수 있겠지!”라는 생각을 하고 선릉역 인근 이면도로에 있는 벤처 회사의 지하 사무실에서 생계형 개발자로 세상에 첫발을 내디뎠었습니다. 그 사수는 어디에 꼭꼭 숨어 계셨는지, 아니면 제가 찾아다니길 소홀했는지, 22년째 만나 뵙지 못하고, 이제 제가 시니어 개발자가 되어 있네요. 사실, 일하면서 새로운 기술이나 흥미 있는 프레임워크가 나올 때마다 저한테 좋은 사수는 책이었던 것 같습니다. 그때의 저처럼 신입사원이 회사에 입사한다면 초급 개발자로 프런트엔드의 세상에 첫발을 내디딜 때 “개발은 재미있는 일이구나”라고 느끼게 해주고 싶다는 생각으로 이 책을 만들었습니다. 고등학교에 진학하는 우리 아들 제민이가 “아빠 개발자가 되고 싶어요”라고 말한다면 그때, 이 책을 쥐여주면 좋겠다는 바람도 글 속에 담았습니다. 그런 바람대로 이 책은 HTML과 JS로 간단한 웹페이지 정도만 만들어 봤다면 쉽게 배워서 실무에 적용할 수 있도록 예제를 구성했습니다. 반응형(reactive) 프로그래밍을 처음 접하거나, 처음 들어 보았다면 “5장 반응성” 부분을 잘 읽어보시길 추천합니다. 스벨트를 통하여 개념을 이해하고 익힌다면 반응형 프로그래밍은 아주 쉽습니다. 그래서 재미있습니다. 스벨트를 사용하여 누구나 쉽게 프런트엔드 개발자가 될 수 있습니다. 하지만 개발한 앱을 서비스까지 구동시키는 데는 개발 외적인 요소도 알아야 합니다. 그래서 20장에서는 앱 개발부터 서비스까지의 전체 과정(아키텍처, 설계, 개발, 빌드, 배포, 서버 구성 및 구동)을 차곡차곡 실습해 볼수 있게 구성했습니다. 한 땀 한 땀 따라 하다 보면 어느덧 내가 만든 앱이 인터넷에서 동작하는 것을 볼 수 있습니다. 아직 정식 버전이 나오지 않았지만, 스벨트킷은 스벨트를 풀스택 프레임워크로 만들어줍니다. 20장에서는 프로젝트를 스벨트킷으로 구성했습니다. 프로젝트 구성뿐 아니라, 빌드, 라우터 기능, 데이터 서비스 등 백 엔드의 핵심기능을 예제를 통하여 맛볼 수 있도록 구성했습니다. 따라 하다 보면 풀스택 개발자로서 알아야 할 필수적인 요소들을 스벨트킷을 통하여 배울 수 있습니다. 스벨트가 너무 재미있고 쉬운 프레임워크라서, 얼마 안 있으면, 프런트엔드 개발의 춘추 전국시대 같은 지금을 평정할 것 같습니다. 이런 이유로, 일과 함께 책을 쓴다는 것이 쉽지 않다는 것을 『Meteor 코딩 공작소』(길벗, 2017)를 쓰면서 뼈저리게 느꼈지만, 다시 용기를 내었습니다. 글쓰기에 어설픈 제가 책을 다시 완성할 수 있도록, 항상 조언과 도움을 주신 길벗 출판사 한동훈 님께 진심으로 감사드립니다. 부모님 사랑합니다. 항상 건강하셨으면 좋겠습니다. 우리 아들 제민이, 왕딸 지수, 막내 지윤아 사랑한다! 항상 옆에서 응원해주는 윤용정 님도 사랑합니다! 코로나가 빨리 종식돼서, 여러 개발자들과 스벨트를 주제로 수다를 떨 수 있는 날이 하루빨리 오기를 기원합니다. 모두 건강하세요. 고맙습니다. |