Start JavaScript 30 - 공부방법 업데이트

개요

 

- Vanilla JavaScript 로 실제 30개의 동작하는 녀석을 만들어보면서, JavaScript 를 공부해보자.

 

- 공식링크: https://javascript30.com/ - GitHub: https://github.com/wesbos/JavaScript30 - 정현석 Fork: https://github.com/nicewook/JavaScript30

 

목표

 

참여중인 개발자 슬랙에서 JavaScript 30 코스를 함께 공부하기로 하였다.   - 3월 1일부터 공식 시작 - 매일 하루 강의를 보고 프로젝트나 느낀 점을 공유할 것. 결과물 == 1인당 30개글 - 각자 페이스는 다를 수 있어도 목표는 완주.

 

Course Front Page

 

30 개의 튜토리얼을 30일동안 수행하면서 30개의 바닐라 코드로 30개의 동작하는 녀석을 만들어보자.

프레임워크도, 컴파일러도, 라이브러리도, 보일러플레이트도 없다. V.A.N.I.L.L.A.

 

 강사인 Wes Bro 가 하고픈 말은 아래와 같다. (적당한 의역)

 

There is no Formation without Repetition → 반복해서 훈련을 해야만 근육이 만들어진다.   "강의 코스를 듣거나, 책을 읽는 것 만으로는 부족하다. 무언가를 만들어야 한다. 천 개는 만들어야 한다. 그래서 이 코스를 만들었다. 일단 30일동안 30개를 만들어보자."

 

이 코스를 통해, 우리는 자바스크립트의 기초와 DOM 작업법을 배울 것이다.

 

공부방법 - update (2019-03-14)

 

Lecture duration sum 00 - Getting Setup.mp4 0:03:55   01 - JavaScript Drum Kit.mp4 0:19:39 0:23:34 02 - CSS + JS Clock.mp4 0:10:44 0:34:18 03 - Playing with CSS Variables and JS.mp4 0:13:13 0:47:31 04 - Array Cardio Day 1.mp4 0:23:27 1:10:58 05 - Flex Panels Image Gallery.mp4 0:13:10 1:24:08 06 - Ajax Type Ahead.mp4 0:17:21 1:41:29 07 - Array Cardio Day 2.mp4 0:07:15 1:48:44 08 - Fun with HTML5 Canvas.mp4 0:18:01 2:06:45 09 - 14 Must Know Dev Tools Tricks.mp4 0:10:36 2:17:21 10 - Hold Shift to Check Multiple Checkboxes.mp4 0:11:18 2:28:39 11 - Custom HTML5 Video Player.mp4 0:24:33 2:53:12 12 - Key Sequence Detection (KONAMI CODE).mp4 0:05:08 2:58:20 13 - Slide In on Scroll.mp4 0:12:57 3:11:17 14 - Object and Arrays - Reference VS Copy.mp4 0:11:28 3:22:45 15 - LocalStorage and Event Delegation.mp4 0:30:24 3:53:09 16 - CSS Text Shadow Mouse Move Effect.mp4 0:11:22 4:04:31 17 - Sorting Band Names without articles.mp4 0:07:09 4:11:40 18 - Tally String Times with Reduce.mp4 0:12:56 4:24:36 19 - Unreal Webcam Fun.mp4 0:30:20 4:54:56 20 - Native Speech Recognition.mp4 0:13:20 5:08:16 21 - Geolocation based Speedometer and Compass.mp4 0:08:50 5:17:06 22 - Follow Along Links.mp4 0:09:25 5:26:31 23 - Speech Synthesis.mp4 0:16:56 5:43:27 24 - Sticky Nav.mp4 0:10:02 5:53:29 25 - Event Capture, Propagation, Bubbling and Once.mp4 0:09:10 6:02:39 26 - Stripe Follow Along Dropdown.mp4 0:21:12 6:23:51 27 - Click and Drag to Scroll.mp4 0:14:09 6:38:00 28 - Video Speed Controller UI.mp4 0:09:26 6:47:26 29 - Countdown Clock.mp4 0:21:45 7:09:11 30 - Whack A Mole Game.mp4 0:14:35 7:23:46 31 - That's All Folks!.mp4 0:01:34 7:25:20

공부방법   - 11일차 까지 완료한 시점에서 공부방법을 재정리해봄   1) GitHub 을 Fork 한다: https://github.com/nicewook/JavaScript30 2) Start 버전을 똑같이 타이핑한다. - 그리고 정확히 모르는 부분을 찾아서 원노트에 정리한다. 3) 강의 동영상을 본다. - Start 버전을 타이핑 하였기에 전반적으로 이해가 쉬워졌다. 4) 동영상을 본 기억과, Finished 버전을 참고하여 코드를 완성한다. 5) 강의중 이해가 안되고 어려웠던 부분 확인하여 정리한다. - 코드를 이리저리 바꿔가며 테스트도 해본다. 6) 정리한 내용을 블로그 포스팅한다.

 

 

처음에 정리했었던 공부방법 - 기록으로 남김

 

원래는 1회 정주행 한 다음, 다시 강좌 하나씩 주행하면서 실습하려고 하였다. 그런데 동영상 강좌 만으로는 머리속에 그림이 안그려짐   GitHub 을 clone 해보면 각 강의는 코드의 시작점과 완성된 파일이 제공되어 있다. 아래와 같은 공부 프로세스를 생각해보았다.   공부방법   1) GitHub 을 Fork 한다: https://github.com/nicewook/JavaScript30 2) Start 버전을 똑같이 타이핑한다. - 그리고 정확히 모르는 부분을 찾아서 원노트에 정리한다. 3) 강의를 들으면서 따라하면서 이해하고 원노트에 정리한다. 4) 정리한 내용을 블로그 포스팅하고 Facebook 생활코딩, 슬랙에 공유한다.   공부방법 in detail (01. Lecture 를 한다고 했을때에)   1) 01.html 을 만들고 2) index-START.html 을  VSCode 에 함께 열어서 똑같이 타이핑한다. - style.css 는 style-jhs.css 로  타이핑해준다. - 이것에 대한 분석글을 원노트에 정리 3) 비디오를 보면서 하나씩 따라하고, 원노트에 개념을 정리한다. - 최종적으로는 index-FINISHED.html 과 같은 내용의 01.html 파일이 만들어진다. 4) 공유한다.   추가 목표   - GitHub 의 각 폴더에 나의 구현을 코딩한다. - Golang 으로 Web Server 를 하나 만들어 Heroku-CI + Heroku 에 올린다.