인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
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) 10 reviews

467 students

Design Pattern
oop
TypeScript
JavaScript
canvas

This course is prepared for Intermediate Learners.

What you will learn!

  • TypeScript Design Patterns

  • JavaScript Design Patterns

  • Create a drawing board with canvas

Is it really helpful for me to learn design patterns? 🤔

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

Yes, it helps more than not knowing!

I have always said, " Design patterns are not something you learn. As you optimize your code, design patterns will naturally form ." However, due to the nature of JavaScript/TypeScript, which does not actively use object-oriented concepts and classes, I have seen many people who do not actively use design patterns . So I would like to introduce to you at least what design patterns are and what types there are.

After watching this lecture, you will realize that you are already using several design patterns and that you can optimize your code in this way through design patterns.

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

Let's see the usefulness of design patterns with a simple example!

Do you have the same if statement repeated across multiple functions in your code? This means you have to modify three functions every time you add a new if statement.

By using the factory pattern and the state pattern, you can modify it like this! When a modification occurs, you only need to modify one function.

Features of this course

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

📌 Design patterns cannot be separated from SOLID principles . SOLID principles are also introduced.

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

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

I recommend this to these people

Anyone who wants to learn design patterns

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

Anyone needing 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

  • Now I know what design pattern the code I am writing is following.

  • 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 communicate, "I used this design pattern!"

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

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

Learn about these things.

Learn with TypeScript grammar

It is different from other object-oriented languages such as Java. I will first explain structural typing, interfaces, and abstract classes.

Learn with JavaScript grammar too

In most cases, TypeScript and JavaScript code are almost the same. However, I will tell you the differences separately.

The lecture notes include a summary and UML.

As the code gets more and more complicated, I have separately displayed the parts where the design pattern is applied in UML . I will explain UML in the lecture.

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

Instead of using examples that are hard to understand, learn design patterns by creating real programs. It was hard to fit in 25 design patterns...

Things to note before taking the class

Practice environment

  • The course will be taught using Visual Studio Code Live Server on Windows 11. However, the operating system and IDE do not matter.

  • TypeScript version 5.5 or higher is required.

Player Knowledge and Notes

  • Basic JavaScript, TypeScript grammar

  • If you don't know TypeScript, you can remove the type part from TypeScript code and it's JavaScript (although there are some parts where the design pattern is different because it's 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

63,515

Students

1,502

Reviews

9,576

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

10 reviews

5.0

10 reviews

  • bottlewook님의 프로필 이미지
    bottlewook

    Reviews 3

    Average Rating 5.0

    5

    24% enrolled

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

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

      Reviews 35

      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문들이 쪼개진 뇌를 휘젓는 것 같습니다... 그럴 때마다 항상 리팩토링은 필수라고 생각하고요. 디자인 패턴 강의 꼭 강추합니다.

            zerocho's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!