FE 개발자 준비과정(강의/서적)편

2021년 10월부터 JS/React를 공부하기 시작했다. 그 시점부터 지금까지 공부했을 때 도움이 된 강의/서적에 대한 리뷰 및 기록이다. 

[강의]

1. 자바스크립트 기초 강의 (ES5+)                                    ⭐️⭐️⭐️⭐️
2. 쇼핑몰 미니게임 클론 코딩 & 코드 리뷰                          ⭐️⭐️⭐️
3. 지구에서 제일 쉽게 설명한 자료구조와 알고리즘             ⭐️
4. 포트폴리오 웹사이트 클론 코딩                                     ⭐️⭐️⭐️⭐️
5. 프론트엔드 필수 브라우저 101                                      ⭐️⭐️⭐️⭐️
6. Git 마스터 과정 (기본개념부터 실무팁까지)                    ⭐️⭐️⭐️⭐️
7. 리액트 기본 강의 && 실전 프로젝트 3개                        ⭐️⭐️⭐️
8. 비전공자를 위한 개발자 취업 올인원 가이드 [통합편]       ⭐️⭐️⭐️
9. 제주코딩베이스캠프 Code Festival: JavaScript 100제    ⭐️⭐️⭐️

[서적]

1. 비전공자를 위한 이해할 수 있는 IT 지식      ⭐️⭐️⭐️⭐️
2. 하루 3분 네트워크 교실                             ⭐️⭐️⭐️
3. 알고리즘도감                                           ⭐️⭐️
4. 커리어스킬                                              ⭐️⭐️⭐️
5. 코어자바스크립트                                     ⭐️⭐️⭐️⭐️⭐️
6. 리액트를 다루는 기술                                ⭐️⭐️⭐️
7. Do it! HTML5+CSS3                               ⭐️⭐️⭐️

처음 드림코딩 엘리의 강의를 추천받았을 때 우선 유튜브에 무료로 제공되어 있는 '자바스크립트 기초강의'를 수강했다. 설명이 쉽게 잘되어있었고, 이후 드림 코딩 사이트에서 무료로 제공하는 '쇼핑몰 미니게임 클론코딩 & 코드 리뷰'를 공부했을 때 친절한 강의라는 생각이 들었다. 혼자 공부하면서 받는 어려움을 해결할 때 드림 코딩에서 제공하는 slack채널로 수강자들끼리 도움을 받을 수 있고, 강의마다 Q&A가 잘 운영되고 있다. 공부하면서 영어를 읽기 싫어서 공식 사이트에서 찾아보기보단 블로그에 올라온 글을 통해 문제를 해결하려는 편이었는데, 엘리님이 mdn공식문서를 직접 읽어주고 습관이 들게끔 계속 학습시켜주는 게 인상 깊어서 이후에는 드림 코딩에서 제공하는 FE로드맵대로 강의를 들었다. 자바스크립트, 자바스크립트가 동작하는 환경인 브라우저에 대한 지식, 리액트에 대한 프로젝트를 만들어 익힐 때 유용한 강의이다. 다만, 개념설명이 부족하다. 개념에 관한것들은 자바스크립트의 경우는 '코어 자바스크립트', 리액트는 '리액트를 다루는 기술'로 공부하며 개념을 더 공부했다. 코어 자바스크립트는 정말 강추하는 서적이다. 리액트의 기술발전이 빨라서 그런지 리액트를 다루는 기술서적의 설명은 주로 react16.8 이전 버전에 맞춰져 있는 느낌이라. 기술면접 때 훅에 대한 질문이 들어왔을 때 머릿속으로 클래스형 컴포넌트를 함수형 컴포넌트로 변환 후 생각해야 해서 좀 어려웠다. 개념에 대한 설명이 부족하다고 생각한다. 

취업준비를 하면서  비전공자를 위한 개발자 취업 올인원 가이드 [통합편] 강의가 참 도움되었다. 강의 자체도 세분화되어 많은 내용을 다뤄주고 정말 비전공자가 겪는 어려움, 회사를 선택하는 방법 등이 자세하다. 면접을 대비하기 좋은 링크, 서적, 강의들을 추전 해주는데 이 강의를 들으면서 내가 FE정보를 얻는 파이가 커졌다. 

비전공자이기에 CS관련 지식이 부족했고 이를 보완하기 위해 CS공부순서를 자료구조-> 알고리즘-> 운영체제-> 컴퓨터 구조로 잡고 '지구에서 제일 쉽게 설명한 자료구조와 알고리즘강의'를 수강하면서 공부했는데 강의가 파이썬으로 진행되는지 모르고 수강했던 터라 강의에서 배운 내용을 다시 자바스크립트로 코드를 짜면서 공부해서 중간중간 이해가 가질 않았다. 그리고 무척이나 졸리다. 부족한 알고리즘 내용은 알고리즘 도감 서적을 통해 공부했는데 그림으로 쉽게 이해하기 잘 되어있지만, 코드로 구현해놓은 부분이 없는 것이 아쉽다.  

엘리의 강의를 듣고 포토폴리오와 프로젝트를 완성도를 높였고, 개발자 취업 올인원 가이드 [통합편] 강의를 들으면서 취업하기 위한 방법들 전략들을 알게 되었다. 서적을 통해 개념을 쌓았는 데 코테의 벽이 있었다. 하루에 두 개씩 프로그래머스에서 코테를 풀려고 노렸지만 못 푸는 문제가 대부분이었고, 대부분의 회사에서도 코테에서 탈락했다. 이때 제주 코딩 베이스캠프 Code Festival: JavaScript 100제 강의를 수강했다. 처음엔 너무 쉬운 문제라서 도움이 안 되는가 싶었는데 뒤로 갈수록 아리 토스 텔레서의 체, 골드바흐 파티션 등 어려운 내용을 다뤄줬고 내 생각엔 코딩 테스트를 보는 실력도 조금 늘지 않았나 싶다. 

 

간략하게 정리하면 

[강의]

자바스크립트 기초 강의 (ES5+)                                    ⭐️⭐️⭐️⭐️

• 장점 : 무료로 자바스크립트 기초를 다질수있다. 
• 단점 : 처음 자바스크립트를 접해본다면 조금 어렵다. 

쇼핑몰 미니게임 클론 코딩 & 코드 리뷰                          ⭐️⭐️⭐️

• 장점 : 바닐라 자바스크립트를 통해 간단한 프로젝트를 완성할수있다.
• 단점 : 무료강의인 만큼 내용이 깊지않다. 

지구에서 제일 쉽게 설명한 자료구조와 알고리즘             ⭐️

• 단점 : 강의자체가 너무 졸리고, js가 아닌 파이썬으로 되어있어 나한테는 별 도움이 되지 않았다. 

포트폴리오 웹사이트 클론 코딩                                     ⭐️⭐️⭐️⭐️

• 장점 : 포토폴리오를 어떻게 만들어야할지 모르는 사람들이 틀을 잡을수있고, 바닐라자바스크립트를 통해 만들수있다. 

프론트엔드 필수 브라우저 101                                      ⭐️⭐️⭐️⭐️

• 장점 : 자바스크립트가 동작하는 브라우저에 대한 설명을 이해하기 쉽게알려준다. 두가지의 프로젝트를 완성할수 있다.
• 단점 : deep하게 브라우저에 대해 알수 없다. 자바스크립트 개념에 대한 이해가 어느정도 필요하다. 

Git 마스터 과정 (기본개념부터 실무팁까지)                    ⭐️⭐️⭐️⭐️

• 장점 : 이 강의하나로 git을 마스터 할수있다. 예제가 다양하고 checkpick등 아예 몰랐던 개념들에 대한 설명과 예시로 익히기 쉽다. 

리액트 기본 강의 && 실전 프로젝트 3개                        ⭐️⭐️⭐️

• 장점 : 리액트에 익숙해질수있다. 프로젝트 3개를 완성 할 수있다.
• 단점 : 개념설명이 부족해서 추가적으로 개념에 대해 학습을 하고 따라와야 강의의 내용을 이해 할 수있다.

비전공자를 위한 개발자 취업 올인원 가이드 [통합편]       ⭐️⭐️⭐️

• 장점 : 실제 비전공자였던 개발자가 취업과정중에 겪었던 어려움, 이를 해소하는 방법, Tip등이 다양하다. 

제주코딩베이스캠프 Code Festival: JavaScript 100제    ⭐️⭐️⭐️

• 장점 : 강의를 끝까지 듣다보면 프로그래머스 난이도1정도의 문제들은 쉽게 풀수있게 도움된다. 
• 단점 : 처음 강의들이 너무 쉽다. 100제를 맞추려고 너무 비슷한 문제들을 끼워넣은 느낌이 든다. 

 

[서적]

비전공자를 위한 이해할 수 있는 IT 지식     ⭐️⭐️⭐️⭐️

• 어려운 IT개념을 비전공자도 이해하기 쉽게 쓰여있다.  블로그에 적어놓은 후기

하루 3분 네트워크 교실                            ⭐️⭐️⭐️

• 교수와 학생이 질문하는 형식으로 쉽게 쓰여있고, 한 챕터가 짧고 항상 요약이 되어있어 정리하기 좋다. 

알고리즘도감                                           ⭐️⭐️

• 그림으로 알고리즘을 쉽게 설명해서 이해하기 쉽다. 다만 코드도 있었다면 더 좋았을 것같다.

커리어스킬                                             ⭐️⭐️⭐️

• 개발자커리어를 어떻게 시작해야하는지 내가모르는 구글의 면접은 어떻게 진행되는지 등등 신입개발자부터 고급개발자까지 읽어봤을때 유용한 책이다. 

코어자바스크립트                                   ⭐️⭐️⭐️⭐️⭐️

• 자바스크립트에 대해 좀더 deep하게 공부하고 싶거나, 기술면접대비가 필요할때 읽어보면 아주 자세하고 쉽게 쓰여져있는 책이다.  

리액트를 다루는 기술                              ⭐️⭐️⭐️

• 리액트의 기술발전이 빠른만큼 책의 속도가 따라잡지 못하는 느낌이있다. 하지만 예제와 프로젝트가 중간중간많고 ES6+문법에 대해 설명도 있어서 리액트를 배우기에 유용한 책인 것은 확실하다.  

Do it! HTML5+CSS3                             ⭐️⭐️⭐️

• 책 앞에 계획표도 있어서 참고해서 빠르게 훑기에 좋은책이다. 지금 신버전의 책은 어떤지 모르겠지만, 내가 가지고 있던 건 구버전의 책이라 그런지 예전의 기술이 적혀있다. HTML, CSS를 공부하기엔 유용하다. 

 

자바스크립트 기초 강의 (ES5+): 같이 노트를 작성하며 배워요 📒

쇼핑몰 미니게임 클론코딩 & 코드 리뷰

지구에서 제일 쉽게 설명한 자료구조와 알고리즘 - 인프런 | 강의

포트폴리오 반응형 사이트 클론코딩

프론트엔드를 위한 자바스크립트 강의

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)

비전공자를 위한 개발자 취업 올인원 가이드 [통합편] - 인프런 | 강의

제주코딩베이스캠프 Code Festival: JavaScript 100제 - 인프런 | 강의

[11번가] 비전공자를 위한 이해할 수 있는 IT 지식 /IT시대의 필수 교양서

하루 3분 네트워크 교실 - 교보문고

알고리즘 도감 - YES24

커리어 스킬 - YES24

코어 자바스크립트:핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍

리액트를 다루는 기술:입문부터 대규모 애플리케이션까지 한 권으로

[이지스퍼블리싱] Do it HTML5+CSS3 웹 표준의 정석 [2판 ] - 인터파크