A JavaScript course for the mid-level developers

Sinabro JavaScript

You know enough about JavaScript and frameworks,
but you don't feel like getting better and don't feel confident?

Write client-side routing, SSR, hydration, CLI, form library, and more
with your own hands from scratch.

Sinabro JavaScript

Sinabro JavaScript

"It's working, but why...?"

We always use many different libraries and frameworks for web development. But, there are many times when we don't really get how things work. The JavaScript world is filled with so many different parts, and we often don't know how to make sense of it all. Sinabro JavaScript is a course that provides a way to help you move from a beginner level to intermediate, and from intermediate to an advanced level.

Sinabro(시나브로) is an adverb in Korean that translates to English as "little by little, unknowingly". It is often used to describe a process or change happening slowly over time.

"Web development is too complicated."

As the JavaScript ecosystem has evolved, it has accumulated technical debt and become entangled with numerous elements. Although you can learn by trial and error on your own, it's also a good approach to sit down and learn thoroughly from someone who has already experienced it.

"I'm fragile in front of bugs."

It's easy to panic even over minor bugs if you don't understand the fundamental principles of how the frameworks and libraries you are using work in harmony. Through the course, you will understand how things work by developing important topics from scratch.

"I want to move from mid-level to senior."

Repeating similar toy projects can make your hands faster, but a different strategy is needed to dig deeper. Once you deeply understand the core concepts, you will have the basic knowledge to easily understand any new framework that comes out.

"JavaScript ecosystem fatigue is draining me."

JavaScript, especially in the frontend ecosystem, still has many problems to solve, and various attempts are continuously taking place. That's why countless new libraries, frameworks, and concepts are pouring out. However, most of the attempts are trying to solve existing problems in new ways. Once you try to solve these existing problems directly without such solutions, you can easily understand how the new ones solve things differently by comparing them.

Testimonials

Hear it from our members

Jeonghyun

Junior frontend developer

When studying development, I often wondered about how to use this particular part that I was studying. Through Eunjae's lectures, I was able to find answers to many of those questions. This lecture focuses more on the practical applications rather than just the conceptual aspects, so I think there are many things to learn from it. I highly recommend it!

Lena

Junior frontend developer

Here is a lecture by Eunjae that I heard after studying JavaScript briefly, getting a job with React, and spending a tearful year. Even while working with React at my company, I always felt stuck when I didn't know JavaScript. I've taken various lectures, but this lecture is the first one that helped me understand the overall flow and context of frontend development! It was a great lecture where I not only learned the overall flow but also gained a lot of insight into the roadmap and direction I should take as a frontend developer or job seeker! If you're a frontend developer or a job seeker, I highly recommend you to take this lecture.

Adélie

The foreign lecture site seems to have good content, but the volume is extensive, and the cycle of creating something 'returning' takes a long time, so I failed in the middle of listening. The courses I bought usually have around 50 lectures, so I often got bored while listening, but as you can see from the structure of this course, it is a K-dev course. The cycle of creating something 'returning' is fast.

In my opinion, one of Eunjae's strengths is that he can easily explain overseas news that is difficult for beginners, even for those who are not good at English or even for those who are good at English but do not know the core development team of a specific faction. This characteristic is also evident in the lectures. There are English terms that are commonly used in the development field and may not be familiar, but the context in which the terms are used is explained, which is helpful.

Also, there are sessions where you need to write a simple test with vitest, stating the input and output and figuring out how to write it. Even if you don't know TDD, you can easily understand it, and when the green text appears, dopamine is released (this is my preference). You only need to run the tests without printing to the console, so it's more convenient for students.

And what I like the most here is, of course, trying to create a CLI command in JavaScript. Oh, and there are many practical use cases presented, which is great. There's even an example of filtering unique values from a nested array without using Set or Map, so take note of that. I was surprised when I couldn't use Set in the coding test I took a week ago, but it would be good to know this workaround.

Jaehyun

Frontend developer at Naver SmartEditor

I would like to recommend this excellent lecture to those who are starting to learn frontend development and want to jump to the next level. Eunjae's Sinabro JavaScript is not boring but exciting, and it is based on the practical domain concept of a shopping mall.

Romuru Tempest

Junior frontend developer

When you still feel unfamiliar with JavaScript, I think it's a very good lecture to get to know it. It provides helpful content for practical tasks rather than delving into the intricate details of JavaScript itself. I recommend it because it allows you to consider the code structure of JS from various points. Instead of having a single major goal, it is a lecture that conveys the efforts of Eunjae to create multiple intermediate goals for learning and then construct them as 'the best examples' for efficient learning.

Gosu

Junior full-stack developer in UK

The JavaScript lecture I attended understood my needs the best and was the most helpful! I had a shaky foundation in JavaScript basics, so I eagerly desired in-depth JavaScript lectures as I jumped straight into React without a solid understanding.

However, most lectures focused on beginners, leaving me thirsty in that aspect. Many people understand these concepts mentally, but when it comes to applying them, they struggle with array methods, await, async, and so on. I had a vague understanding, but if someone asked for a concise explanation, I would stumble. However, if I took a lecture, they would only explain the basic theories I already knew and move on without providing examples of when, why, and how to use them.

That's why I think Sinabro JavaScript is perfect for those who want intermediate to advanced JavaScript lectures, like me! Learning array methods with a focus on passing unit tests was extremely helpful, and it gave me more opportunities to apply them in practical code, resulting in positive feedback during my one-year review. Sinabro JavaScript not only provides practical help but also offers an exceptional opportunity for junior developers, regardless of whether they are frontend or backend developers, to grow one step further. It's rare to find such an excellent lecture, but Sinabro JavaScript has accomplished it. 👍👍

Be notified when we launch.

I won't spam you. I'm busy building this course 🙂
I will let you know when it's ready.

Hello, I'm Eunjae. I'm currently working as a full-stack developer at Storyblok.

I have mainly worked on frontend development tasks while working at companies such as Daum, Kakao, and Algolia.

After working at a startup for a long time, I suddenly realized that many things had changed. I used AngularJS from 2014 to the end of 2017, and it wasn't until 2018 that I started studying the many things I had missed. It was endless, starting with ES6, React, Babel, and so on.

In 2019, I moved to France and joined a company called Algolia, which was a great opportunity for me to deeply understand various concepts and work with them. I tackled them directly and asked people around me, gradually forming the big picture. After a long time, I thought how great it would be to have well-organized content on these topics, and eventually, I ended up creating a course.

13 hours and 16 minutes

Table of Contents

Each episode is designed to help you to implement a specific topic from scratch. After each episode, you will gain confidence little by little, unknowingly.

1. Basics of DOM API 1h 3m

  • innerHTML
  • createElement
  • appendChild
  • addEventListener

We learn the basic DOM API and practice how to structure HTML and attach events without using a frontend framework.

2. Building an e-commerce website 3h 4m

Part 1. Basic Implementation

We implement the product list and shopping cartof an e-commerce website. The goal is to implement dynamic interactions directly using the DOM APIs.

When you add or remove items from the shopping cart, we ensure that the quantity updates everywhere at once (in both the product list and the cart). This helps us understand the importance of modern front-end frameworks.

Part 2. Refactoring Code into Components

We refactor the code from the Part 1, breaking them down into multiple components for better management. We think about design, meaning, and role in doing so.

Part 3. Implementing Reactivity

Instead of imperatively finding each DOM element and updating the quantity, we reactively update the DOM elements as data changes.

3. Basics of web server 45m

We learn the basics of a web server by using Express. These days, Serverless Functions provided by Vercel or Netlify are easy and convenient. However, we're going to see how the backend used to be made with Express before such things existed. We'll also explore how a frontend launched with vite sends requests to the Express server, and renders the received data.

4. Array methods 1h 18m

We practice three Array methods (filter, map, and reduce). Unit tests with input and output are provided. Your task is to write the code that makes all the tests pass. This practice helps you grow muscle to use arrays better.

5. Basics of npm library 27m

We will examine the structure of npm libraries, and take our time to understand the complex issues entangled with Common JS and ES Module. Then, we will deploy the library to npm.

6. Creating mini jQuery 1h 7m

We are going to create a small subset of jQuery. We will learn how to set up a monorepo using yarn workspace, and experience the overall workflow by working on a library, sample apps, and a documentation site within the monorepo. We will also write unit tests using vitest, experience the difficulties that occurs during the library build process, and learn about treeshaking.

7. Building a movie info website 2h

We are going to create a movie search website. The outcome is very simple, but we will cover very important concepts in this episode. We will learn about the browser's History API, and use it to implement client-side routing, similar to React Router, ourselves. And then, we directly implement Server-Side Rendering using an Express server. We also implement the part where the client performs Hydration. After completing this, you will be able to understand the process of SSR + Hydration in Next.js in quite detail.

8. Practicing async stuff 38m

Similar to the Array method practice episode, we practice with callback, Promise, async, and await to better handle asynchronous flows.

9. Creating a static website generator 1h 3m

We often create static websites using Jekyll, Gatsby, Next.js, and so on. We examine how such tools create static websites and try to mimic their build process. In the process, we make a script written in Node.js, without any framework or tool, build posts written in markdown into a static blog and eventually deploy it on Vercel.

10. Writing a CLI 48m

We will examine the structure of CLI libraries on npm, and try to create and deploy our own CLI to NPM. After that, you can install and use it with the command npm install -g <your-package-name>.

11. Creating a form library 1h 4m

<form action="/save" method="post">

In the past, we used to create forms like above. We will implement it in the old way to understand how it works. And you'll learn why we do it differently now.

Nowadays, we use libraries like react-hook-form quite a lot. We will understand the benefits of such libraries and create something similar ourselves.

Frequently Asked Questions

Who is this for?

This is a course for people who have a basic understanding of JavaScript and are familiar with frameworks like React or Vue. However, if you find it difficult to understand what's happening behind the scenes in those frameworks or why certain errors occur, this course is for you. Sometimes, when you encounter an error, you search for solutions online and apply them without fully comprehending why they work. Additionally, you may feel overwhelmed by the constantly evolving JavaScript ecosystem, and it may seem like you're always starting from scratch when learning new things. By taking this course, you will be able to put all the small pieces of knowledge in your mind together.

What makes it different from other courses?

There are lots of courses that teach you how to make something cool. In these courses, they show you how to build things step by step using different libraries and services. It is useful in terms of learning how to combine what, but it is not easy to cover the why aspect in such courses.

In Sinabro JavaScript, you learn how things used to be done in the past and why they are done differently now. You also understand the advantages and disadvantages of each approach. By implementing the features that frameworks invisibly provide, you can learn why those features are implemented.

Knowing "what" and "how" is important, but it's hard to go far without understanding "why". The reason for not feeling confident in development is often because you don't understand 'why'. When something goes wrong, it's difficult to know how to fix it if you don't understand the situation completely. Just fixing the problem by following search results or AI chat bots without knowing why it worked can make you feel uneasy, and you might worry about what to do if a similar problem happens again.

Therefore, understanding "why" is important to improve your skills. You can learn by trying things yourself, but it's also helpful to learn from someone who has already experienced it and can explain it in detail. I believe there is less demand for targeted courses at this intermediate level compared to beginner courses, which makes these courses rare.

Does the course use Tailwind CSS?

In just one episode, we design using Tailwind CSS in "Building an e-commerce website". If you are not familiar with Tailwind CSS, you can write CSS in your preferred way.

I have another question!

DM me on Twitter, or email me at hey@learnwitheunjae.dev.

Be notified when we launch.

I won't spam you. I'm busy building this course 🙂
I will let you know when it's ready.