/fe-roadmap

홀로 공부하는 프론트엔드 입문자를 위한 로드맵입니다.

홀로 공부하는 프론트엔드 입문자를 위한 로드맵

들어가기 전에

해당 로드맵은 여러 책&아티클과 강의를 포함합니다. 난이도에 따라 1~5단계로 나뉘어지고 단계의 의미는 다음과 같습니다.

1️⃣ : 입문(Beginner)

2️⃣ : 초급 (Easy)

3️⃣ : 중급(Normal)

4️⃣ : 상급(Hard)

5️⃣ : 최상급(Very hard)

한번도 프로그래밍을 접하지 못했던 분들은, 1️⃣단계부터 시작하시면 됩니다.

튜토리얼

추천 도서

JAVASCRIPT

  • 난이도에 따라 추천 도서가 나뉩니다.

초급

1️⃣ ~ 2️⃣

중급

3️⃣ ~ 4️⃣

어려운 내용이 아닌, 가볍게 그림으로 표현한 HTTP & Network 서적

고급

3️⃣ ~ 5️⃣


ETC

3️⃣ ~ 5️⃣ 주로 프로그래밍 철학 그리고 코드, 설계에 관한 철학을 나타낸 책이 선정되어 있습니다. 꼭 어려운 내용이 아니더라도, 더 좋은 코드와 좋은 아키텍쳐에 대한 영감을 받을 수 있는 서적들 입니다.

익스트림 프로그래밍, 애자일 방법론의 창시자 론 제프리스가 지은 책. CTO의 가이드라고 불릴 정도로 소프트웨어 시스템을 개발하는 팀을 관리하는 방법에 대해서 깊은 고찰이 담긴 책이다. 애자일 방법론을 제대로 배우고 싶다면 꼭 읽어봐야 하는 책.


함수형 프로그래밍


추천 사이트

공통

  • MDN(Mozilla Developer Network) : 웹 개발을 한다면 꼭 보게되는 사실상의 표준 문서(표준은 아님!)이다. 파이어폭스 브라우저를 개발한 모질라 재단에서 운영하고 있다. HTML, CSS, JavaScript, WebAPI 등 웹 기술 전반을 기초부터 심화까지 상세하게 다룬다. 웹 개발 초보자를 위한 MDN learning area 라는 섹션도 있으니 참고 할 것.

  • web.dev : Google Developers 에서 운영하는 웹 기술 전반에 대한 기술 문서이다. 웹 기술 학습을 위한 학습 경로 제공, 구글 개발자들이 작성한 양질의 기술 아티클을 제공하고 있다.

  • State of JavaScript : 전세계 자바스크립트 개발자들을 대상으로 한 설문조사 웹사이트. 어떤 라이브러리가 트렌드인지, 무슨 기술이 상승세인지, 아직 활발히 사용중인 스택이 무엇인지 명확하게 확인 가능하다. 새롭게 배울 라이브러리나 스택을 선정하는데 있어 큰 도움이 된다.

  • 생활코딩 : (:one: ~ :two:)비전공자의 아버지 Egoing님이 만든 일반인을 위한 컴퓨터 프로그래밍 교육 사이트. JS, CSS, HTML, 서버 및 Database 등 웹의 전반적인 구성과 개념을 초보자(비전공자)의 관점에서 자세히 쉽게 설명해준다. 여러 강의 섹션이 존재하고 기본적인 웹 기술과 더불어 알고리즘, 서버, Git, 머신러닝, 암호학 등의 분야도 함께 맛볼 수 있는 사이트이다.

JAVASCRIPT

  • HTML DOM : Vanilla JS 로 HTML DOM 다루기
  • Event Loop : Event Loop를 시각적으로 확인해 볼 수 있는 사이트

CSS

GIT

번들러

  • webpack.kr : 라인(LINE)의 프론트엔드 개발자들이 한국어로 번역하고 있는 웹팩 공식문서. 상당 부분 이미 번역된 상태이므로 읽기 불편함이 없다. 웹팩을 처음 사용하는 사람이라면 Guides를 통해 학습할 것

무료로 사용할 수 있는 이미지, 폰트 등 사이트

  • Unsplash : 무료 이미지 다운로드 가능
  • 눈누 : 무료 폰트 다운로드 가능
  • picsum : 랜덤 이미지 생성 URL. 800 -> 가로,600 -> 세로

디자인 패턴과 리팩토링 기법

  • 리팩토링 구루 : (:four: ~ :five:) 일명, 너구리 사이트. 글로 볼 땐 추상적으로 느껴지는 리팩토링 기법을 풍부한 그림 설명과 예제로 구체화하여 설명. 또한 디자인 패턴도 마찬가지이며, 타입스크립트 예제 코드를 제공한다는 큰 장점이 있음.

  • patterns.dev : (:four: ~ :five:) 디자인 패턴을 정리한 사이트이며 Gof의 디자인 패턴말고도 프론트엔드 전반에 사용되는 디자인패턴(Hooks, HoC, Tree Shaking 등)들도 잘 설명함.

  • patterns.dev.kr : 상기된 patterns.dev의 한국어 번역 페이지이다.

추천 아티클

TYPESCRIPT

  • 집합의 관점에서 타입스크립트 바라보기 : (:three: ~) 화해 기술블로그에서 발행한 집합 관점에서의 타입스크립트 아티클. 타입스크립트의 structual type system에 대해서 알아볼 수 있다. 많이들 헷갈려하는 intersection type과 union type에 대한 개념 또한 짚어준다.

  • 타입스크립트의 공변성과 반공변성 : (:three: ~) 원문의 번역 글이다. 서브 타이핑의 개념, 변성의 개념을 이해하기 좋게 간단히 알려준다. 번역도 매끄러운 편이다.

JAVASCRIPT

  • Event Loop : (:three:) 싱글스레드 프로그래밍 언어인 Javascript가 여러가지 작업을 어떻게 스케쥴링 하는지 그리고 제어권을 어떻게 관리하는지 쉽게 설명 해 주는 아티클이다. Call stack, Event Loop에 대한 자세한 설명과 레퍼런스인 JSconf EU에서 Philip Roberts라는 분이 이벤트 루프에 대해서 발표한 스피치 영상이 포함되어 있다.

  • Execution Context : (:three: ~ )실행 컨텍스트에 대한 자세한 설명이 나와있는 아티클.

WEB

  • 웹 폰트의 사용과 최적화의 최근 동향 : (:three: ~) 네이버 기술블로그에서 볼 수 있는 글이며, 웹폰트의 사용과 최근 동향 그리고 최적화 방법을 알 수 있다. 웹 개발시 폰트 적용하기 전에 한번 읽어보면 좋은 글.

  • 브라우저는 어떻게 동작하는가? : (:three: ~ :four:) 브라우저가 어떻게 동작하는지를 알 수 있는 글이며, 이스라엘 개발자 탈리 가르시엘(Tali Garsiel)이 html5rocks.com에 게시한 "How Browsers Work: Behind the scenes of modern web browsers"를 번역한 글.

탈리 가르시엘은 몇 년간 브라우저 내부와 관련된 공개 자료를 확인하고, C++ 코드 수백만 줄 분량의 WebKit이나 Gecko 같은 오픈소스 렌더링 엔진의 소스 코드를 직접 분석하면서 어떻게 브라우저가 동작하는지 파악했습니다.

교육 기관

기업 기술 블로그 모음

Youtube