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

290 students

Design Pattern
oop
TypeScript
JavaScript
canvas
Thumbnail

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!

Screenshot 2024-11-18 114158

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.

Screenshot 2024-11-18 113743

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

inflearn_python_04

Anyone who wants to learn design patterns

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

inflearn_python_07

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

inflearn_python_06

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.

Screenshot 2024-11-18 121745

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.

Screenshot 2024-11-18 122051

Learn with JavaScript grammar too

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

Screenshot 2024-11-18 121352

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.

Screenshot 2024-11-18 121632

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 zerocho

Students

60,868

Reviews

1,414

Rating

4.8

Courses

21

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

https://www.zerocho.com/lecture

제로초 강의 전체 로드맵

 

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

Curriculum

All

34 lectures ∙ (6hr 16min)

Published: 
Last updated: 

Reviews

Not enough reviews.
Become the author of a review that helps everyone!