티스토리 뷰

반응형

개요

 

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

 

 

목표

 

참여중인 개발자 슬랙에서 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 올린다.

 

 

 

 

반응형

'javascript30' 카테고리의 다른 글

06 - Type Ahead  (0) 2019.03.08
05 - Flex Panel Gallery  (0) 2019.03.06
04 - Array Cardio Day 1  (0) 2019.03.05
01 - JavaScript Drum Kit - FINISHED  (0) 2019.02.28
01 - JavaScript Drum Kit - START  (0) 2019.02.28
Start JavaScript 30 - 공부방법 업데이트  (2) 2019.02.28
댓글
  • 프로필사진 js30 안녕하세요, 이제막 javascript30으로 공부해보고자하는 초보 개발자입니다.
    영상이 전부 영어로 되어있고, 무자막이던데 혹시 자막없이 보고 공부하시는건가요..?
    2020.09.23 07:22
  • 프로필사진 fistful 네 그랬습니다.
    그런데 깃헙 따라치시고 영상을 보시면 영어와 상관없이 이해가 어렵진 않을듯 합니다
    2020.09.23 07:28 신고
댓글쓰기 폼