프론트엔드 독학 스터디 계획 (by. 식초)

<프론트엔드 공부할 언어>
-기초: HTML, CSS, JavaScript, Git/Github
-기본: React(JS기반 프레임워크)
-심화: SCSS, BootStrap,TypeScript, Webpack (필요할 때 함께 공부하기, 어쩌면 취업 후 개인공부)

 

<프론트엔드 취업 방법>
1.개인 프로젝트 2-3개를 한다. 깃허브에 올린다.
2.코딩테스트를 준비한다.(JavaScript, Python 등의 언어로)
3.컴퓨터 공학 기초는 공부한다. (면접 때, 프로그래밍 할 때 전반에 필요)

 

-스타트업은 1의 비중(실무)이 높다. 그러나 2(코테)도 한다.
-대기업은 2의 비중(코테)가 높다. 그래도 1(실무)도 해야한다. 
-연봉은 스타트업, 대기업 모두 중상이니 가리지 말고 1과 2를 모두 한다.
-1,2,3을 모두 해야 취업이 가능하다. 중요도는 1>=2>3
-1을 해야 이력서를 넣을 수 있다. 2를 해야 면접을 볼 수 있다.

-프로젝트를 만들기 위해서 기초, 기본 언어는 공부해야한다.
-언어를 배우는 목표는 프로젝트를 만들기 위해서 이다. 
-공부를 하면서 나중에 자신이 만들 프로젝트에 쓰일 기능일지 미리 생각해야 한다.
-공부를 하는 동시에 프로젝트 구상을 하면서 채워나간다.

-부트캠프 학원에서는 깃허브를 초반에 알려준다. 배운내용을 깃허브에 올려서 기록으로 남긴다.
-취업할 때 깃허브에 잔디(코드 저장하면 초록색 됨)가 하루도 빠짐없이 심어져있으면 유리하다.
-1(프로젝트)가 2-3개 완성되고 2(코테)가 어느정도 준비됬다면 신입,경력 가리지 않고 올라온 공고에 모두 지원한다.

 

 

<공부 계획>

A. 클론코딩을 통한 실습
-장점: 재미있다. 결과물이 나온다. 기억에 잘 남는다. 프로젝트 만들 때 도움이 된다.
-단점: 체계가 잡히지 않는다. 모르는 부분이 나와도 넘겨야 한다.
-예시: 엘리의 드림코딩(유튜브 클론, 쇼핑몰 미니게임 클론), 노마드 코더(영화 웹서비스 클론)

B. 이론/기본기 공부
-장점: 체계가 잡힌다. 기본기를 탄탄하게 쌓을 수 있다. 왕초보 대상이라 친절하다.
-단점: 지루할수도 있다. 실제로 웹 구현 때 어떻게 쓰이는지 막연하다.
-예시: Do it! HTML5 + CSS3 웹 표준의 정석, Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편, Do it! 프런트엔드 웹 디자인 입문
엘리의 드림코딩(프론트엔드 강의, 자바스크립트 기초강의 재생목록)

((공부 자료 분석))
A-1. 유튜브 클론(엘리의 드림코딩)
-가격: 무료
-형식: 영상
-언어: HTML,CSS
-난이도: 중. 드림코딩 프론트엔드 강의 선수강 필요.

A-2. 쇼핑몰 미니게임 클론(엘리의 드림코딩)
-가격: 무료
-형식: 영상
-언어: HTML,CSS,JS
-난이도: 중. 드림코딩 프론트엔드 강의, 자바스크립트 기초강의 선수강 필요.

A-3. 영화 웹서비스 클론(노마드 코더),Do it! 클론 코딩 영화 평점 웹서비스
-가격: 14,400원
-형식: 책, 영상 
-언어: HTML,CSS,JS, React
-난이도: 중. HTML,CSS,JS 기초는 알고 있어야 함. 책이 친절하고 재밌음.

B-1. Do it! HTML5 + CSS3 웹 표준의 정석(전면 개정 2판)
-가격: 22,500원
-형식: 책, 영상 
-언어: HTML,CSS
-난이도: 중하. 왕초보를 위한 친절한 내용, 30일 계획표, 개념정리와 실습예제, 이 한 권에 HTML, CSS 정리 가능, 베스트셀러, 자세해서 양이 많은데 쉬움.

B-2. Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편
-가격: 16,920원
-형식: 책, 영상 
-언어: JS
-난이도: 중하. 왕초보를 위한 친절한 내용, 20일 계획표, 개념정리와 실습예제, ES5 문법. (ES6은 아주 조금 나옴)

B-3. Do it! 프런트엔드 웹 디자인 입문
-가격: 19,800원
-형식: 책, 영상 
-언어: HTML,CSS
-난이도: 중. 왕초보를 위한 친절한 내용, 개념정리와 실습예제, 웹디자인 실무 필수 기술, 프로젝트를 만들 때 참고하기 유용하다. 

B-4. 프론트엔드 강의 재생목록(엘리의 드림코딩)
-가격: 무료
-형식: 영상 
-언어: HTML,CSS
-난이도: 중. 친절한 강의, 스피드&컴팩트한 개념정리와 실습예제, 프론트 개발자에 대한 마인드셋.

B-5. 자바스크립트 기초강의 재생목록 (엘리의 드림코딩)
-가격: 무료
-형식: 영상 
-언어: JS
-난이도: 중. 친절한 강의, 트랜디한 개념정리와 실습예제, ES6 문법을 배울 수 있음. 실무적 문법.

 

((독학 공부 방법))

-클론코딩 : 기본기공부 = 2:3으로 한다. 순서는 번갈아가면서. 흥미를 잃지 않게 한다. 실무적 느낌을 느끼면서 공부한다.

 

-순서

0) 깃허브 이용 배우기 -- 1할 때 병행 해도 됨 (생활코딩 깃허브, 유튜브 등 무료강의 추천-)

 

1) B-4. 프론트엔드 강의 재생목록(엘리의 드림코딩)  또는  B-1. Do it! HTML5 + CSS3 웹 표준의 정석(전면 개정 2판)

2) A-1. 유튜브 클론(엘리의 드림코딩) 

3) B-5. 자바스크립트 기초강의 재생목록 (엘리의 드림코딩)

4) A-2. 쇼핑몰 미니게임 클론(엘리의 드림코딩) 

복습) 익숙해질 때까지 반복 수강하기

 

4.5) B. 생활코딩 리액트 : 무료!

5) A-3. 영화 웹서비스 클론(노마드 코더),Do it! 클론 코딩 영화 평점 웹서비스

6) B. 웹게임을 만들며 배우는 리액트 (제로초 - 인프런) 무료!

6.5) A. 따라하며 배우는 노드, 리액트 시리즈 - 기본편, 채팅편, 유튜브편 등 (John Ahn - 인프런) 무료!

복습) 익숙해질 때까지 반복 수강하기

 

7) B-3. Do it! 프런트엔드 웹 디자인 입문 [선택 사항]  

7.5) A. 자신이 자주 가는 사이트 / pinterest / dribble 에서 디자인 공부하기 

 

7.5) 필요한 유료 강의(인프런, 프로그래머스, 그룸에듀, 유다시티, 노마드 코더 등)

 

8) 개인 프로젝트 만들기 --1~7 중간에 해도 됨

 

9) 코테 공부

  -순서 : JavaScript, Python 중 택1 >> 기본문법 (유튜브 or 유료강의) >> 코드업 기출 100 >> BOJ 그리디/탐색 유형 문제풀이 >> 특정 기업 대상 기출 문제 풀이

  -코드업, BOJ, 프로그래머스 (무료 코테 사이트)

 

10) 컴퓨터 공학 공부

 

11) 면접 준비

 

12) 합격