Giters

uriyang / fe-roadmap

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

들어가기 전에

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

1️⃣ : 입문(Beginner)

2️⃣ : 초급 (Easy)

3️⃣ : 중급(Normal)

4️⃣ : 상급(Hard)

5️⃣ : 최상급(Very hard)

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

튜토리얼

추천 도서

JAVASCRIPT

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

초급

1️⃣ ~ 2️⃣

중급

3️⃣ ~ 4️⃣

고급

3️⃣ ~ 5️⃣

ETC

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

함수형 프로그래밍

객체지향 프로그래밍

  • GoF Design Patterns

    디자인 패턴의 창시자들인 GoF(Gang of Four)가 지은 책 ( 5️⃣ )

  • 객체지향의 사실과 오해 : (:four: ~ : five:) 어려울 수 있는 객체지향 패러다임의 주요 개념들을 협력, 책임, 역할의 관점에서 풍부한 예시를 통해 쉽게 설명하고 있다. 객체지향 프로그래밍에 대한 무의식적으로 알고 공감하는 지식(묵시지)을 좀 더 의식적이고 구체적인 지식(명시지)로 끌어올리는 데 탁월함을 보이는 책이다.

클린코드

TYPESCRIPT

추천 사이트

공통

  • 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 : 프론트엔드는 물론 개발의 수 많은 분야에 대한 로드맵들을 집대성한 사이트이다. 각 분야의 현재 경향을 반영한 방대한 로드맵을 제시한다. 너무 방대해서 숙련된 경력자도 모르는 내용이 많은 것이 보통이다. 그러니 초보자들은 방대한 양에 쫄지말고 필수적인 요소부터 차근차근 접근할 것. 또한 각 요소마다 추천 읽을거리, 볼거리를 풍부하게 제공하고 있어 공부하기 용이하다. 매우매우 추천하는 사이트

JAVASCRIPT

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

TYPESCRIPT

CSS

  • 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 제공)

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의 한국어 번역 페이지이다.

알고리즘 (Algorithm)

3️⃣ ~

  • "안경잡이 개발자" 나동빈님의 알고리즘 강의 : 어느정도 프로그래밍에 익숙해져 간다면 대기업 등의 코딩테스트 준비를 위해 알고리즘 강의를 듣고 문제를 많이 풀어보자, 더불어 자매품인 자료구조 강의도 함께 듣는것이 좋다.

  • 이것이 취업을 위한 코딩테스트다 with Python : 위 나동빈님의 강의가 마음에 든다면 읽어볼만한 책이다. 그리디, 최단거리 탐색, DP(Dynamic Programming) 등 이론적인 부분에도 충실하며, 실제 카카오와 삼성 등 기출문제 복원이 잘 되어 있고 기출 유형을 분석하여 필요한 문제들도 수록되어있다. 대체적으로 상세하고 알고리즘 한줄한줄 설명을 잘 해주셔서 위 강의가 좋았다면 사서 함께 읽어볼만한 책이다.

문제풀이 사이트

  • 백준 온라인 저지 : 국내에서 가장 유명한 알고리즘 문제 사이트 중 하나. 여러 알고리즘을 분류에 따라 풀어볼 수 있어서 매우 좋고 활동이 활발하여 모르는 것이 있으면 바로바로 물어볼 수 있는 환경이 제공된다. 관련 슬랙 채널도 있으니 활용하길 바란다 :)

  • 프로그래머스 : 알고리즘 관련하여 문제를 풀어볼 수 있는 국내 유명 사이트로, 문제를 풀고 본인의 순위도 올릴 수 있다. 카카오 블라인드 문제 등등 여러 문제 또한 경험이 가능하다.

  • Leet Code : 리츠코드, 유명한 알고리즘 사이트. 위 문제풀이 사이트가 익숙해졌다면 해당 사이트에서 문제를 풀어보는것도 좋다.

추천 아티클

CS(Computer Science)

  • 레스토랑에 비유해서 알아보는 운영체제 : (:two: ~ :three:) CPU, 프로세스, 스레드, 멀티태스킹, 시분할, 컨텍스트 스위칭 등 듣고 얼른 이해가 되지 않은 딱딱한 개념을 일상에 흔히 접할 수 있는 레스토랑의 운영방식과 비유해 쉽게 설명하고 있는 아티클이다.

함수형 프로그래밍

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 같은 오픈소스 렌더링 엔진의 소스 코드를 직접 분석하면서 어떻게 브라우저가 동작하는지 파악했습니다.

  • 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: ~ ) 다른 영상들도 유용하지만 우테코에 합격하지 못한 사람 배만 아프다. 하지만 우아한테크코스 해당 재생목록은 배가 아파 묽은 것이 나온다 하더라도 봐야한다. 대단히 유용하다. 하지만 설명해주시는 크루분의 기량에 따라 설명의 수준 차이가 있다고 생각한다. 이해가 잘 안되는 영상이 몇 있기는 한데, 일반화는 위험하니까. 여튼 대단히 유용하고, 이론이나 원리 개념을 정리하는데 도움이 된다.

교육 기관

기업 기술 블로그 모음

기술 면접 리스트

중요도를 나열했으니, 중요도 높은 질문은 거의 무조건 물어본다고 생각하라. 원리 개념에 관한 질문은 정해진 답변이 있으니 잘 숙지를 해야한다. 해당 항목이 커지면 분리를 하고 각 개념에 대한 간략한 설명 추가 예정.

신입 기술 면접 질문은 기술에 대한 질문도 많이 들어오지만, 개발에 임하는 자세, 혹은 태도도 대단히 중요하게 보는 듯 하다. 정해진 정답에 없는 질문 같은 경우엔 당신이라는 사람을 뽑을 이유를 어필해야한다. 잘 생각해서 대답하자.

국비 학원 & 부트캠프 후기

  • 강남 그린컴퓨터아카데미

    타이틀이 프로젝트형 프론트엔드 과정인 커리큘럼이 있는데 웹의 기초, html, css, javascript 순으로 배우게 된다. 구체적으로 javascript 과정에서 es6를 배우기 전 jQuery 수업을 하고 jQuery 학습 후 여러가지 프로젝트를 팀플이 아닌 솔플로 프로젝트를 시작한다. 프로젝트 순서는 [PC - MOBILE - 반응형 - 부트스트랩 프로젝트 - php & mySQL- 워드프레스 - 자바스크립트 라이브러리 (뷰,리액트) - 선택사항] 이다. 그러나 과정 중 제공되는 여러 자료들이 약 5-6년 전 자료를 제공하여 버전이 맞지 않거나 오류가 발생하는 등 수업에 차질이 생긱는 일이 잦았다. 또한 프론트엔드 과정이긴하나 퍼블리셔에 가깝다. 백엔드 API를 이용해서 데이터를 출력하거나 구조화하는 일은 아예 없었고 최신 라이브러리들은 3일에서 5일만에 수업이 끝나 실무에 필요한 기술이 많이 부족하여 본인이 추가 학습을 꾸준히 해줘야한다. 본인이 코딩에 대해서 아예 무지하거나 처음 접하는 경우, 퍼블리셔로 취업 생각이 있다면 추천하는 커리큘럼이다.

About

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