해당 로드맵은 여러 책&아티클과 강의를 포함합니다. 난이도에 따라 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 시리즈
JS의 특성에 대해 제대로 알아보고 싶을 때 읽어보면 좋다
- 이펙티브 타입스크립트
- 그림으로 배우는 HTTP & Network
어려운 내용이 아닌, 가볍게 그림으로 표현한 HTTP & Network 서적
3️⃣ ~ 5️⃣
3️⃣ ~ 5️⃣ 주로 프로그래밍 철학 그리고 코드, 설계에 관한 철학을 나타낸 책이 선정되어 있습니다. 꼭 어려운 내용이 아니더라도, 더 좋은 코드와 좋은 아키텍쳐에 대한 영감을 받을 수 있는 서적들 입니다.
익스트림 프로그래밍, 애자일 방법론의 창시자 론 제프리스가 지은 책. CTO의 가이드라고 불릴 정도로 소프트웨어 시스템을 개발하는 팀을 관리하는 방법에 대해서 깊은 고찰이 담긴 책이다. 애자일 방법론을 제대로 배우고 싶다면 꼭 읽어봐야 하는 책.
-
5 Must-Read Books for Every Software Engineer
디자인 패턴의 창시자들인 GoF(Gang of Four)가 지은 책 ( 5️⃣ )
위 책은 번역본도 있지만, 영어 실력이 좀 된다면 영문판도 괜찮다.
-
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, 머신러닝, 암호학 등의 분야도 함께 맛볼 수 있는 사이트이다.
- HTML DOM : Vanilla JS 로 HTML DOM 다루기
- Event Loop : Event Loop를 시각적으로 확인해 볼 수 있는 사이트
- CSS Flex Game : CSS Flex 입문할 때 추천하는 사이트
- CSS Grid Game : CSS Grid 입문할 때 추천하는 사이트
- CSS Selector Game : CSS Selector 연습할 때 추천하는 사이트
- Learn Git Branching : 깃의 기본 사용법을 실습하는 사이트
- webpack.kr : 라인(LINE)의 프론트엔드 개발자들이 한국어로 번역하고 있는 웹팩 공식문서. 상당 부분 이미 번역된 상태이므로 읽기 불편함이 없다. 웹팩을 처음 사용하는 사람이라면 Guides를 통해 학습할 것
-
리팩토링 구루 : (:four: ~ :five:) 일명, 너구리 사이트. 글로 볼 땐 추상적으로 느껴지는 리팩토링 기법을 풍부한 그림 설명과 예제로 구체화하여 설명. 또한 디자인 패턴도 마찬가지이며, 타입스크립트 예제 코드를 제공한다는 큰 장점이 있음.
-
patterns.dev : (:four: ~ :five:) 디자인 패턴을 정리한 사이트이며 Gof의 디자인 패턴말고도 프론트엔드 전반에 사용되는 디자인패턴(Hooks, HoC, Tree Shaking 등)들도 잘 설명함.
-
patterns.dev.kr : 상기된 patterns.dev의 한국어 번역 페이지이다.
-
집합의 관점에서 타입스크립트 바라보기 : (: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 같은 오픈소스 렌더링 엔진의 소스 코드를 직접 분석하면서 어떻게 브라우저가 동작하는지 파악했습니다.
-
얄팍한 코딩사전 : (: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)
중요도를 나열했으니, 중요도 높은 질문은 거의 무조건 물어본다고 생각하라. 원리 개념에 관한 질문은 정해진 답변이 있으니 잘 숙지를 해야한다. 해당 항목이 커지면 분리를 하고 각 개념에 대한 간략한 설명 추가 예정.
신입 기술 면접 질문은 기술에 대한 질문도 많이 들어오지만, 개발에 임하는 자세, 혹은 태도도 대단히 중요하게 보는 듯 하다. 정해진 정답에 없는 질문 같은 경우엔 당신이라는 사람을 뽑을 이유를 어필해야한다. 잘 생각해서 대답하자.
-
- 클로저의 개념
- 클로저의 원리
- 클로저의 사용 사례
-
- 각 개념
- 차이점
- 각 장단점