2020-2021 프론트엔드 관련 책, 강의 회고록

책

나는 인터넷 동영상 강의보다는 책을 선호하는 편이다. 이유는... 가만히 화면을 보고 있으면 졸립고 (실습을 하더라도 이상하게 졸림) 강의 해주시는 선생님의 스타일에 따라 흥미가 롤러코스터를 타기 때문이다. 목소리가 너무 안정적이시면 무조건!! 잠이 온다. 그러나, 책은 내가 눈으로 읽어야 하고 중요한 부분을 체크하면서 기록하기도 쉽고... 그래서 잠이 덜 온다.

무료 강의를 몇 번 봤는데 실패한 경험이 있는 사람들은 책을 사서 공부하는 것을 추천한다. (e-book을 구매하는 것도 한 가지 방법!)

1. Try! helloworld 자바스크립트 (김용록, 길벗 출판사) ⭐️⭐️⭐️⭐️
   
   하루 15분 누구나 프로그래밍을 할 수 있다! 라고는 하지만...
   아예 비전공자가 처음부터 이 책으로 시작하기에는 조금 무리가 있을 것 같다.
   그러나, 핵심만 짚어주는 짧은 예제와 계속되는 실습으로 JS 기초를 단단히 하기엔 아주 좋은 구성이다.
   전체적으로 내용이 가벼워서 이미 다른 프로그래밍 언어를 알고 있는데, JS를 배워볼까~ 하는 사람에게 추천.
   동영상 강의도 프로그래머스에 있다고 하는데 보지 않았다. 책 속의 설명이 너무 깔끔해서 굳이 동영상 강의를 볼 필요가 없었다.
   하루에 2-4챕터씩 보면 일주일 정도면 끝난다.

2. Do it! 웹 사이트 따라 만들기 (김윤미, 이지스퍼블리싱) ⭐️⭐️⭐️⭐️⭐️
   
   웹 퍼블리셔 쪽 개발자를 꿈꾸는 사람들이라면 너무 너무 도움이 될만한 책이다. (이 책의 기술 스택은 HTML, CSS, JQuery이다.)
   HTML, CSS의 경우 어떻게 작성해야 "좋은" 코드일까? 라는 고민이 항상 있었는데... (나 같은 경우, 다른 객체지향, 함수형 언어들과는 너무 달라서 지금까지 배워온 좋은 코드의 기준이 사실상 통하지 않아 고민이었다.) 그런 고민을 마구마구 뿌셔준다. 정말 실무에 가까운 팁과 프론트엔드에게 꼭 필요한 지식, 그리고 깔끔한 코드를 참고해서 "좋은" 코드를 향한 방향성을 잡을 수 있었다.
   좋은 웹 사이트, 좋은 웹 퍼블리셔란 무엇인지 끊임없이 알려주고 어떤 웹 개발자 되어야 하는지 자세까지 알려주는 친절하고 따스한 책.
   내용이 꽤 많아서 (HTML, CSS 특성상 코드도 굉장히 길다...) 완독하는 건 꽤 시간이 걸렸다. 팁까지 열심히 보고 공부하려니 더 걸렸다......
   개정판(2020년 출간)이긴 하지만 초판(2019년 출간)이 3년 전이기 때문에 클론코딩으로 완성되는 사이트의 디자인이 좀 올드한 게 유일한 단점이다. 그러나, HTML/CSS 개발 지식을 배우는 데에는 아주 좋다!
   이 책을 완독하면서, 책 속의 실무 꿀팁이나 개발 지식을 나의 깃헙 레포에 정리해놓았다. 책을 구매하기 전에 참고하시길. 참고용 레포 링크

3. Do it! 클론 코딩 영화 평점 웹 서비스 (노마드 코더, 이지스퍼블리싱) ⭐️⭐️⭐️
   
   리액트를 처음 접하기에 나쁘지 않은 클론 코딩 책. 그러나, HTML/CSS/JS를 어느 정도 알고 있어야 한다.
   클론 코딩을 통해서 하나의 번듯한 결과물이 나오는 점, JSON 데이터를 이용해볼 수 있다는 점, async/await 개념을 배울 수 있다는 점은 장점이지만... 완성된 페이지의 깊이감과 디테일하지 않은 개념 설명들이 아쉬웠다. 리액트는 어떤 걸까~ 막연하게 생각하던 사람들에게 가볍게 익혀볼 만한 입문서로 추천. (Hooks 같은 요소는 없고 클래스형 컴포넌트로 제작하는 게 조금 마이너스...... 😢)
   3일 정도면 완독할 수 있다.

4. 리액트를 다루는 기술 (김민준, 길벗 출판사) ⭐️⭐️⭐️⭐️⭐️
   
   말이 필요 없는 리액트 입문-중급-고급-어쩌고-마제스틱-판타스틱서. 리액트를 제대로 배우고자 한다면 이 책을 무조건 추천한다. 법전 못지 않게 두꺼운 책이지만 내용이 알차고 설명이 쉬워서 읽기 좋다. 우선 번역본이 아니라는 것부터가 너무 큰 장점... 리액트 문법과 바닐라 JS를 비교해주는 구성으로 되어 있는 게 너무 너무 좋다. (잘 모르는 독자를 위해 ES6 문법 소개도 함께 해준다.) 그냥... 사야 한다. 사서 정독해야 한다. 아직 읽는 중이라 완독에 얼마나 걸리는지는 추후 추가하도록 하겠다. 그러나, 책의 난이도가 좀 있는 편이라 아는 언어가 좀 있어서 새로운 언어를 빨리 흡수할 수 있는 사람이나, JS 중급 정도는 할 수 있는 사람이 봐야 좋을 듯 하다.

강의

전술했다시피 강의보다 책을 선호해서... 강의는 몇 개 없다... 🥲 2020년에는 멋쟁이사자처럼 활동을 했었는데, 멋쟁이사자처럼에서 제공해주는 동영상 강의를 제일 많이 봤다... 그래도 개인적으로 프론트엔드 관련 강의는 구름 EDU가 많은 것 같다고 느꼈다.

1. 제주코딩베이스캠프 Code Festival: JavaScript 100제 (인프런) ⭐️⭐️⭐️⭐️
   
   초급(30)-중급(50)-고급(20)으로 이루어져 있는 100제를 풀어가면서 알고리즘 테스트에 강해질 수 있다. 50번 이후로 갑자기 난이도가 뛴다. (그전까지는 자료구조에 대한 기본적 지식이 없어도 되는 문제들인데, 이후에는 기본적 지식이 있어야만 쉽게 풀 수 있다. 그런데, 강의에서 자료구조에 대해 자세히 설명해주진 않는다.) 강의 속 문제 풀이가 막 명쾌하진 않지만 푸는 방식, 문제를 푸는 절차 위주로 설명해줘 방향을 잡기에 좋다. notion/PDF 파일로 제공되는 문제들의 퀄리티나 구성이 나쁘지 않아 들을 가치가 있다.

2. 스파르타 코딩 클럽 신년운세 패키지 ⭐️
   
   긁적........ (강의를 너무 안 봐서 끼워넣어봤는데... 그냥 캐릭터 디자인만 얻은 정도의 강의였다... 배포까지 가르쳐준다고 해서 혹했는데 그냥... 자체 시스템에서 주는 주소로 배포되는 거였다.) 배포된 결과물이 궁금하다면 바로가기.

3. 생활코딩 시리즈 (WEB1:HTML & Internet, WEB2:PHP) (구름 EDU) ⭐️⭐️⭐️
   
   (사실 2020년에 안 보고 2018년에 봤다... ㅎㅎ) HTML 복기용으로 가볍게 봤던 WEB1 강의와 PHP는 뭘까? 싶은 궁금증에 봤던 WEB2 강의. 정말 기초 중의 기초로 유명한 생활 코딩답게 흥미 위주로 개념을 설명해준다. 전공자가 아니거나 웹 프론트엔드를 배워본 적이 없는 사람에게 아~주 가볍게 볼 강의로 추천.

마무리

책에 비해 강의가 아주 빈약... ^^ 한 느낌이지만 어쨌든 아직도 갈 길이 멀다는 건 알겠다. 사실 2020년 상-중반기는 대외활동에서 배운 게 훨씬 많았고, 하반기는 왼쪽 손목에 건초염이 생겨 많이 공부를 못했다...

앞으로는 UX/UI, 디자인 관련 책과 Vue.js 책을 찾아볼까 한다. 강의는 들으려고 찾아놓은 게 많은데 잘 들을 수 있을지는... 이 글의 목적은 정보글이므로 지금 들으려고 찾아놓은 강의 목록으로 마무리하겠다.

무료 강의

구름 EDU
웹 게임을 만들며 배우는 React(리액트) 
프레임워크를 위한 JavaScript ES6 
실전! 웹사이트 제작 Step by Step - ‘돕다’ 웹사이트 Basic
실전! 웹사이트 제작 Step by Step - ‘한국소비자원’ 웹사이트 Basic
[웹퍼블리싱 실습] 반응형 사이트 만들기
생활코딩 - 네트워크 개념 잡기 (도메인, 네임서버, HTTPS)

인프런
생활코딩 - React class vs function style coding
스케치 뚝딱 끝내기! 입문자용 무료 강좌

유료 강의

인프런
인터랙티브 웹 개발 제대로 시작하기
몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
프론트엔드 개발자를 위한, 웹 성능 최적화 꿀팁키트(feat. React) - Part. 1