치킨값으로 끝내는 JS 중급

우리는 과연 HTML과 CSS를 제대로 활용하고 있을까요? 복잡한 프레임워크와 자바스크립트 로직에 갇히기 전, 웹의 본질인 마크업과 스타일링만으로 두더지 잡기부터 방탈출 게임까지 직접 구현해 봅니다. 4년 차 현직 개발자가 알려주는 '도구에 휘둘리지 않는 기본기'의 힘을 경험하세요.

안녕하세요 4년차 프론트엔드 개발자 감자입니다. 제가 처음 자바스크립트를 배울 때를 떠올려보면 유튜브나 책을 따라 칠 때는 다 이해한 것 같았는데, 막상 빈 에디터를 켜면 머리가 새하얘지는 경험을 한 적이 많았습니다. 처음엔 그저 구글링해서 찾은 코드를 복사하고 붙여넣기 바빴습니다. 그러다 보니 에러가 터지면 어디서부터 손을 대야 할지 몰라 밤을 새우며 며칠을 좌절하기도 했죠. 그때 뼈저리게 깨달았습니다. 남의 코드를 100번 복사하는 것보다, 내가 직접 원리를 알고 1줄을 짜보는 것이 진짜 실력이다. 라는 것을요. 많은 입문자분들이 자바스크립트의 높은 장벽 앞에서 이렇게 고민합니다. 🚨 "HTML/CSS로 화면은 예쁘게 만들었는데, 움직이게 하려니 막막해요." 🚨 "변수, 함수 문법은 다 외웠는데 이걸 실전에서 어떻게 조합하는지 모르겠어요." 🚨 "이벤트 버블링, DOM 조작 같은 용어만 들어도 머리가 아파요." 그래서 이 강의를 준비했습니다. 제가 수많은 삽질 끝에 터득한 '가장 확실한 지름길'만 정리해 드립니다. 저는 자료를 준비하며 어려운 개발 용어를 늘어놓지 않았습니다. 두꺼운 전공 서적에 나오는, 당장 쓰지도 않을 문법은 과감히 버렸습니다. 대신, 실무에서 숨 쉬듯 사용하는 핵심 원리들을 '컨베이어 벨트', '물감 팔레트' 같은 일상적인 비유를 통해 여러분의 머릿속에 직관적으로 꽂아드립니다. 이 강의에서는 단순히 이론만 배우지 않습니다. 이론을 배우는 즉시 아코디언, 탭 메뉴, 다크 모드 토글 등 프론트엔드 실무에서 무조건 마주하는 4가지 핵심 UI를 저와 함께 밑바닥부터 직접 만들어 봅니다. 강의를 완강하고 나면, 여러분은 더 이상 남의 코드를 긁어와 기도하며 실행 버튼을 누르는 사람이 아닐 것입니다. 화면을 어떻게 구성할지 스스로 설계하고, 내 의도대로 자바스크립트 코드를 짜내려 가는 진짜 프론트엔드 개발자로 거듭나게 될 것입니다. 저의 모든 실무 노하우를 담았습니다. 빈 에디터 앞에서 더 이상 멈추지 마세요. 이제 시작할 시간입니다.

자바스크립트 핵심 개념을 이해하고, 면접에서 말로 설명하는 훈련까지 함께 하는 강의

안녕하세요 4년차 프론트엔드 개발자 감자입니다. 제가 처음 자바스크립트를 배울 때를 떠올려보면 유튜브나 책을 따라 칠 때는 다 이해한 것 같았는데, 막상 빈 에디터를 켜면 머리가 새하얘지는 경험을 한 적이 많았습니다. 처음엔 그저 구글링해서 찾은 코드를 복사하고 붙여넣기 바빴습니다. 그러다 보니 에러가 터지면 어디서부터 손을 대야 할지 몰라 밤을 새우며 며칠을 좌절하기도 했죠. 그때 뼈저리게 깨달았습니다. 남의 코드를 100번 복사하는 것보다, 내가 직접 원리를 알고 1줄을 짜보는 것이 진짜 실력이다. 라는 것을요. 많은 입문자분들이 자바스크립트의 높은 장벽 앞에서 이렇게 고민합니다. 🚨 "HTML/CSS로 화면은 예쁘게 만들었는데, 움직이게 하려니 막막해요." 🚨 "변수, 함수 문법은 다 외웠는데 이걸 실전에서 어떻게 조합하는지 모르겠어요." 🚨 "이벤트 버블링, DOM 조작 같은 용어만 들어도 머리가 아파요." 그래서 이 강의를 준비했습니다. 제가 수많은 삽질 끝에 터득한 '가장 확실한 지름길'만 정리해 드립니다. 저는 자료를 준비하며 어려운 개발 용어를 늘어놓지 않았습니다. 두꺼운 전공 서적에 나오는, 당장 쓰지도 않을 문법은 과감히 버렸습니다. 대신, 실무에서 숨 쉬듯 사용하는 핵심 원리들을 '컨베이어 벨트', '물감 팔레트' 같은 일상적인 비유를 통해 여러분의 머릿속에 직관적으로 꽂아드립니다. 이 강의에서는 단순히 이론만 배우지 않습니다. 이론을 배우는 즉시 아코디언, 탭 메뉴, 다크 모드 토글 등 프론트엔드 실무에서 무조건 마주하는 4가지 핵심 UI를 저와 함께 밑바닥부터 직접 만들어 봅니다. 강의를 완강하고 나면, 여러분은 더 이상 남의 코드를 긁어와 기도하며 실행 버튼을 누르는 사람이 아닐 것입니다. 화면을 어떻게 구성할지 스스로 설계하고, 내 의도대로 자바스크립트 코드를 짜내려 가는 진짜 프론트엔드 개발자로 거듭나게 될 것입니다. 저의 모든 실무 노하우를 담았습니다. 빈 에디터 앞에서 더 이상 멈추지 마세요. 이제 시작할 시간입니다.

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

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

「Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성」는 로컬에서만 동작하는 튜토리얼 수준을 넘어, 대규모 트래픽을 견디는 '진짜 상용 서비스(Production)' 아키텍처 설계 지침서입니다. TanStack Query와 Zustand를 결합한 무결점 상태 동기화부터, Turbopack 기반의 100KB 미만 번들 최적화 및 고급 SEO 주입, 그리고 프록시(Proxy)와 JWT 세션을 활용한 철통같은 풀스택 보안망 구축까지 현업의 핵심 기술을 모두 다룹니다. 지긋지긋한 Hydration 에러와 CORS 장벽을 스스로 허물고, 단순한 코더를 넘어 프론트엔드 시스템 전체를 지배하는 '시니어 아키텍트'로 도약하고 싶은 분들께 이 강의를 강력히 추천합니다.

신입/현직 개발자라면 가장 어려워하는 서류 작성! 합격생들의 서류 작성법을 보고 자신만의 포트폴리오를 만들어 보세요! 합격된 서류만을 보고 이야기합니다!

React + TypeScript를 활용하여 실무 감각으로 “할 일 관리 앱(ToDo List)”을 직접 만드는 프로젝트 중심 과정입니다. 단순히 문법을 배우는 데 그치지 않고, 컴포넌트 구조 설계 → 상태 관리 → 타입 적용 → 기능 구현 → 로컬 스토리지 연동 → 배포까지 실제 서비스 형태로 완성하면서 타입스크립트의 활용 감각을 익힐 수 있습니다.

이 강의는 개발자 취업 준비 과정에서 많은 분들이 겪는 “CS와 자료구조를 공부했지만 면접에서는 말이 막히는 문제”를 해결하기 위해 만들어졌습니다. 네이버, 카카오, 토스 등에서 실제 면접을 진행하며 느낀 점은 대부분의 지원자들이 개념을 외우고는 있지만, 왜 그 개념이 필요한지, 실제 상황에서 어떻게 활용되는지는 설명하지 못한다는 것이었습니다. 이 강의는 단순 암기가 아닌, 면접관의 질문 의도를 이해하고 같은 질문에도 더 설득력 있게 답변하는 방법을 알려줍니다. OSI 7계층, 자료구조, 코딩 테스트 모두 왜 알아야 하는지, 언제 쓰이는지, 그리고 면접에서 어떻게 말해야 좋은 평가를 받는지를 중심으로 다룹니다. 면접에서 남들과 비슷한 답을 하는 사람이 아니라, 이해한 내용을 자신의 언어로 설명할 수 있는 개발자가 되기 위한 강의입니다.

AI가 뱉어낸 블랙박스 코드에 안도하던 날들은 이제 끝. 컴퓨터의 물리적 한계와 Node.js 코어 엔진의 동작 원리를 꿰뚫어, 어떤 트래픽 폭주 앞에서도 무너지지 않는 엔지니어의 통제력을 완성해 드립니다.

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

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

대한민국에서 웹기획자로 성장하여 SI 차세대 웹기획 PL로 정상을 찍기 위한 커리어 확장 로드맵을 알려드립니다.

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

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

테스트를 먼저 설계하면, 구현은 AI가 대신합니다. 개발 속도와 품질을 동시에 잡는 실무형 개발 방식!

https://opentutorials.org(생활코딩 사이트)를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다.

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

코딩을 자바스크립트로 시작하시는 분들을 위한, 가장 쉬운 자바스크립트 강의입니다.

자바스크립트 환경에서 머신러닝 개념을 다룹니다. 자바스크립트와 TensorFlow.js로 머신러닝을 구현하는 형태와 코드를 다룹니다.