궁극의 React JS 반응형 포트폴리오 웹사이트

이 강의에서 저는 Next.js 14, React.js, Tailwind CSS, 그리고 Nodemailer를 사용하여 완벽하고 현대적이며 전문적인 포트폴리오 웹사이트를 구축하는 과정을 단계별로 안내해 드릴 것입니다. 학생들이 복잡한 프론트엔드 개념을 이해하도록 도왔던 저의 경험을 바탕으로, 명확한 설명과 실제 사례, 그리고 실질적인 구현에 집중합니다. 단순히 이론을 설명하는 데 그치지 않고, 프로젝트 설정부터 최종 배포까지 모든 과정을 함께 구축하며 기술이 왜, 그리고 어떻게 작동하는지 완전히 이해할 수 있도록 돕습니다. 여러분은 App Router, 파일 코로케이션(file colocation), 프라이빗 및 다이내믹 라우트, 네비게이션, 레이아웃, 메타데이터, 로딩 상태를 포함한 Next.js 14의 핵심 개념을 배우게 됩니다. 기본 개념이 명확해지면 동적 콘텐츠, 부드러운 스크롤 애니메이션, 다운로드 가능한 PDF 파일, 그리고 스크롤 상태에 따라 작동하는 CTA(Call-to-Action) 버튼을 갖춘 전체 포트폴리오 웹사이트를 제작할 것입니다. 강의가 끝날 때쯤 여러분은 Vercel에 웹사이트를 배포하고 GitHub에 소스 코드를 공개하게 되며, React 라우팅과 Next.js 라우팅의 차이점을 확실히 이해하고 실제 서비스 가능한 수준의 애플리케이션을 구축하는 방법을 알게 될 것입니다. Next.js에 대한 사전 경험은 필요하지 않습니다.

이 강의는 React 코드를 한 번도 작성해 본 적이 없는 웹 개발자라도 기초부터 차근차근 배울 수 있도록 설계되었습니다. JSX, 컴포넌트, props, state, 이벤트와 같은 기본 개념부터 시작하여 API 요청 통합 및 완전한 기능을 갖춘 웹 애플리케이션 구축에 이르기까지 단계별로 안내합니다. 넷플릭스 클론(Netflix Clone) 및 관리자 대시보드(Admin Dashboard)와 같은 실무 프로젝트를 따라가며 React의 개념을 이해할 뿐만 아니라, 실제 개발 문제를 효율적으로 해결하는 방법도 배우게 됩니다. 저의 강의 방식은 명확한 예시와 설명, 그리고 동적이고 반응형인 웹 인터페이스에서의 실질적인 활용법을 제공하여 그 어떤 수강생도 뒤처지지 않도록 돕습니다.

이 강의는 학생들이 React를 깊이 있게 이해하고 실무 프로젝트에 자신 있게 적용할 수 있도록 설계되었습니다. 수년간의 강의와 멘토링을 통해, 저는 많은 학습자들이 기초를 제대로 이해하지 못하거나 실제 애플리케이션에서 각 요소가 어떻게 연결되는지 파악하지 못한 채 여러 튜토리얼을 전전하며 어려움을 겪는다는 것을 알게 되었습니다. 이 강의에서는 기초부터 시작해 고급 개념까지 단계별로 React를 가르침으로써 그 문제를 해결합니다. 모든 주제는 명확하게 설명된 후 실무 프로젝트에 즉시 적용됩니다. 저는 모범 사례(Best Practices), 클린 코드, 그리고 실제 개발 워크플로우에 집중합니다. 이를 통해 학생들은 단순히 React를 배우는 것에 그치지 않고, React 개발자처럼 생각하는 법을 배우게 됩니다. 강의를 마칠 때쯤 학생들은 세 개의 완성된 프로덕션급 애플리케이션을 구축하게 되며, 자신만의 React 프로젝트를 직접 만들고 배포하는 데 자신감을 갖게 될 것입니다.

이 강의는 React 코드를 한 번도 작성해 본 적이 없는 웹 개발자라도 기초부터 차근차근 배울 수 있도록 설계되었습니다. JSX, 컴포넌트, props, state, 이벤트와 같은 기본 개념부터 시작하여 API 요청 통합 및 완전한 기능을 갖춘 웹 애플리케이션 구축에 이르기까지 단계별로 안내합니다. 넷플릭스 클론(Netflix Clone) 및 관리자 대시보드(Admin Dashboard)와 같은 실무 프로젝트를 따라가며 React의 개념을 이해할 뿐만 아니라, 실제 개발 문제를 효율적으로 해결하는 방법도 배우게 됩니다. 저의 강의 방식은 명확한 예시와 설명, 그리고 동적이고 반응형인 웹 인터페이스에서의 실질적인 활용법을 제공하여 그 어떤 수강생도 뒤처지지 않도록 돕습니다.

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

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

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

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

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

이 강의를 통해 전반적인 프런트엔드 테스트 종류를 파악하고, 상황에 맞는 적절한 테스트 선택을 통해 신뢰감 있는 테스트를 작성하는 방법을 배웁니다.

부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기[2024년 개정판] 수업의 실전 제작수업으로 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 페이지를 부트스트랩4를 활용하여 직접 제작해 봅니다.

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

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

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

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

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

ES6+ 제대로 알아보기 강좌는 Javascirpt의 ES6 및 이후의 표준 ECMAScript 명세에 대하여 이론을 바탕으로 ES5와 달라진 점 및 개념과 동작 원리를 깊이 있게 알려드립니다.

이론과 실습을 통해 자바스크립트를 익힐 수 있는 강의입니다. 코딩을 처음 접하시는 분들도 쉽게 이해할 수 있도록 차근차근 설명하고 있습니다. Part 1은 자바스크립트의 개요와 변수, 자료형, 연산자, 제어문과 jQuery의 기초를 다루고 있습니다.

전세계 웹사이트에서 75%이상이 사용하고 있는 javascript 라이브러리 jQuery ! 화려한 효과보다는 원리를 이해하며 기본기를 다질수 있도록 구성했습니다. 제이쿼리 기초부터 활용까지 학습하여 여러분만의 포트폴리오를 완성하거나, 현업에서 바로 활용해보세요.

GraphQL의 프론트엔드와 백엔드를 한번에 배울 수 있는 기회

Google Spreadsheets + Google apps script + Google drive + Bootstrap를 사용해, 24시간 무료로 동작하는 Simple한 blog를 빠르게 만들어봅시다!

생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.