JavaScript로 배우는 fullPage + anime + SVG Animation 포트폴리오

이런 고민, 해보신 적 있나요? React는 배웠는데 막상 무엇을 만들어야 할지 모르겠다 포트폴리오를 만들고 싶은데 Todo 앱 말고는 떠오르지 않는다 지도 API나 공공 API는 어려워 보여서 시도조차 못 해봤다 배포까지 해본 적이 없어 항상 “로컬 프로젝트”로만 끝난다 코드가 점점 복잡해지는데 설계를 어떻게 해야 할지 모르겠다 🎯 이 강의가 해결해 주는 문제 이 강의는 단순히 지도를 띄우는 법을 알려주는 강의가 아닙니다. ✔ 공공 API를 실제 서비스에 연결하는 방법 ✔ 지도 SDK를 React 구조 안에서 안정적으로 설계하는 방법 ✔ 마커 최적화와 인포윈도우 재사용 구조 ✔ Context를 활용한 상태 관리 설계 ✔ Tailwind + SCSS 실전 활용 ✔ GitHub 정리 및 Vercel 배포까지 “기능 구현”이 아니라 실제 서비스 구조로 설계하는 방법을 알려드립니다. 💡 단순 따라치기 강의가 아닙니다 왜 useRef를 쓰는지 왜 마커를 매번 새로 만들면 안 되는지 왜 상태를 분리해야 하는지 왜 배포 환경에서는 환경변수를 따로 관리해야 하는지 모든 선택에는 이유가 있습니다. 이 강의는 그 “이유”를 설명합니다. 🚀 수강 후 여러분은 이렇게 됩니다 지도 기반 포트폴리오 프로젝트 1개 완성 공공 API 연동 경험 확보 외부 SDK를 React에 붙이는 구조 이해 실무형 프로젝트 구조 설계 경험 배포 경험 보유 그리고 면접에서 이렇게 말할 수 있습니다. “공공 API 기반 지도 서비스를 직접 설계하고 배포해봤습니다.” 이 한 문장이 큰 차이를 만듭니다. 👩‍💻 이런 분들께 추천합니다 React 기본 문법은 알고 있지만 프로젝트 경험이 부족한 분 취업용 포트폴리오를 만들고 싶은 분 지도/공공 API 프로젝트를 해보고 싶었던 분 실무에 가까운 설계를 배우고 싶은 분 🔥 이 강의의 목표 이 강의는 “지도 만드는 법”이 아니라“서비스를 설계하는 사고방식”을 배우는 강의입니다.

웹 표준 입문자를 위한 실무에서 반드시 사용하는 필요한 액기스만 모아 만든 반응형 웹 초급 강의!

실무에서 하자! 스크롤에 대응하는 반응형 웹 포트폴리오 #제일엔지니어링

HTML+CSS+JS 실전 포트폴리오(시즌3)는 퍼블리싱 실전 예제를 제작하는 과정입니다. 다양한 실전 예제 제작을 통해서 퍼블리싱 실력을 중상급으로 성장할 수 있습니다. 34시간 이상의 충분한 강의 시간과 다양한 종류의 실전 제작 과정이므로 제작 노하우와 응용 방법을 충분히 익힐 수 있습니다.

이 강좌는 함수형 프로그래밍과 JavaScript ES6+의 시리즈 강좌로 다양한 응용 사례를 다룹니다.

초등학생 코딩교육부터 시작하여 IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자인 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 쉽고 재미있는 코딩강의를 이제 오프라인 뿐만 아니라 온라인에서도 만나실 수 있습니다. 500여명이 넘는 프론트엔드, 백엔드, 풀스택, 웹 개발자를 배출해온 영코디 킴쌤과 함께라면 당신의 개발자 꿈도 곧 현실이 됩니다!

코딩 1위 유튜버 조코딩의 실전 압축! 쉽고 재미있는 웹 풀스택 개발 강의

한 강의로 끝내는 TailwindCSS 입문부터 실전까지! 두 개의 프로젝트와 함께 레이아웃 구성부터 반응형 디자인! 다크모드! 까지 완벽하게 배워보세요.

[웹사이트제작 Step By Step] Basic-course로, 돕다(http://dopda.co.kr/) 메인페이지를 그대로 제작해 보는 과정입니다. 본 Basic Course는 CSS 레이아웃 제작과 애니메이션에 대해 다루며, 이어서 Application-course에서는 이미지슬라이드 효과, 반응형제작, 스크롤 애니메이션, Fix Header 등의 인터렉티브 요소를 추가하여 개설될 예정입니다.

JS를 쓰고는 있지만 왜 되는지 설명하기 어렵다면, 이 강의가 그 답을 드립니다. 실행 컨텍스트, 클로저, 이벤트 루프부터 Promise 동시성, 프로토타입, 가상 DOM, 메모리 누수, 번들 최적화까지 - JS 고급 개념 18챕터를 읽는 것이 아니라 시뮬레이터로 직접 눈앞에서 확인하며 학습합니다. 챕터마다 코드 기반 퀴즈가 제공되며, 치킨 한 마리 값으로 평생 소장할 수 있습니다.

🌟 자바스크립트의 기초부터 고급까지, 진짜! 자바스크립트 강의에서 시작하세요! 🌟

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

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

이 강의는 AI 시대에 개발 생산성을 극대화하는 방법을 배우고 싶은 분들을 위한 실전 중심 강의입니다. 단순히 AI를 사용하는 방법을 넘어서, 실제 개발 환경에서 Claude Code를 어떻게 활용해야 하는지, 그리고 어떻게 하면 “제대로 된 결과”를 만들 수 있는지에 집중합니다. 많은 개발자들이 AI를 사용하면서도 ❌ 결과가 일관되지 않거나 ❌ 코드 품질이 떨어지거나 ❌ 프로젝트가 점점 복잡해지는 문제를 겪고 있습니다. 이 강의에서는 이러한 문제를 해결하기 위해 ✔ 스펙 기반 워크플로우 ✔ 구조화된 명령어 시스템 ✔ 서브에이전트 및 자동화 전략 을 통해 AI를 도구가 아닌 ‘개발 파트너’로 활용하는 방법을 알려드립니다. 또한 Firebase, Figma, GitHub, Vercel과 같은 실제 서비스와 연동하여 처음부터 끝까지 하나의 애플리케이션을 완성하고 배포하는 경험을 제공합니다.

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

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

만들면서 배우는 파이썬 웹개발 A to Z! 웹 기초부터 블로그 개발, 배포까지 한 번에 배워요.

ChatGPT를 클론코딩하며 처음부터 끝까지 직접 구현해보는 풀스택 실습 강의입니다. Spring Boot 서버와 React 프론트엔드까지 | Neo + Essential 단순히 코드만 따라 치는 강의가 아니라, 실제 서비스 배포를 통해 완성도 높은 AI 챗봇 서비스를 구축할 수 있도록 안내합니다.

svg를 이용하여 간단한 그림을 그리고 사이트에 적용시킵니다. 포트폴리오에 적용하면 돋보이는 페이지가 됩니다.

웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

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

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

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