뉴비로 시작해 기초 탄탄 프론트 개발자 되기

오늘부터 (나도) 개발자! 개발자에 도전하는 분들을 위해 기본적인 개발 지식부터 준비 방법, 각종 노하우까지 전해드립니다.

생활코딩의 첫 번째 웹 개발 강의, <WEB 1 - HTML & Internet> 리뉴얼 버전이 오직 인프런에서만 공개됩니다!

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

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

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

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

비전공자 입장에서도 쉽게 이해할 수 있고, 실전에서 바로 적용 가능한 '리눅스 입문' 강의를 만들어봤습니다!

이 강의를 들었으면 다음 강의로 넘어가기전에 다음 강의들을 반드시 무조건 들읍시다
1. 지옥에서 온 GIT도 좋은데 안듣고 이거로 바로 넘어가셔도 됩니다(필수): https://youtu.be/1I3hMwQU6GU?feature=shared

2. 좀더 복기하고싶다면 들어도되는 강의(선택): https://codingapple.com/course/git-and-github/

3. 추가로 간단하게 봅시다 gitignore 관련 (필수)
링크1: https://youtu.be/Tm_oeAkm4m0?si=Xqh7lADc0ogzdz04
링크2: https://youtu.be/1Qk8jrBrp9o?si=bBRKt-DvSTgtRR16

해당 강의를 듣고 대규모 협업하기 시리즈도 들어봅시다
강의를 진행하시다보면 협업 실습으로 인해 깃허브 계정이 여러개가 필요합니다

1. 구글 아이디를 여러개 만들어서 만든 구글 계정을 통해 깃허브 계정을 생성합시다

2. 같은 브라우저에서 깃허브 계정을 여러개로 로그인하면 로그인이 실패하는데 구글 시크릿창으로 실습을 진행합시다

3. 다만 아래 링크 1을 들으시기전에 반드시 아래 3개의 문서를 정독해주세요.
- https://sprint.codeit.kr/blog/git-terminal-user-setup
- https://docs.github.com/en/get-started/git-basics/setting-your-username-in-git
- https://usingu.co.kr/frontend/git/git-%EC%84%A4%EC%A0%95-git-config/

추가 강의 링크1: https://www.youtube.com/watch?v=V86kq9aAqlI&list=PL93mKxaRDidFtXtXrRtAAL2hpp9TH6AWF&index=28

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

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

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

이 강의를 통해 마법만 같던 인터넷이 어떻게 동작하는지 이해할 수 있습니다.

2번들읍시다

실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다.

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

이 강의를 통해 모든 개발자들이 필수로 알아야하는 운영체제의 원리를 알 수 있습니다.

2번들읍시다

이 강의를 통해 선형 자료구조와 알고리즘을 배울 수 있습니다.

2번들읍시다

개발자뿐만 아니라 기획자, 데이터 분석가도 SQL 기초부터 차근차근 데이터베이스를 학습합니다.

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

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

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

이 강의는 단순한 DOM 조작을 넘어서, 실제 사용자와의 상호작용 속에서 웹 UI를 동적으로 구성하고 반응하는 방법을 깊이 있게 학습합니다. 이벤트 시스템의 본질, 버블링과 캡처링, 이벤트 위임, 실시간 UX 피드백, 그리고 throttle & debounce를 활용한 성능 최적화까지, 실무에서 자주 마주치는 문제들을 직접 구현하며 익힐 수 있도록 구성했습니다. DOM 트리의 구조 이해를 바탕으로, 이벤트 흐름과 상태 변경을 유연하게 연결하는 능력을 기르게 됩니다.

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

이 강의는 Vanilla JavaScript로 Notion을 처음부터 끝까지 직접 구현하며, 단순한 UI 클론을 넘어서 내부 동작 원리를 깊이 이해하는 데 초점을 맞춘 풀스택 수준의 프런트엔드 프로젝트 과정입니다.

사이드바 트리, 중첩 문서 생성, 자동 저장, 라우팅, 휴지통, 즐겨찾기, 검색 모달, 설정 모달, 테마 전환, Export/Import, 키보드 단축키, 반응형 레이아웃, 드래그 리사이즈 등 실제 노트 앱의 핵심 기능을 모두 바닐라 JS로 직접 구현합니다.

React, Vue 같은 프레임워크 이전에 반드시 알아야 할 브라우저 표준 동작(이벤트 버블링, DOM 트리, 로컬 스토리지, Blob, FileReader, 해시 라우팅 등)을 탄탄하게 학습해, “왜 이렇게 동작하는가”를 완전히 이해하고 디버깅할 수 있는 내공을 쌓는 것이 목표입니다.

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

optional
복습 하고싶으신분만 들어도됩니다

백엔드 개발자라면 꼭 알아야 할 데이터베이스와 SQL! 이해하기 쉽게 설명하는 것을 최우선으로 합니다.

이 강의를 통해 비선형 자료구조와 알고리즘을 배울 수 있습니다.

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

이 강좌는 함수형 프로그래밍과 JavaScript ES6+의 시리즈 강좌로 다양한 응용 사례를 다룹니다.

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

기초부터 차근차근 실력을 탄탄히 다져 가며 Node.js 실력을 완성하는 올인원 강의 👍

JavaScript엔진인 V8에 대해 이해할 수 있습니다! 
좀 더 효율적인 코드작성법에 대한 힌트를 얻을 수 있습니다.

이 강의는 브라우저가 HTML을 받아 DOM을 만들고, CSSOM과 결합해 화면에 픽셀을 그려내는 Critical Rendering Path(CRP) 과정을 처음부터 끝까지 다룹니다. 단순한 DOM 조작을 넘어, CSS와 JS가 성능에 어떤 영향을 주는지, 이미지·폰트 최적화, Lazy Loading, Intersection Observer, 가상 리스트, 그리고 DevTools 실습까지 이어지며 실제 웹 성능을 눈에 띄게 개선할 수 있는 실전 전략을 배울 수 있습니다.

타입스크립트의 문법과 사용법을 가장 쉬운 설명으로 빠르게 학습합니다.

문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻‍♀️로 만들어드립니다.

이미 만들어 놓은 개발 환경을 이해할 수 있어요.
처음부터 직접 개발 환경을 만들 수 있어요.

개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요.
학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!

단순히 듣고 끝나는 강의가 아닙니다. 이 강의는 “React를 이해하는 순간”이 아니라
“React를 직접 다룰 수 있게 되는 순간”을 목표로 합니다.

매 섹션마다 강의와 함께 미션을 수행하고, 연습문제를 직접 풀며,
JSX, Virtual DOM, State, useEffect 같은 핵심 개념을 손으로 구현하며 익히는 과정입니다.

완강을 마쳤을 때 당신은 단순히 React 문법을 아는 입문자가 아니라,
컴포넌트 설계부터 렌더링 흐름까지 스스로 설명하고 활용할 수 있는 개발자가 되어 있을 것입니다.

“듣기만 하는 수업이 아닌, 완성해 나가는 학습.”
React의 본질을 이해하고, 선언형 UI의 세계를 직접 체험하세요.

리액트 19의 최신 기능을 타입스크립트(TypeScript)와 함께 배우는 리액트 완성 강의!
기초부터 상태관리(Context, Redux Toolkit, Zustand), API 통신(Fetch, Axios), 최신 훅(use, useActionState, useOptimistic 등), 실전 프로젝트까지 차근차근 익혀 실무에 바로 적용할 수 있는 리액트 앱을 만들 수 있습니다.

테스트코드! 어디서부터 시작해야할지 막막한 분들을 위해 준비했어요. 테스트 작성부터, 자동화를 통한 배포까지 한번에!

storybook

이제는 실전에 도전할 차례입니다 🔥 React.js + TypeScript + Supabase로 실무급 SNS를 함께 개발해보며 인증&인가, 무한스크롤, 이미지 업로드, 좋아요, 무한 중첩 댓글, 다크모드 등의 기능을 만들어 봅니다. 이 과정에서 Zustand와 Tanstack Query를 이용한 서버 및 전역 상태 관리 기법도 살펴볼 예정입니다.

Slack 서비스를 따라 만들며 본격적인 리액트 웹 개발을 시작해봅시다! 회원가입, 로그인, 방 만들기, 실시간 채팅까지!

리액트로 만들어진 웹 서비스의 성능을 측정하고 더욱 빠르고 효율적으로 최적화 하는 방법을 배웁니다.

리액트로 만들어진 웹 서비스의 성능을 측정하고 더욱 빠르고 효율적으로 최적화 하는 방법을 배웁니다.