리액트 기초 (Introduction to React)

설명대장 얄코의 녹진하고 꾸덕한 강좌로 가장 쉽게, 가장 빠르게 리액트를 배우세요!

모던 프론트엔드 프레임워크 중 가장 인기있는 React(리액트), 하지만 배우기가 어렵습니다. 이를 해결하기 위해 훅(Hook)이 나왔습니다. 본 강의는 훅을 이용해 React를 쉽게 배울 수 있도록 도와드립니다.

본 과정은 React에서 상태 관리를 효율적으로 다루기 위한 useContext와 useReducer 훅을 집중적으로 학습하는 과정입니다. 컴포넌트 간 데이터 전달의 복잡성을 줄이고, 규모 있는 애플리케이션에서 상태를 체계적으로 관리할 수 있는 방법을 실습과 함께 익힐 수 있습니다. 이를 통해 학습자는 전역 상태 관리의 기본 개념을 이해하고, 실제 프로젝트에서 바로 적용할 수 있는 실무 활용 능력을 갖출 수 있습니다.

개발 프로젝트를 위한 미션 콘텐츠입니다. DevTime이라는 타이머 앱을 직접 구현해보면서 프로젝트 실습을 해볼 수 있도록 PRD 기획 문서, Figma 시안, API 엔드포인트를 제공합니다. 실제 서비스와 유사한 수준의 프로젝트를 구현해 보면서 그동안 학습한 지식을 완벽하게 자신의 것으로 만들어 보세요 🚀

AI 시대의 웹 개발자는 코딩뿐 아니라 AI를 활용해 아이디어를 실제 결과물로 완성하는 능력이 중요합니다. Stitch와 Figma Make를 활용한 UI 제작부터 React 구현과 배포까지 경험하며, 실무와 포트폴리오에 활용할 수 있는 AI 웹 개발 역량을 키워보세요.

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

React 기반의 간단한 SNS 서비스를 만들면서 REST API 및 GraphQL을 연습합니다. 프론트엔드 개발을 위한 백엔드 환경을 쉽고 간단하게 만드는 방법을 소개합니다.

이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

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

리액트 개발자라면 누구나 한 번쯤 useMemo, useCallback과 씨름하며 "이걸 꼭 수동으로 해야 하나?"라는 의문을 가져보셨을 겁니다. 드디어 그 고민을 해결해 줄 React Compiler가 등장했습니다. 하지만 새로운 기술이 나올 때마다 방대한 공식 문서를 처음부터 끝까지 정독하는 것은 부담스러운 일입니다. 그래서 제가 리액트 컴파일러 공식 문서를 꼼꼼하게 분석하고, 핵심만 뽑아 쉽게 이해할 수 있는 강좌를 준비했습니다. 이 강좌에서는 이런 내용을 다룹니다: - Why: 리액트 컴파일러가 왜 등장했는지, 기존 방식과 무엇이 다른지 - How: 프로젝트에 바로 적용하는 설치 및 설정 방법 - Troubleshooting: 공식 문서에서 강조하는 주의사항과 에러 해결 팁 이제 수동 메모이제이션의 고통에서 벗어나 비즈니스 로직에만 집중하세요. 이 강좌가 여러분의 리액트 개발 경험을 한 단계 업그레이드해 줄 것입니다.

Next.js + Cursor IDE 로 챗 프로그램을 한시간만에 구현하는 능력을 가질 수 있어요.

"리엑트 잘하는 개발자되기" 책이 출간되었습니다. 이 책은 리액트 학습 전에 필요한 웹의 기본 원리부터 최신 리액트 훅까지 체계적으로 안내하여 탄탄한 기초 지식을 제공합니다. 총 40개 이상의 다채로운 실전 프로젝트와 풍부한 실습 예제를 통해 이론을 실무에 바로 적용하며 문제 해결 능력을 키울 수 있습니다. 또한 리덕스 툴킷, 주스탠드, 파이어베이스 등 현대 웹 개발에 필수적인 기술들을 함께 익혀 완성도 높은 리액트 애플리케이션 개발자로 성장하도록 돕습니다.

AI 시대에도 개발자에게는 코드를 이해하고 실제 서비스를 완성하는 능력이 필요합니다. HTML/CSS/JavaScript 기본기를 바탕으로 React와 Firebase를 활용해 로그인, 데이터 관리, 이미지 업로드부터 배포까지 직접 구현하며 실전 웹 개발 역량을 키워보세요.

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

클로드 코드로 설계부터 TDD, CI까지 완성. 한 기능을 spec 한 줄에서 main 머지까지.

SpringAI + React로 만들어보는 나만의 감정일기 서비스 Neo + Essential과 함께 만들어보는 4번째 프로젝트 시간입니다!

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

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

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

"왜 AI가 이런 코드를 짰지?", "왜 방금 말한 걸 기억 못 하지?" 클로드 코드(Claude Code)와 같은 AI 도구를 쓰다 보면 마주하는 답답함, 그 원인은 도구가 어떻게 동작하는지 모르니까입니다. 이 강의는 그 블랙박스를 투명하게 열어젖힙니다. 우리는 25강에 걸쳐 LLM에게 파일을 보는 '눈(Read)', 코드를 고치는 '손(Edit)', 명령을 수행하는 '발(Bash)'을 직접 달아주며, 실제 현업 도구와 똑같이 동작하는 나만의 Coding Agent를 밑바닥부터 구현합니다. 단순히 라이브러리 사용법을 배우는 것이 아닙니다. AI가 어떻게 프로젝트 구조를 파악하고, 왜 긴 대화에서 기억을 잃는지, 그것을 기술적으로 어떻게 해결하는지(Sliding Window, Summary) 직접 코드로 구현하며 체득합니다. 이 과정을 통해 여러분은 AI 도구의 단순한 '사용자'에서, 작동 원리를 꿰뚫고 도구를 내 입맛대로 개조하고 평가할 수 있는 'AI 공급자'의 시야를 갖게 될 것입니다.