Build a solid foundation and confidence by developing a variety of topics from scratch with JavaScript.
Developing Core JavaScript Skills Without a Framework
Understanding the JavaScript ecosystem more deeply
Level Up! Build your core JS skills.
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 .
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.
.jpeg?w=960)
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.
Learn the basic DOM API and practice structuring HTML and attaching events without a front-end framework. (1h 3m)
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)
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)
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)
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)
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)
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)
Similar to the Array method practice episode, we'll practice callbacks, promises, async, and await to better handle asynchrony. (38m)
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)
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)
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.
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.
const { name, address } = person . 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.
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.
622
Learners
34
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년간 주로 프론트엔드 업무를 했어요.
All
118 lectures ∙ (19hr 56min)
Course Materials:
All
33 reviews
4.9
33 reviews
Reviews 1
∙
Average Rating 5.0
5
Nó có cảm giác khác với những bài giảng mà tôi đã từng xem từ trước đến nay, và tôi tham gia lớp học một cách thoải mái, có cảm giác như đang được nghỉ ngơi. Điều này không có nghĩa là bài giảng nhẹ nhàng hay dễ dàng. Ngày xưa mình thích những bài giảng chứa đựng nhiều kiến thức và kỹ năng(?) (cảm thấy đáng tiền😁), nhưng nhiều lúc khó theo kịp, và dù là bài giảng cho học sinh thì Người hướng dẫn sẽ trưng bày những gì anh ấy biết như một chiếc cúp và khoe thành tích của mình. Có những lúc tôi bối rối không biết liệu đó có phải là để xếp chồng hay không. Tôi nghĩ bài giảng của Eunjae có sự cân bằng rất tốt. Nó có cảm giác rộng vừa phải và sâu vừa phải. Hơn bất cứ điều gì, thật tuyệt khi có thể trải nghiệm việc theo dòng suy nghĩ như thể giải quyết một vấn đề, thay vì ghi nhớ một công thức. Những điều tôi không biết, nhưng tôi chỉ coi đó là lẽ đương nhiên và không băn khoăn, còn những điều tôi cho là không quan trọng và không để ý đến, thỉnh thoảng lại được nhắc đến, điều đó cho tôi cơ hội để suy nghĩ. lại. Tôi cần suy ngẫm về cách tôi giải quyết và suy nghĩ về các vấn đề cũng như thái độ của tôi khi làm việc. Nếu có cơ hội, sẽ thật tuyệt nếu bạn có thể chia sẻ những lời khuyên của Eunjae với tư cách là một nhà phát triển (bạn sử dụng công cụ nào, cách bạn làm việc/cộng tác, v.v.). Tôi mong được gặp lại bạn lần sau với một bài giảng tuyệt vời khác. Cảm ơn
Wow, tôi rất vui vì bạn cảm thấy như vậy. Từ khâu lập kế hoạch cho bài giảng thực tế, "từng bước một" Tôi nghĩ sẽ thật tuyệt nếu có thể học từng chủ đề một và tôi rất vui khi bạn cảm thấy như vậy. Hãy cùng nghĩ về các công cụ phát triển và phương pháp cộng tác trong phần thưởng nhé 😊
Reviews 14
∙
Average Rating 4.7
5
Giảng viên giống như một triết gia viết mã. Ở một khía cạnh nào đó, phát triển là một việc thú vị và nó giúp tôi tìm lại niềm vui đó. Lúc đầu, tôi còn do dự vì khóa học hơi đắt, nhưng tôi đã học hết khóa đầu tiên cho đến hết. Tôi nghĩ tôi sẽ phải xem nó hai hoặc ba lần. Có nhiều bài giảng về tạo ứng dụng, nhưng nhờ các bài giảng về môi trường Node và phát triển thư viện, hiểu biết của tôi về các môi trường phát triển liên quan đã tăng lên. Tôi mong chờ bài giảng tiếp theo. Chúc may mắn từ xa. Cuối cùng, video Triển khai của Phần 12, Tạo Blog Tĩnh sẽ bị mất khoảng một phút.
Cảm ơn bạn đã đánh giá tuyệt vời 😊 Có một khoảng cách dài trong video bạn đề cập. Nhờ bạn mà mình đã gỡ bỏ và upload lại. Cảm ơn!
Reviews 4
∙
Average Rating 5.0
5
Tôi thường thích theo dõi tài khoản mạng xã hội của giảng viên, nhưng khi anh ấy giới thiệu bài giảng, tôi nhanh chóng đọc giáo trình trước. Đó là thời điểm tôi đang tìm việc làm và thực hiện một dự án dựa trên JavaScript cơ bản, nhưng khi thực hiện dự án đó, tôi nhận ra rằng kỹ năng JavaScript của mình vẫn chưa đủ tốt! Tôi đã nghĩ về điều này rất nhiều. Thư viện & Đó là một bài giảng cung cấp cái nhìn sâu sắc về cách triển khai các chức năng tiện lợi trong framework bằng JavaScript, cũng như các khái niệm nặng nề nếu chỉ nghiên cứu một mình, chẳng hạn như triển khai TDD và npm. Khi học FE, tôi đã mơ hồ nhận thức được những khái niệm khó nhưng muốn tìm hiểu thêm về chúng. Thật tuyệt khi có thể giảm bớt gánh nặng khi làm theo cùng người hướng dẫn. Tôi muốn giới thiệu khóa học này cho những người đã nhanh chóng chuyển từ JavaScript sang React hoặc đang bắt đầu phát triển với React nhưng đang gặp rắc rối với nó. Bài giảng này rất hữu ích ngay cả bây giờ khi tôi đang tìm việc làm, nhưng nếu nó được cho tôi xem cách đây một năm... khi tôi đang vô cùng khao khát sự hiểu biết sâu sắc, tôi nghĩ đó sẽ là một bài giảng mà tôi sẽ tán thưởng. Anh ấy là một người hướng dẫn chu đáo về nhiều mặt, từ việc thiết lập Discord riêng cho đến quản lý sinh viên và phân phát mã giảm giá cho người tìm việc! Khuyến khích! (Và chú mèo xuất hiện thoáng qua trong video cũng rất dễ thương. ☺️)
Xin chào. Tôi rất vui vì nó hữu ích 🥹 Cảm ơn bạn rất nhiều vì những lời tốt đẹp của bạn và tôi hy vọng bạn thành công trong quá trình tìm kiếm việc làm của mình!
Reviews 2
∙
Average Rating 5.0
5
Tôi là một nhà phát triển cấp dưới với 3 năm kinh nghiệm! Trong khi khám phá khóa học, tôi đã bị cuốn hút nên đã mua ngay và nghe. Nó rất hay haha. Vì công ty chủ yếu tập trung vào phát triển chức năng nên rất khó để tìm hiểu về thiết lập dự án và các khái niệm JS cốt lõi, nhưng. thật hữu ích và tốt khi có được những kiến thức đa dạng và cần thiết như vậy. Tôi rất ấn tượng với việc anh ấy sử dụng JS để vận hành giống như React và triển khai SSR trực tiếp, đồng thời thật tốt khi anh ấy đề cập đến các khái niệm về gói và mô-đun. Có vẻ như đây là một khóa học dạy bạn cách bắt cá chứ không phải là cho bạn cá. Khi nghe khóa học, tôi cảm thấy rằng bạn đã suy nghĩ rất nhiều về cấu trúc của lớp học. Thỉnh thoảng tôi sẽ xem xét nó. Cảm ơn bạn ~!
Cảm ơn những lời tốt đẹp của bạn 😊 Tôi cũng đã cố gắng hết sức để tập trung vào việc dạy bạn cách bắt cá chứ không phải cá và tôi rất vui vì bạn cảm thấy như vậy. Nếu bạn có bất kỳ câu hỏi nào, xin vui lòng để lại chúng bất cứ lúc nào. Cảm ơn!
Reviews 9
∙
Average Rating 4.9
$110.00
Check out other courses by the instructor!
Explore other courses in the same field!
![[Gia hạn] Giới thiệu không giây về JavaScript trong quá trình học viết mã tự độngCourse Thumbnail](https://cdn.inflearn.com/public/courses/327126/cover/edca2ab2-47b4-45b7-92c6-5bb00fd125eb/327126.jpg?f=avif&w=420)
![[Code Camp] Lý thuyết + thực hành về thuật toán Javascript dành cho người mới bắt đầuCourse Thumbnail](https://cdn.inflearn.com/public/courses/330604/cover/9c8dddcb-bd3b-4f3d-93af-ea382b6835c0/thumbnail.png?f=avif&w=420)
