강의

멘토링

컀뮀니티

BEST
Programming

/

Front-end

Sinabro Javascript

Build a solid foundation and confidence by developing a variety of topics from scratch with JavaScript.

(4.9) 32 reviews

597 learners

  • eunjae
자바슀크늜튞
vanillajs
JavaScript
vanilla-js

Reviews from Early Learners

What you will learn!

  • Developing Core JavaScript Skills Without a Framework

  • Understanding the JavaScript ecosystem more deeply

Level Up! Build your core JS skills.

💡 “It works, but why does it work?”

We always use a variety of libraries and frameworks for web development, but often times, it's hard to understand exactly what's going on. The JavaScript ecosystem is so complex and intertwined with so many different elements that it can be hard to unravel the mystery.

Sinabro JavaScript provides a stepping stone to level up from junior to mid-level, and from mid-level to senior .

“Web development is too complicated.”

This is because of the technical debt and the numerous intertwined elements that have accumulated over the evolution of the JavaScript ecosystem. While you can dive in and learn on your own, it's also a good idea to sit down and learn slowly with someone who's already been there .

“I can do it, but I don’t have the confidence.”

If you don't understand the fundamental principles of how the frameworks and libraries you use work together, it's easy to panic over even minor bugs. This lecture will teach you how important topics work by developing without libraries .

“I want to level up my development skills.”

Repeating similar toy projects might make you faster, but diving deeper requires a different strategy. Once you deeply understand the core concepts, you'll have a foundational understanding that will allow you to easily grasp any new frameworks or technologies that emerge.

“New things are coming out so quickly.”

JavaScript, especially the front-end, still has many issues to address, and various attempts are constantly being made. Consequently, countless new libraries, frameworks, and concepts are emerging. However, most of these are attempts to solve existing problems in new ways.

Once you've tried solving existing problems without those solutions, it becomes easier to compare and understand how new solutions solve them differently .

🙌🏻 Hello, this is Eunjae Lee.

I've worked primarily in front-end development at companies like Daum, Kakao, and Algolia. I currently work as a full-stack developer at Storyblok.

After working at a startup for a long time, I suddenly woke up to find so much had changed. I used AngularJS from 2014 to the end of 2017, but it wasn't until 2018 that I started learning all the things I'd missed. It started with ES6, React, Babel, and so on, and it was endless.

Moving to France in 2019 and joining a company called Algolia was a great opportunity for me to gain a deeper understanding of various concepts and work with them. I developed a comprehensive picture by directly engaging with the concepts and asking questions to those around me. After a while, I began to think about how useful it would have been to have well-organized content on these topics , which ultimately led me to create a course.


📖 Content List (Total 13 hours 16 minutes)

1. Basics of DOM API

Learn the basic DOM API and practice structuring HTML and attaching events without a front-end framework. (1h 3m)

  • innerHTML
  • createElement
  • appendChild
  • addEventListener

2. Create a shopping mall

Let's implement a shopping mall product list and shopping cart. Our goal is to implement dynamic interactions using the DOM API directly. As products are added and removed from the shopping cart, we'll develop a system that simultaneously updates the same data (quantity) across multiple screens (the product list and shopping cart). Through this process, we'll experience the importance of a modern front-end framework. (1h 20m)

Next, we'll refactor the implemented shopping mall product list and shopping cart into several components, considering design, meaning, and role, to make them more manageable. (52m)

Finally, instead of manually searching for DOM elements and updating their quantities, let's implement a method that automatically updates the DOM reactively when data is updated. (52m)

3. Web Server Basics

Learn the fundamentals of web servers by using Express. Serverless functions offered by Vercel and Netlify are easy and convenient these days, but before those became available, we'll explore how backends were structured using Express.

We'll also learn about CORS, an issue encountered during the rendering of data from a vite-powered frontend requesting an Express server. (45m)

4. Array method

We'll practice representative Array methods like filter, map, and reduce through various examples. We assume you're familiar with basic grammar, and we'll proceed with a sense of physical training. (1 hour 18 minutes)

5. npm library basics

We'll explore the structure of an npm library, slowly delve into the complex issues surrounding CommonJS and ES Modules, and deploy our library directly to npm. (27m)

6. Create a mini query

Let's build a very small subset of jQuery. Learn how to set up a monorepo using Yarn Workspace, and experience the overall workflow for library development by working on a library, example app, and documentation site within it.

We'll write unit tests using vitest, experience the challenges that arise during the library build process, and explore Tree-Shake. (1h 7m)

7. Movie information site

Let's build a movie search site. The result is very simple, but this episode covers crucial concepts. We'll learn about the browser's History API and use it to implement client-side routing, similar to React Router. (45m)

Next, we'll implement server-side rendering directly on the Express server and hydrate it on the client. By the end of this tutorial, you'll have a fairly detailed understanding of Next.js' SSR + hydration process. (1h 14m)

8. Practice asynchronously

Similar to the Array method practice episode, we'll practice callbacks, promises, async, and await to better handle asynchrony. (38m)

9. Create a static blog

Many static websites are built using tools like Jekyll, Gatsby, and Next.js. Let's take a look at how these tools create static websites and mimic their build process.

In this process, we'll build a static blog from Markdown posts using a Node.js script, without any frameworks or tools, and deploy it to Vercel. (1h 3m)

10. Creating a CLI

Let's take a look at the structure of the npm library for CLI, create our own CLI, and deploy it to npm. After that, we'll use npm install -g It can be installed and used as (48m)

11. Creating a Form Library

In the past, we used to create forms like the one above. Let's implement it the old way to see how it works. And now, we understand why it's not done that way. We also understand the benefits of libraries like react-hook-form, which are widely used these days, and we'll create something similar. (1h 4m)

👥 If you take the class

Those who purchase the course will be invited to a learner-only Discord channel . Ask any questions that arise during the course. You can also learn from the questions posted by others.

I hope we can learn together through free questions and discussions in a space where it's okay to not know anything. Ultimately, improving your confidence in JavaScript is our most important goal.


❓ Frequently Asked Questions

Q. Do you use Tailwind CSS in your lectures?

In just one episode, "Building an Online Store," I use Tailwind CSS for design. If you're unfamiliar with Tailwind CSS, you can write your own CSS in any way you like. If you're interested, you can also refer to my free video .

Q. Is this something I can listen to?

It's hard to say for sure, but if any of the following apply to you, you might want to take this course.

  • Understand the difference between let and const.
  • You can handle modules with import/export.
  • I know the difference between import and require to some extent.
  • I understand this grammar: const { name, address } = person .
  • You can create a simple to-do app using React or Vue.js by storing to-dos in variables without a database.
  • If you use React, you probably know how to use useEffect and useMemo.
  • If you were asked to create a To-Do app, you can roughly imagine how it would be broken down into components.

Q. How is it different from other lectures?

Many courses focus on building specific projects. These courses often show a gradual process of combining various technologies, libraries, and services. While this is useful in learning the "what" and "how" of combining various elements, it's difficult to cover the "why" part of these courses.

In Sinabro JavaScript, you'll learn the history of how certain topics were done in the past and why they're done this way today, understanding the pros and cons of each approach. And by implementing the features frameworks hide from us, you'll understand why they do what they do.

Knowing the "What" and "How" are crucial, but without the "Why," you'll struggle to get far. Lack of confidence in development often stems from a lack of "Why." When a bug occurs, you don't fully understand the situation, so you don't know how to fix it. Applying a Google search result might fix the bug, but you don't understand why. This leaves you feeling uneasy and worried about what to do if the same situation arises again.

Therefore, accurately learning the "why" is essential for upgrading to the next level. While hands-on learning is one way, learning from someone who's already been through the process and explaining it in detail is also an effective method. In fact, the demand for these mid-level courses is bound to be lower than for beginners, which is why such targeted courses are rare.

Q. Is there a trial class?

Here it is! Before watching this lecture, I've created a short, free video with some helpful warm-up exercises. You can also check it out at the link .

Q. Is there a discount for students or job seekers?

Yes, you can. We will provide you with a discount after completing a simple verification process .

Q. I have another question!

Please email me or DM me on Twitter and I'll respond. I live in France, so please understand that my replies may be delayed due to the time difference.

Recommended for
these people

Who is this course right for?

  • "It works, but why does it work?"

  • “Web development is too complicated.”

  • “I can do it, but I don’t have the confidence.”

  • “I want to level up my development skills.”

  • “New things are coming out so quickly.”

Need to know before starting?

  • This is not a course for beginners in JavaScript. This is a course for core exercises to go from junior to senior, and from junior to senior.

Hello
This is

618

Learners

33

Reviews

16

Answers

4.9

Rating

2

Courses

안녕하섞요. 읎은재입니닀. 프랑슀에서 삎고 있얎요. 집에서 멍 때늬고 냥읎듀 바띌볎는 걞 좋아하고, 저녁 식사 후에 한 시간 정도 산책하는 걞 슐깁니닀. 시끄럜고 붐비는 도심읎 부닎돌서 파늬 읞귌 소도시에 삎고 있고, 새 구겜을 좋아하고, 채소륌 킀우는 췚믞가 있얎요.

좀 더 개발 ꎀ렚 얘Ꞟ 하자멎, 2022년 11월부터 Storyblok 읎띌는 Headless CMS 서비슀륌 만드는 곳에서 개발자 유저듀을 위한 extension platform 을 만듀고 있얎요.

2019년에 Algolia 띌는 큎띌우드 Ʞ반의 검색 솔룚션 회사에 입사하Ʞ 위핎 프랑슀로 읎죌했얎요. ê·ž 회사에서 InstantSearch 띌는 였픈소슀 UI 띌읎람러늬륌 만드는 음을 했얎요. Vanilla JavaScript, React, Vue.js, Angular 쎝 ë„€ 가지 버전윌로 띌읎람러늬륌 제공하Ʞ 위핎 공통 로직을 따로 ꎀ늬하고 각 flavor 는 최소한의 wrapper 읎도록 하는 작업에 시간을 가장 많읎 썌얎요. ê·ž 왞에도 업묎적윌로 여러 였픈 소슀 프로젝튞에 찞여했얎요.

귞전에는 한 슀타튞업에서 한국곌 싱가폎에서 풀슀택윌로 3년 정도 음했고, ê·ž 전에는 칎칎였와 닀음 컀뮀니쌀읎션에서 4-5년간 죌로 프론튞엔드 업묎륌 했얎요.

Curriculum

All

118 lectures ∙ (19hr 56min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

32 reviews

4.9

32 reviews

  • damyo7477님의 프로필 읎믞지
    damyo7477

    Reviews 1

    ∙

    Average Rating 5.0

    5

    100% enrolled

    これたで芋おきた講矩ずは違う感じ、さっず䌑んでいく感じで快適に受講したした。 講矩が軜かったりやすかったずいう意味ではありたせん。 か぀おは倚くの知識ず技術を打ち蟌んだ講矩が良いこずもあったがお金の倀段はする気分😁、たたには远い぀きにくい時もあり、受講生のための講矩なのか講垫様が知るこずをトロフィヌのように陳列しお本人の業瞟を積み重ねるためか混乱する堎合もありたした。 りンゞェ様の講矩はバランスがずおも良かったようです。皋よく広く、皋よく深い感じでした。 䜕より公匏を暗蚘するのではなく、解くように思考の流れに沿っお行く経隓ができおよかったです。 知らなかったが、ただ圓然考えお気になっおいなかったこず、重芁ではないず嘆いお関心も持っおいなかった郚分も䞀床ず぀蚀及しおくれおたた考えおみるきっかけにもなったんです。 問題をどのように扱い、事故するのか、これたでどんな姿勢で働いたのかを振り返る必芁がありたす。 機䌚があれば、りンゞェ様の開発者ずしおのヒントどのツヌルを䜿甚するのか、どのように仕事/コラボレヌションするのかなども共有しおいただければずおも良いず思いたす。 次に、良い講矩でお䌚いできるのを楜しみにしおいたす。ありがずうございたす。

    • eunjae
      Instructor

      ずそんな感じをいただきたしたが、ずおも嬉しいですね。 開発ツヌルずかコラボレヌション方匏に぀いおもボヌナス゚ピ゜ヌド 䞀床悩みたしょう😊

  • gichulroh6344님의 프로필 읎믞지
    gichulroh6344

    Reviews 14

    ∙

    Average Rating 4.7

    5

    100% enrolled

    講矩者がコヌドを曞くのは哲孊者のようです。開発ずはどのように芋れば面癜いこずなのですが、たたその面癜さを芋぀けさせおくれたした。最初は講矩が単䟡が少なくお躊躇でしたが、最埌たで䞀次頑匷でした。二、䞉回は芋なければならないようです。アプリを䜜る講矩はたくさんありたすが、Node環境やラむブラリ開発講矩語のおかげで、関連開発環境の理解床が高たりたした。次の講矩も楜しみにしおいたす。遠くから建おおください。最埌にセクション12静的ブログを䜜成したす。

    • eunjae
      Instructor

      ずおも良い評䟡ありがずうございたした😊おっしゃった映像に長いスペヌスがありたしたね。おかげで、取り倖し埌に再床䞊げたした。ありがずうございたす

  • sai님의 프로필 읎믞지
    sai

    Reviews 4

    ∙

    Average Rating 5.0

    5

    58% enrolled

    普段講垫様のSNSアカりントを探玢するのが奜きですが、講矩をご玹介いただき、冷たいカリキュラムから読んでみたした。ちょうど就任をしおバニラのJavaScriptベヌスのプロゞェクトをしおいた時期でしたが、プロゞェクトをしながらただただJavaScriptの実力が足りたせんねずいう考えをたくさんしたんですよ。ラむブラリamp;フレヌムワヌクで䟿利な機胜をJavaScriptでどのように実装するかに぀いおのむンサむト、そしおTDDやnpm配垃など、䞀人で勉匷するには負担される抂念を教えおくれる講矩でした。 FEを勉匷しながら挠然ず知っおいるのですが、詳しくは難しい抂念を講垫様ず䞀緒に行くので負担が少なくおよかったです。 JavaScriptですぐにリアクトに移ったり、リアクトで開発を始めたのに詰たっおいる郚分がある人におすすめしたい講矩です。この講矩は就コンする今も圹に立ちたすが、1幎前 むンサむトをすごく枇望した時期の私に芋せおくれたら拍手を打っお芋た講矩だず思いたす。ディスコヌドが別々に開蚭されお受講者たちを管理しおくれる点ず、就孊生割匕コヌドを配垃しおくれる点たで色々ず思慮深い講垫の方がいらっしゃいたすおすすめです そしお映像の䞭でちょっず出おくる猫も可愛いです。☺

    • eunjae
      Instructor

      こんにちは。圹に立ちたしたか

  • leehyunji07152667님의 프로필 읎믞지
    leehyunji07152667

    Reviews 2

    ∙

    Average Rating 5.0

    5

    97% enrolled

    3幎目ゞュニア開発者です講座を探玢しお気に入っおすぐに賌入埌に聞いおみたずころ、ずおも良かったです。 JSを利甚しお、Reactのように動䜜させるように、SSR盎接実装されたのも印象深かったほか、バンドルやモゞュヌルの抂念も取り䞊げおくれおよかったです。肉を䞎えるのではなく、肉を぀かむ方法を教えおくれる講座のようですㅎㅎ講座を聞きながら、授業構成に぀いお倚くの悩みをしおいたこずが感じられたした。すっきり埩習させおいただきたす。ありがずうございたす〜

    • eunjae
      Instructor

      良い蚀葉ありがずうございたす😊私も肉ではなく肉をキャッチする方法をお知らせするのに焊点を最倧限にしおみたしたが、そう感じたのはずおも嬉しいですね。質問が生じた堎合は、い぀でも残しおください。ありがずうございたす

  • qpyou12340482님의 프로필 읎믞지
    qpyou12340482

    Reviews 9

    ∙

    Average Rating 4.9

    5

    14% enrolled

    深い掞察から出おくる講矩 おすすめです:)

    • eunjae
      Instructor

      ありがずう evanjin 😊

$110.00

eunjae's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!