강의

멘토링

로드맵

로드맵 썸네일

뉴비로 시작해 기초 탄탄 웹 개발자 되기

작성자 프로필 이미지

신원석

JavaScript
HTML/CSS
Node.js

입문 대상

0명 참여중

조회수

17

로드맵 코스

완전 초보부터 시작해서 웹 개발자로 성장하기위한 학습 과정

이 로드맵은 개발 경험이 전혀 없는 뉴비가 하루 2-3시간의 꾸준한 학습을 통해 주니어 개발자가 될 수 있도록 설계

모든 강의는 반드시 notion 혹은 obsidian 혹은 본인이 사용하는 문서 툴에 기록하면서 강의를 들어야 효과가 좋다 생각합니다.


0단계 기본 도구 설정

vscode 설정: https://youtu.be/KKtE6yDhEus?feature=shared

vscode extension 설정(원한다면): https://youtu.be/hv-un0II2Rs?feature=shared

vscode extension 설정2(원한다면): https://youtube.com/shorts/cdqULOmORVU?feature=shared

obsidian 설정(notion도 괜찮아요): https://www.youtube.com/watch?v=ZuEu8SDqHOE

obsidian 설정2(원한다면): https://www.youtube.com/watch?v=vdXF0mceh-g


1단계 기초
HTML, CSS, JavaScript의 기본기부터 시작해서 DOM 조작, 인터랙티브 웹 개발까지 추가로 Git을 통한 버전 관리와 개발 워크플로우도 함께 학습

중간에 git 강의를 듣고나서 다음강의로 넘어가기전에 반드시 이 강의를 꼭 들읍시다

링크: https://youtu.be/1I3hMwQU6GU?feature=shared

  1. 비전공자를 위한 넓고 얇은 IT 지식 & 나의 개발 유형 알아보기! <M.B.I.T>

  2. [인프런 X 생활코딩] HTML과 인터넷

  3. WEB2 - CSS

  4. WEB2 - JavaScript

  5. DATABASE 1&2 - MySQL

  6. 모든 웹 개발자가 봐야 할 단 한 장의 지도

  7. 인터넷 기본 도메인 , 호스트, 포워딩 알아보기

  8. 버전 관리 시스템 Git

  9. 제대로 파는 Git & GitHub - by 얄코(Yalco)

  10. 생활코딩 - Linux

  11. 개발자를 위한 쉬운 리눅스

  12. 입문자를 위한, HTML&CSS 웹 개발 입문

  13. 웹퍼블리셔가 알려주는 실무 웹사이트 따라만들기 Season1

  14. 쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1

  15. 인터랙티브 웹 개발 제대로 시작하기

  16. Amazing JavaScript - 입문

1.5 단계 잠시 쉬면서

  1. 개발자가 가장 잘해야 하는 단 한가지

  2. 뽑고 싶은 개발자

  3. 개발바닥 - 이력서 내용

  4. 개발바닥 - 좋은 회사를 고른다면

  5. 코딩실력보다 훨씬 더 중요한거


2단계 심화
Node.js, 데이터베이스 기초, TypeScript를 통한 안전한 코드 작성법을 학습합니다. 함수형 프로그래밍 패러다임을 통해 더 견고하고 유지보수 가능한 코드 작성 능력을 기릅니다.

  1. 그림으로 쉽게 배우는 네트워크

  2. 모든 개발자를 위한 HTTP 웹 기본 지식

  3. 자바스크립트로 알아보는 함수형 프로그래밍 (ES5)

  4. 구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

  5. 함수형 프로그래밍과 JavaScript ES6+

  6. 넓고 얕게 외워서 컴공 전공자 되기

  7. 그림으로 쉽게 배우는 운영체제

  8. 그림으로 쉽게 배우는 자료구조와 알고리즘 (기본편)

  9. 개발자를 위한 컴퓨터공학 1: 혼자 공부하는 컴퓨터구조 + 운영체제

  10. 넓고 얕게 외워서 컴공 전공자 되기

  11. 함수형 프로그래밍과 JavaScript ES6+ 응용편

  12. 코어 자바스크립트

  13. 견고한 JS 소프트웨어 만들기

  14. 빠르게 알아보는 Javascript V8엔진

  15. 얄코의 가장 쉬운 Node.js

  16. Node.js의 모든 것

  17. 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

  18. 인프런 퇴근길 밋업 #01 Node.js

2.5 단계 잠시 쉬면서

  1. 더 나은 개발자

  2. 개발자가 되고 싶다고?

  3. 개발자가 적성에 맞는 줄 알았는데

  4. AI시대 - 개발 공부 망하는 법


3단계 조금 더
운영체제, 네트워크, 자료구조/알고리즘 등 컴퓨터공학 기초 지식을 탄탄히 다지고, 프론트엔드 빌드 도구와 개발환경 구축 능력까지 완성

  1. 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌

  2. 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

  3. Slack 클론 코딩[실시간 채팅 with React]

  4. 얄코의 가장 쉬운 타입스크립트(TypeScript)

  5. 한 입 크기로 잘라먹는 타입스크립트(TypeScript)

  6. React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)

  7. 시니어 백엔드 개발자가 알려주는 데이터베이스 개론 & SQL

3.5 단계 잠시 쉬면서

  1. 도커가 바꾼 개발바닥

  2. 코딩 책 한 권만 읽으면 이렇게 됩니다

  3. 프로그래머 형님의 찐 공부법

목표 달성 후

서버까지 가봅시다

추천하는 뉴스레터

구독해서 보면 좋습니다

  1. GeekNews

  2. D2

  3. 테크잇슈

  4. OTW FE

  5. FE News

로드맵 상세보기

40개 코스

로드맵에 포함된 강의 썸네일
인프런
비전공자를 위한 넓고 얇은 IT 지식 & 나의 개발 유형 알아보기! <M.B.I.T>
나의 개발 유형을 테스트해보자! MBTI아닌 MBIT! My Best IT personalities! 개발에 대한 전반적인 내용을 살펴보고 나에게 가장 잘 맞는 개발 적성을 알아볼 수 있습니다.

19,800

로드맵에 포함된 강의 썸네일
인프런
WEB2 - CSS
이 수업은 https://opentutorials.org(생활코딩 사이트)를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다.

무료

로드맵에 포함된 강의 썸네일
https://opentutorials.org(생활코딩 사이트)를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다.

무료

로드맵에 포함된 강의 썸네일
정보기술의 심장인 데이터베이스에 대한 포괄적인 소개를 담고 있습니다.
데이터베이스의 본질을 공부하며 가장 대표적인 관계형 데이터베이스인 MYSQL 을 학습해 봅니다.

무료

로드맵에 포함된 강의 썸네일
웹 개발 학습 중 길을 잃었나요? 스스로 길을 찾게 도와드리겠습니다. 비전공자라 하더라도 1시간 정도의 짧은 강의로 웹 서비스 구조가 어떻게 작동하는지 알 수 있습니다. 

15,400

22,000

로드맵에 포함된 강의 썸네일
이 수업은 버전관리 시스템 git을 소개하는 수업입니다.

이 강의를 들었으면 다음 강의로 넘어가기전에 아래 강의를 반드시 무조건 들읍시다
링크: https://youtu.be/1I3hMwQU6GU?feature=shared

무료

로드맵에 포함된 강의 썸네일
본 수업에서는 리눅스의 사용법을 다룹니다. 특히 초심자들이 어려워하는 부분이 명령어를 이용해서 컴퓨터를 제어하는 법입니다. 여기서는 초심자가 명령어를 사용하는데 필요한 가장 보편적인 규칙을 최소한으로 다룹니다.

무료

로드맵에 포함된 강의 썸네일
현업 개발자가 실제로 사용하고 있는 명령어들로 커리큘럼을 만들었습니다.
OS 설치나 관리와 관련된 복잡한 개념들은 다루지 않습니다.
2시간 안에 빠르게 리눅스 기본 사용법을 익힐 수 있습니다.

무료

로드맵에 포함된 강의 썸네일
HTML과 CSS를 배워서 웹사이트 제작에 필요한 기본 지식을 배울 수 있습니다. 코딩을 처음 접할 때 두려움이 없도록 정말 알기 쉽게 설명한 강의입니다.

무료

로드맵에 포함된 강의 썸네일
프런트엔드 개발을 위해 필요한 자바스크립트 기초 지식. 실무자로서 꼭 알아야 하는 필수 지식들을 쉽고 빠르게 설명해 줍니다. 2024년 현대 프런트엔드 개발 트렌드를 반영한 기본 강의.

무료

로드맵에 포함된 강의 썸네일
마플(http://www.marpple.com)의 CTO 유인동님이 알려주는 함수형 프로그래밍에 대한 강좌 입니다.
함수형 프로그래밍으로 라이브러리를 직접 만들어가며 함수형 프로그래밍의 패러다임과 코딩의 즐거움을 느낄 수 있습니다.

무료

로드맵에 포함된 강의 썸네일
React, Next.js, Vue를 아무리 공부해도 코드가 추상적으로 느껴지고, 구조가 확실히 이해되지 않는다면, 그 근본 원인은 DOM에 대한 이해 부족일 수 있습니다. DOM은 모든 프론트엔드 프레임워크의 기반이며, 웹 페이지의 구조와 동작을 연결해주는 실체입니다.

이 강의는 단순한 선택자나 조작법을 넘어, HTML이 어떻게 DOM 객체로 바뀌고, 이 구조를 어떻게 선택하고 탐색하며, 조작할 수 있는지를 처음부터 차근차근 알려주는 DOM 완전 정복의 Part 1 입문 강의입니다.

HTML 태그는 구조일 뿐이고, 자바스크립트는 행동일 뿐이지만, 그 둘을 연결하는 핵심이 DOM입니다. 이 연결고리를 명확히 이해하면, 어떤 프레임워크를 쓰든 그 안의 진짜 구조와 흐름을 정확히 꿰뚫어볼 수 있게 됩니다.

22,280

29,700

로드맵에 포함된 강의 썸네일
ES6+와 함수형 프로그래밍을 배울 수 있는 강의입니다. 이 강좌에서는 ES6+의 이터러블/이터레이터/제너레이터 프로토콜을 상세히 다루고 응용합니다.
이터러블을 기반으로한 함수형 프로그래밍, map/filter/reduce, 파이프라인, 제너레이터를 통한 지연 평가, Promise 합성, 동시성/병렬성, async/await와 비동기 에러 핸들링 등을 배울 수 있습니다. 이 강좌를 습득하고 연습하여 중급 자바스크립트 개발자로 성장하세요!

55,000

로드맵에 포함된 강의 썸네일
넓고 얕게 외워서 컴퓨터 공학 전공자가 되고 싶은 모든 비전공 초보자를 위한 강의입니다. 컴퓨터 구조, 운영체제 등 컴퓨터 공학 전공 필수과목에서 어떤 것을 배울 수 있는지 빠른 시간에 알 수 있습니다. 무엇보다 외워서라도 끝낼 수 있습니다!

46,200

66,000

로드맵에 포함된 강의 썸네일
ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다.

22,000

로드맵에 포함된 강의 썸네일
같은 기능을 만들더라도 자바스크립트 문법을 이제 막 뗀 주니어 개발자와 경험 많은 시니어 개발자의 코드는 상당히 다릅니다. 물론 결과물은 같더라도 말이죠. 후자의 코드가 인정받는 이유는 짜임새 있는 설계와 변화에 대응할수 있는 확장성 때문일거에요. 이 강의는 그런 좋은 코드를 만들어 내는 방법에 대해 알아봅니다.

27,500

로드맵에 포함된 강의 썸네일
실무 프론트/백엔드 개발 이전에 꼭 알아야 할, Node.js의 핵심 원리와 실전 기술을 담았습니다.

24,750

33,000

로드맵에 포함된 강의 썸네일
기초부터 차근차근 실력을 탄탄히 다져 가며 Node.js 실력을 완성하는 올인원 강의 👍

22,280

29,700

로드맵에 포함된 강의 썸네일
실무에서 많이 사용되는 React와 Vue의 코드를 작성하면서 타입스크립트 필수 개념을 익히는 강의입니다. React와 Vue에 타입을 입히는 방법, ChatGPT 사용법까지 모두 잡는 실무자와 입문자 모두를 위한 강의!

44,000

로드맵 코스 40