강의

N
챌린지

멘토링

N
클립

커뮤니티

개발 · 프로그래밍

/

웹 개발

React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계

단순히 듣고 끝나는 강의가 아닙니다. 이 강의는 “React를 이해하는 순간”이 아니라 “React를 직접 다룰 수 있게 되는 순간”을 목표로 합니다. 매 섹션마다 강의와 함께 미션을 수행하고, 연습문제를 직접 풀며, JSX, Virtual DOM, State, useEffect 같은 핵심 개념을 손으로 구현하며 익히는 과정입니다. 완강을 마쳤을 때 당신은 단순히 React 문법을 아는 입문자가 아니라, 컴포넌트 설계부터 렌더링 흐름까지 스스로 설명하고 활용할 수 있는 개발자가 되어 있을 것입니다. “듣기만 하는 수업이 아닌, 완성해 나가는 학습.” React의 본질을 이해하고, 선언형 UI의 세계를 직접 체험하세요.

(5.0) 수강평 6개

수강생 124명

난이도 초급

수강기한 무제한

  • nhcodingstudio
실습 중심
실습 중심
미션기반
미션기반
프론트엔드기초
프론트엔드기초
HTML/CSS
HTML/CSS
JavaScript
JavaScript
React
React
웹앱
웹앱
frontend
frontend
실습 중심
실습 중심
미션기반
미션기반
프론트엔드기초
프론트엔드기초
HTML/CSS
HTML/CSS
JavaScript
JavaScript
React
React
웹앱
웹앱
frontend
frontend

먼저 경험한 수강생들의 후기

먼저 경험한 수강생들의 후기

5.0

5.0

아침형닭고기

35% 수강 후 작성

react api docs 로 읽었을때 뭐부터 읽어야 이해 할 수 있는지 몰라서 어려웠는데 원리부터 알게 되니까 편안합니다. 다음 강의를 빨리 만들어주셨으면 좋겠습니다.

5.0

Su Yeoun Lee

71% 수강 후 작성

정의를 명확히 설명을 해주어서 개념을 이해시켜줍니다. 특히 설명에 군더더기가 없어 시간 낭비가 없습니다. 그리고 각 세션의 끝에 [필독]을 두어 한번 더 리마인드할 수 있게 정리해주는 것도 좋았습니다. 강의를 듣다 보면 느껴지는게 강사님이 가르치는데 진심이다는 것이 느껴집니다. 리엑트를 배우려는 분들께 강추합니다. 후회는 없을 겁니다.

5.0

달리고

95% 수강 후 작성

오늘 완강했습니다. 리액트 강의를 여러 개 봤는데 가장 이해하기 쉽고 체계적으로 구성되어 있어서 좋았습니다. Part 2 강의도 올라오면 바로 수강하겠습니다. 그다음에 Next.Js 강의도 꼭 만들어주시기 바랍니다. 감사합니다. ^^!

수강 후 이런걸 얻을 수 있어요

  • React가 브라우저의 렌더링 엔진 위에서 어떤 역할을 수행하는지 구조적으로 파악합니다.

  • 직접 DOM을 조작하던 사고에서 “UI를 선언하는 사고”로 바꿉니다.

  • “렌더링 = 데이터(State) → 화면(UI)”의 흐름을 코드와 개념으로 명확히 설명할 수 있습니다.

  • JSX가 Babel을 통해 React.createElement()로 바뀌는 과정을 시각적으로 학습합니다.

  • UI를 작은 단위로 쪼개고, props로 데이터를 전달하며 조립식 구조를 설계할 수 있습니다.

  • state가 바뀌면 화면이 왜, 언제, 어떻게 다시 그려지는지 원리적으로 설명할 수 있습니다.

  • 객체나 배열을 복사·갱신하는 패턴을 통해 예측 가능한 렌더링을 보장합니다.

  • 여러 상태 변경이 합쳐지는 이유와 React의 렌더링 스케줄링 방식을 이해합니다.

  • 이전 상태(prev)를 안전하게 가져와 새로운 상태를 계산하는 패턴을 실습합니다.

  • 부모가 주는 데이터(props)와 내부에서 변하는 데이터(state)의 경계를 분명히 인식합니다.

  • React의 “데이터는 위에서 아래로 흐른다”는 원칙을 구조적으로 학습합니다.

  • Virtual DOM의 diffing 규칙과 컴포넌트 재사용 조건을 구체적으로 이해합니다.

  • 이벤트 핸들러 내부에서 상태를 변경할 때 발생하는 렌더링 과정을 예제와 함께 분석합니다.

  • React의 핵심 철학: 단방향, 선언형, 컴포넌트 기반을 몸에 익힘

  • children, props drilling, 구조 분해를 통해 재사용 가능한 컴포넌트를 만들 수 있습니다.

  • 사용자 입력이나 버튼 클릭에 반응하는 인터랙티브한 UI를 구현합니다.

  • React가 Virtual DOM을 계산하고 실제 DOM에 반영하는 과정을 단계별로 시각화합니다.

  • DOM 명령문 대신 데이터와 UI를 연결짓는 사고를 자연스럽게 습득합니다.

  • 왜 이 부분이 다시 렌더링됐는가?를 스스로 추적하고 설명할 수 있습니다.

  • 각 섹션별 실습과 미션을 통해 “렌더링의 본질”을 손으로 경험하며 진짜 React 사고를 익힙니다.

🎓제대로 배우는 React: 미션으로 완성하는 선언형 UI [기초편]

React는 “데이터의 변화가 어떻게 화면으로 이어지는가”를 완전히 새롭게 정의한 렌더링 엔진입니다.

이 강의는 React의 겉모습이 아닌 본질,
즉 렌더링의 원리와 선언형 UI의 사고 방식을 처음부터 차근히 배우는 입문 완성편입니다.

많은 초보자가 React를 배울 때 JSX나 useState 문법부터 시작하지만,
이 강의는 “왜 이런 문법이 생겼는가”에서 출발합니다.
HTML → DOM → Virtual DOM → React 렌더링 구조로 이어지는 큰 흐름을 완벽히 연결하며,
React가 어떻게 화면을 그리는지, 상태가 바뀌면 왜 다시 렌더링되는지,
그 모든 과정을 눈으로 보고 직접 실습하면서 체득합니다.

🧱 강의 구성의 핵심 철학

📌 “코드를 외우기보다 구조를 이해하라.”
→ JSX, props, state의 동작을 문법이 아닌 원리로 학습합니다.
📌 “렌더링은 마법이 아니라 흐름이다.”
→ 상태 변화 → Virtual DOM → 실제 화면 갱신의 과정이 손끝으로 느껴집니다.
📌 “선언형 사고를 훈련한다.”
→ DOM 조작 중심의 명령형 패턴에서 벗어나, React의 선언형 사고방식을 몸으로 익힙니다.
📌 “실습 중심의 미션 학습”
→ 각 섹션마다 직접 코드를 작성하고 눈으로 확인하는 미션이 포함되어 있습니다.

✨ 이 강의의 특징

  1. ‘렌더링의 본질’을 시각적으로 이해하는 유일한 입문 강의
    → React가 Virtual DOM을 비교하고, 실제 DOM에 반영하는 과정을 직접 시각화합니다.

  2. JSX, createElement, Virtual DOM까지 단계별 연결
    → 단순히 JSX 문법을 쓰는 것이 아니라, 그 내부에서 어떤 함수 호출이 일어나는지 코드 레벨로 파악합니다.

  3. State, props, 이벤트, 렌더링의 완전한 연결 고리
    → “버튼을 클릭하면 화면이 바뀌는 이유”를 정확히 설명할 수 있게 됩니다.

  4. 명령형에서 선언형으로 사고 전환 훈련
    → “무엇을 보여줄까” 중심의 React식 사고방식을 훈련합니다.

  5. 불변성과 배치 업데이트까지 체감형 학습
    → state 변경 시 렌더링 최적화가 어떻게 작동하는지 DevTools를 통해 직접 관찰합니다.

  6. 단순한 코딩 실습이 아닌 구조적 사고 훈련
    → 코드 한 줄을 넘어 “React의 렌더링 흐름 전체”를 이해하도록 구성되어 있습니다.

  7. 모든 강의가 실전 미션과 연계
    → Section별 미션을 통해 “이해한 개념을 직접 코드로 검증”합니다.

  8. 한 번 배우면 오래 남는 ‘원리 중심’의 기초 설계
    → 단순한 따라하기가 아닌, React의 동작 원리를 기반으로 어떤 상황에서도 스스로 응용할 수 있는 실력을 기릅니다.CRP 최적화)의 토대가 됩니다.

1️⃣ React가 왜 등장했는지: 기존 방식의 한계를 짚으며 선언형 UI의 필요성을 깨닫습니다.

2️⃣ DOM과 렌더링 구조를 눈으로 시각화: 화면이 어떻게 만들어지고 갱신되는지 원리를 학습합니다.

3️⃣ 컴포넌트 단위 사고 정립: 화면을 작게 나누고 재사용하는 구조적 사고를 익힙니다.

5️⃣ 렌더링의 본질 완전 정복: React가 화면을 다시 그리는 과정을 DevTools로 추적하며 체득합니다.

4️⃣ 이벤트와 상태(State)의 연결 고리 이해: 클릭이 어떻게 화면 변화를 일으키는지 직접 실험합니다.

6️⃣ 명령형 → 선언형 사고 전환: ‘무엇을’ 그릴지 선언하는 React적 사고법을 훈련합니다.

7️⃣ 불변성과 데이터 흐름의 원리: 상태 변경 시 화면 갱신이 예측 가능하도록 구조를 설계합니다.

8️⃣ 스타일링의 전 과정 학습: Vanilla CSS, Modules, CSS-in-JS를 비교하며 적재적소 전략을 배웁니다.

9️⃣ 디자인 토큰·로직·뷰의 분리(SoC): 규모 있는 프로젝트 구조로 확장하는 감각을 익힙니다

🔟실무형 미션으로 완전 체득: 버튼·테마·아이콘 등 UI를 직접 구현하며 React의 흐름을 손끝으로 경험합니다.

HTML·CSS까진 알지만, 화면이 “왜” 바뀌는지 궁금한 분

React를 들어봤지만 막상 어떻게 시작해야 할지 모르는 분


React가 화면을 다시 그리는 진짜 원리를 눈으로 확인하고 싶은 분

DOM이 뭔지, 자바스크립트가 어떻게 화면을 움직이는지 알고 싶은 분

개념은 알겠는데 코드로 직접 옮기면 막히는 분


React의 기본기를 논리적으로 정리해두고 싶은 프론트엔드 초입자

렌더링·상태 같은 말을 처음 들어봤거나 아직 헷갈리는 분


명령형 코딩 방식에서 벗어나, 더 효율적인 사고로 전환하고 싶은 분


“한 번쯤 React를 끝까지 제대로 배워보고 싶다”는 마음이 있는 분

수강 후에는

  • “화면이 왜 이렇게 바뀌는지” 직접 설명할 수 있습니다.

  • HTML·CSS·JS가 어떻게 함께 작동해 UI를 그리는지 이해하게 됩니다.

  • 버튼 클릭 한 번에 화면이 갱신되는 렌더링 원리를 완전히 체득합니다.

  • 상태(state) 개념을 코드로 직접 구현하며 변화 흐름을 눈으로 확인합니다.

  • “데이터를 직접 수정하지 않고 복사해서 교체한다”는 불변성 사고방식이 자연스럽게 몸에 배입니다.

  • 이벤트 처리와 흐름 제어(onClick, onChange 등)가 왜 중요한지 스스로 납득하게 됩니다.

  • React가 두 번 렌더링하며 순수성을 검사하는 Strict Mode의 이유를 정확히 이해합니다.

  • 객체·배열 상태를 안전하게 다루며 예측 가능한 코드 작성 습관을 익힙니다.

  • Vanilla CSS, Modules, styled-components를 비교하며 현대적 스타일링 전략을 습득합니다.

  • 코드 한 줄마다 “화면이 이렇게 바뀌는 이유”를 논리적으로 추적할 수 있는 눈을 가지게 됩니다.

🎯 React Part 1 – 미션 정리표

🟩 React 이벤트 처리 실습 — 클릭된 리스트 항목의 이름과 인덱스 출력하기
React의 이벤트 시스템을 처음으로 경험해보는 단계입니다.
각 항목을 클릭했을 때, 어떤 항목이 선택되었는지 이름과 인덱스를 출력하며
onClick 이벤트 핸들러가 동작하는 과정을 이해합니다.
JS 함수 호출과 React의 이벤트 객체가 연결되는 원리를 직접 체험합니다.

🟥 React에서 State의 힘 느껴보기 — 버튼 클릭으로 화면 숫자 업데이트하기
React가 단순한 화면 라이브러리가 아니라 “상태 기반 렌더링 엔진”임을 실감합니다.
버튼 클릭 시 숫자가 자동으로 갱신되며, useState가 렌더링과 연결되는 과정을 배웁니다.
UI는 “데이터의 결과물”이라는 React의 핵심 철학을 이해합니다.

🟧 이벤트와 State 결합 실습 — 클릭으로 토글 상태 바꾸기
이벤트와 상태를 결합하여, 클릭할 때마다 ON/OFF가 전환되는 인터랙티브 UI를 만듭니다.
단일 상태 변수가 UI 전체를 바꾸는 구조를 배우고,
setState가 호출될 때 렌더가 다시 일어나는 흐름을 몸으로 익힙니다.

🟪 순수 컴포넌트 실습 — 외부 변수 없이 동일 입력 → 동일 출력 유지하기
React 컴포넌트의 본질은 “순수 함수”라는 점을 실습으로 확인합니다.
외부 변수에 의존하지 않고, 동일한 props가 들어오면 항상 동일한 화면이 출력되도록 코드를 개선합니다.
예측 가능한 컴포넌트 구조의 중요성을 강조합니다.

🟦 도시만 바꿨는데 화면이 안 바뀐다고? — 중첩 객체 state를 ‘복사’로 안전하게 업데이트하기
React의 상태는 얕은 비교(참조값 비교)를 사용한다는 점을 실무 사례로 학습합니다.
객체 내부 일부만 수정하려면 반드시 복사를 통해 새 객체를 만들어야 함을 코드로 체험합니다.
불변성(immutability)의 기본기를 다지는 핵심 실습입니다.

🟩 할 일 추가했는데 화면이 안 바뀌어요! — 배열 업데이트에서 불변성을 지키는 세 가지 기술
배열 상태를 업데이트할 때 push 대신 concat, filter, map 같은 새 배열 반환 함수를 활용합니다.
React가 변경을 인식하지 못하는 원인과,
불변성을 유지하면 화면이 즉시 갱신되는 이유를 명확히 배웁니다.

🟪 왜 이름이 바뀌었는데 화면은 그대로죠? — 배열 속 중첩 객체까지 안전하게 업데이트하기
배열 안에 객체가 들어 있을 때의 난이도 높은 상태 업데이트를 다룹니다.
map으로 특정 객체만 찾아 복사 후 변경하는 패턴을 익히고,
참조가 달라져야 React가 다시 렌더링된다는 구조를 깊이 이해합니다.

🟧 쿠폰 한 번에 적용! — 조건에 맞는 여러 항목을 불변성으로 일괄 업데이트하기
실무에서 자주 등장하는 “여러 항목 동시에 업데이트” 패턴을 다룹니다.
map과 조건문을 결합해 특정 조건을 만족하는 항목만 변경하고,
React 렌더링이 배열 전체에 어떻게 반영되는지 시각적으로 확인합니다.

🟫 형제 컴포넌트가 서로 통하는 비결 — 상태를 부모로 끌어올려 동기화시키기
두 형제 컴포넌트가 동일한 상태를 공유하는 구조를 구현합니다.
“상태 끌어올리기(Lifting State Up)” 개념을 배우며,
데이터 흐름이 단방향임을 이해하고 props 전달의 중요성을 실감합니다.

🟥 React가 직접 값을 관리한다! — 제어 컴포넌트로 단일 입력 제어하기
입력 폼에서 값이 DOM에 직접 저장되지 않고, React state가 이를 “대신 관리”하는 원리를 실습합니다.
value와 onChange의 연결 구조를 이해하고,
제어 컴포넌트를 통해 폼 입력이 완전히 예측 가능한 상태가 되는 것을 확인합니다.

🟧 회원가입 Form 만들기 — 여러 Input을 객체 State로 제어하기
폼이 커지면 각 입력값을 개별로 관리하기 어려워집니다.
{ name, email, password } 형태의 객체 state로 묶어
입력 변화마다 setState({ ...prev, [key]: value })로 갱신하는 패턴을 배웁니다.

🟪 내 취향 설정 폼 — Select·Checkbox·Radio를 모두 제어 컴포넌트로 만들기
폼의 다양한 입력 타입을 모두 React state와 연결해 “단일 데이터 소스”로 관리합니다.
브라우저 기본 동작 대신 React가 직접 값을 통제한다는 개념을 명확히 체득합니다.

🟦 회원가입 폼 완성하기 — 제출 흐름과 유효성 검사 구현
폼 입력값을 검증하고, 제출 시 조건에 맞지 않으면 에러 메시지를 보여주는 흐름을 완성합니다.
onSubmit 이벤트, preventDefault(), 간단한 유효성 로직을 종합적으로 다룹니다.
React로 “상태 기반 폼 로직”을 직접 설계해 보는 실무형 과제입니다.

🟩 다크 모드 토글 — useEffect(…, [dark])로 body 클래스 동기화
useEffect의 의존성 배열을 활용해 외부 환경(DOM)과 React 상태를 동기화합니다.
state 값이 바뀔 때마다 body.classList를 자동으로 갱신하여
React가 실제 HTML 상태까지 제어하는 구조를 익힙니다.

🟦 useEffect로 HTTP 요청 보내기 (JSONPlaceholder 실습)
실제 API 호출 흐름을 경험하며 useEffect가 “렌더링 이후 실행되는 사이드이펙트”임을 배웁니다.
fetch/axios로 데이터를 불러오고, 로딩·성공·에러 상태를 관리하는 기본 패턴을 구현합니다.

🟩 다크 모드 토글 — useEffect(…, [dark])로 body 클래스 동기화
useEffect의 의존성 배열을 활용해 외부 환경(DOM)과 React 상태를 동기화합니다.
state 값이 바뀔 때마다 body.classList를 자동으로 갱신하여
React가 실제 HTML 상태까지 제어하는 구조를 익힙니다.

🟦 useEffect로 HTTP 요청 보내기 (JSONPlaceholder 실습)
실제 API 호출 흐름을 경험하며 useEffect가 “렌더링 이후 실행되는 사이드이펙트”임을 배웁니다.
fetch/axios로 데이터를 불러오고, 로딩·성공·에러 상태를 관리하는 기본 패턴을 구현합니다.

🟩 Mission X — 요청 취소 & 에러 처리 고도화 + axios 인스턴스 실무 패턴
API 호출 중 컴포넌트가 사라지거나, 빠르게 연속 요청이 들어올 때
AbortController와 axios 취소 토큰으로 안전하게 요청을 취소하는 실무 패턴을 학습합니다.
또한 공통 에러 처리 로직을 axios 인스턴스에 적용하여 중복을 줄이는 법을 익힙니다.

🟩 Mission Y — 재사용 가능한 데이터 패칭 훅 만들기: useFetchProducts
지금까지 배운 비동기 처리 패턴을 커스텀 훅(useFetch)으로 추상화합니다.
데이터 로딩·에러·결과값을 통합 관리하고, 어떤 컴포넌트에서도 손쉽게 재사용할 수 있는 구조를 만듭니다.
실무 수준의 React 코드 재사용성과 확장성을 체험합니다.

수강 전 참고 사항

실습 환경

💻 Node.js (v18 이상) 이 설치되어 있으면 로컬 환경에서 바로 실습 가능
🌐 브라우저만으로도 CodeSandbox 등에서 실습 가능
🪶 HTML·CSS·JS 기본 문법만 알면 충분 (완전 초심자도 OK)
🧩 모든 섹션은 “개념 → 시각화 → 실습 → 미션” 순서로 구성
📘 모든 강의 PDF 학습자료 제공 (개념 요약 + 미션 해설 포함)
🧠 이론보다 “직접 실행해보고 결과를 관찰하는 과정”에 집중
🧰 Visual Studio Code / Vite 기준 예제 포함
⚡️ React의 “겉모습”이 아닌 “동작 원리” 중심으로 설명

📘 학습 자료

  • 🧾 강의 PDF 교재

    • 모든 섹션별 핵심 개념 요약

    • JSX, state, useEffect, 렌더링 흐름 등 단계별 시각 자료

    • 코드 스니펫 + 주석 해설 + DevTools 스크린샷 포함

    • 복습용 미니 퀴즈와 “핵심 요약 체크리스트” 수록

  • 💻 예제 프로젝트 코드 (ZIP)

    • Section 1~10 전체 예제 + 각 미션 정답 코드

    • 주석과 함께 구조별로 정리되어 있어 실습 복습에 최적화

  • 🧩 추가 실습 미션 PDF

    • 각 섹션의 개념을 바로 응용할 수 있는 보너스 과제

    • DOM 구조·렌더링 트리·이벤트 흐름 관찰용 연습 문제 포함

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • React를 처음 배우는 초급 개발자

  • HTML/CSS/JS만 해왔던 프론트엔드 입문자

  • 기존 React 경험은 있으나 개념이 모호한 사람

  • 컴포넌트 설계 감각을 키우고 싶은 사람

  • React의 내부 동작 원리를 논리적으로 이해하고 싶은 사람

  • 프론트엔드로 진로를 전환하려는 백엔드/풀스택 개발자

  • JSX 문법이 단순한 HTML 확장으로 보였던 사람

  • React 훅스(useState/useEffect) 학습을 앞둔 예비 학습자

  • React 프로젝트를 하며 ‘렌더링 루프’나 ‘상태 꼬임’을 겪은 사람

  • React를 단순히 사용하는 것이 아니라 ‘설계’하고 싶은 사람

  • 디자인 시스템 구축을 목표로 하는 사람

  • React를 “라이브러리”가 아닌 “렌더링 엔진”으로 보고 싶은 사람

  • React 코드를 디버깅하며 구조적 이해를 쌓고 싶은 사람

  • useState, props, 렌더링 타이밍의 관계를 명확히 이해하고 싶은 사람

  • 컴포넌트 기반 UI 프레임워크 전반(Vue, Svelte 등)에 대한 이해를 넓히고 싶은 사람

  • React를 학습 중인 대학생·비전공자

  • 기존 프론트엔드 경험자 중 “React 철학”을 명확히 언어화하고 싶은 사람

  • 면접 대비나 포트폴리오를 준비하는 취준생 개발자

  • 프론트엔드 아키텍처를 처음 배우는 사람

선수 지식,
필요할까요?

  • HTML과 DOM 구조에 대한 기본 이해

  • 기본적인 CSS 작성 능력

  • JavaScript의 기초 문법

안녕하세요
입니다.

710

명

수강생

44

개

수강평

16

개

답변

4.8

점

강의 평점

13

개

강의

안녕하세요, 우리동네코딩 스튜디오에 오신 것을 환영합니다!

우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, Google, Microsoft, Meta 등 글로벌 IT 기업에서 실무 경험을 쌓은 개발자들이 함께 만든 교육 그룹입니다.

처음에는 미국과 캐나다의 컴퓨터공학 전공자들끼리 함께 공부하며 성장하고자 만든 스터디 모임에서 시작되었습니다. 각기 다른 대학, 다른 시간대에 있었지만 함께 문제를 해결하고 서로에게 배운 그 시간은 매우 특별했고, 자연스럽게 이런 생각이 들었습니다.

“우리가 공부하던 이 방식, 그대로 다른 사람에게도 전하면 어떨까?”

그 물음이 바로 우리동네코딩 스튜디오의 출발점이었습니다.

현재는 약 30명의 현직 개발자와 컴퓨터공학 전공 대학생들이 각자의 전문 분야를 맡아, 입문부터 실전까지 아우르는 커리큘럼을 직접 설계하고 강의합니다. 단순한 지식 전달을 넘어, 진짜 개발자의 시선으로 배우고 함께 성장할 수 있는 환경을 제공합니다.

“진짜 개발자는, 진짜 개발자에게 배워야 합니다.”

저희는 웹 개발의 전 과정을 처음부터 끝까지 체계적으로 다루되, 이론에 머무르지 않고 실습과 실전 중심의 피드백을 통해 실력을 키워드립니다.
수강생 한 사람, 한 사람의 성장을 함께 고민하고 이끌어가는 것이 우리의 철학입니다.

🎯 우리의 철학은 분명합니다.
"진정한 배움은 실천에서 오고, 성장은 함께할 때 완성된다."

개발을 처음 시작하는 입문자부터, 실무 능력을 키우고 싶은 취업 준비생, 진로를 탐색 중인 청소년까지.
우리동네코딩 스튜디오는 모두의 출발점이자, 함께 걷는 든든한 동반자가 되고자 합니다.

이제, 혼자 고민하지 마세요.
우리동네코딩 스튜디오가 여러분의 성장을 함께하겠습니다.

Welcome to Neighborhood Coding Studio!

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.

It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

“What if we shared this way of learning with others?”

That thought became the foundation of Neighborhood Coding Studio.

Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertise—designing and delivering a curriculum that spans from foundational knowledge to real-world development.
We’re not just here to teach—we’re here to help you see through the lens of real developers and grow together.

“To become a real developer, you must learn from real developers.”

Our courses take you through the entire web development journey—from start to finish—focused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learner’s growth and are committed to supporting your path every step of the way.

🎯 Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."

Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpad—and your trusted companion on the journey.

You don’t have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

커리큘럼

전체

102개 ∙ (4시간 16분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

6개

5.0

6개의 수강평

  • 아침형닭고기님의 프로필 이미지
    아침형닭고기

    수강평 1

    ∙

    평균 평점 5.0

    5

    35% 수강 후 작성

    react api docs 로 읽었을때 뭐부터 읽어야 이해 할 수 있는지 몰라서 어려웠는데 원리부터 알게 되니까 편안합니다. 다음 강의를 빨리 만들어주셨으면 좋겠습니다.

    • nhcodingstudio
      지식공유자

      안녕하세요 아침형닭고기 님 😊 소중한 수강평 남겨주셔서 진심으로 감사드립니다! 🙏 리액트 공식 문서가 워낙 방대하다 보니 처음 접할 때 막막하셨을 텐데, 이번 강의를 통해 '편안함'을 느끼셨다니 지식공유자로서 정말 뿌듯하고 보람차네요. 리액트의 근본적인 원리와 렌더링의 본질을 먼저 이해하고 나면, 앞으로 어떤 복잡한 개념을 만나더라도 훨씬 수월하게 흡수하실 수 있을 거예요. 다음 강의를 기다려 주시는 그 마음 충분히 알고 있습니다! 보내주신 성원에 보답하기 위해 [React Part 2] 강의를 빠르면 3~4주 이내에 출시할 수 있도록 현재 제작에 박차를 가하고 있습니다. 🚀 Part 2에서는 실전 렌더링 최적화와 더 깊이 있는 상태 설계 등, Part 1에서 다진 기초를 실무 레벨로 끌어올리는 알찬 내용들을 담을 예정이니 조금만 더 기다려 주세요! 학습하시다가 궁금한 점이 생기면 언제든 질문 남겨주시고, 오픈채팅방에서도 수강생분들과 활발히 소통 중이니 시간 되실 때 들러주세요. 🌿 다시 한번 감사드리며, 오늘도 열공하는 하루 보내시길 응원합니다! 🌟 👉 https://open.kakao.com/o/gC10Fnoh

  • Su Yeoun Lee님의 프로필 이미지
    Su Yeoun Lee

    수강평 21

    ∙

    평균 평점 5.0

    5

    71% 수강 후 작성

    정의를 명확히 설명을 해주어서 개념을 이해시켜줍니다. 특히 설명에 군더더기가 없어 시간 낭비가 없습니다. 그리고 각 세션의 끝에 [필독]을 두어 한번 더 리마인드할 수 있게 정리해주는 것도 좋았습니다. 강의를 듣다 보면 느껴지는게 강사님이 가르치는데 진심이다는 것이 느껴집니다. 리엑트를 배우려는 분들께 강추합니다. 후회는 없을 겁니다.

    • nhcodingstudio
      지식공유자

      안녕하세요 Su Yeoun Lee 님 😊 이렇게 정성스럽고 따뜻한 후기를 남겨주셔서 진심으로 감사드립니다! 🙏 무엇보다 강의를 통해 개념을 명확히 잡으셨다니 정말 기쁩니다. 제가 전달하고자 했던 '군더더기 없는 핵심 설명'과 '리마인드 세션'의 의도를 정확히 알아봐 주셔서 제작자로서 큰 보람을 느낍니다. "가르치는 데 진심이 느껴진다"는 말씀은 저에게 그 어떤 칭찬보다 큰 힘이 되네요. Part 1 기초편을 통해 리액트의 본질과 선언형 UI에 대한 감을 잡으셨다면, 이제 곧 이어질 다음 단계도 기대해 주세요! 현재 많은 분이 기다려 주시는 [React Part 2] 강의를 준비 중이며, 빠르면 3~4주 이내에 출시할 수 있도록 최선을 다하고 있습니다. Part 1에서 다진 탄탄한 기초를 바탕으로, Part 2에서는 더욱 깊이 있고 실전적인 내용을 다룰 예정이니 지속적인 관심 부탁드립니다. 학습하시다 궁금한 점이 생기면 언제든 편하게 질문 주시고, 오픈채팅방에서도 함께 소통하며 성장해 나갔으면 좋겠습니다. 🌿 다시 한번 소중한 응원과 추천 감사드리며, 오늘도 행복한 하루 보내세요! 🌟 👉 https://open.kakao.com/o/gC10Fnoh

  • nhcodingstudio님의 프로필 이미지
    nhcodingstudio

    수강평 1

    ∙

    평균 평점 5.0

    5

    85% 수강 후 작성

    • 달리고님의 프로필 이미지
      달리고

      수강평 8

      ∙

      평균 평점 5.0

      5

      95% 수강 후 작성

      오늘 완강했습니다. 리액트 강의를 여러 개 봤는데 가장 이해하기 쉽고 체계적으로 구성되어 있어서 좋았습니다. Part 2 강의도 올라오면 바로 수강하겠습니다. 그다음에 Next.Js 강의도 꼭 만들어주시기 바랍니다. 감사합니다. ^^!

      • nhcodingstudio
        지식공유자

        안녕하세요 달리고 님 😊 우선 완강을 진심으로 축하드립니다! 여러 리액트 강의 중 제 강의가 가장 이해하기 쉽고 체계적이었다는 말씀에 지식공유자로서 큰 보람과 함께 막중한 책임감도 느낍니다. 정성스러운 후기와 따뜻한 응원 보내주셔서 정말 감사합니다. 저 또한 달리고 님을 비롯한 수강생분들의 학습에 늘 실질적인 도움이 될 수 있도록 매 순간 고민하고 최선을 다하겠습니다. 기다려 주시는 [React Part 2] 소식도 함께 전해드립니다. 현재 전체 분량의 절반 정도 작업을 마친 상태이며, 제작에 박차를 가하고 있어 빠르면 2주 내에 출시가 가능할 것으로 보입니다. Part 1에서 다진 기초를 바탕으로 실무 역량을 확실히 끌어올리실 수 있도록 알차게 준비하고 있으니 조금만 더 기다려 주세요. 요청하신 Next.js 강의 역시 이후 로드맵에 잘 반영하여 좋은 콘텐츠로 찾아뵙겠습니다. 학습하시다 궁금한 점은 언제든 편하게 질문 남겨주시고, 오늘도 즐거운 코딩 하시길 응원하겠습니다! 🌟 👉 https://open.kakao.com/o/gC10Fnoh 지식공유자 nhcodingstudio 드림

    • 망고님의 프로필 이미지
      망고

      수강평 35

      ∙

      평균 평점 4.7

      5

      65% 수강 후 작성

      초급 내용이 많기는 하지만 복습한다는 개념으로 잘 듣고 있습니다.

      ₩31,900

      nhcodingstudio님의 다른 강의

      지식공유자님의 다른 강의를 만나보세요!

      React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처강의 썸네일

      React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처

      nhcodingstudio

      실무는 가혹합니다. 수만 개의 실시간 데이터가 쏟아지는 극한의 환경에서도 부드러운 사용자 경험을 설계하는 저의 최적화 정수를 치밀한 미션 시스템을 통해 완벽하게 전수해 드립니다. 단순히 코드를 짜는 사람을 넘어, 엔진의 원리로 성능을 집도하는 대체 불가능한 시니어 엔지니어로 도약해 보세요.

      초급

      초급

      React

      React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처강의 썸네일

      React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처

      nhcodingstudio

      DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]강의 썸네일

      DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]

      nhcodingstudio

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

      초급

      초급

      HTML/CSS, JavaScript, React

      DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]강의 썸네일

      DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]

      nhcodingstudio

      제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]강의 썸네일

      제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

      nhcodingstudio

      “제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1” 강의는 인터넷과 웹의 작동 원리를 깊이 이해하고, 실습 위주의 커리큘럼을 통해 HTML/CSS 기초를 탄탄하게 익히는 과정입니다. 이 강의만 들으면 웹 개발의 필수 개념을 확실히 잡고, 바로 프로젝트에 적용할 수 있게 됩니다.

      입문

      입문

      HTML/CSS

      제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]강의 썸네일

      제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

      nhcodingstudio

      제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]강의 썸네일

      제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]

      nhcodingstudio

      물 흐르듯 따라가는 Express.js 입문부터 실전까지! 서버 기초 개념부터 CRUD 프로젝트 완성까지 직접 구현하며 제대로 익히는 백엔드 여정.

      초급

      초급

      express.js, Node.js, routing

      제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]강의 썸네일

      제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]

      nhcodingstudio

      제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]강의 썸네일

      제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]

      nhcodingstudio

      이 강의를 통해 수강생은 개발 환경 설정부터 변수, 조건문, 함수, 객체, 배열 등 JavaScript의 기초와 심화 개념을 폭넓게 학습합니다. 실습과 퀴즈로 꼼꼼히 복습하여, 웹·모바일 실무에 바로 적용 가능한 문제 해결 능력을 갖출 수 있습니다.

      입문

      입문

      JavaScript, HTML/CSS, 웹앱

      제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]강의 썸네일

      제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]

      nhcodingstudio

      제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part2 - [중급편]강의 썸네일

      제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part2 - [중급편]

      nhcodingstudio

      “CSS Position, Transition, Transform, Animation, Flexbox, Grid, 반응형 웹” 등 중급 이상의 CSS 기술을 체계적으로 마스터하고, 다양한 실습 프로젝트를 통해 실무에서 즉시 적용 가능한 스킬을 습득할 수 있는 강의입니다.

      초급

      초급

      HTML/CSS

      제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part2 - [중급편]강의 썸네일

      제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part2 - [중급편]

      nhcodingstudio

      제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트강의 썸네일

      제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트

      nhcodingstudio

      Express.js를 사용하는 수준을 넘어서, 실제로 그 내부 엔진을 처음부터 끝까지 직접 구현하며 진짜 서버의 동작 원리를 몸으로 체득하는 강의입니다. 라우터, 미들웨어, 요청-응답 객체, 정적 파일 처리, 템플릿 렌더링 등 Express의 모든 구성요소를 처음부터 직접 만들어보며 서버 개발자로 성장하는 경험을 제공합니다.

      초급

      초급

      JavaScript, Node.js, Express

      제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트강의 썸네일

      제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트

      nhcodingstudio

      구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]강의 썸네일

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

      nhcodingstudio

      React, Next.js, Vue를 아무리 공부해도 코드가 추상적으로 느껴지고, 구조가 확실히 이해되지 않는다면, 그 근본 원인은 DOM에 대한 이해 부족일 수 있습니다. DOM은 모든 프론트엔드 프레임워크의 기반이며, 웹 페이지의 구조와 동작을 연결해주는 실체입니다. 이 강의는 단순한 선택자나 조작법을 넘어, HTML이 어떻게 DOM 객체로 바뀌고, 이 구조를 어떻게 선택하고 탐색하며, 조작할 수 있는지를 처음부터 차근차근 알려주는 DOM 완전 정복의 Part 1 입문 강의입니다. HTML 태그는 구조일 뿐이고, 자바스크립트는 행동일 뿐이지만, 그 둘을 연결하는 핵심이 DOM입니다. 이 연결고리를 명확히 이해하면, 어떤 프레임워크를 쓰든 그 안의 진짜 구조와 흐름을 정확히 꿰뚫어볼 수 있게 됩니다.

      입문

      입문

      HTML/CSS, JavaScript, React

      구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]강의 썸네일

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

      nhcodingstudio

      Vanilla JavaScript로 직접 구현하는 Notion강의 썸네일

      Vanilla JavaScript로 직접 구현하는 Notion

      nhcodingstudio

      이 강의는 Vanilla JavaScript로 Notion을 처음부터 끝까지 직접 구현하며, 단순한 UI 클론을 넘어서 내부 동작 원리를 깊이 이해하는 데 초점을 맞춘 풀스택 수준의 프런트엔드 프로젝트 과정입니다. 사이드바 트리, 중첩 문서 생성, 자동 저장, 라우팅, 휴지통, 즐겨찾기, 검색 모달, 설정 모달, 테마 전환, Export/Import, 키보드 단축키, 반응형 레이아웃, 드래그 리사이즈 등 실제 노트 앱의 핵심 기능을 모두 바닐라 JS로 직접 구현합니다. React, Vue 같은 프레임워크 이전에 반드시 알아야 할 브라우저 표준 동작(이벤트 버블링, DOM 트리, 로컬 스토리지, Blob, FileReader, 해시 라우팅 등)을 탄탄하게 학습해, “왜 이렇게 동작하는가”를 완전히 이해하고 디버깅할 수 있는 내공을 쌓는 것이 목표입니다.

      초급

      초급

      JavaScript, React, 웹앱

      Vanilla JavaScript로 직접 구현하는 Notion강의 썸네일

      Vanilla JavaScript로 직접 구현하는 Notion

      nhcodingstudio

      Building a Server Framework from Scratch: Cloning the Express.js Engine강의 썸네일

      Building a Server Framework from Scratch: Cloning the Express.js Engine

      nhcodingstudio

      This course goes beyond simply using Express.js. You will rebuild its internal engine from start to finish, gaining hands-on experience with the real principles of how a server works. By directly creating each component of Express—such as routing, middleware, request–response objects, static file handling, and template rendering—you will grow as a server developer and truly understand how a framework operates at its core.

      초급

      초급

      JavaScript, Node.js, Express

      Building a Server Framework from Scratch: Cloning the Express.js Engine강의 썸네일

      Building a Server Framework from Scratch: Cloning the Express.js Engine

      nhcodingstudio

      이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]강의 썸네일

      이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

      nhcodingstudio

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

      초급

      초급

      HTML/CSS, JavaScript, React

      이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]강의 썸네일

      이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

      nhcodingstudio

      JavaScript 객체지향, 이론 말고 '만들면서' 배웁니다 (전략 AI 편)강의 썸네일

      JavaScript 객체지향, 이론 말고 '만들면서' 배웁니다 (전략 AI 편)

      nhcodingstudio

      📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

      초급

      초급

      HTML/CSS, JavaScript, 객체지향

      JavaScript 객체지향, 이론 말고 '만들면서' 배웁니다 (전략 AI 편)강의 썸네일

      JavaScript 객체지향, 이론 말고 '만들면서' 배웁니다 (전략 AI 편)

      nhcodingstudio

      비슷한 강의

      같은 분야의 다른 강의를 만나보세요!

      React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처강의 썸네일

      React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처

      nhcodingstudio

      실무는 가혹합니다. 수만 개의 실시간 데이터가 쏟아지는 극한의 환경에서도 부드러운 사용자 경험을 설계하는 저의 최적화 정수를 치밀한 미션 시스템을 통해 완벽하게 전수해 드립니다. 단순히 코드를 짜는 사람을 넘어, 엔진의 원리로 성능을 집도하는 대체 불가능한 시니어 엔지니어로 도약해 보세요.

      초급

      초급

      React

      React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처강의 썸네일

      React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처

      nhcodingstudio

      이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]강의 썸네일

      이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

      nhcodingstudio

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

      초급

      초급

      HTML/CSS, JavaScript, React

      이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]강의 썸네일

      이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

      nhcodingstudio

      DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]강의 썸네일

      DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]

      nhcodingstudio

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

      초급

      초급

      HTML/CSS, JavaScript, React

      DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]강의 썸네일

      DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]

      nhcodingstudio

      비전공자를 위한 진짜 입문 올인원 개발 부트캠프강의 썸네일

      비전공자를 위한 진짜 입문 올인원 개발 부트캠프

      그랩

      왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

      입문

      입문

      JavaScript, React, Node.js

      비전공자를 위한 진짜 입문 올인원 개발 부트캠프강의 썸네일

      비전공자를 위한 진짜 입문 올인원 개발 부트캠프

      그랩

      Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼강의 썸네일

      Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

      닭강정

      🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

      초급

      초급

      gemini, HTML/CSS, TailwindCSS

      Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼강의 썸네일

      Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

      닭강정

      처음하는 플러터(Flutter) 기초부터 실전까지 [풀스택 Part4] (쉽고 견고하게 단계별로 다양한 프로젝트까지)강의 썸네일

      처음하는 플러터(Flutter) 기초부터 실전까지 [풀스택 Part4] (쉽고 견고하게 단계별로 다양한 프로젝트까지)

      잔재미코딩 DaveLee

      본 강의는 dart 프로그래밍 기초부터 Flutter 기본 및 중급 기능, 심지어 백엔드인 Firebase를 연동하여, 실제 프로젝트까지! Flutter를 단계별로 익힐 수 있는 완성도 높은 강의입니다.

      초급

      초급

      Flutter, Firebase, firestore

      처음하는 플러터(Flutter) 기초부터 실전까지 [풀스택 Part4] (쉽고 견고하게 단계별로 다양한 프로젝트까지)강의 썸네일

      처음하는 플러터(Flutter) 기초부터 실전까지 [풀스택 Part4] (쉽고 견고하게 단계별로 다양한 프로젝트까지)

      잔재미코딩 DaveLee

      React start with Next.js강의 썸네일

      React start with Next.js

      구멍가게코딩단

      React 가 처음이라면? React의 기본 개념을 튼튼히 하면서도 빠르게 배울 수 있는 방법을 고민해야 합니다. Next.js와 JavaScript로 최소한의 지식으로 시작해 보세요. 실무에서 개발에 필요한 필수적인 예제들만 간추려 개발해 봅시다. Todo 예제는 너무나 중요하므로 2번 개발해야 합니다. 한번은 컴포넌트 중심으로 다음에는 브라우저의 경로에 맞게 처리되는 라우팅 중심으로! 로그인은 Zustand를 이용하세요! 정말 적은 양의 코드로 전역 상태를 처리할 수 있습니다.

      입문

      입문

      JavaScript, React, 웹앱

      React start with Next.js강의 썸네일

      React start with Next.js

      구멍가게코딩단

      비전공자도 가능한 AI 바이브코딩 입문 코스강의 썸네일

      비전공자도 가능한 AI 바이브코딩 입문 코스

      아이티커넥트

      💡 비개발자도 AI와 함께 단 10시간 창업 MVP부터 수익화 서비스까지! 💰 외주비 수천만원이 필요했던 개발 이제 12만원으로 완전 해결 🎯 명함인식, 감정분석, 입지분석까지 실전 비즈니스 프로젝트 5개 완주 🔥 기획자, 마케터, 예비창업자라면 개발자 없이도 아이디어 구현 ⚡ 지금 시작하면 평생 써먹을 개발 자립 능력을 획득하세요!

      입문

      입문

      HTML/CSS, Java, 웹앱

      비전공자도 가능한 AI 바이브코딩 입문 코스강의 썸네일

      비전공자도 가능한 AI 바이브코딩 입문 코스

      아이티커넥트

      타입스크립트 입문 - 기초부터 실전까지강의 썸네일

      타입스크립트 입문 - 기초부터 실전까지

      캡틴판교

      타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관점에서 쉽고 재밌게 배워보겠습니다 😄

      초급

      초급

      TypeScript, ES6, JavaScript

      타입스크립트 입문 - 기초부터 실전까지강의 썸네일

      타입스크립트 입문 - 기초부터 실전까지

      캡틴판교

      ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.2강의 썸네일

      ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.2

      유용한IT학습

      자바스크립트 프로그래밍 언어를 최신의 ES6 문법과 함께 학습하도록 기획된 과정입니다.

      중급이상

      중급이상

      JavaScript, ES6

      ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.2강의 썸네일

      ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.2

      유용한IT학습

      리액트 공식문서 함께 공부하기강의 썸네일

      리액트 공식문서 함께 공부하기

      정재남

      2023년 리뉴얼된 React 공식 문서를 함께 학습해요.

      입문

      입문

      React, JavaScript, react.js

      리액트 공식문서 함께 공부하기강의 썸네일

      리액트 공식문서 함께 공부하기

      정재남

      입문자를 위한, ES6+ 최신 자바스크립트 입문강의 썸네일

      입문자를 위한, ES6+ 최신 자바스크립트 입문

      짐코딩

      주변에서 코딩을 처음 시작하시는 분들을 많이 봤어요. 경력자 분들은 자바스크립트가 쉽다고 하지만 처음 접하시는 분들은 어렵게 느낄 수 밖에 없습니다. 그래서 이번 강의는 코딩에 입문하시는 왕초보 분들을 위해 쉽고! 알찬! 내용을 준비했습니다. 💪🙂

      초급

      초급

      JavaScript, ES6

      입문자를 위한, ES6+ 최신 자바스크립트 입문강의 썸네일

      입문자를 위한, ES6+ 최신 자바스크립트 입문

      짐코딩

      [Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)강의 썸네일

      [Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

      닭강정

      React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

      초급

      초급

      React, Electron, GUI

      [Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)강의 썸네일

      [Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

      닭강정

      SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문강의 썸네일

      SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문

      코딩도니

      React 프론트엔드와 SpringBoot 백엔드를 AWS 클라우드에 직접 배포하는 포트폴리오 중심 강의! 빠르게 자신의 포트폴리오에 프론트, 백앤드 프로젝트를 배포하고 싶은 분들에게 도움이 되는 강의입니다! 배포하는 데 필요한 지식들을, 서버 설정부터 Docker, Domain 연결, Nginx, HTTPS 적용까지 단계별로 단기간 실습할 수 있게 됩니다!

      초급

      초급

      React, Java, AWS

      SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문강의 썸네일

      SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문

      코딩도니

      Building a Server Framework from Scratch: Cloning the Express.js Engine강의 썸네일

      Building a Server Framework from Scratch: Cloning the Express.js Engine

      nhcodingstudio

      This course goes beyond simply using Express.js. You will rebuild its internal engine from start to finish, gaining hands-on experience with the real principles of how a server works. By directly creating each component of Express—such as routing, middleware, request–response objects, static file handling, and template rendering—you will grow as a server developer and truly understand how a framework operates at its core.

      초급

      초급

      JavaScript, Node.js, Express

      Building a Server Framework from Scratch: Cloning the Express.js Engine강의 썸네일

      Building a Server Framework from Scratch: Cloning the Express.js Engine

      nhcodingstudio

      React Native with Expo: 제로초에게 제대로 배우기강의 썸네일

      React Native with Expo: 제로초에게 제대로 배우기

      제로초(조현영)

      웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

      초급

      초급

      React, React Native, 하이브리드 앱

      React Native with Expo: 제로초에게 제대로 배우기강의 썸네일

      React Native with Expo: 제로초에게 제대로 배우기

      제로초(조현영)

      부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프강의 썸네일

      부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

      영코디 킴쌤

      디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의[개정판] 입니다.

      초급

      초급

      Bootstrap, 반응형 웹, 웹 디자인

      부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프강의 썸네일

      부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

      영코디 킴쌤

      제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트강의 썸네일

      제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트

      nhcodingstudio

      Express.js를 사용하는 수준을 넘어서, 실제로 그 내부 엔진을 처음부터 끝까지 직접 구현하며 진짜 서버의 동작 원리를 몸으로 체득하는 강의입니다. 라우터, 미들웨어, 요청-응답 객체, 정적 파일 처리, 템플릿 렌더링 등 Express의 모든 구성요소를 처음부터 직접 만들어보며 서버 개발자로 성장하는 경험을 제공합니다.

      초급

      초급

      JavaScript, Node.js, Express

      제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트강의 썸네일

      제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트

      nhcodingstudio

      제로베이스부터 배우는 웹개발의 개념과 바이브 코딩강의 썸네일

      제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

      신제용

      빠른 실행과 검증의 시대, 바이브 코딩으로 누구보다 빠르게 실행하세요! 광고, 결제 등 수익화까지 빼놓지 않고 내 손으로 이루어 보세요.

      입문

      입문

      React, 웹앱, Next.js

      제로베이스부터 배우는 웹개발의 개념과 바이브 코딩강의 썸네일

      제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

      신제용

      순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프강의 썸네일

      순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

      영코디 킴쌤

      부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

      초급

      초급

      HTML/CSS, 반응형 웹, 인터랙티브 웹

      순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프강의 썸네일

      순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

      영코디 킴쌤