Skip to content

mechaniccoder/design-pattern

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

34 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Design pattern

์†Œํ”„ํŠธ์›จ์–ด๊ฐ€ ๊ฐ€์ง„ ๋ณต์žก๋„๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ๋„“๊ณ  ๊นŠ์€ ์„ ์กฐ๋“ค์˜ ์ง€ํ˜œ๋ฅผ ์ตํžˆ๊ณ  ์‹ค์ œ๋กœ ์‹ค๋ฌด์—์„œ ์ด๋ฅผ ์ž์œ ์ž์žฌ๋กœ ์ƒ๊ฐํ•˜๊ณ , ์ฐธ๊ณ ํ•˜๊ณ  ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉด ์ง€๊ธˆ๋ณด๋‹ค ๋” ํ›Œ๋ฅญํ•œ ๊ฐœ๋ฐœ์ž๋กœ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์— ๋””์ž์ธ ํŒจํ„ด์— ๋Œ€ํ•œ ๊ณต๋ถ€๋ฅผ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ์„œ React์™€ Redux๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์˜ ์ฒ ํ•™์ด ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ๊ธฐ๋ฐ˜ํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ์‹ค๋ฌด์— OOP๋ฅผ ์ ์šฉํ•ด๋ณด๊ธฐ๋Š” ์‰ฝ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋””์ž์ธํŒจํ„ด์„ ํ•™์Šตํ•˜๋Š” ๊ฒƒ์€ ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ๋ณ€๊ฒฝ์— ์œ ์—ฐํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ณ  ๊ฑฐ์‹œ์ ์œผ๋กœ ๋ดค์„๋•Œ ์†ŒํŠธํ”„์›จ์–ด ์•„ํ‚คํ…์ฒ˜๋ฅผ ์–ด๋–ป๊ฒŒ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์„์ง€์— ๋Œ€ํ•œ ํžŒํŠธ๋ฅผ ์ค„ ๊ฒƒ์ด๋ผ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ, ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ ๋ณ‘๋ ฌ์ ์œผ๋กœ ํ•™์Šตํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋‘˜์˜ ์ฐจ์ด์ ์„ ๋น„๊ตํ•˜๋Š” ๊ฒƒ๋„ ์ƒ๋‹นํ•œ ์˜๊ฐ์„ ์ค„ ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

ํ—ค๋“œํผ์ŠคํŠธ ๋””์ž์ธํŒจํ„ด์„ ์ฐธ๊ณ ํ•ฉ๋‹ˆ๋‹ค.

Contents

Strategy

  • ๋ณ€๊ฒฝ์—๋Š” ๋‹ซํ˜€์žˆ๊ณ  ํ™•์žฅ์—๋Š” ์—ด๋ ค์žˆ์–ด์•ผ ํ•œ๋‹ค๋Š” OCP ๋ฒ•์น™์ด ํ•ต์‹ฌ์ด์—ˆ๋˜ ํŒจํ„ด์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ์ฒด ํด๋ž˜์Šค์™€์˜ composition์ด ์•„๋‹Œ ์ธํ„ฐํŽ˜์ด์Šค์™€์˜ composition์„ ํ†ตํ•ด ๋Ÿฐํƒ€์ž„์— ์–ด๋–ค ๊ฐ์ฒด์™€ ํ˜‘๋ ฅ์„ ํ•  ๊ฒƒ์ธ์ง€ ๊ฒฐ์ •์„ ํ•ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Observable

  • observable์ด observer๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ง์ ‘ ๋ณด๋‚ด๋Š”(push), observer๊ฐ€ observable์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ง์ ‘ ๊ฐ€์ ธ์˜ค๋Š”(pull) ๋‘๊ฐ€์ง€ ๋ฐฉ์‹์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ pull ๋ฐฉ์‹์ด ๋” ์˜ฌ๋ฐ”๋ฅธ ๋ฐฉ๋ฒ•์ด๋ผ๊ณ  ํ•˜๋Š”๋ฐ, push๋ฐฉ์‹์˜ ๊ฒฝ์šฐ๋Š” observable์ด ๋ณ€๊ฒฝ๋˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ง์ ‘ observer์—๊ฒŒ ๋ณด๋‚ด์•ผํ•˜๋Š” ๋‹จ์ ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. pull๋ฐฉ์‹์˜ ๊ฒฝ์šฐ๋Š” observable ๊ฐ์ฒด๊ฐ€ observer์—๊ฒŒ ๋ฉ”์„ธ์ง€๋ฅผ ๋ณด๋‚ด๋ฉด observer ๊ฐ์ฒด๋“ค์€ ์•Œ์•„์„œ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • observer ํŒจํ„ด์—์„œ observer๊ฐ€ ๋ณ€๊ฒฝ๋ ๋•Œ observerable์€ ๊ฑด๋“ค์ง€ ์•Š๊ณ  ์ฝ”๋“œ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. observable์˜ ์ƒํƒœ๋Š” ๊ทธ๋Œ€๋กœ ๋†”๋‘ฌ๋„ ๋œ๋‹ค๋Š” ์˜๋ฏธ์ด์ฃ .

Decorator

  • ์ƒ์†์œผ๋กœ ํ™•์žฅ์„ ํ•  ๊ฒฝ์šฐ ์ปดํŒŒ์ผ ํƒ€์ž„์— ์˜์กด์„ฑ์ด ๊ฒฐ์ •๋˜๊ธฐ ๋•Œ๋ฌธ์—, ํด๋ž˜์Šค๊ฐ€ ํญ๋ฐœํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค.
  • ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ ํŒจํ„ด์€ ์ƒ์†์„ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ์— ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ๋ฅผ ์ž˜ ํ•ด๊ฒฐํ•ด์ค€๋‹ค. ํŠนํžˆ OCP(open close principle) ์›์น™์„ ์ง€ํ‚ค๋ฉด์„œ ํ™•์žฅ์„ฑ๋„ ๊ฐ€์ ธ๊ฐˆ ์ˆ˜ ์žˆ๋‹ค.
  • ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ ๊ฐ์ฒด๋Š” ํด๋ผ์ด์–ธํŠธ์˜ ์ž…์žฅ์—์„œ ๊ฐ์‹ธ๋Š” ๊ฐ์ฒด์™€ ๊ฐ™์€ ํ–‰๋™์„ ํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ์ฒด๊ฐ€ ๊ตฌํ˜„ํ•˜๊ณ  ์žˆ๋Š” ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌํ˜„ํ•ด์•ผ๋งŒ ํ•œ๋‹ค.
  • ๋„ˆ๋ฌด ๋งŽ์€ ์ˆ˜์˜ ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•˜๋Š” ๋‹จ์ ์ด ์žˆ๋‹ค.

Singleton

  • ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์—ญ์—์„œ ๋‹จ 1๊ฐœ์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” ํŒจํ„ด์ด๋‹ค.
  • ์–ด๋А ๊ณณ์—์„œ๋„ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ณ , ์ „์—ญ ๋ณ€์ˆ˜์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ์ธ์Šคํ„ด์Šค๋ฅผ lazy loadingํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์˜์กด์„ฑ์ด ์ปค์„œ ๋ณ€๊ฒฝ์ ์ด ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์—ญ์œผ๋กœ ํผ์งˆ ์ˆ˜ ์žˆ๋‹ค. ์‹ฑ๊ธ€ํ„ด์˜ ๊ณ ์งˆ์ ์ธ ๋ฌธ์ œ๋‹ค.
  • ๋ฉ€ํ‹ฐ์Šค๋ ˆ๋”ฉ ํ™˜๊ฒฝ์—์„œ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฉ”์„œ๋“œ๋ฅผ synchonizationํ•ด์ค˜์•ผ ํ•œ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์—ฌ๋Ÿฌ ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์‹ค์ œ๋กœ ์‹ฑ๊ธ€ํ„ด์„ ์ง์ ‘ ๊ตฌํ˜„ํ•ด์„œ ์‚ฌ์šฉํ•  ์ผ์€ ๋งŽ์ง€๋Š” ์•Š์„ ๊ฒƒ์ด๋‹ค.
  • ํ”„๋ŸฐํŠธ์—”๋“œ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋“ค์„ ์ƒ๊ฐํ•ด๋ณด๋ฉด(Redux, Recoil) ๋‚ด๋ถ€์ ์œผ๋กœ ์‹ฑ๊ธ€ํ„ด์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์„ ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ•œ๋‹ค. ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ React Query์—์„œ cahce, Context API๋„ ์žˆ๋‹ค. ์ƒ๋‹นํžˆ ์—ฌ๋Ÿฌ ๊ณณ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์„ ๋ดค์„๋•Œ ์‰ฝ๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ์„ค๊ณ„ ๋ฐฉ๋ฒ•์ธ ๊ฒƒ ๊ฐ™๋‹ค. ํ•˜์ง€๋งŒ ์•ž์„œ ์–ธ๊ธ‰ํ–ˆ๋˜ ๋ฐ”์™€ ๊ฐ™์ด ์˜์กด์„ฑ์ด ๋งค์šฐ ํฌ๊ธฐ ๋•Œ๋ฌธ์— ์กฐ์‹ฌํ•ด์„œ ๋‹ค๋ค„์•ผํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค.

Iterator

  • array ํ˜น์€ linked list ์ฒ˜๋Ÿผ ๋ฐ˜๋ณต๋˜๋Š” ๊ตฌ์กฐ์—์„œ ๊ตฌํ˜„์„ ํด๋ผ์ด์–ธํŠธ์— ๋…ธ์ถœ์‹œํ‚ค์ง€ ์•Š๊ณ  ๋™์ผํ•œ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ๋” ํ•˜๋Š” ํŒจํ„ด์ด๋‹ค. Javascript์—์„œ๋Š” [symbol.iterator] ํ™œ์šฉ์„ ์˜ˆ๋กœ ๋“ค ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค. Map, Set, Array, generator๊ฐ€ ์ด๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์˜ˆ์‹œ์ด๋‹ค.

Composite

  • single object์™€ group of object๋ฅผ ๋™์ผํ•˜๊ฒŒ ์ทจ๊ธ‰ํ•˜๋Š” ํŒจํ„ด์ด๋‹ค. ์•„๋งˆ ํด๋” ๊ตฌ์กฐ๊ฐ™์€ ๊ฒƒ๋“ค์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” single object๋‚˜ group object๋ฅผ ๋™์ผํ•˜๊ฒŒ ์ธ์‹ํ•˜๋Š” ์ถ”์ƒํ™”๊ฐ€ ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

State

  • ์ „๋žต ํŒจํ„ด๊ณผ ๋งค์šฐ ์œ ์‚ฌํ•˜๋‚˜ ํ˜„์žฌ ์–ด๋–ค ์ƒํƒœ ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ• ์ง€๋ฅผ ์ƒํƒœ ๊ฐ์ฒด๊ฐ€ ๊ฒฐ์ •ํ•œ๋‹ค.
  • ๊ฒฐ๊ตญ์— ์กฐ๊ฑด๋ฌธ์ด ์•„๋‹ˆ๋ผ ๋ช…์‹œ์ ์œผ๋กœ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด์„œ ๋ณต์žก๋„๋ฅผ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•์ธ๋ฐ, ์ด๋ฅผ ์ปดํฌ๋„ŒํŠธ์—๋„ ์ ์šฉํ•˜์ž๋ฉด ๊ฐ’์„ ์กฐ๊ฑด๋ฌธ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์œผ๋กœ ์–ด๋–ค ์ƒํƒœ์— ๋Œ€ํ•œ ๋ช…์‹œ์ ์ธ UI๋ฅผ ๊ทธ๋ฆด ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

About

Learn design pattern reading book

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published