프론트엔드 12주 스터디 커리큘럼

야매로 리액트하고 있는 나는, 프론트엔드가 꽤나 적성에 맞아서 프론트엔드 개발자로 커리어를 쌓아가고자 마음 먹었다. 하지만 html, css 1도 모르기 때문에 항상 한계를 느꼈었다. 어떻게 공부해야할지 막막해서 커리어리를 맨날 보다가, 이거다! 싶은 커리큘럼을 발견했다. 매주 공부하기 어려울 수 있지만 최대한 12주 안에 다 익혀보려고 노력할 예정! 블로그에도 열심히 기록을 남겨야 겠다. 

 

GitHub - GoRyangJu/curriculum

GitHub - GoRyangJu/curriculum

 

0주차

스터디 준비 단계

• CS50 수강
  • 국문 버전

1주차

• 추천 강의
  • 깃, 깃허브 제대로 배우기
  • 팀 개발을 위한 Git, GitHub 입문
• 참고 강의
  • Git / GitHub 안내서
  • 가장 쉬운 Git 강좌 - (상) 혼자작업편

2주차

• 추천 강의
  • 비전공자를 위한 HTML/CSS
    • 모든 태그와 속성을 외울 필요 없음.
• 참고 강의
  • 반응형 사이트 만들기 실습
    • HTML/CSS로 이루어진 반응형 웹사이트 만들기 강의 (무료)
  • HTML, CSS, and JavaScript: The Big Picture
    • 영어로 이루어진 강의(부분 무료인데 강의는 무료)
  • 이번에야말로 CSS Flex를 익혀보자
    • css flex에 대해 자세히 이해 가능 (무료)
  • 초보자를 위한 HTML 기초
    • HTML에 대해 깊게 이해하기 (유료)
  • Learn CSS!
    • CSS에 대해 자세히 공부하기 (무료)
    • 구글에서 만든 CSS학습 사이트
    • 영어 & 한국어 섞여있음
  • 100dayscss
    • CSS 챌린지
    • 학습 사이트 X
• 과제
  • https://goryangju.github.io/html-css/

3주차

• 추천 강의
  • 자바스크립트 기초 강의 (ES5+) - 드림코딩
• 참고 강의
  • 자바스크립트 기초 강좌 : 100분 완성 (무료)
    • 기초만 빠르게 훑기
  • 벨로퍼트와 함께하는 모던 자바스크립트 · GitBook (무료)
  • JustJavascript (유료, 영어)
    • React 팀의 개발자가 만든 강좌
    • 미량이 구매하고 아직도 안 본 강의
  • 모던자바스크립트 딥다이브 (무료)
    • 《모던 자바스크립트 딥다이브》 책 내용을 그대로 따라가는 스터디 영상
  • https://ko.javascript.info/ (무료)
    • 모던-javascript-튜토리얼-프로젝트

4주차

• 추천 강의
  • 자바스크립트 DOM & EVENT
• 참고 강의
  • HTML/JS/CSS로 나만의 MBTI 사이트 만들기 (무료)
  • 부담 없이 쉽고 편하게, 자바스크립트 기초 정리! (무료)
  • 코어자바스크립트 (유료, 책)
• 과제
  • https://goryangju.github.io/html-css-js/

5주차

• 추천 강의
  • Reactjs 강좌 - 코딩앙마 (무료, 한글)
  • React 완벽 가이드 - Udemy (유료, 영어 & 한글자막)
• 참고 강의
  • 벨로퍼트와 함께하는 모던 리액트 (무료, 블로그)
  • 러닝 리액트 (유료, 책)

6주차

• 추천 강의
  • 처음 만난 리액트(React) v2 Mini Project 부분
  • Complete Intro to React, v6 (영어, 유료)
    • 프론트엔드마스터즈
    • 넷플릭스 등 Big tech 기업 개발자의 프론트엔드 강의를 들을 수 있다.
    • 유료이나 github 학생 계정인 경우 6개월 무료 수강 가능
• 참고 강의
  • 생활코딩 - React 2022 개정판
  • 실전형 리액트 Hooks 10개 (영어, 한글자막, 무료)
• 과제
  • https://github.com/GoRyangJu/Basic-React

7주차

• 추천 강의
  • 타입스크립트 핸드북
    • 한 번에 이해하기 어렵습니다. 가볍게 보는 것을 추천드립니다.
  • TypeScript Course for Beginners 2021 - Learn TypeScript from Scratch! (영어, 무료)
    • 전 세계적으로 유명한 강의!
• 참고 강의
  • 타입스크립트 기초 연습
  • Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS
    • 영어, 한글자막, 유료
    • 할인하면 12,000까지 내려감
  • 코딩앙마 Typescript 강좌(무료, 한국어)
  • Typescript Handbook (공식, 한글)
  • 이펙티브 타입스크립트(책)

8주차

• 추천 강의
  • Redux Fundamentals (feat. React)
    • 프론트엔드마스터즈
    • 넷플릭스 등 Big tech 기업의 개발자의 프론트엔드 강의를 들을 수 있다.
    • 유료이나 github 학생 계정인 경우 6개월 무료 수강 가능
• 참고 강의
  • React Redux - 생활코딩

9~11주차

• 강의 X, 셀프 토이 프로젝트 진행

12주차

• 강의 X, Next.js로 나만의 블로그 만들기 핸즈온 세션 라이브로 진행