노마드 코더는 한국인 린, 그리고 콜롬비아인 니콜라스가 운영하는 팀이다. 노마드 코더에서 노마드 아카데미를 운영하는데, 최근 여기서 운영하는 챌린지에 재미를 들여서 계속 참여하고 있다.
강의는 니콜라스가 하는데 짧은 이론 + 실제 클론 코딩을 적절히 섞어서 지루하지 않게 잘 진행한다. 다양한 기술을 짧은 시간에 훑어볼 수 있어서 좋다.
1. 바닐라 자바스크립트(Vanilla Javascript) 2주 챌린지
무료로 더의 강의를 듣고 챌린지를 체험해 볼 수 있다. 미리 노마드 코더의 학습 방식이 나와 맞는지 알아볼 수 있고 챌린지에 성공할 경우 유료 강의 10% 할인 쿠폰도 받는다.
1.1. 강좌명: 바닐라 JS로 크롬 앱 만들기
바닐라 자바스크립트 강의에서는 모멘텀이라는 To Do List 관리 앱을 클론 코딩한다. 강의에서 만드는 앱이 챌린지의 최종 과제이며 별도로 소규모의 코딩 과제를 하게 된다.
- VanillaJS
- ES5 vs ES6
- Variables
- let, const, var
- Data Types on JS
- Arrays
- Objects
- Functions
- Modifying DOM
- Conditions
- Local Storage
- Ajax
- Geolocation
1.2. 챌린지 후기(2019년 12월)
챌린지는 매일 강의 듣고 퀴즈를 풀거나 코딩 과제를 제출하는 방식이다.
딴 거 안 하면서 챌린지만 하는 게 아니라면 매일 강의 듣고 코딩 과제를 제출하는 게 쉬운 일은 아니다. 바닐라 자바스크립트 챌린지는 미리 강의를 듣고 시작했기 때문에 좀 덜 했지만, 다른 챌린지들은 퇴근 후 강의 듣고 과제까지 하다가 새벽에 자는 경우가 잦았다.
경험상 강의를 듣고 그대로 타이핑해서 만들면 결과물은 나오지만 실제 내 실력향상으로 이어지는 부분이 별로 없다. 강의 내용과 관련 있는 소규모 과제를 해결하기 위해 배운 내용을 바탕으로 직접 코드를 만들어 내는 과정이 있어서 습득에 도움이 많이 되었다.
2. HTML, CSS 2주 챌린지
자바스크립트 풀스택 로드맵 중 첫 번째 강의다. 챌린지에 성공하면 유료 강의 30% 할인 쿠폰을 받는다.
2.1. 강좌명: 코코아톡 클론 코딩
HTML과 CSS의 기초 이론을 학습하고 카카오톡의 프론트엔드를 클론 코딩한다.
- HTML5
- CSS3
- GitHub Desktop
- Media Queries
- Flexbox
- Animations
- Font Awesome
2.2. 챌린지 후기(2019년 11월)
챌린지는 CSS 과제가 매우 많은데 새벽까지 하다보니 힘들어서 그만 마무리하려다가도 욕심이 나서 이것저것 더 꾸몄던 기억이 난다. 그래서 강의 최종 과제인 카카오톡 클론보다 챌린지 과제들이 더 마음에 들게 나왔다.
퇴근 후 과제를 하면서 그냥 이만큼 하고 낼까... 하다가도 욕심이 나서 좀 더 하다 보면 매일 새벽에 자곤 했다. 자바스크립트를 쓰지 않아서 동작하는 건 없지만 완성된 것들을 모아보니 뿌듯하다.
강사인 콜라스에게 직접 질문할 수 있는 페이지도 있지만, 챌린지 참가자들이 모인 슬랙이 많은 도움이 되었다. 다양한 나이와 경력의 사람들이 많이 모여있어서 질문을 하면 거의 실시간으로 답변을 받을 수 있다. 막히는 지점이 다들 비슷하니 밤에 과제 시작하면 낮에 먼저 과제한 사람들의 질답이 이미 모여있더라.
3. React 2주 챌린지
3.1. 강좌명: 초보를 위한 React JS
챌린지 대상 강의는 React 중급이고 초급용 무료 강의가 별도로 있다. 챌린지 성공 시 유료 강의 30% 할인 쿠폰을 받는다. 이 강의에서는 팝콘 타임이라는 영화 사이트를 클론 코딩한다. 멤버십 강의여서 버전이 업데이트되면 강의도 업데이트해준다고 한다.
- S6
- React
- React Hooks
- Axios
- Ajax
- Styled Component
- Typescript
3.2. 챌린지 후기(2019년 12월)
가장 힘들었던 챌린지였다. HTML, CSS, 자바스크립트 다루는데 불편함이 없는 상태에서 참여해야 학습에 효율적일 것 같다. 퇴근하고 밤에 과제를 하다 보니 2주간은 하루에 잠을 3~4시간 정도밖에 못 잤다.
챌린지는 성공했지만 한꺼번에 너무 많은 걸 배워서 머릿속에 정리가 잘 안 되어 있다. 복습, 정리를 하려 했으나 실제 쓸 일이 없고 시간이 좀 지나니 흐지부지 되었다.
최종 과제는 netlify를 통해 배포했는데, GitHub push 하기만 해도 배포가 되는 것에 매우 감탄했다. 너무 간단해서 배포 과정에 대해 배운 것이 없을 정도다. ㅋㅋㅋ
4. 자바스크립트 풀 스택 6주 챌린지
4.1. 강좌명: [풀 스택] 유튜브 클론 코딩
노마드아카데미의 유튜브를 클론 코딩하는 6주 챌린지가 끝났다. 바닐라 자바스크립트로 풀 스택 개발을 하기 위한 최소한의 기술, 도구를 훑어본 좋은 경험이었다.
6주간 유튜브를 클론 코딩하는 과정이다. 동영상 녹화, 재생, 업로드, 검색 기능을 중심으로 로그인, 프로필 등의 사용자 관리와 댓글 기능을 구현한다. 서버와 클라이언트를 모두 구현하며 heroku를 통해 배포까지 해본다. 챌린지에 성공하면 유료 강의 30% 할인 쿠폰을 받는다.
- ES6
- Node.js
- Express.js
- pug
- Passport.js
- AJAX
- Babel
- Webpack
- SCSS
- MongoDB
- MongoDB Atlas
- Mongoose
- AWS S3
- Heroku
4.2. 챌린지 후기(2020년 4월)
좋은 라이브러리가 많아 사용법만 익혀서 적용해도 그럴싸한 웹사이트를 만들 수 있었다. 혼자서 서버, 클라이언트 모두를 구현해 보는 뿌듯함이 크다.
비디오 플레이어에 꽤 공을 들였다. YouTube, Vimeo를 참고해 컨트롤 형태, 보이고 감추는 시점, 키보드를 통한 동작 등에 신경을 썼다.
특히 스페이스 바 같은 경우 화면에 영상이 있으면 재생 / 일시정지를 의도하고 누르는데 스크롤이 되어 버려서 불편했던 경험이 있기 때문에 사용자가 기대한 대로 동작하도록 신경 썼다.
이게 단순히 스페이스바를 무조건 재생 / 일시정지 기능으로 실행하면 안 되는데, 검색 창에 검색어를 입력하거나 댓글 창에 댓글을 입력하는 동안 스페이스 바를 누르는 건 공백 입력을 의도하기 때문이다.
깃허브 로그인, 네아로(네이버 아이디 로그인)를 소셜 로그인으로 적용했다. Passport.js를 사용하니 기존에 소셜 로그인을 사용하면서 짐작했던 작동 방식 그대로 간단히 코드로 표현되었다. Passport.js만이 아니라 필요한 기능이 있으면 부품 꺼내듯이 npm install 해서 작업을 진행했는데 레고 조립하는 느낌이었다.
또한 pug→HTML, SCSS→CSS, 바벨→최신 자바스크립트처럼 기존 시스템을 위에 새로운 언어와 컴파일러를 만들어 사용하는 것이 인상적이었다. 컴파일러 = 고급언어→기계어로 한정해 생각하고 있어서 그랬던 것 같다.
자바스크립트로 서버, 클라이언트 개발 및 배포까지 풀 스택을 경험해 봤다. 리액트처럼 계속 사용하지 않으면 잊어버리겠지만 계속 새로운 기술, 언어를 배워보는 것만으로도 의미가 있는 듯하다.
5. Dart 시작하기
5.1 강의 후기(2023년 1월)
'Flutter 로 웹툰 앱 만들기' 강좌의 선행 강의로 수강했다. 여러 언어를 다뤄봤다면 바로 Flutter 강의를 들어도 될 듯하다. 중간중간 Dart 만의 새로운 문법은 찾아보는 식으로... 그래도 강의가 필요한 만큼만 설명해서 길지 않고 2배속으로 보면 1시간 정도에 볼 수 있으므로 문서 읽기 귀찮으면 보는 것도 좋겠다.