Next + React Query로 SNS 서비스 만들기

AI 시대가 도래하며 개발자에게 요구되는 능력은 점점 더 복잡해지고 있습니다. "프론트엔드만 잘하면 되겠지"라고 생각했지만, 나만의 서비스를 만들거나 AI 기능을 붙이려다 보면 결국 백엔드라는 거대한 벽에 부딪히게 됩니다. 하지만 막상 백엔드를 시작하려니 데이터베이스 설계, 사용자 인증(Auth), 스토리지 관리, 그리고 복잡한 인프라 구축까지 배워야 할 것이 너무 많아 압도되셨나요? 이제 그 무거운 짐을 내려놓으세요. 본 강의에서는 이 모든 백엔드 기능을 단숨에 해결해 주는 Supabase를 활용합니다. 복잡한 서버 지식 없이도 백엔드를 '뚝딱' 완성하고, 아이디어를 즉시 구현하는 풀스택 개발자로 거듭나는 가장 빠른 지름길을 안내합니다.

노드가 무엇인지부터, 자바스크립트 최신 문법, 노드의 API, npm, 모듈 시스템, 데이터베이스, 테스팅 등을 배우고 5가지 실전 예제로 프로젝트를 만들어 나갑니다. 클라우드에 서비스를 배포해보기도 하고 노드 프로젝트를 타입스크립트로 전환해도 봅니다.

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

HTTP를 다루는 개발자이거나 개발자가 되고 싶은데 컴퓨터 학과를 전공하지 않아 네트워크가 약하신 분들, 이 강좌 하나로 평생 지식을 얻어가세요!

Node.js의 스프링이라고 불리는 NestJS를 배우고, Dependency Injection의 편리함을 맛봅시다. API 개발부터, 익스프레스와의 비교, 배포, 테스팅까지 모두 배워봅시다.

본 강의에서는 자바스크립트를 활용해 프로그래밍 사고력을 기르는 연습을 합니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 반응 속도 테스트, 틱택토, 로또 추첨기, 가위바위보, 카드 짝맞추기 게임, 텍스트 RPG, 지뢰 찾기, 2048게임, 두더지 잡기까지 함께 만들어봅시다.

타입스크립트/자바스크립트로 그림판을 만들어보며 다양한 디자인 패턴의 쓰임과 장단점을 알아봅니다. canvas api를 배울 수 있는 것은 보너스!

본 강의에서는 테스트가 필요한 경우와 테스트를 할 때의 장점을 Jest 프레임워크를 통해 보여드립니다. 리액트, Express 등에 유닛테스트, 통합테스트를 적용해봅니다.

알고리즘 공부의 필수 선수과목인 자료구조! 다양한 자료구조를 자바스크립트로 배워봅시다!

이미 개발자이거나 개발자가 되고 싶은데 컴퓨터 학과를 전공하지 않아 데이터베이스가 약하신 분들, 이 강좌 하나로 평생 지식을 얻어가세요!

타입스크립트 기본 문법을 배운 상태에서, 유명한 라이브러리들의 복잡한 타입을 분석하는 방법을 알아봅시다.

타입스크립트 기본 문법을 배우고, 다른 사람이 작성한 타입을 분석하는 방법과, 내가 직접 타입을 작성하는 방법에 대해 알아봅니다.

리액트 네이티브로 라이더용 배달앱을 만들어봅니다. 6년간 리액트 네이티브로 5개 이상의 앱을 만들고, 카카오 모빌리티에 매각한 개발자의 강의입니다.

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

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

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

리덕스와 몹엑스 뭘 선택할지 고민되시나요? 일단 둘 다 배우고나서 고민합시다!

간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다.

Vue와 Nuxt 프레임워크를 사용해 SNS 서비스를 만듭니다. 서비스에 필요한 풀스택 지식을 학습합니다.

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

리액트를 공부하다가 포기하셨나요? 코딩이 처음인 쌩초보, 비전공자도 자바스크립트부터 리액트까지, 포기하지 않고 React로 가는 길을 열어드립니다.

Gatsby v5를 통해 직접 나만의 기술 블로그를 개발해보는 강의입니다.

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

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

Spring Boot + React.js 로그인 (+소셜) 서비스 이해하기는 JWT 기반 인증 및 소셜 로그인(Kakao/Google)을 포함한 실전형 로그인 시스템을 직접 구현하며 프론트엔드와 백엔드 인증 흐름을 깊이 이해할 수 있도록 설계된 강의입니다. 프론트엔드는 React.js, 백엔드는 Spring Boot를 기반으로 구성되며, 실제 서비스 환경에서 사용되는 Access Token + Refresh Token 방식, HttpOnly Cookie, Redux를 활용한 사용자 상태 관리, Role 기반 권한 처리, 소셜 로그인 연동까지 하나씩 따라하며 익힐 수 있습니다.

Whisper를 로컬에서 실행하고, FastAPI와 Next.js를 활용해 AI 음성 인식 앱을 빠르게 개발하는 실전 프로젝트 강의입니다. 실시간 음성 인식까지 구현하며, 짧은 시간 안에 간단한 포트폴리오로 활용할 수 있는 결과물을 완성할 수 있습니다.

누구보다 빠르게 배우는 Springboot + NextJS RestAPI 게시판 만들기! Springboot 로 CRUD 서버를 개발하고 NextJS로 나만의 게시판을 만들어보세요!

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

"생성형 AI를 활용해 기획·디자인·구현·배포까지 완성하는 웹개발 실전 프로젝트 강의" 아이디어 구상부터 시작해서, AI로 디자인 뚝딱 만들고, React로 실제 작동하는 웹사이트 구현, 그리고 인터넷에 배포까지 - 모든 과정을 차근차근 함께 완성합니다. Stitch와 Figma Make 같은 최신 AI 도구들이 디자인 작업을 도와주고, 복잡한 코딩도 단계별로 쉽게 따라할 수 있게 알려드려요.

현직 스타트업 CTO가 실제 서비스와 여러 외주를 통해서 얻은 바이브코딩 지식 전수해드립니다.

누구보다 빠르게 배우는 Springboot + React RestAPI 게시판 만들기 Springboot 로 CRUD 서버를 개발하고 React로 나만의 게시판을 만들어보세요!!

리액트 네이티브로 아바타 기반 커뮤니티앱을 개발합니다. 글작성 뿐만아니라 댓글/대댓글, 좋아요, 투표, 아바타 생성 등 완성도 있는 커뮤니티앱을 만드는 과정을 배우게 됩니다.

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

타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

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

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

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

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

요즘 LLM이 개발 환경을 바꾸고 있지만, 진짜 중요한 건 “코드를 대신 쓰는 것”이 아니라 서비스에 기능으로 붙이는 것입니다. 이 강의는 Next.js + OpenAI API로 가볍지만 완성도 있는 타로 리딩 서비스를 단계별로 구현합니다. 첫 단계에서는 백엔드 없이도 가능한 MVP를 만들고, 사용자 입력 흐름(질문/스레드/카드 선택)과 결과 생성까지 연결합니다. 이후 단계에서 백엔드 구축, 일반 로그인과 OAuth, 커뮤니티 기능, 리딩 대시보드로 기능을 확장합니다. 마지막으로 AWS 배포와 구글 애드센스 연동까지 진행해 실제로 운영 가능한 형태로 마무리합니다. 또한 LLM API 사용 비용이 부담되지 않도록 요금 구조 이해와 비용 최적화 전략을 함께 다룹니다.