[유데미 강좌 추천] Vanilla JavaScript 20개 프로젝트 (feat. 코딩 속도 테스트 게임)

 강좌 

링크: 강의 바로가기

우선 강좌는 보다시피 3000명 정도의 평가를 받은 결과가 4.8/5.0점이다. 유데미를 통틀어서도 매우 사랑받는 강좌임에 틀림없다.

강좌를 선택한 이유는, 무엇보다도 다음 두 가지였다.

1. React, jQuery, Vue 등의 프레임워크 없이 순수하게 JavaScript만으로,
2. JavaScript 문법만 다루는 게 아니라 실제 프로젝트들을 완성해본다는 점이다.

유데미만 하더라도 정말 다양한 JavaScript 강좌가 있지만, 프레임워크 사용을 전제하고 있거나 JavaScript라는 언어 자체를 이해하는 것에 초점을 맞추고 있는 것이 대부분이다. 흔하지 않은 유용한 컨셉의 강좌라고 할 수 있다.

강좌는 영어로 진행되는데 아쉽게도 자막이 자동 생성이라 끄는 게 낫다. 그래도 강사의 발음과 목소리가 매우 좋은 편이고, html - css - javascript 파일을 하나씩 같이 만들어가며 차근차근 진행되기 때문에 쉽게 이해할 수 있다.

모든 미니 프로젝트는 독립적이고, 각각 다른 종류의 기능, 접근, 로직을 구현하는 조그마한 완성품을 만들어본다는 점에서 매우 매력적이다. 나는 주니어 개발자 친구와 매주 이 미니 프로젝트를 2개씩 해와서 같이 토의하는 시간을 가지고 있는데, 거대한 프로젝트를 한 단계씩 해나가는 그런 부담감이 전혀 없고 매 강의마다 새로운 정보와 인사이트를 얻을 수 있어서 좋았다.

 강사 

사실 이 강사를 알게 된 건 유튜브 채널에서였다.

매우 친절하면서도 분명하게 강의를 설계하고 진행하는 그에게 신뢰를 느껴, 유데미에서 자바스크립트 강좌를 고를 때 선택했다. 이 강좌는 바닐라 자바스크립트로 20개의 프로젝트를 만들어가는 강좌이며, 자바스크립트 언어 자체에 대한 깊은 이해를 원하는 분은 같은 강사가 진행하는 Modern JavaScript 강좌가 있으니 참고하길 바란다.

 프로젝트 

미니 프로젝트를 같이 만들어가는 강좌인 만큼, 실제로 어떤 프로젝트들을 하는 건지 보는 게 가장 좋을 것이다. 현재 20개 중에 13개까지 완료한 상태인데, 개인적으로 재미있었던 4개를 뽑아봤다.

• Speed Coder Game | 코딩 속도 테스트 | DOM, Intervals, Events
• Meal Finder | 요리 정보 검색 | Fetch & MealDB API
• Infinite Scroll Posts | 무한 스크롤 피드 | Fetch, Async/Await, CSS Loader
• Movie Seat Booking | 영화관 좌석 예매 | DOM & Local Storage

강좌에서 사용하는 코드를 기반으로 했지만 개인적으로 모바일 최적화, 디자인 변경, 한글 번역 추가 등 소소한 변화를 주었다. 특히 12번째 프로젝트였던 '코딩 속도 테스트' 게임은, 원래 단어 타이핑 게임이었던 걸 새로운 컨텐츠로 바꿔봤다.

 코딩 속도 테스트 게임 

링크: Speed Coder

게임의 규칙은 간단하다. 제한된 시간 내에 최대한 많은 코드를 오타 없이 타이핑해내는 것이다.

문제로 나오는 코드 소스는 주로 책과 강의에서 공부한 내용의 코드를 가져왔다.

난이도는 Normal coder, Fast coder, Crazy nerd 세 종류가 있으며, 한 문제를 맞힐 때마다 순서대로 14초, 9초, 5초씩 늘어난다. 시작과 동시에 제공되는 20초는 고정이다.

파이썬 코드로만 제한했고, 문제마다 난이도 격차를 줄이기 위해 길이를 일정 범위 내로 제한했다. 오타가 있을 시 다음 문제로 넘어가지 않기 때문에, 사실 오타 한 번 내면 최고 기록 도전은 실패인 셈이라 꽤 어렵다.

개인적인 최고 기록은, Fast coder 난이도에서 9점이었다. 혹시 Crazy nerd 난이도에서 어느 정도 점수를 낼 수 있는 Crazy nerd가 있다면, 도전해보고 댓글로 점수를 알려주길 바란다.

(내 깃허브에서 모든 코드 소스 문제와 이 게임 자체의 소스를 확인할 수 있다.)

c Eng



1.c

[약어] (글에서) 센트(cent(s))

2.c.

[광학] candle(s); carton; case; [야구] catcher; [크리켓] caught; cent(s); center; centigrade; century; chapter; child; circa, circum ((L = about));

3.c

carat; cedi(s); centimeter(s); colon(s)

4.c

see ((전자 메일 등의 약어))(cf. CUL)

5.c.

calm; canceled; candle(s); carat; carbon (paper); carton; case; [크리켓]caught (by); cedi; cent(s); centi-; centime(s); centimeter(s); centum; chairman; child; [L circa, circiter or circum] about

6.서적 수집광 書籍蒐集狂

(일) bibliomania, (사람) a bibliomaniac

7.우조 羽調

(음악) wu, the highest note of the Korean pentatonic scale, C

8.정치광 政治狂

(병) politicomania, (사람) a politicomaniac

9.다조 ─調

[음악] C.

10.에트 세트러

et cetera; etc.; &c.

{"mean":["c<br/><br/>[약어]\n\t\t \t\t(글에서) 센트(cent(s))","c.<br/><br/>[광학] candle(s); carton; case; [야구] catcher; [크리켓] caught; cent(s); center; centigrade; century; chapter; child; circa, circum ((L = about));","c<br/><br/>carat; cedi(s); centimeter(s); colon(s)","c<br/><br/>see ((전자 메일 등의 약어))(cf. CUL)","c.<br/><br/>calm; canceled; candle(s); carat; carbon (paper); carton; case; [크리켓]caught (by); cedi; cent(s); centi-; centime(s); centimeter(s); centum; chairman; child; [L circa, circiter or circum] about","서적 수집광\n \t\t\t書籍蒐集狂<br/><br/>(일) bibliomania, (사람) a bibliomaniac","우조\n \t\t\t羽調<br/><br/>(음악) wu, the highest note of the Korean pentatonic scale, C","정치광\n \t\t\t政治狂<br/><br/>(병) politicomania, (사람) a politicomaniac","다조\n \t\t\t─調<br/><br/>[음악] C.","에트 세트러<br/><br/>et cetera; etc.; &c."],"word":"\n\t\t\t\t\t\tc\n \t\t\t\n\t \t\n\t ","soundUrl":"https://dict-dn.pstatic.net/v?_lsu_sa_=39082756dda93d76b996d13e3f9441f7ad936635690e1f4669d2887e3b166341f855a7736e75e976a93a6645782d30d4770146fc8abb607dac4cb8c062e8f421f11cafd545f542dbd9b45c3593104dd24b861d24a33ff4f5de375ac74ab14a1d098fb2b74285dbb1afd0b9215fdedfc31ac62c8f17f2adf4f7354ee9800a1ee1","phoneticSymbol":""}