Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Web Development

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!

(5.0) 15 reviews

529 learners

  • zerocho
이론 실습 모두
canvas
Design Pattern
oop
TypeScript
JavaScript

Reviews from Early Learners

What you will learn!

  • 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.



Recommended for
these people

Who is this course right for?

  • 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

Need to know before starting?

  • JavaScript

  • TypeScript

Hello
This is

65,297

Learners

1,590

Reviews

9,690

Answers

4.8

Rating

22

Courses

제 강의의 장점은 Q&A입니다(인프런 답변왕 2회 수상). 24시간 이내에 최대한 답변드립니다! 같이 고민한다는 느낌으로 답변 드릴게요!

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
제로초 강의 전체 로드맵. A complete roadmap of all my courses is available here.

– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자 
ZeroCho.com 운영자
– 현) 유튜브에서 ZeroCho TV로 개발 관련 방송중 
– 현) 스모어톡 CTO 
– 전) 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 최연소 개발파트장)

  • 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

  • CTO at SmoreTalk

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

Curriculum

All

34 lectures ∙ (6hr 16min)

Published: 
Last updated: 

Reviews

All

15 reviews

5.0

15 reviews

  • bottlewook님의 프로필 이미지
    bottlewook

    Reviews 3

    Average Rating 5.0

    5

    24% enrolled

    내용이 많이 어려워 진도를 빠르게 나가고 있진 않지만 자바스크립트를 이용한 디자인 패턴 강의를 내주셔서 감사합니다 ㅎㅎ 비전공자 개발자로서 꼭 한번 공부하고 싶었던 내용인데 그림판 예시와 함께 설명해 주셔서 회사 일 하면서도 도움 많이 받고있습니다!

    • 문석청님의 프로필 이미지
      문석청

      Reviews 36

      Average Rating 5.0

      5

      32% enrolled

      좋은 강의 감사합니다.

      • pehwish님의 프로필 이미지
        pehwish

        Reviews 6

        Average Rating 5.0

        5

        100% enrolled

        • beam.ch6님의 프로필 이미지
          beam.ch6

          Reviews 7

          Average Rating 5.0

          5

          62% enrolled

          • 정민교님의 프로필 이미지
            정민교

            Reviews 17

            Average Rating 4.7

            5

            62% enrolled

            여태 코드를 리팩토링 하다보니까 완성된 코드들이 소개시켜주신 디자인 패턴에 해당하는 것도 꽤나 많았네요. 고민하면서 작성했던 코드들이 강좌에서 소개해주는 내용과 비슷하니까 더 이해도 잘 되고 기억에 잘 남는 것 같습니다. 로직이 조금만 복잡해져도 코드가 굉장히 읽기 힘들어진다고 느낍니다. 수 많은 if 문들이 내 뇌를 쪼개는 것 같고, 수 많은 for문들이 쪼개진 뇌를 휘젓는 것 같습니다... 그럴 때마다 항상 리팩토링은 필수라고 생각하고요. 디자인 패턴 강의 꼭 강추합니다.

            $46.20

            zerocho's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!