Learning Express.js Properly: Part2 Engine Internal Working Principles and Clone Project

Name: Learning Express.js Properly: Part2 Engine Internal Working Principles and Clone Project
Price: 17330 KRW
Rating: 4 (3 reviews)

This course goes beyond just using Express.js—you'll implement its internal engine from scratch to truly understand how real servers work. You'll gain hands-on experience growing as a server developer by building all of Express's components from the ground up, including routers, middleware, request-response objects, static file handling, and template rendering.

(4.0) 3 reviews

26 learners

Level Basic

Course period Unlimited

nhcodingstudio

실습 중심

백엔드이해하기

express.js클론

node.js백엔드

웹서버프레임워크구현

JavaScript

Node.js

Express

backend

software-design

실습 중심

백엔드이해하기

express.js클론

node.js백엔드

웹서버프레임워크구현

JavaScript

Node.js

Express

backend

software-design

What you will gain after the course

How to fundamentally understand the core principles of web server architecture by implementing Express.js
How to Fully Understand the Inner Workings by Implementing the Entire Express.js Architecture from Scratch
How the middleware chain and next() function pass requests and continue the control flow
A structural analysis of how request (req) and response (res) objects are actually composed and passed
How to implement a static file server in a secure manner
Implement stream-based logic that directly parses JSON and URL-Encoded request bodies
How to design a RESTful router from scratch and build a complete CRUD API
Implement a structure that separates the router into modules like express.Router() and connects it with the main app
How to integrate EJS template engine to render dynamic HTML
Implementing a structure to safely handle synchronous/asynchronous errors within the middleware chain
How to verify overall server functionality and perform integration testing through automated API test scripts

🚀From "User" to "Implementer" – Core Server Development Principles Learned by Cloning Express.js

This course takes you on a journey to directly clone the engine of Express.js, the most widely used server framework in the web ecosystem, and implement its internal working principles.

I remember when I first learned Node.js and Express. It was truly impressive how routing, middleware, static file handling, and template rendering could be easily implemented with just a single line of methods like app.get() or app.use(). But at some point, the question came to mind: "Am I someone who knows how to build this, or am I just someone who uses it?"

Express is a very convenient tool, but its internal structure is hidden to that extent, making it often difficult to understand the principles by which it operates. This course was created to quench that thirst.

How is the routing system designed, why do middlewares execute in order, and how are MIME types set for static files? The process of finding answers by directly implementing and practicing all these questions is the core of this course.

By implementing Express yourself, you'll go beyond just knowing Express and gain an essential sense of server development that allows you to naturally understand the structure of other frameworks like Fastify, Flask, Django, and Spring Boot.

It's not just about knowing 'how to use it', but a journey to grow into someone who can design and implement how servers work on their own—let's start together now!

The characteristics of this course

📌An engine clone project-based course where you directly implement all core structures of Express.js - tự tay triển khai toàn bộ cấu trúc cốt lõi của Express.js

📌Visualizing and explaining how things work line by line without abstract concepts

📌 Detailed implementation of security handling and error handling that can be usefully applied in real-world practice

📌All course materials and test code provided, learn by running them yourself

📌 Grow from a developer who simply uses to a server developer who knows how to build

After completing this course

You will gain the ability to design and implement the entire web server process from scratch without Express.js.
You will gain a complete understanding of the flow from HTTP request to response in Node.js at the code level.
By implementing core practical features one by one—such as routing, middleware chains, request parsing, and static file serving—you'll gain a fundamental understanding of server development.
By understanding the internal workings of server frameworks, you'll naturally connect with the design philosophies of other frameworks like Fastify, NestJS, Django, and Spring Boot.
You'll develop the ability to break down complex features into smaller units, modularize them, and refactor them into a maintainable structure.
You'll be able to understand and explain not just Express.js, but the structure itself of how a web server engine receives requests and processes responses at the design level.
The course deliverable itself becomes a portfolio piece, and you can specify on your application that you directly implemented an 'Express.js clone project'.

createApplication Function Design
Configure the starting point of the app object and design the core controller structure that includes configuration storage, router, and middleware registration functionality. This allows a single app instance to drive the entire server. và thiết kế cấu trúc bộ điều khiển cốt lõi bao gồm kho lưu trữ cấu hình, router và chức năng đăng ký middleware. Nhờ đó, một instance ứng dụng có thể điều khiển toàn bộ server.

Implementing Middleware Chain

Directly implement the middleware sequential execution flow using next(), visualize the structure where each middleware intercepts and processes requests, and grasp the fundamental concepts. It is designed to be systematically understood through an analogy to a hospital treatment flow., trực quan hóa cấu trúc mà mỗi middleware chặn và xử lý yêu cầu, từ đó nắm vững khái niệm cơ bản. Được thiết kế để có thể hiểu một cách có hệ thống thông qua việc so sánh với quy trình khám chữa bệnh tại bệnh viện.

Architecture Improvements

Using the Singleton pattern and IIFE, we implement an architectural structure that prevents global state sharing, encapsulates configuration values and internal modules, and enhances security. Additionally, through middleware integration and structural separation, we improve it into an engine with production-level maintainability and scalability. để ngăn chặn chia sẻ trạng thái toàn cục, ẩn giấu các giá trị cấu hình và module nội bộ, đồng thời tăng cường bảo mật. Ngoài ra, cải thiện thành engine có khả năng bảo trì và mở rộng ở mức độ thực tế thông qua tích hợp middleware và tách biệt cấu trúc.

Prerequisites and Important Notes

You should be familiar with basic JavaScript syntax. Understanding of variable declaration, function definition, array/object manipulation, and asynchronous processing (Promise, etc.) is required.
It would be helpful to have a basic understanding of Node.js environment setup and module systems (such as CommonJS). It will be easier if you're familiar with running local servers and the roles of require and module.exports.
If you have experience using Express.js, you'll be able to understand the core concepts much faster. This course focuses not on simple usage, but on directly implementing the underlying principles., bạn sẽ có thể hiểu được cốt lõi nhanh hơn rất nhiều. Khóa học này không tập trung vào cách sử dụng đơn thuần, mà tập trung vào việc trực tiếp triển khai nguyên lý hoạt động.
This course is not about providing completed code or packages, but focuses on the process of implementing from scratch. You will learn the structure and principles by writing code with your own hands.
It is recommended that you take the 'Learn Express.js Properly: Part 1 From Basics to Advanced [Fundamentals]' course first. That course covers the basic structure and usage of Express.js first, and this course is an advanced program that builds upon it to implement the internal structure.

Recommended for
these people

Who is this course right for?

Developers who want to grow beyond just having used Express.js to the next level
Backend development aspirant who wants to accurately understand the internal workings of servers
Learners who want to learn by directly implementing the structural concepts of web frameworks
A job seeker looking for a meaningful clone project to include in their portfolio
Developers with experience in other frameworks such as Django, Flask, Spring Boot who want to learn about Node.js server architecture
For those who want to become 'developers who can explain how things work' rather than just 'developers who know how to use them'
A frontend developer who wants to gain a clearer understanding of the flow between server and client while doing web development
Beginners who want to move beyond "development by just memorizing functions" and experience building real backend architecture on their own
Someone who didn't major in Computer Science but wants to challenge themselves with web development while building a solid foundation, hoping to transition into the field
Front-end or full-stack developers who want to utilize JavaScript more deeply in practical work

Need to know before starting?

Basic JavaScript Syntax
Node.js usage experience
Experience with Express.js (optional)
Network and HTTP Concepts (Optional)

Hello
This is

658

Learners

Reviews

Answers

4.8

Rating

Courses

안녕하세요, 우리동네코딩 스튜디오에 오신 것을 환영합니다!

우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, Google, Microsoft, Meta 등 글로벌 IT 기업에서 실무 경험을 쌓은 개발자들이 함께 만든 교육 그룹입니다.

처음에는 미국과 캐나다의 컴퓨터공학 전공자들끼리 함께 공부하며 성장하고자 만든 스터디 모임에서 시작되었습니다. 각기 다른 대학, 다른 시간대에 있었지만 함께 문제를 해결하고 서로에게 배운 그 시간은 매우 특별했고, 자연스럽게 이런 생각이 들었습니다.

“우리가 공부하던 이 방식, 그대로 다른 사람에게도 전하면 어떨까?”

그 물음이 바로 우리동네코딩 스튜디오의 출발점이었습니다.

현재는 약 30명의 현직 개발자와 컴퓨터공학 전공 대학생들이 각자의 전문 분야를 맡아, 입문부터 실전까지 아우르는 커리큘럼을 직접 설계하고 강의합니다. 단순한 지식 전달을 넘어, 진짜 개발자의 시선으로 배우고 함께 성장할 수 있는 환경을 제공합니다.

“진짜 개발자는, 진짜 개발자에게 배워야 합니다.”

저희는 웹 개발의 전 과정을 처음부터 끝까지 체계적으로 다루되, 이론에 머무르지 않고 실습과 실전 중심의 피드백을 통해 실력을 키워드립니다.
수강생 한 사람, 한 사람의 성장을 함께 고민하고 이끌어가는 것이 우리의 철학입니다.

🎯 우리의 철학은 분명합니다.
"진정한 배움은 실천에서 오고, 성장은 함께할 때 완성된다."

개발을 처음 시작하는 입문자부터, 실무 능력을 키우고 싶은 취업 준비생, 진로를 탐색 중인 청소년까지.
우리동네코딩 스튜디오는 모두의 출발점이자, 함께 걷는 든든한 동반자가 되고자 합니다.

이제, 혼자 고민하지 마세요.
우리동네코딩 스튜디오가 여러분의 성장을 함께하겠습니다.

Welcome to Neighborhood Coding Studio!

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.

It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

“What if we shared this way of learning with others?”

That thought became the foundation of Neighborhood Coding Studio.

Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertise—designing and delivering a curriculum that spans from foundational knowledge to real-world development.
We’re not just here to teach—we’re here to help you see through the lens of real developers and grow together.

“To become a real developer, you must learn from real developers.”

Our courses take you through the entire web development journey—from start to finish—focused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learner’s growth and are committed to supporting your path every step of the way.

🎯 Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."

Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpad—and your trusted companion on the journey.

You don’t have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

Curriculum

All

53 lectures ∙ (5hr 30min)

Course Materials:

Lecture resources

Section 1. 🚧 MyExpress Warming Up for Express.js Clone – Learning Core Concepts by Direct Implementation

13 lectures ∙ (1hr 37min)

1. [MyExpress Project Kick-off] – Our self-built web framework, Getting Started with MyExpress
04:46
2. [Understanding Request/Response Structure] – HTTP's Essence and All We Need to Know About Requests and Responses
08:19
3. [How Routing Works] – HTTP Request Processing and Solving Routing Complexity
05:44
4. [Request Flow Design] – Router Management Improvement and Systematization of Request Processing Flow
06:21
5. [Middleware Architecture Design] – Object-Based Router Management and Middleware Introduction Preparation
07:25
6. [Middleware Chain Implementation] – Middleware Chain Processing Structure Demystified
07:20
7. [req/res Operation Practice] – Manipulating req/res within middleware chain
06:31
8. [Error Handling Mechanism] – Conditional Flow Control and Error Handling Middleware Mastery
06:07
9. [Creating a Static File Server] – Implementing Static File Serving Functionality
08:36
10. [Dynamic Routing Implementation] – Dynamic Routing and Handling URL Parameters
13:23
11. [Implementing a JSON Body Parser] – Processing Request Body Data: Implementing a Body Parser Directly
05:48
12. [Implementing URL-Encoded Body Parser] – Processing Form Data and Implementing URL-Encoded Body Parser
06:54
13. [Router Modularization Strategy] – Structuring Code by Separating Router Objects (Compared to Express.js Approach)
10:43

Section 2. 🧱MyExpress Core Implementation for Express.js Clone – DIY Web Framework: Everything

15 lectures ∙ (2hr 1min)

14. [app object design] – MyExpress's core object, app object design and createApplication
05:14
15. [Server Execution] – Server startup, mastering the app.listen method
09:21
16. [Router Structure] – The Core of Middleware and Routing, A Complete Dissection of createRouter
07:53
17. [Request Processing Flow] – Fully Mastering router.handle, the Core of Request Processing
29:05
18. [Dynamic Routing] – Master Dynamic Routing Completely, Processing URL Parameters with the matchPath Function
07:49
19. [MIME Type] – Mastering Content-Type, Implementing MIME Type and getContentType Function
06:17
20. [Static File Serving] – Full Practical Application, Serving Static Files with Static Middleware
06:55
21. [HTML Rendering] – Complete dynamic HTML rendering, Implement the res.render method
05:53
22. [listen flow analysis] – The final puzzle of the server execution flow, complete mastery of server.listen's operating principles
05:16
23. [JSON Parser] – JSON Body Data Processing, Custom Middleware Implementation
04:55
24. [Form Data Parser] – Master URL-Encoded Form Data, Implement Body Parser Middleware
09:41
25. [Request Logger] – Real-time Request Logging, Complete Implementation of Logger Middleware
06:13
26. [Sub Router] – Mastering Sub Routers, Implementing express.Router()
04:55
27. [Environment Setup] - Create Engine – Implement Environment Variable Loader Middleware
05:09
28. [Real-World Server Initialization] – Completing MyExpress Practical Application, Configuring the Entire Project with index.js
06:57

Section 3. 🧩 Implementing MyExpress Router for Express.js Clone – Practical RESTful API Design & Feature Completion

8 lectures ∙ (35min)

29. [Users Router] – User Router Implementation and Basic RESTful API Structure
05:50
30. [Products Router] – Product Router Implementation and List/Detail Views
06:38
31. [Categories Router] – Implementing Category Router and Hierarchical Classification Processing
04:27
32. [Carts Router] – Cart Router Implementation and User-Specific Management
05:36
33. [Orders Router] – Implementing Order Router and Handling Order Flow
04:09
34. [Payments Router] – Payment Router Implementation and Request Processing Structure
03:39
35. [Reviews Router] – Review router implementation and product review functionality
04:46
36. 📌 Future Course Progression Guide

Section 4. 🛠️MyExpress Security Blueprint for an Express.js Clone – Preventing Vulnerabilities and Upgrading to a Secure Server

5 lectures ∙ (28min)

Section 5. 🧠 MyExpress Design Optimization for an Express.js Clone – Restructuring and Internal Architecture Reorganization for Practical Use

7 lectures ∙ (33min)

Section 6. 🧪 MyExpress Testing Strategy for an Express.js Clone – Building a Stable Server with Automated Validation

4 lectures ∙ (13min)

Section 7. 📚 Per-Lecture Code & Study Materials Guide

1 lectures

Published:

Last updated:

Reviews

All

3 reviews

4.0

3 reviews

jeony05354605
Reviews 2
∙
Average Rating 5.0
5
70% enrolled
While preparing for job hunting, I was struggling to create a differentiated portfolio, and this course became the answer. The experience of cloning the Express engine myself is an excellent topic for demonstrating technical depth even in interviews. It's very practical that the course doesn't just stop at implementing features, but covers security considerations like MIME type detection and path manipulation prevention, synchronous/asynchronous error handling, and even test automation scripts. Particularly in the part about improving architecture using Singleton patterns and IIFE, I was able to deeply consider code quality and maintainability. For those who have taken Part 1, the foundational course, there's a lot of content that will make you slap your knee in realization. I strongly recommend this to aspiring backend developers who want to learn 'properly'.
dbfrontier
Reviews 48
∙
Average Rating 4.6
4
100% enrolled
- nhcodingstudio
  Instructor
  Thank you, Son Jeongman! I sincerely appreciate you leaving such a valuable course review and positive feedback! 🙏 Your encouragement gives me great strength in preparing my lectures. If you've gained a deep understanding of Express.js structure and server engine design principles through this course, I'll continue preparing to bring you more practical topics and expanded content such as backend architecture, databases, and server operations in the future. 🚀 Also, with gratitude and encouragement, please feel free to use the open chat room below whenever you have questions or need help with development. You can communicate with fellow students, and I frequently visit to share concerns and discussions! 📮 Open Chat Room: [https://open.kakao.com/o/gC10Fnoh] I wholeheartedly support your development journey and look forward to seeing you again in the next course! 🌟
gohome
Reviews 19
∙
Average Rating 4.7
3
100% enrolled
- nhcodingstudio
  Instructor
  Hello, GoHome. First of all, I sincerely thank you for taking the 'Building a Node.js Server Engine' course and leaving your honest review. After reviewing the rating and valuable feedback you provided, I feel a heavy sense of responsibility and sincerely apologize that we were unable to provide a sufficiently satisfying course experience that met your expectations. Since the process of learning framework design through cloning Express.js covers such in-depth content, I'm concerned that there may have been parts where the explanations were insufficient or difficult to understand during your learning process. If there were any concepts that were hard to understand or aspects of the course structure that were disappointing, please feel free to share them with me anytime. The specific feedback you provide is the greatest foundation for me to improve the course and create better content. I will diligently update the insufficient parts and do my best to return with better content in the future. Even the smallest questions that arise during your learning are welcome. If you share them through the Q&A board or open chat room, I will answer them sincerely and stay with you until the end to provide practical help for your learning. Once again, thank you for taking your valuable time to share your feedback, and I will show you continued improvement. Thank you.

Limited time deal ends in 3 days

$14.30

23%

$18.70

nhcodingstudio's other courses

Check out other courses by the instructor!

React Master Class: Part 2 - High-Performance Hooks and Practical Architecture Completed Through Missions

nhcodingstudio

The real world is unforgiving. I will thoroughly pass on my optimization expertise through a meticulous mission system, showing you how to design smooth user experiences even in extreme environments where tens of thousands of real-time data points pour in. Go beyond simply writing code and leap forward to become an irreplaceable senior engineer who dissects performance through understanding engine principles.

초급

React

React Master Class: Part 2 - High-Performance Hooks and Practical Architecture Completed Through Missions

nhcodingstudio

React Master Class: Part 1 - Understanding the Essence of Rendering and Design Through Missions

nhcodingstudio

This is not just a lecture you listen to and forget. This course aims not for "the moment you understand React," but for "the moment you can actually work with React." In every section, you'll complete missions alongside the lectures, solve practice problems yourself, and learn by implementing core concepts like JSX, Virtual DOM, State, and useEffect with your own hands. When you finish the course, you won't just be a beginner who knows React syntax—you'll be a developer who can explain and utilize everything from component design to rendering flow on your own. "Not a class you just listen to, but learning you build through completion." Understand the essence of React and experience the world of declarative UI firsthand.

초급

HTML/CSS, JavaScript, React

React Master Class: Part 1 - Understanding the Essence of Rendering and Design Through Missions

nhcodingstudio

Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]

nhcodingstudio

This course systematically masters intermediate to advanced CSS techniques such as "CSS Position, Transition, Transform, Animation, Flexbox, Grid, and Responsive Web Design," and equips you with skills immediately applicable in real-world projects through various hands-on practice projects.

초급

HTML/CSS

Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]

nhcodingstudio

From Events to SPA, the Essential Engine of Interactive Web - [Complete DOM Mastery Part 2]

nhcodingstudio

This course goes beyond simple DOM manipulation, deeply learning how to dynamically compose and react to web UIs within interactions with actual users. It's structured for you to learn by directly implementing common issues encountered in practice, from the essence of event systems, bubbling and capturing, event delegation, real-time UX feedback, to performance optimization using throttle & debounce. Based on an understanding of the DOM tree structure, you will develop the ability to flexibly connect event flow and state changes.

초급

HTML/CSS, JavaScript, React

From Events to SPA, the Essential Engine of Interactive Web - [Complete DOM Mastery Part 2]

nhcodingstudio

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]

nhcodingstudio

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.

입문

HTML/CSS, JavaScript, React

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]

nhcodingstudio

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]

nhcodingstudio

This course covers the Critical Rendering Path (CRP) process from start to finish, where the browser receives HTML to create the DOM, combines it with the CSSOM, and renders pixels on the screen. Beyond simple DOM manipulation, you'll learn how CSS and JS impact performance, image and font optimization, Lazy Loading, Intersection Observer, virtual lists, and DevTools practice, gaining practical strategies to noticeably improve real web performance.

초급

HTML/CSS, JavaScript, React

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]

nhcodingstudio

Building a Server Framework from Scratch: Cloning the Express.js Engine

nhcodingstudio

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.

초급

JavaScript, Node.js, Express

Building a Server Framework from Scratch: Cloning the Express.js Engine

nhcodingstudio

Learning JavaScript Properly: A Complete Guide from Beginner to Professional Part 1 - [Basics]

nhcodingstudio

Through this course, students will broadly learn the basics and advanced concepts of JavaScript, from setting up the development environment to variables, conditional statements, functions, objects, and arrays. Through thorough review with practice exercises and quizzes, they will be able to develop problem-solving skills that can be immediately applied to web and mobile development practices.

입문

JavaScript, HTML/CSS, Web Application

Learning JavaScript Properly: A Complete Guide from Beginner to Professional Part 1 - [Basics]

nhcodingstudio

Mastering HTML + CSS: The Complete Guide from Beginner to Advanced - Part 1 [Basics]

nhcodingstudio

The "Learning HTML + CSS Properly: Complete Mastery from Beginner to Practical Application Part 1" course is designed to provide a deep understanding of how the internet and the web work, and to solidify the basics of HTML/CSS through a practice-oriented curriculum. By taking this course, you can firmly grasp the essential concepts of web development and immediately apply them to projects.

입문

HTML/CSS

Mastering HTML + CSS: The Complete Guide from Beginner to Advanced - Part 1 [Basics]

nhcodingstudio

Learn JavaScript Object-Oriented Programming by 'Building', Not Just Theory (Strategy AI Edition)

nhcodingstudio

📌 This course is a curriculum that starts with a strategic AI tic-tac-toe project and completes core object-oriented programming concepts through practical examples. You'll train logic design and AI strategic thinking through game implementation, then directly experience OOP design techniques like inheritance, composition, delegation, and encapsulation through code. This is recommended for those who want to grow beyond syntax into a 'developer who designs' through real projects.

초급

HTML/CSS, JavaScript, oop

Learn JavaScript Object-Oriented Programming by 'Building', Not Just Theory (Strategy AI Edition)

nhcodingstudio

Learning Express.js Properly: Part 1, From Basics to Advanced [Basics]

nhcodingstudio

An Express.js journey from beginner to mastery, flowing like water! A backend journey where you learn properly by directly implementing from basic server concepts to completing a CRUD project.

초급

express.js, Node.js, routing

Learning Express.js Properly: Part 1, From Basics to Advanced [Basics]

nhcodingstudio

Implementing Notion Directly with Vanilla JavaScript

nhcodingstudio

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.

초급

JavaScript, React, Web Application

Implementing Notion Directly with Vanilla JavaScript

nhcodingstudio

Similar courses

Explore other courses in the same field!

Building a Server Framework from Scratch: Cloning the Express.js Engine

nhcodingstudio

초급

JavaScript, Node.js, Express

Building a Server Framework from Scratch: Cloning the Express.js Engine

nhcodingstudio

Creating a Map Service with the Developer of Corona Map 2

donghunee

This is an advanced course on map service creation taught by the developer of Corona Map.

중급이상

Node.js, MongoDB, Express

Creating a Map Service with the Developer of Corona Map 2

donghunee

Next-Generation Node.js Backend Server Development (with Fastify & Prisma & Typescript)

Indie Coder

A course to learn the latest Node.js backend REST API using fastify, a Node.js framework boasting high speed, ORM Prisma, and Typescript.

초급

Node.js, TypeScript, Prisma

Next-Generation Node.js Backend Server Development (with Fastify & Prisma & Typescript)

Indie Coder

How to create a map service with React + Express, as told by the developer of Corona Map (Typescript)

donghunee

This is a lecture on creating a map service from start to finish using the MERN stack (feat. TypeScript). Let's create each part step by step by looking at the official API documentation.

초급

MongoDB, Express, React

How to create a map service with React + Express, as told by the developer of Corona Map (Typescript)

donghunee

[1 Hour](Other Languages) JavaScript for Developers

bokchi

This course is for developers who have already used programming languages (Java/Python/Swift/Kotlin, etc.). It is a lecture designed to quickly learn JavaScript in one hour. Although we are in an era of coding with AI, human developers must supervise AI code. Therefore, this lecture aims to quickly build the minimum knowledge needed for supervision.

초급

JavaScript, TypeScript

[1 Hour](Other Languages) JavaScript for Developers

bokchi

Quick look at the Javascript V8 engine

hajeonghun

You can understand the JavaScript engine V8! You can get hints on how to write more efficient code.

초급

JavaScript, Node.js, v8

Quick look at the Javascript V8 engine

hajeonghun

Creating a League of Legends Match History Search Site with React.js + Node.js

neneee

This course is a practical, hands-on course where you will build your own 'League of Legends Match History Search Site' using React.js and Node.js, utilizing the Riot Games API. Students will naturally learn through hands-on practice, following the project step-by-step, covering everything from basic API usage, integration of frontend (React.js) and backend (Node.js, Express.js), to match history data visualization, and implementing op.gg-style UI. Rather than focusing on complex theories, this course is code-centric, allowing you to quickly experience results by 'building it yourself' through hands-on practice.

입문

React, Node.js, api

Creating a League of Legends Match History Search Site with React.js + Node.js

neneee

Planner, how about learning this level of web development? [Theory + Practice]

bokchi

This is a fast-paced development course for busy planners. You can learn the entire development process by developing web front-end, back-end, and DB yourself with simple explanations.

입문

HTML/CSS, JavaScript, Vue.js

Planner, how about learning this level of web development? [Theory + Practice]

bokchi

First Steps in System Design: Designing Backend Architecture That Stands Out in Interviews

mindlantern

Beyond basics like API design, CRUD implementation, and JWT authentication, all the way to backend architecture design! This is an introductory system design course to help you build 'your own backend architecture' that you can confidently discuss in interviews.

초급

Architecture, backend, software-design

First Steps in System Design: Designing Backend Architecture That Stands Out in Interviews

mindlantern

React start with Next.js

zk202308a5410

New to React? You need to think about how to learn React's fundamental concepts solidly yet quickly. Start with Next.js and JavaScript with minimal knowledge. Let's develop by selecting only the essential examples needed for real-world development. The Todo example is so important that you should develop it twice. Once focusing on components, and then focusing on routing that handles browser paths! Use Zustand for login! You can handle global state with a really small amount of code.

입문

JavaScript, React, Web Application

React start with Next.js

zk202308a5410

Large-Scale Systems Design Part 1

Jayce

Learn common components of global-scale services through popular papers, books, and articles.

초급

software-design, DBMS/RDBMS

Large-Scale Systems Design Part 1

Jayce

React for Beginners: Building a Solid Foundation

tonextday

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

초급

React, JavaScript, DOM

React for Beginners: Building a Solid Foundation

tonextday

Real MySQL Season 1 - Part 2

eunbinbaeck0088

You can learn about the core functions of MySQL and how to effectively use them in your work. You can also gain a new understanding of important parts that you have been using for a long time and have overlooked, and gain in-depth database knowledge.

초급

MySQL, DBMS/RDBMS, backend

Real MySQL Season 1 - Part 2

eunbinbaeck0088

Node and React series that you can learn by following - Creating a chatbot site

John Ahn

In this course, you will learn how to create a chatbot using the API provided by Google.

초급

Node.js, React

Node and React series that you can learn by following - Creating a chatbot site

John Ahn

Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)

webstoryboy

We have created this so that anyone can pass the 2023 version of the Web Design Function Exam Criteria. Let's learn the 5 types and pass quickly!

초급

HTML/CSS, jQuery, JavaScript

Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)

webstoryboy

JavaScript & jQuery Core Theory Practical Examples for Web Publishers (Textbook, Completed Version)

codingworks

The JS Core Theory and Practical Example Textbook and Completed Version for Web Publishers is a lecture textbook produced in PDF format. This textbook helps web publishers to fully acquire the basics of JavaScript and jQuery that they must know. A feature of this textbook is that it allows you to strengthen your theory through small missions connected to the theory. In particular, this textbook is also fully prepared with practical examples that utilize all the theories learned. The entire PDF page contains more than 320 pages of pure JavaScript (Vanilla JavaScript) and jQuery, with sufficient explanations added so that Coding Works can be easily understood. In particular, publishers can learn practical examples of jQuery interactions that are essential for creating websites.

초급

JavaScript, jQuery, HTML/CSS

JavaScript & jQuery Core Theory Practical Examples for Web Publishers (Textbook, Completed Version)

codingworks

Properly Selling JavaScript - by Yalco

yalco

Kind Course even coding novices can follow! The ultimate course that makes working developers JavaScript experts!

초급

JavaScript

Properly Selling JavaScript - by Yalco

yalco

# Design Patterns with C#

vmproductor0202

You can solve design problems by writing code in a formatted way. You can understand code or patterns written by other programmers.

중급이상

Design Pattern, gof, software-design

# Design Patterns with C#

vmproductor0202

[Spring AI in Action] Building Your Own 24/7 Code Reviewer & Auto-Grading Agent

bitcocom

An AI system that grades and reviews your code in 5 seconds - imagination becomes reality. This course is an all-in-one project that builds a **'GitHub PR Automatic Analysis and Grading Bot'** using Spring AI. When a student submits an assignment (Pull Request), the server detects it and AI analyzes the code changes (Diff). The grading results are then stored in the database, feedback is automatically posted as GitHub comments, and students can check their results on a dedicated dashboard. From backend to AI integration and frontend (Vaadin) - all with Java! This is the ultimate introductory guide for all developers who want to complete their own AI service from A to Z.

초급

Java, backend, AI Agent

[Spring AI in Action] Building Your Own 24/7 Code Reviewer & Auto-Grading Agent

bitcocom

[Season 1] Spring AI in Action: Developing a Premium Reservation AI Agent

bitcocom

Spring AI + JPA + MySQL Premium Reservation Agent Backend Development with 'Autonomous Behavior' Beyond Chatbots to Agents: The Definitive Guide to Tool Calling and Prompt Engineering

초급

Java, Spring Boot, backend

[Season 1] Spring AI in Action: Developing a Premium Reservation AI Agent

bitcocom

Learning Express.js Properly: Part2 Engine Internal Working Principles and Clone Project

What you will gain after the course

🚀From "User" to "Implementer" – Core Server Development Principles Learned by Cloning Express.js

The characteristics of this course

This course is recommended for

After completing this course

Here's what you'll learn.

Notes Before Enrollment

Learning Materials

Prerequisites and Important Notes

Recommended for
these people

Hello
This is

Curriculum

Reviews

nhcodingstudio's other courses

Similar courses

Learning Express.js Properly: Part2 Engine Internal Working Principles and Clone Project

What you will gain after the course

🚀From "User" to "Implementer" – Core Server Development Principles Learned by Cloning Express.js

The characteristics of this course

This course is recommended for

After completing this course

Here's what you'll learn.

Notes Before Enrollment

Learning Materials

Prerequisites and Important Notes

Recommended for these people

HelloThis is .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Curriculum

Reviews

nhcodingstudio's other courses

Similar courses

Recommended for
these people

Hello
This is