코스 이미지

Vue.js로 데일리리포트 앱 만들기

2018-08-19 기준, 모든 강의 노트와 참고용 이미지가 업데이트 되었습니다. 질문사항은 언제든지 질문 메뉴에 남겨주세요!.

Vue.js로 데일리리포트 앱 만들기: 3강까지 무료!

아직 괜찮은 자바스크립트 프레임워크 하나 손에 익혀보지 못했다면, 추천! 우선 3강까지 들어보고 판단해봐요.

  1. HTML CSS JavaScript 에 대한 선행지식을 바탕으로
  2. Vue.js 프레임워크의 특징과 활용 방법을 배워
  3. '데일리리포트' 웹앱을 SPA 로 구현하고, Firebase로 배포하는
  4. 열람 기간 제한 없고, 강사님께 질문도 가능한
  5. 수강료 20,000원의 온라인 강의.


당신이 실생활에서 직접 쓸 수 있는 앱을 만들어봅니다.

  • 내 일상을 기록하고 회고하는 데일리리포트(Daily Report) 라는 앱을 만듭니다.
  • 최종적으로는 Firebase 로 서버에 배포합니다.
  • 일정 추가, 수정, 삭제와 같은 기본 기능을 구현해보고,
  • 외부 모듈 임포트하는 방법과
  • 사용자 설정 메뉴(Redux, Vuex 사용을 위하여)
  • 외에 SPA 앱들이 가진 기본적인 기능과 장점을 가진 앱을 같이 만들어요!
  • 내가 만들 결과물 보기

데일리 리포트가 뭐에요? 하루 동안 있었던 일을 기록하고, 그 일들에 대한 자신의 만족도를 스스로 기록할 수 있는 '일상 기록 시스템' 입니다. 이미 많은 분들이 온, 오프라인에서 사용하고 있는 훌륭한 자기계발 도구입니다. 이를 보통 오프라인에서 노트에 작성한다면, 우리는 SPA로 개발해서 온라인에서 써보는 것이죠.


JS 프레임워크가 처음이거나, SPA를 처음 접해보는 웹 개발자에게 추천!

사용자의 요청에 따라 페이지 내에서 변화가 필요한 부분만 렌더링하는 SPA 방식. 하나의 웹 서비스를 제공하기 위해 여러 개의 HTML, CSS, JS 파일이 필요한 기존의 방식과는 무척 다른 접근입니다. 이를 직접 경험해본 적이 없다면, 데일리리포트 애플리케이션을 만드는 강의 내용을 따라 SPA의 특장점과 Vue.js로 개발했을 때의 이점을 체감해보세요.

Vue.js 자랑좀 할게요

한글화가 잘 되어있어 학습하기에 쉽고, 점진적으로 도입하기 좋다! 실제로 Vue.js의 공식 문서는 친절하게 모두 한글화가 되어있고, 그 퀄리티도 상당히 높습니다. 그리고 만약 내가 Vue 기반으로 개발하지 않았던 프로젝트에 Vue를 도입하고 싶다면, 작은 기능부터 하나씩 도입하면서 확장시켜나가는 점진적 도입(Incrementally Adoptable)이 가능한 장점이 있어요.

다른 프레임워크에 비해 좋은 점들

React.js 에 비교해보자면, 상대적으로 초반 학습 진입장벽이 낮습니다. 그리고 컴포넌트 기반 설계 완성도와 퍼포먼스가 매우 우수합니다. GitHub Star 지수로도 알 수 있듯이 전세계 개발자들이 열광하고 있지요. 리액트도 무척 좋은 프레임워크지만, 그에 못지 않은 넓은 개발 생태계를 가지고 있는 장래성있는 프레임워크입니다.


커리큘럼 *3강 까지는 무료입니다! 일단 들어보세요.
대주제 소주제
1. 강의 소개 Vue.js를 통해 SPA를 구현한다는 것은 어떤 것일까? 강의를 통해 나는 무엇을 배우고 또 얻게 될까? 시작하기 전에 강의에 대한 전반적인 특징을 짚고 넘어갑니다.
2. vue-cli 프로젝트 생성하기 프로젝트 생성 실습을 따라 vue-cli 사용법을 익힙니다.
3. Vue.js로 만든 SPA의 구조 vue-cli 를 통해 생성한 단일 페이지 애플리케이션의 구조를 파악해봅니다.
4~5. 템플릿 기초(1~2) Vue.js 템플릿의 기본 문법을 익혀봅니다.
6. 컴포넌트 생명주기(life cycle) 컴포넌트 작성법과, 중요한 개념인 라이프사이클에 대해 배웁니다.
7. 프로젝트 돌입! & 라우팅 앞으로 개발할 '데일리리포트' 앱 소개와, 라우팅에 대해 알아봅니다.
8~10. 네비게이션 & 인트로 & '오늘' 컴포넌트 만들기 애플리케이션의 주요 기능과 UI가 되어줄 컴포넌트들을 구현합니다.
11. Firebase 기초 API서버로 유용하게 활용할 Firebase에 대해 알아봅니다. 한 번도 서버 배포를 경험해보지 못했다면 무척 유용할거에요.
12~14. '오늘' 컴포넌트 완성 & 달력, 설정 컴포넌트 구현 프로젝트 마무리!


알고 수강하면 더 좋을, SPA의 특장점

Multi-Page Application 방식과 Single-Page Application 방식은 각각 특장점이 있지만, SPA 방식의 경우 이런 특징이 있답니다.

  1. 사용성을 극대화 하기 좋다: 필요한 부분만 렌더링하고, 매번 새로운 페이지를 불러오지 않아도 되기에 웹 사이트를 이용하는 데에 편리함이 커짐.
  2. 소스코드 관리에 유용하다: 개발자 입장에서는 REST API를 기반으로 서버에서 오는 데이터와 브라우저에서 처리할 데이터를 분리할 수 있어 개발 및 유지보수에 편리함.
  3. 배포 프로세스가 간편해진다: MPA 방식의 경우 배포 시 많은 페이지들을 함께 띄워야 하고, CSS, JS의 버전관리도 따로 진행해야만 함. 그러나 Vue, Angular 등을 활용하면 배포 자동화의 이점을 취하기 좋음.

내가 들어도 되는 강의일까?

전통적인, 즉 유저가 웹 페이지와 상호작용을 할 때마다 페이지를 새로 불러오는 방식의 웹 개발만 해보았던 분들에게는 좋은 전환점이 될 수 있는 강의입니다.

  • HTML, CSS, JavaScript에 대한 기본 지식이 있다면, 들을 수 있어요
  • 배포 프로세스를 험해보지 못했다면, Firebase 를 통해 경험해볼 수 있으니 들으면 참 좋아요
  • 외에 데이터 바인딩, 컴포넌트 기반 개발, JSX에 대해 좀 알고있다면 듣기 참 편해요
  • 괜찮은 JS 프레임워크 하나 손에 익혀보고 싶다면, 꼭 들어봐요!


프론트엔드 개발자 문윤기

현재 슬로워크 스티비팀 소속

강의에서 Vue, SPA 의 강점을 최대한 많이 알려드리도록 하겠습니다. 2003년부터 현재까지 작고 큰 웹서비스 구축 프로젝트에 참여한 경험이 짧고 굵게 녹아있는 강의입니다. 수강 중 생기는 질문은 언제든지 남겨주세요.

강사님의 전언
  • 2015.2 ~ 현재, 슬로워크 스티비팀 프론트엔드 개발자
  • 2013.4 ~ 2015.1 슬로워크(웹개발실) 웹개발 팀장
  • 2012.3 ~ 2013.3 웹액츄얼리코리아 웹퍼블리셔
  • 2009.3 ~ 2010.1 DOOING.NET, (주)디오오아이앤지 웹 디자이너/퍼블리셔
  • 2007.12 ~ 2009.12 바이럴마케팅그룹 고마시 블로그 디자이너/퍼블리셔
  • 2008.5 ~ 2008.9 HOWTOBE.CO.KR, (주)하우투비 웹 디자이너/퍼블리셔
  • 2008.1 ~ 2008.2 희망청 런칭 프로젝트 CI, SIGN, WEB 개발 디자이너/퍼블리셔
  • 2004.4 ~ 2005.4 ARTE.NE.KR (사)한국문화예술교육재단 웹 디자이너/퍼블리셔

파트1. 안녕, 뷰(Vue)

뷰.데.만. 강의 내용과 진행 과정에 대한 전반적인 소개

파트2. Vue CLI 프로젝트 생성

프로젝트 하나를 생성해 보며 vue-cli 사용법을 익힙니다.

파트3. Vue SPA 앱의 구조

vue-cli로 생성한 vue spa 앱의 구조를 파악합니다

파트4. 템플릿 기초

Vue 템플릿 기본 문법

파트5. 컴포넌트 라이프사이클

컴포넌트 작성법과 라이프사이클을 공부합니다.

파트6. '데일리리포트' 앱 개발 프로젝트 소개, 라우팅

예제 프로젝트를 소개하고, 라우팅을 공부합니다.

파트7. 데일리리포트 개발: 네비게이션 제작

예제 프로젝트의 네비게이션을 만듭니다

파트8. 데일리리포트 개발: '인트로' 컴포넌트 제작

인트로 만들기

파트9. 데일리리포트 개발: '오늘' 컴포넌트 제작

오늘 컴포넌트의 데이터 구조를 설계하고 그에 맞추어 템플릿을 만듭니다.

파트10. 데일리리포트 개발: Firebase 기초

API서버로 사용할 Firebase에 대해 공부합니다.

파트11. 데일리리포트 개발 마무리: '오늘' 컴포넌트 완성

'오늘' 컴포넌트와 Firebase API서버 간의 통신을 구현합니다

파트12. 데일리리포트 개발 마무리: '달력' 컴포넌트 제작

외부 라이브러리(fullcalendar.js)를 import하여 사용하는 방법을 익힙니다.

파트13. 데일리리포트 개발 마무리: '설정' 컴포넌트 제작

form 작성법과 Vuex 에 대해 공부합니다.