Frontend System Design: Frontend as a Distributed System

You use Git every day, but are there still times when it scares you? When a `git push` is rejected, when a colleague says, "Please rebase and upload," or when that "detached HEAD state" message pops up. You’ve probably had at least one moment where your mind went blank, and you ended up deleting the entire folder just to clone it again. This course is for people like you. Julia Evans' 〈How Git Works〉, beloved by developers worldwide, is finally available in Korean. This isn't a course about memorizing commands. It’s a course where we take a slow, deep look at how Git actually works under the hood. What’s inside the `.git` folder, How branches are actually stored, Where "orphaned" commits go and how to recover them, And what "up to date with origin/main" actually means. It consists of 27 pages across 6 chapters: ★ Commits ★ Branches ★ Exploring the .git folder ★ Merging ★ Remote repositories ★ Surviving disasters Once you properly grasp the internal model, you'll be able to interpret any message Git throws at you on your own. Instead of memorizing commands, you'll start using it while understanding "why it works this way." I’ll share the promise Julia made on the first page of her zine: "Once you understand the internals, you can get yourself out of any Git mess."

This is an advanced frontend course designed for students and professionals with at least one year of web development experience. It is best suited for those with 2–3 years of industry experience who are facing a plateau in their skills or wish to learn about product architectures required by large-scale enterprises.

This course is designed for those who are new to React, an essential skill in frontend development. We break down difficult concepts into easy-to-understand terms, allowing you to naturally master everything from the basic principles of React to practical application through hands-on learning. By addressing the common pain points where beginners often get stuck and providing project-based practice, we help you grow into a confident React developer.

This course is a full-stack level frontend project course that focuses on implementing Notion from start to finish using Vanilla JavaScript, going beyond simple UI cloning to deeply understand the internal operating principles. You'll implement all the core features of a real note-taking app using vanilla JS, including sidebar tree, nested document creation, auto-save, routing, trash, favorites, search modal, settings modal, theme switching, Export/Import, keyboard shortcuts, responsive layout, drag resize, and more. The goal is to solidly learn browser standard behaviors (event bubbling, DOM tree, local storage, Blob, FileReader, hash routing, etc.) that you must know before frameworks like React and Vue, so you can completely understand "why it works this way" and build the skills to debug effectively.

You can learn the basics of React. You can organize HTML, JavaScript, DOM, Event, Object, Module, OOP, etc. related to React.

No matter how much you study React, Next.js, or Vue, if the code feels abstract and the structure isn't clearly understood, the root cause might be a lack of understanding of DOM. DOM is the foundation of all frontend frameworks and the entity that connects the structure and behavior of web pages. This lecture goes beyond simple selectors or manipulation methods, teaching step-by-step from the very beginning how HTML transforms into DOM objects and how to select, traverse, and manipulate this structure. It is the Part 1 introductory lecture of 'Complete DOM Mastery'. HTML tags are just structure, and JavaScript is just behavior, but DOM is the core that connects the two. If you clearly understand this connection, you'll be able to precisely grasp the true structure and flow within any framework you use.

This is a full-stack series course aimed at developing web and app services at a commercially viable level for beginners, based on real-world experience developing web services in the field. As Part 2 of this series, this course thoroughly covers the latest HTML5, CSS3, and vanilla JavaScript + ES6, considering responsiveness and compatibility among the various frontend technologies available.

We will create a Twitter-like SNS service using the React & Next & Redux & Redux-Saga & Express stack. Finally, we will perform search engine optimization and deploy it to AWS.

Create a web page that tests your development type! MBIT (My Best IT Personalities), not MBTI! You can learn the overall process of web development by creating your own 'MBIT Test Page'. (Uses Django 3.1 version.)

This course goes beyond simply using Express.js. You will rebuild its internal engine from start to finish, gaining hands-on experience with the real principles of how a server works. By directly creating each component of Express—such as routing, middleware, request–response objects, static file handling, and template rendering—you will grow as a server developer and truly understand how a framework operates at its core.

This course teaches you how to build a web application using React and Firebase, implementing core features used in real-world services such as login, post management, file uploading, and profile management. You will build a complete web service step-by-step, implementing email and social login via Firebase Authentication, Firestore-based data storage and real-time data processing, file uploading using Firebase Storage, and profile management features. This course is designed for frontend developers to understand how to quickly implement web services using Firebase without the need for complex server construction.

This is the third course in a four-part JavaScript Bible series. It covers more than 95% of the JavaScript specification. You will be able to develop programs with a new paradigm in an ES6+ environment.

The Ultimate JavaScript Course! It covers execution context structures and mechanisms based on ES2025, the Event Loop, and multi-threading. It also explores the language culture embedded within JavaScript.

This is a lecture where you can learn JavaScript through theory and practice. We explain step by step so that even those who are new to coding can easily understand. Part 1 covers an overview of JavaScript, variables, data types, operators, control statements, and the basics of jQuery.

This is mission content for a development project. We provide a PRD planning document, Figma designs, and API endpoints so that you can practice by implementing a timer app called DevTime yourself. Make the knowledge you have learned completely your own by implementing a project at a level similar to an actual service 🚀

Throw away those simple services you can make with vibe coding in just 10 minutes! You can learn 'real' practical vibe coding. Let's create advanced services at the level of actual services according to planning and design with Cursor AI NCOP. No Code, Only Prompt

In the era of swift execution and validation, execute faster than anyone with VIBE Coding! Achieve complete monetization, from ads to payments, all by yourself.

Based on the experience of wondering how facial recognition works in offline environments on-site, this course will guide you through building the basic structure of a facial recognition-based access and attendance management system using React + Electron and Python's FastAPI-based DeepFace. Rather than focusing on perfection, we focus on understanding the operating principles and laying the foundation for you to expand into your own personal projects.

Build a fully functional smart farm platform that integrates sensor data collection, MQTT communication, web dashboards, and AI-driven environmental analysis. Experience the entire process of agricultural digital transformation (DX) through a hands-on project, covering everything from IoT sensor integration and FastAPI/Spring-based API servers to React/Vue dashboard development and cloud deployment.

Developing an AI Safety Report Service with React + Spring AI The 5th Neo + Essential project lecture is about building a Safety Report system, an idea for improving government systems!

This is a practical course where you will directly create a timer app using React, Electron, and Zustand, and even deploy it to cross-platforms (Windows, macOS, Linux). Starting with familiar React web development, you can learn the entire flow of desktop app development, including global state management via Zustand and final GUI deployment!