강의

N
챌린지

멘토링

N
클립

커뮤니티

NEW
개발 · 프로그래밍

/

웹 개발

제대로 배우는 React: 미션으로 완성하는 렌더링의 본질과 선언형 UI [Part 1 – 기초편]

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

15명 이 수강하고 있어요.

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

이런 걸 배울 수 있어요

  • 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의 기초 문법

안녕하세요
입니다.

376

명

수강생

24

개

수강평

8

개

답변

4.7

점

강의 평점

12

개

강의

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

우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, 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분)

해당 강의에서 제공:

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

얼리버드 할인 중

₩19,360

60%

₩48,400

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

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

이벤트부터 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: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]강의 썸네일

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

nhcodingstudio

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

입문

입문

JavaScript, HTML/CSS, 웹앱

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

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

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

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계강의 썸네일

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계

nhcodingstudio

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

초급

초급

JavaScript, Node.js, Express

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계강의 썸네일

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계

nhcodingstudio

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

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

초급

초급

JavaScript, HTML/CSS, 객체지향

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

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

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

nhcodingstudio

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

초급

초급

express.js, Node.js, routing

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

제대로 배우는 Express.js: 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

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

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

nhcodingstudio

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

입문

입문

HTML/CSS

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

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

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

구조 탐색과 조작의 모든 것 - [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

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어강의 썸네일

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

제주코딩베이스캠프

프론트엔드 개발자인데 로그인 기능을 구현하지 못해 아쉬웠던 적 있으신가요? DB를 이용해 데이터를 저장하고 불러오는 기능을 구현하고 싶지만 쿼리를 공부하기는 부담스러우셨나요? 파이어베이스라면 쉽게 가능합니다! 리액트와 파이어베이스의 힘으로 유저 인증, 데이터 저장, 호스팅 등 웹 개발에 필수적인 기능들을 같이 구현해봅시다! (해당 강의는 22년 8월 녹화로 파이어베이스의 메이저 업데이트를 반영한 강의입니다.)

초급

초급

Firebase, React

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어강의 썸네일

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

제주코딩베이스캠프

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)강의 썸네일

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

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

초급

초급

React, Electron, GUI

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)강의 썸네일

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

피그마 가이드를 이용한 PWA 네이티브 앱 제작 - Figma + HTML + CSS + Progressive Web APP (활용)강의 썸네일

피그마 가이드를 이용한 PWA 네이티브 앱 제작 - Figma + HTML + CSS + Progressive Web APP (활용)

유용한IT학습

앱은 우리 일상에서 중요한 역할을 합니다. 하지만 네이티브 앱을 개발하고 유지·보수하는 과정은 길고 복잡하며, 많은 비용이 들기도 합니다. 본 강의에서는 2024년 9월 현재 주목받고 있는 대안인 프로그레시브 웹 앱(Progressive Web App, PWA)을 소개합니다. PWA는 웹 기술과 네이티브 앱의 장점을 결합한 방식으로, 더 빠르고 효율적인 앱 개발과 유지 관리를 가능하게 합니다. 실습과 함께 PWA의 개념, 장점, 구현 방법을 단계별로 학습하며, 실무에 바로 적용할 수 있는 역량을 갖추게 됩니다.

입문

입문

HTML/CSS, JavaScript

피그마 가이드를 이용한 PWA 네이티브 앱 제작 - Figma + HTML + CSS + Progressive Web APP (활용)강의 썸네일

피그마 가이드를 이용한 PWA 네이티브 앱 제작 - Figma + HTML + CSS + Progressive Web APP (활용)

유용한IT학습

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

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

닭강정

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

초급

초급

gemini, HTML/CSS, TailwindCSS

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

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

닭강정

오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1강의 썸네일

오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1

유용한IT학습

리액트(React)는 페이스북에서 만든 오픈 소스 자바스크립트 라이브러리입니다. 자바스크립트를 사용하여 컴포넌트 기반으로 UI를 만들 수 있습니다. SPA(Single Page Application)을 만드는데 최적화된 현재 가장 인기있는 프런트엔드 개발 라이브러리인 리액트를 사용하여 웹 개발을 하는데 필요한 모든 구성 요소를 학습합니다. Part1에서는 리액트(React)를 사용한 웹 개발에 대한 기본 개념을 학습합니다.

초급

초급

React

오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1강의 썸네일

오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1

유용한IT학습

간단하게 알아보는 React 디자인 패턴강의 썸네일

간단하게 알아보는 React 디자인 패턴

민호

React의 핵심 디자인 패턴을 개념과 예제로 빠르게 익혀봐요!

초급

초급

React, TypeScript, 디자인 패턴

간단하게 알아보는 React 디자인 패턴강의 썸네일

간단하게 알아보는 React 디자인 패턴

민호

웹 게임을 만들며 배우는 React에 TypeScript 적용하기강의 썸네일

웹 게임을 만들며 배우는 React에 TypeScript 적용하기

제로초(조현영)

리액트로 만든 웹 게임과 React Router, Redux, MobX에 타입스크립트를 붙여보면서 리액트와 타입스크립트를 같이 사용해봅시다.

중급이상

중급이상

React, TypeScript

웹 게임을 만들며 배우는 React에 TypeScript 적용하기강의 썸네일

웹 게임을 만들며 배우는 React에 TypeScript 적용하기

제로초(조현영)

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

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

코딩도니

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

초급

초급

React, Java, AWS

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

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

코딩도니

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

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

초급

초급

JavaScript, HTML/CSS, 객체지향

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

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: 제로초에게 제대로 배우기

제로초(조현영)

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

효과적인 모바일 UX 만들기 (디자인 + 코딩)강의 썸네일

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

Photoshop과 Adobe XD 프로그램을 활용해 다양한 디바이스의 웹, 앱 레이아웃을 디자인해 본 뒤 간단한 코딩 기술을 학습해 직접 구현해볼 수 있게 됩니다.

초급

초급

HTML/CSS, jQuery, XD

효과적인 모바일 UX 만들기 (디자인 + 코딩)강의 썸네일

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)강의 썸네일

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

중급이상

중급이상

React, Next.js, cursor

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)강의 썸네일

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계강의 썸네일

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계

nhcodingstudio

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

초급

초급

JavaScript, Node.js, Express

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계강의 썸네일

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계

nhcodingstudio

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)강의 썸네일

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

코딩웍스(Coding Works)

웹 퍼블리셔를 위한 JS 핵심이론 및 실전예제 교재 및 완성본은 PDF로 제작된 강의 교재입니다. 해당 교재는 웹 퍼블리셔가 꼭 알아야 하는 자바스크립트와 제이쿼리 기본기를 충실히 갖출 수 있는 역할을 합니다. 해당 교재 특징으로는 이론과 연결된 스몰미션(Small Mission)을 통해서 이론을 더욱 탄탄히 할 수 있습니다. 특히 배운 모든 이론을 활용한 실전 예제 역시 충실히 준비된 교재입니다. 해당 PDF 전체 페이지는 순수 자바스크립트(Vanlila JavaScript)와 제이쿼리(jQuery) 페이지 수는 320페이지 이상으로 코딩웍스가 쉽게 이해할 수 있도록 충분한 설명을 덧붙여 놓았습니다. 특히, 퍼블리셔가 웹사이트 제작을 위해 필수적인 제이쿼리 상호작용 실전 예제를 학습하실 수 있습니다.

초급

초급

JavaScript, jQuery, HTML/CSS

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)강의 썸네일

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

코딩웍스(Coding Works)

클린업 JavaScript: 점프업!강의 썸네일

클린업 JavaScript: 점프업!

김영보

자바스크립트 최종 코스! ES2025 기준 실행 콘텍스트 구조와 방법, Event Loop, 멀티 스레딩을 다룹니다. 자바스크립트 언어에 담겨진 언어 문화를 다룹니다.

초급

초급

JavaScript

클린업 JavaScript: 점프업!강의 썸네일

클린업 JavaScript: 점프업!

김영보

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

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

아이티커넥트

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

입문

입문

HTML/CSS, Java, 웹앱

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

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

아이티커넥트

iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

초급

초급

React Native, React, ES6

iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho