위치

요일

가능
시간
(날짜)

  • 13-19시 (협의)
장소 : 경성대/부경대 인근 스터디룸
추가비용 : 없음
경성대인근 스터디룸 또는 서면 롯대백화점 뒤쪽 청년두드림센터에서 진행할 예정이며, 주중엔 대연역 인근에서도 가능합니다. 공간을 이용하는데 있어서 별도의 비용은 없으며 시간/장소는 협의 가능합니다.
₩12,000원 / 시간
₩180,000 / 총 5회 15시간
김성훈
Seongh
[ 모던웹만들기 ] Node.js + Vue.js 기반의 SPA(SinglePageApplication) 블로그 만들기
  • 부경대, 서면
  • 3시간/회
  • 최대인원:1~6
  • ₩12,000/시간

튜터정보

  • 동서대학교 소프트웨어공학전공
[ 튜터소개 ]

안녕하세요 JS개발자 김성훈입니다. JS는 개발에 있어서 자유도가 상당히 높은 언어입니다. 자유도가 높은만큼 손이 가는대로 쉽고 빠르게 개발할 수 있다는 장점이 있습니다. 그런 JS의 높은 자유도 만큼이나 개발도 손이 가는대로 재밌게 할수있었으면 하는 바람으로 강의를 기획하게 되었습니다.
강의라는 생각보단 같이 개발한다는 생각으로 참여할 수 있는 강의 만들도록 노력하겠습니다 :)



[ 튜터경력 ]

01. 대구 스마트시티 플랫폼 개발 참여

02. 부산 벡스코 스마트파킹 개발 참여

03. Global Startup Weekend 2016 우승

04. 전국 캡스톤디자인 경진대회 우수 수상

05. 지방기능경기대회 웹프로그래밍 부문 은상 수상

06. 청크영어 앱 프론트엔드, 디자인 개발참여

07. 천태산오토캠핑 사이트 개발

08. DDA사이트 개발


현재는 교육관련 스타트업에서 웹개발자로 근무 중입니다.

수업소개

[ 수업을 기획한 이유 ]

아직 학교를 졸업하지 않은 대학생 분들의 고충이 어떤 것인지 잘 알고있습니다. 좋은 기술이 있어도 어떻게 시작하고 사용해야 할지 또는 사용하는 기술들이 왜 이렇게 사용되는지 등 많은 호기심에 구글링도 해보고 책도 열어보셨을거라 생각합니다. 저 또한 같은 시기를 겪었고 지금도 겪어가는 중입니다. 그런 시기에 누군가 속시원하게 알려주거나 방향을 제시해 준다면 대부분의 개발자는 빠른 성장을 하게되는데 그 성장에 도움을 드리고 싶었습니다.

제가 모든 것들을 알려드릴 수는 없지만 "딱 이거 하나만큼은 내가"라고 생각하는 Vue와 Node.js에 대해서는 많은 지식을 공유해 드리고자 강의를 기획하게 되었습니다.




[ 강의 일정과 장소는 ]

강의는 차시당 강의시간은 3시간이며 총 5회차를 진행하게 됩니다. 토/일요일 오전 10시부터 오후 7시 사이 튜티님들께서 원하시는 시간에 시원한 커피가 제공되는 스터디룸(경성대 정문)에서 진행될 예정입니다. 스터디룸 이용에 있어서 추가적인 비용은 발생하지 않습니다.
방학 시즌인 7월과 8월 관심분야가 비슷한 친구들과 함께 수강해 보시는 것도 추천드립니다!




[ Vue, Node.js를 선택한 이유 ]

웹 개발을 공부하시거나 접해보신 분들은 Vue, Angular, React 등 다양한 프레임워크 또는 라이브러리에 대해서 수없이 들어보셨을거라 생각합니다. 그 중에서도 Vue.js는 AngularJS와 React의 장점을 모두 가지면서도 상대적으로 낮은 러닝커브를 가지고있습니다. 트렌드에서도 알 수 있듯이 17-18년도 가파른 상승세로 큰 호응을 얻고 있습니다. 또 하나의 선택 이유라고 한다면 타 프레임워크에 비해 해당 프레임워크에 의존하는 비중이 가장 낮습니다. 그런 점에서 단순히 신기술만 배우기보단 순수JS로 구현하는 로직을 극대화 할 수있고 스스로 생각할 수 있는 경험을 상대적으로 많이 가질 수 있는 언어라 판단하였습니다. 이번 여름방학동안 쉽고 빠르게 배워볼 수 있는 최고의 프레임워크가 될거라 생각합니다.




[ 수업에서 다룰 내용 ]

Back-end진영에서 가장 Hot한 Node.js(Express)와 Front-end진영에서 가장 Hot한 Vue.js를 활용하여 CRUD가 가능한 블로그를 만들면서 배웁니다. 서버와 클라이언트를 분리하는 전략으로 개발하여 개인프로젝트에서 더 확장해 나갈수 있도록 진행하려 합니다.

서버는 Node.js에서도 가장 많이 사용되는 Express프레임워크를 활용한 REST API서버 형태로 개발하게 되며 클라이언트 부분은 정통적인 서버사이드렌더링 방식으로 개발 후 SPA(Single Page Application)형태로 바꿔갈 예정입니다. 개별 진도에 따라서 바로 SPA개발도 가능합니다.

전체적으로 쉬운 난이도로 진행될 예정이며 HTML, CSS, Javascript는 기본적으로 사용할 수 있다는 가정하에 진행됩니다. 필수 조건은 아니지만 php, jsp, jquery등의 웹개발 경험도 많은 도움이 됩니다.




[ 준비물 ]

- 개인 노트북

수업대상

  • [ 추천대상 ]

    - HTML, JS 등 웹애플리케이션을 제작하고 싶은 대학생

    - PHP, ASP 등 경험은 있으나 프론트엔드 개발을 시작하고 싶으신 분

    - 웹개발자를 꿈꾸는 학생분들

    - 최신 JS프레임워크를 경험하고 싶으신 분


    수업 난이도는 쉬운 난이도이나 위 모든 항목은 수업소개부분에서 알려드린 것과 같이 HTML, CSS, Javascript을 기본적으로 사용할 수 있으신 분들에 한합니다.

커리큘럼

1회차

웹서비스들이 어떻게 동작하는지에 대해 이해하고 서버와 클라이언트간의 소통인 HTTP에 대한 이해를 다지게 되는 회차입니다.

01. HTTP에 대한 이해

02. 웹 개발 방향성과 실제 사용되는 프레임워크 또는 언어들에 대해

03. Express와 REST API서버란?

04. Node.js 맛보기(HTTP이해를 위한 간단한 서버 구축)

05. Express서버 만들기(API서버 맛보기)

2회차

Vue의 라이프싸이클을 이해하고 실습한 뒤 Vue와 기존의 템플릿엔진들과 어떻게 다른지 각각의 장단점에 대해 알아봅니다.

01. EJS 뷰템플릿

02. Vue.js란?

03. Vue의 라이프싸이클

04. Vue.js 기초

3회차

본격적으로 Vue를 사용해 볼 수 있으며 조금 더 어려운 로직을 처리하기 위해서 더 확장된 문법들을 배울 수 있습니다.

01. Vue 템플릿 문법

02. Vue Directive(지시문)

03. Vue 폼바인딩

04. Vue Component

4회차

Node.js 웹서버 환경을 구축하고 간단한 API설계로 제작된 Vue 애플리케이션과 비동기 통신으로 실제 DB데이터를 사용해 볼 수 있습니다.

01. EventBus활용

02. Axios를 활용한 비동기통신

03. CRUD구현

5회차

구현한 CRUD기능들을 인증처리에 따라서 권한을 부여하는 서버측 인증을 구현합니다. 프론트엔드에선 로그인 페이지를 구현하고 라우터에 의해서 요청을 분배하는 로직을 구현합니다.

01. SPA란?

02. Vue cli + Vue router

03. Passport를 활용한 인증기능 만들기

리뷰(1)

리뷰쓰기
5.0
  • 커리큘럼
  • 전달력
  • 준비성
  • 친절도
  • 시간준수

실시간톡

실시간 톡하기

위치

지도가 들어갑니다.