TS/JS Design Patterns with Canvas: Learn Properly from Zerocho

Learn about the uses, pros and cons of various design patterns while creating a drawing board with TypeScript/JavaScript. Learning the canvas API is a bonus!

(4.7) 수강평 26개

강의소개.상단개요.수강생.short

난이도 중급이상

수강기한 무제한

Design Pattern
Design Pattern
oop
oop
TypeScript
TypeScript
JavaScript
JavaScript
canvas
canvas
Design Pattern
Design Pattern
oop
oop
TypeScript
TypeScript
JavaScript
JavaScript
canvas
canvas

먼저 경험한 수강생들의 후기

먼저 경험한 수강생들의 후기

4.7

5.0

bottlewook

24% 수강 후 작성

The content is very difficult, so I'm not making much progress, but I'm grateful for the JavaScript design pattern lecture 😊😊 As a non-major developer, this is something I really wanted to study, and I'm getting a lot of help from it while working at the company, with the explanation and the Paint example!

5.0

문석청

32% 수강 후 작성

Thank you for the great lecture.

5.0

불타는금호동

100% 수강 후 작성

This was a more meaningful course because I could learn design patterns from a frontend perspective. It was great to see various examples of how to use classes! If there had been React examples as well, I think I would have gotten a much clearer sense of how to apply this in the real world, but I was able to gain insights by studying this part additionally on my own. Thank you for the great course!

강의상세_배울수있는것_타이틀

  • TypeScript Design Patterns

  • JavaScript Design Patterns

  • Create a drawing board with canvas

Is learning design patterns really helpful for me? 🤔

I've seen so many people ask this question. Here's my answer.

Yes, it helps more than living without knowing!

I've always said, " Design patterns aren't something you learn. They just naturally emerge as you optimize your code ." However, given the nature of JavaScript and TypeScript, which don't actively use object-oriented concepts and classes, I've seen many people avoid actively using design patterns . So, I'd like to introduce you to what design patterns are and what types there are.

After watching this lecture, you'll realize that you're already using several design patterns, and that they can help you optimize your code in this way .

There are many design patterns, but not all of them are useful. However, three or four useful design patterns will significantly improve the quality of your code.

Let's look at a simple example to see the usefulness of design patterns!

Do you ever find yourself repeating the same if statement across multiple functions in your code? This means you'll need to modify three functions every time you add a new if statement.

By leveraging the factory and state patterns, you can make these changes so cleanly! You only need to modify one function when a change is needed.

Features of this course

📌 In this lecture, you will learn the 23 design patterns from the GoF book and other design patterns adapted to JavaScript/TypeScript .

📌 Design patterns are inseparable from the SOLID principles . We'll also introduce the SOLID principles.

📌 For a practical example, let's create a drawing board using the HTML canvas API (and some tips for using the developer tool Debugger!)

📌 It's done in TypeScript , but also covers differences from JavaScript (there are differences in some design patterns due to the language's characteristics).

I recommend this to these people

Anyone who wants to learn design patterns

Anyone interested in clean code and object orientation and looking to learn design patterns

Anyone who needs JS/TS examples

Those who need JavaScript and TypeScript examples because the design pattern books/lectures on the market are written in other languages.

For those who want to understand with practical examples

For those who want to understand design patterns through code used in practice instead of the animal, cat, and car classes that appear every time.

After class

  • I now know what design pattern the code I am writing is using.

  • You can cleanly refactor your current code by applying the design patterns you've learned.

  • When explaining code to others, instead of explaining it in detail , you can simply say , "I used this design pattern!"

  • When writing new code, you will be able to determine which design pattern is most efficient to use.

  • You can make patterns simpler by using JavaScript/TypeScript language features.

Learn about these things.

Learn with TypeScript syntax

There are differences from other object-oriented languages like Java. I'll start by explaining structural typing, interfaces, and abstract classes.

Learn JavaScript grammar too

In most cases, TypeScript and JavaScript code are virtually identical. However, I'll explain any differences.

The lecture notes include a summary and UML.

As the code becomes increasingly complex, I've separately displayed the parts where design patterns are applied in UML . I'll explain UML in the lecture.

Let's make a simple (but not simple) drawing board.

Instead of relying on examples that don't really resonate, learn design patterns by building real programs. It was a struggle to cram in 25 design patterns...

Things to note before taking the course

Practice environment

  • The course will be conducted using Visual Studio Code Live Server on Windows 11. However, your operating system or IDE is not affected.

  • TypeScript version 5.5 or higher is sufficient.

Player Knowledge and Precautions

  • Basic JavaScript and TypeScript syntax

  • If you don't know TypeScript, you can remove the type part from TypeScript code and it will be JavaScript (although there are some parts where the design pattern is different because it is JavaScript).

  • Creating a drawing board is a secondary role, and the main purpose of this lecture is to learn design patterns.



강의소개.콘텐츠.추천문구

학습 대상은 누구일까요?

  • Anyone who wants to write more efficient code with JavaScript

  • For those who are curious about where design patterns can be used

  • For those who are curious about the use of classes in JavaScript

  • For those who are curious about the use of interfaces and abstract classes in TypeScript

선수 지식, 필요할까요?

  • JavaScript

  • TypeScript

강의소개.지공자소개

67,379

수강생

1,726

수강평

9,762

답변

4.8

강의 평점

25

강의_other

One of the key strengths of my courses is the Q&A support (Winner of the Inflearn Q&A King award twice). I respond to your questions within 24 hours, doing my best to help you out! I’ll answer your questions with the mindset that we are tackling the problems together!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.

👉ZeroCho Lectures
ZeroCho's full lecture roadmap. A complete roadmap of all my courses is available here.

– Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook
ZeroCho.com Operator
– Currently) Broadcasting development-related content on ZeroCho TV via YouTube
– Formerly) Smoretalk CTO
– Formerly) CTO of Today's Pickup (Youngest Development Team Lead at Kakao Mobility after exit to Kakao Mobility)

  • Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook

  • Operator of ZeroCho.com

  • Currently running a YouTube channel ZeroCho TV, covering development topics

  • Former CTO at SmoreTalk

  • Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

더보기

커리큘럼

전체

34개 ∙ (강의상세_런타임_시간 강의상세_런타임_분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

26개

4.7

26개의 수강평

  • bwlimtony7082님의 프로필 이미지
    bwlimtony7082

    수강평 3

    평균 평점 5.0

    5

    24% 수강 후 작성

    The content is very difficult, so I'm not making much progress, but I'm grateful for the JavaScript design pattern lecture 😊😊 As a non-major developer, this is something I really wanted to study, and I'm getting a lot of help from it while working at the company, with the explanation and the Paint example!

    • beamch61227님의 프로필 이미지
      beamch61227

      수강평 9

      평균 평점 5.0

      5

      62% 수강 후 작성

      • 30110303님의 프로필 이미지
        30110303

        수강평 4

        평균 평점 5.0

        5

        100% 수강 후 작성

        This was a more meaningful course because I could learn design patterns from a frontend perspective. It was great to see various examples of how to use classes! If there had been React examples as well, I think I would have gotten a much clearer sense of how to apply this in the real world, but I was able to gain insights by studying this part additionally on my own. Thank you for the great course!

        • seukchungmoon8847님의 프로필 이미지
          seukchungmoon8847

          수강평 37

          평균 평점 5.0

          5

          32% 수강 후 작성

          Thank you for the great lecture.

          • pehwish0827님의 프로필 이미지
            pehwish0827

            수강평 7

            평균 평점 5.0

            5

            100% 수강 후 작성

            zerocho님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!

            강의상세.할인문구

            $41,580.00

            30%

            $46.20