해당 로드맵은 여러 책&아티클과 강의를 포함합니다. 난이도에 따라 1~5단계로 나뉘어지고 단계의 의미는 다음과 같습니다.
1️⃣ : 입문(Beginner)
2️⃣ : 초급 (Easy)
3️⃣ : 중급(Normal)
4️⃣ : 상급(Hard)
5️⃣ : 최상급(Very hard)
한번도 프로그래밍을 접하지 못했던 분들은, 1️⃣단계부터 시작하시면 됩니다.
- 난이도에 따라 추천 도서가 나뉩니다.
1️⃣ ~ 2️⃣
3️⃣ ~ 4️⃣
- 모던 자바스크립트 Deep Dive
- You don't know javascript 시리즈
- 타입과 문법, 스코프와 클로저
- this와 객체 프로토타입, 비동기와 성능
- 웹에서 볼수있는 You don't know JS
JS의 특성에 대해 제대로 알아보고 싶을 때 읽어보면 좋다
- 이펙티브 타입스크립트
- 그림으로 배우는 HTTP & Network
어려운 내용이 아닌, 가볍게 그림으로 표현한 HTTP & Network 서적
3️⃣ ~ 5️⃣
3️⃣ ~ 5️⃣ 주로 프로그래밍 철학 그리고 코드, 설계에 관한 철학을 나타낸 책이 선정되어 있습니다. 꼭 어려운 내용이 아니더라도, 더 좋은 코드와 좋은 아키텍쳐에 대한 영감을 받을 수 있는 서적들 입니다.
-
The Nature of Software Development
익스트림 프로그래밍, 애자일 방법론의 창시자 론 제프리스가 지은 책. CTO의 가이드라고 불릴 정도로 소프트웨어 시스템을 개발하는 팀을 관리하는 방법에 대해서 깊은 고찰이 담긴 책이다. 애자일 방법론을 제대로 배우고 싶다면 꼭 읽어봐야 하는 책.
-
위 책은 번역본도 있지만, 영어 실력이 좀 된다면 영문판도 괜찮다.
-
디자인 패턴의 창시자들인 GoF(Gang of Four)가 지은 책 ( 5️⃣ )
-
객체지향의 사실과 오해 : (:four: ~ : five:) 어려울 수 있는 객체지향 패러다임의 주요 개념들을 협력, 책임, 역할의 관점에서 풍부한 예시를 통해 쉽게 설명하고 있다. 객체지향 프로그래밍에 대한 무의식적으로 알고 공감하는 지식(묵시지)을 좀 더 의식적이고 구체적인 지식(명시지)로 끌어올리는 데 탁월함을 보이는 책이다.
- 이펙티브 타입스크립트 : 내용 추가 요망
-
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, 머신러닝, 암호학 등의 분야도 함께 맛볼 수 있는 사이트이다.
-
roadmap.sh : 프론트엔드는 물론 개발의 수 많은 분야에 대한 로드맵들을 집대성한 사이트이다. 각 분야의 현재 경향을 반영한 방대한 로드맵을 제시한다. 너무 방대해서 숙련된 경력자도 모르는 내용이 많은 것이 보통이다. 그러니 초보자들은 방대한 양에 쫄지말고 필수적인 요소부터 차근차근 접근할 것. 또한 각 요소마다 추천 읽을거리, 볼거리를 풍부하게 제공하고 있어 공부하기 용이하다. 매우매우 추천하는 사이트
- HTML DOM : Vanilla JS 로 HTML DOM 다루기
- Event Loop : Event Loop를 시각적으로 확인해 볼 수 있는 사이트
- 타입스크립트로 작성한 디자인패턴들 : (:three: ~) 타입스크립트로 간단히 작성한 디자인패턴 코드를 볼 수 있다.
- CSS Flex Game : CSS Flex 입문할 때 추천하는 사이트
- CSS Grid Game : CSS Grid 입문할 때 추천하는 사이트
- CSS Selector Game : CSS Selector 연습할 때 추천하는 사이트
- Grid Calculator : CSS Grid width, gutter, columns, margin 계산기
- Reset CSS : 브라우저 기본 스타일을 초기화 하는 reset.css
- Loading : 로딩 컴포넌트 구현 사이트(파일 및 CSS 제공)
- Learn Git Branching : 깃의 기본 사용법을 실습하는 사이트
- Using Git : 깃의 기본 사용법을 정리해둔 사이트
- webpack.kr : 라인(LINE)의 프론트엔드 개발자들이 한국어로 번역하고 있는 웹팩 공식문서. 상당 부분 이미 번역된 상태이므로 읽기 불편함이 없다. 웹팩을 처음 사용하는 사람이라면 Guides를 통해 학습할 것
-
리팩토링 구루 : (:four: ~ :five:) 일명, 너구리 사이트. 글로 볼 땐 추상적으로 느껴지는 리팩토링 기법을 풍부한 그림 설명과 예제로 구체화하여 설명. 또한 디자인 패턴도 마찬가지이며, 타입스크립트 예제 코드를 제공한다는 큰 장점이 있음. 최근 한글화도 일부 진행돼어 더욱 쉽게 볼 수 있다!!
-
patterns.dev : (:four: ~ :five:) 디자인 패턴을 정리한 사이트이며 Gof의 디자인 패턴말고도 프론트엔드 전반에 사용되는 디자인패턴(Hooks, HoC, Tree Shaking 등)들도 잘 설명함.
-
patterns.dev.kr : 상기된 patterns.dev의 한국어 번역 페이지이다.
- 레스토랑에 비유해서 알아보는 운영체제 : (:two: ~ :three:) CPU, 프로세스, 스레드, 멀티태스킹, 시분할, 컨텍스트 스위칭 등 듣고 얼른 이해가 되지 않은 딱딱한 개념을 일상에 흔히 접할 수 있는 레스토랑의 운영방식과 비유해 쉽게 설명하고 있는 아티클이다.
- JAVASCRIPT FUNCTION COMPOSITION: WHAT’S THE BIG DEAL? - 자바스크립트 함수 합성, 뭐가 그렇게 대단할까? : (:two ~ :three) 자바스크립트 함수 합성을 별도의 배경지식없이도 쉽게 이해할 수 있도록 작성한 글. 함수형 프로그래밍을 위한 compose, flow, pipe의 개념을 소개하고 코드를 제시한다. 그리고 이해를 돕기위한 예제도 첨부되어있다. 한글 번역도 존재하지만, 오번역이 많으므로 읽기 추천하지는 않는다. (한글번역)
-
집합의 관점에서 타입스크립트 바라보기 : (:three: ~) 화해 기술블로그에서 발행한 집합 관점에서의 타입스크립트 아티클. 타입스크립트의 structual type system에 대해서 알아볼 수 있다. 많이들 헷갈려하는 intersection type과 union type에 대한 개념 또한 짚어준다.
-
타입스크립트의 공변성과 반공변성 : (:three: ~) 원문의 번역 글이다. 서브 타이핑의 개념, 변성의 개념을 이해하기 좋게 간단히 알려준다. 번역도 매끄러운 편이다.
-
Event Loop : (:three:) 싱글스레드 프로그래밍 언어인 Javascript가 여러가지 작업을 어떻게 스케쥴링 하는지 그리고 제어권을 어떻게 관리하는지 쉽게 설명 해 주는 아티클이다. Call stack, Event Loop에 대한 자세한 설명과 레퍼런스인 JSconf EU에서 Philip Roberts라는 분이 이벤트 루프에 대해서 발표한 스피치 영상이 포함되어 있다.
-
Execution Context : (:three: ~ )실행 컨텍스트에 대한 자세한 설명이 나와있는 아티클.
-
웹 폰트의 사용과 최적화의 최근 동향 : (:three: ~) 네이버 기술블로그에서 볼 수 있는 글이며, 웹폰트의 사용과 최근 동향 그리고 최적화 방법을 알 수 있다. 웹 개발시 폰트 적용하기 전에 한번 읽어보면 좋은 글.
-
브라우저는 어떻게 동작하는가? : (:three: ~ :four:) 브라우저가 어떻게 동작하는지를 알 수 있는 글이며, 이스라엘 개발자 탈리 가르시엘(Tali Garsiel)이 html5rocks.com에 게시한 "How Browsers Work: Behind the scenes of modern web browsers"를 번역한 글.
탈리 가르시엘은 몇 년간 브라우저 내부와 관련된 공개 자료를 확인하고, C++ 코드 수백만 줄 분량의 WebKit이나 Gecko 같은 오픈소스 렌더링 엔진의 소스 코드를 직접 분석하면서 어떻게 브라우저가 동작하는지 파악했습니다.
-
CORS는 왜 이렇게 우리를 힘들게 하는걸까? : (:two: ~ :three:) 대부분의 개발자들이 입문시 겪는다는 CORS(Cross-Origin Resource Sharing)을 다룬 아티클이다. CORS의 기본적인 내용(Origin이 무엇인지 등)과 CORS의 동작방식 (기본적인 Preflight Request와 Simple Request 개념 등), 그리고 실질적으로 CORS를 해결하는 방법(프록시 서버, 관련 헤더 세팅)을 풍부한 설명으로 이해하기 쉽게 다루고 있다.
-
우아한테크코스 오거니제이션 : (:two: ~ :five:) 우아한테크코스 선발 및 운영을 위한 레포지토리들을 모아둔 오거니제이션이다. 특정 프레임워크, 라이브러리에 의존하는 것이 아닌 언어중립적인 개념, 사용 언어 자체에 대한 기본기를 다질 수 있는 내용들로 구성되어있다. 업계의 주니어, 취준생이라면 꼭 참고해야할 레포지토리라고 생각한다. 오거니의 추천 레포지토리는 다른 분들이 업로드해주시면 감사하겠습니다.
-
build-your-own-x : (:two: ~ :five:) 각자 사용 언어를 깊게 이해하고 써볼 수 있도록 연습할 수 있는 작은 토이 프로젝트 아이디어 및 튜토리얼이 제시되어있는 레포지토리이다. 또한 토이 프로젝트 영감이 없을 때 참고할 때도 좋다. 취준생, 주니어에겐 특정 프레임워크, 라이브러리 등에 의존적인 공부를 하기보다는 자기가 만들고 싶은 작은 기능, 작은 모듈부터 차근차근 만들어가며 자신의 주력언어, 언어 중립적인 개념을 공부하는 게 좋다고 생각한다. 이를 위해 참고하면 매우 좋은 레포지토리
- Korean FE article : (:three: ~ ) 매주 한국어로 번역 혹은 작성된 프론트엔드 글을 메일로 보내주는 아주 고마운 구독 서비스. 선별된 인원으로 구성된 크루들이 양질의 아티클을 선별하여 번역하고 배포하는 듯하다. 구미가 당기고 유익한 내용이 무척 많다. 본인이 영어가 무척 약하거나, 영어를 잘하더라도 처음은 가볍게 읽고 싶다면(아무리 잘해도, 모국어는 아니니까 부담될 수도 있잖아요? 나는 그런데...) 꼭 구독하기를 추천한다.
-
얄팍한 코딩사전 : (:one: ~ :three:) 비전공자도 쉽게 이해가 가능하게 설명해주는 다양한 CS 지식과, 프로그래밍 지식, 그리고 자바스크립트 관련 원리 개념. 일단 틈틈히 봐두면 나중에 본격적으로 공부하면서 조금 더 폭넓은 이해가 가능할 것이다. 개인적으로 독학러들한테 강추하는 유튜브 채널.
-
Taehoon : (:three: ~ :five:) 오래된 영상도 많지만 자바스크립트 개념과 원리 등을 조금더 전문적인 입장에서 설명해준다. 개인적으로 얄코로 기본을 다듬고, 해당 유튜브로 심화 학습을 하면 좋은 시너지가 일어날 것이다.
-
노마드코더 : (:one: ~ ) 안녕하세요! 니꼴라스! 입니다! 개발 공부를 하기로 마음을 먹었으면 구독을 하는 것이 좋은 것 같다. 다양한 최신 기술도 소개시켜주고, 유명한 유,무료 강의도 있다. 개인적으로 33가지 자바스크립트 개념 해당 채널로 인해 꼼꼼히 보게 된 거 같다. 대단히 유용
-
드림코딩 : (:one: ~ :three:) Don't forget the code for your dream! 자바스크립트 기초 강의는 매우 유용하다. 편집도 잘 되어있고 술술 보기 좋다. 비단 프론트엔드에 국한된 것이 아니라 개발 일을 하다가 올 수 있는 스트레스나 인간관계에 대해서도 관련한 영상이 종종 올라온다. 개발자 전용 마인드케어를 해주기 때문에 도움을 받을 수 있겠다.
-
코딩앙마 : (:one: ~ ) 자바스크립트 + 타입스크립트 강의가 설명을 잘해주신다. 일단 예시를 보면서 이해 하는 것이 더 편하신 분들은 해당 유튜브를 두세번 보자. 각 개념과 예시를 같이 보여주기 때문에 대단히 유용하다. TDD에 대해서 공부하고 싶으면 Jest 강의도 유용하다. React, Next.js 강의도 유용하다.
-
우아한Tech : (:three: ~ ) 다른 영상들도 유용하지만 우테코에 합격하지 못한 사람 배만 아프다. 하지만 우아한테크코스 해당 재생목록은 배가 아파 묽은 것이 나온다 하더라도 봐야한다. 대단히 유용하다. 하지만 설명해주시는 크루분의 기량에 따라 설명의 수준 차이가 있다고 생각한다. 이해가 잘 안되는 영상이 몇 있기는 한데, 일반화는 위험하니까. 여튼 대단히 유용하고, 이론이나 원리 개념을 정리하는데 도움이 된다.
- 네이버 부스트캠프
- 멋쟁이사자처럼
- 스파르타코딩(항해99)
- 우아한 테크코스
- 위코드
- 엘리스코딩
- 코드스테이츠
- 코드스쿼드
- 코드숨
- 코드캠프
- 바닐라 코딩
- F-Lab
- 패스트캠퍼스
- 삼성멀티캠퍼스(SSAFY)
- CJ올리브영
- 구글
- 카카오엔터프라이즈 프론트
- 네이버 스마트에디터
- 위시켓
- 카카오
- 줌인터넷
- 마켓컬리
- 우아한형제들
- 토스트
- 당근마켓
- 요기요
- 라인
- 리디
- 네이버
- 여기어때
- WATCHA
- 뱅크샐러드
- NHN
- 강남언니
- 레진
- 스포카
- 쏘카
- NETFLIX
- Linked in
- Airbnb
- RIOT GAMES
중요도를 나열했으니, 중요도 높은 질문은 거의 무조건 물어본다고 생각하라. 원리 개념에 관한 질문은 정해진 답변이 있으니 잘 숙지를 해야한다. 해당 항목이 커지면 분리를 하고 각 개념에 대한 간략한 설명 추가 예정.
신입 기술 면접 질문은 기술에 대한 질문도 많이 들어오지만, 개발에 임하는 자세, 혹은 태도도 대단히 중요하게 보는 듯 하다. 정해진 정답에 없는 질문 같은 경우엔 당신이라는 사람을 뽑을 이유를 어필해야한다. 잘 생각해서 대답하자.