Clean Architecture-in Banksalad

10336b5650295a6d91a6ae90be63dc55?s=47 SoYoung210
October 07, 2019

Clean Architecture-in Banksalad

2019 2nd Event XXIT TECH TALK에서 발표한 내용을 공유합니다.

스크립트가 필요한 부분은 회색박스에 내용을 추가했습니다.

10336b5650295a6d91a6ae90be63dc55?s=128

SoYoung210

October 07, 2019
Tweet

Transcript

  1. $MFBO"SDIJUFDUVSF ੉ࣗ৔]FUIEVE!HNBJMDPN
 IUUQTTPTPEFW *O#BOL4BMBE

  2. য়ט੄ղਊ 3FBDU೐۽ં౟ীҳઑо೙ਃೠ੉ਬ য়טࣗѐೡইఃఫ୊ GFBU54   

  3. 3FBDU ೐۽ં౟ীҳઑо೙ਃೠ੉ਬ

  4. 3FBDU೐۽ં౟ীҳઑо೙ਃೠ੉ਬ : React로 프로젝트를 진행해봅시다! : 오! 좋아요!

  5. react-router webpack & loader redux & redux- middleware babel react

    프로젝트를 셋팅하기 위해서는 정말 많은 것들이 필요합니다.
  6. : 어찌저찌.. 필요한 것들을 다 갖추었다..

  7. : 어찌저찌.. 필요한 것들을 다 갖추었다.. : Routing 규칙은 어떻게할까요?

    데이터를 받아와서 View에서 사용하는건 어떻게 연결할까요? 비즈니스 로직 처리는 어디서 할까요? 세부 서비스가 있는데 이런건 어떻게 구분해서 규칙을 세울까요? 최초에 token처리를 해야하는데 이건 어디서 이루어 지나요? 구조를 어떻게 가져갈까요? 하지만, 이런 셋팅들을 다 했다고 하더라도, 비즈니스 로직 처리는 어떻게 할것인지, 폴더 구조는 어떻게 잡을 것인지 등 정말 프로젝트 관점에서 중요한 요소에 대한 고민이 필요합니다.
  8. : 어찌저찌.. 필요한 것들을 다 갖추었다.. : 음, 그… Clean

    Architecture 어떨까요 : Routing 규칙은 어떻게할까요? 데이터를 받아와서 View에서 사용하는건 어떻게 연결할까요? 비즈니스 로직 처리는 어디서 할까요? 세부 서비스가 있는데 이런건 어떻게 구분해서 규칙을 세울까요? 최초에 token처리를 해야하는데 이건 어디서 이루어 지나요? 구조를 어떻게 가져갈까요?
  9. X5ZQF4DSJQU $MFBO"SDIJUFDUVSF JO#BOL4BMBE

  10. ৵$MFBO"SDIJUFDUVSFੌөਃ ೐۽ં౟ҙ੼ ഈসҙ੼ ѐߊജ҃ҙ੼

  11. #೐۽ં౟ҙ੼

  12. 소비자가 선택하는 금융 #೐۽ં౟ҙ੼

  13. 소비자가 선택하는 금융 #೐۽ં౟ҙ੼

  14. 클라이언트는 제품의 정보가 수렴하는 곳. 프로젝트는 관리하기 어려워집니다. 이 모든

    카테고리가 수렴하는 곳이 바로 클라이언트, 즉 웹 프론트엔드 입니다. 여러가지 서비스를 제공하는 하나의 프로젝트를 어떻게 구성해 나가는의 관점에서 이 발표를 들어보시면 좋을것 같습니다.
  15. Q. 개발에서 협업은 왜 필요할까? ഈসҙ੼

  16. Q. 개발에서 협업은 왜 필요할까? A. 내가 모든 서비스를 만들

    수 없어요.. ഈসҙ੼
  17. Q. 협업 과정에서 생기는 문제는? A. 소영님..코드를 읽을수 없어요 무슨

    소리인지 도당췌… ;; A. 서버한테 받아오는 데이터 형식 어디있어요 ?? A. api 명세가 수정되었습니다! 우리는 무엇을 해야할까요… A. 새로 비즈니스 로직 짜고 싶은데 뭘 어디서부터 어떻게해야..;; A. 아니 이분은 무슨 기준으로 이렇게 짰는지 
 (새로 입사해서 레거시 인계받은 사람) ഈসҙ੼
  18. Q. 협업 과정에서 중요한 것은? = 합의된 규칙을 공유하는 것

    ഈসҙ੼
  19. ‘개발 방법’ 을 어떻게 합의해야 할까? ഈসҙ੼ 변경에 빠르게 대응할

    수 있도록 이해하기 쉽도록 확장에 용이하도록
  20. ‘개발 방법’ 을 어떻게 합의해야 할까? ഈসҙ੼ п੗੄ҳഅ੉ઁпп੉૑ঋب۾ೞݶࢲبഛ੢ࢿਸ೧஖૑ঋח
 ੸׼ೠઁೠਸفযݽفٜ೯ࠂೞѱ੉Սחӏ஗ 변경에

    빠르게 대응할 수 있도록 이해하기 쉽도록 확장에 용이하도록
  21. ѐߊജ҃ҙ੼ 없는 것을 참조하던 시절..

  22. TypeSafe한 언어로, Domain 중심의 구조로 설계하자

  23. Let’s introduce. $MFBO"SDIJUFDUVSF JO#BOL4BMBE

  24. ٜযоӝ੹ী 이런것들을 이야기 합니다. 이런 내용을 포함하지 않습니다. 1. 자세하게,

    Clean Architecture는 어떤 것인가? : ⚠ 재해석한 구조이기 때문에, Clean Architecture에서 말하고 있는 부분과 일부 다른점이 존재. 2. Domain 주도 개발에 대한 A to Z 1. 간단하게, Clean Architecture는 어떤 것인가? 2. BankSalad에서 바라봤었던 Clean Architecture의 구현체
  25. None
  26. useCase ઺बਵ۽ ҙबࢎ੄ ܻ࠙, ੄ઓࢿ ઱ੑ੉ ੉ܖযઉঠ ೠ׮. entity৬ useCaseח

    ࠺ૉפझ object۽ ߄ۄࠁҊ, ui١ ৻ࠗࣁ҅ח gatewayܳ ా೧ usecase৬ ࣗా೤פ׮. ҙबࢎܳ ܻ࠙ೞҊ ࠺ૉפझ ۽૒ਸ/ ߄Չࣻ ੓ח ݽٚ ਃࣗ۽ࠗఠ ܻ࠙ೞח Ѫ੉ ௿ܽইఃఫ୊੄ ೨बੑפ׮.
  27. https://www.youtube.com/watch?v=5eOYb0Yvqh0 https://speakerdeck.com/sunghyunzz/clean-architecture-in-android-revised : : ௿ܽইఃఫ୊ ੿ࢳী ҙೠ ؊੗ࣁೠ ղਊ੉ ҾӘೞद׮ݶ,

    ৢ೧ ٘۽੉٘ա੉எীࢲ ࣗѐػ ௿ܽইఃఫ୊ী ؀ೠ ߊ಴ܳ ୶ୌ٘݀פ׮.
  28. *-BZFST 1SFTFOUBUJPO %BUB %PNBJO &OUJUZ 사용자에게 보여지는 로직과 관련된 Layer

    네트워크를 포함한 데이터를 가져오는 Layer 사용자의 use case로 분리되는 Layer 개념을 정의하는 Layer ⚠ Uncle Bob didn't say this.⚠ ੹୓੸ੋ ҳઑܳ 4ѐ੄ ۨ੉য۽ ա־য ࠁওणפ׮.
  29. *-BZFST 1SFTFOUBUJPO %BUB %PNBJO &OUJUZ 사용자에게 보여지는 로직과 관련된 Layer

    네트워크를 포함한 데이터를 가져오는 Layer 사용자의 use case로 분리되는 Layer 개념을 정의하는 Layer ⚠ Uncle Bob didn't say this.⚠ -BZFSܻ࠙৬੄ઓࢿ઱ੑী'PDVT
  30. 코드로 한번 살펴볼까요 자! 이제 시작이야!()

  31. ੹୓੸ੋ ҳઑח ੉ۧѱ ؾפ׮. Contextח ੄ઓࢿ ઱ੑ੉ ੉ܖয૑ח Ҕ, Domain

    Layer৬ Entity Layerܳ ನೣೞҊ ੓ח core, Data Layerܳ ׸׼ೞח Dataಫ؊, ӒܻҊ Presentationਵ۽ ҳࢿؾפ׮.
  32. Context에서 무엇인가 가져옵니다. export const Application = new Context(…)

  33. Context = 프로젝트에 필요한 요소를 초기화 하는 곳

  34. Context - 대운동장

  35. VIEW Services Interface 가 정의되어 있다. Context - 대운동장 모든

    것을 줄세우는
  36. Service는 repository 를 주입받습니다.
 뒤에서 더 자세히.. Context - 대운동장

    모든 것을 줄세우는 Services Interface 가 정의되어 있다. 원칙☝: 종속성 주입. VIEW
  37. 1SFTFOUBUJPO ನ௄ހ ೙٘ۄח viewח য়૒ serviceܳ ଵઑೞҊ ੓Ҋ, Ӓ উী

    ੿੄ػ ೯زਸ ഐ୹ೞҊ ੓ח ഋకੑפ׮. ৈӝࢲח ࣻ૘ࢲ࠺झܳ ഐ୹ೞҊ ੓णפ׮.
  38. ৈӝө૑੄Ѿۿ਷ View가 알아야 할것

  39. View가 알아야 할것 오직 Services ৈӝө૑੄Ѿۿ਷

  40. Services 에는 View가 알아야 할 모든 것들을 정의해 둡니다.

  41. Services 에는 View가 알아야 할 모든 것들을 정의해 둡니다. ࣻ૘

    ஖ܐ ؀Ѿ ҃ো ୓ਭҙFUD
  42. !DPOUFYUTFSWJDFJOEFYUTY service dependencyۄח ੉ܴਵ۽ ೙ਃೠ ৈ۞о૑ ࢲ࠺झо ࢤࢿغҊ, RepositoryDependencies ۄח

    Ѫਸ ઱ੑ߉חѪਸ ࠅ ࣻ੓णפ׮.
  43. !DPOUFYUSFQPTJUPSJFT context/Repository는 필요한 모든 Repository를 가집니다. data/repository

  44. src/@context/repositories/센터.tsx ৘ٜܳয, context੄ ನ௄ހ ࣃఠ ۨ౵૑ షܻח 3о૑ ۨನ૑షܻܳ о૘פ׮.

    पઁ ҳ୓੸ੋ ೯ز਷ ੉ 3о૑ ۨನ૑షܻী ੿੄غয ੓ח ഋకੑפ׮. serviceח RepositoryDepnedencyܳ ઱ੑ߉Ҋ, п RepositoryDependencyח ೙ਃೠ ׮ܲ Repositoryܳ о૕ ࣻ੓णפ׮.ҳ୓੸ੋ ೯ز਷ ৈӝী ੿੄غয ੓חѪ੉ભ.
  45. @context/index.tsx 에서 RepositoryDependencies 를 갖고 있게 됩니다.

  46. 자, 이제 @context 의 나머지 부분도 살펴봅시다.

  47. !DPOUFYUIUUQQSPWJEFST apiо ৈ۞ serverীࢲ ҙܻؼ ٸ, server nameਸ ӝળਵ۽ ޘযفח

    ࠗ࠙ੑפ׮. ex: Serviceח Server, ח api serverܳ ଵઑೠ׮ݶ ੉ܳ ա־য فӝ ਤೣ.
  48. DPSFFOUJUZ : Entity Layer - 개념을 정의하는 Layer

  49. src/core/entity/pokemon/index.tsx Entity는 약속입니다. 도메인에서 파생되는 개념을 표현합니다. ডࣘ੿੄

  50. VIEW Services Interface 가 정의되어 있다. Context - 대운동장 모든

    것을 줄세우는 여기서 무슨 규칙으로 커뮤니케이션 하죠?
  51. VIEW Services Interface 가 정의되어 있다. Context - 대운동장 모든

    것을 줄세우는 Entity 입니다.
  52. 이런 것들을 모두 Entity로 정의합니다.

  53. DPSFTFSWJDF DPSFSFQPTJUPSZ : Domain Layer - 사용자의 use case로 분리되는

    Layer interface로 정의된 Repository를 주입받는다. catch৬ call਷ ࢎਊ੗੄ use case۽ ࠅ ࣻ ੓णפ׮. ೙ਃೠ ૒੽੸ੋ ৻ࠗ ܻࣗझח Ӓ ޖ঺ب աఋա੓૑ ঋणפ׮. ੉ ࠗ࠙਷ ,߸ೡ ࣻ ੓ח ਃࣗ۽ࠗఠ ܻ࠙दఃӝ ਤೣੑפ׮.
  54. TSDEBUB : Data Layer - 네트워크를 포함한 데이터를 가져오는 Layer

    ߸ೡࣻ ੓ח ਃࣗח DataLayerী ੿੄ೞѱ ؾפ׮. Data Layerо ߄۽ ֎౟ਕ௼ܳ ನೣ೧ࢲ ؘ੉ఠܳ оઉয়ח Layer੉ӝ ٸޙੑפ׮
  55. TSDEBUBSFQPTJUPSZ api ৬ storageܳ ઱ੑ߉ইࢲ ೙ਃೠ Ѫٜਸ ഐ୹ೞҊ ੓ח ഋకੑפ׮.

  56. TSDEBUBSFQPTJUPSZ Domain Layer에 정의된 Repository를 실제로 구현한다.

  57. TSDEBUBSFQPTJUPSZ 필요한 storage & api를 주입받는다.

  58. ਬ੷೯ز VTF$BTF ਷߸ೞ૑ঋҊ : Domain Layer

  59. ৻ࠗ੄ઓࢿ݅߸҃оמ ਬ੷೯ز VTF$BTF ਷߸ೞ૑ঋҊ

  60. server로부터 받은 json을 Entity로 TSDEBUBIUUQBQJ

  61. TSDEBUBIUUQBQJ api를 호출하고 Mapper의 응답 값 반환

  62. TSD!DPOUFYUIUUQQSPWJEFST dataীࢲ ࢤࢿೠ http providerח contextীࢲ पઁ ё୓о ࢤࢿؾפ׮.

  63. TSD!DPOUFYUDPOUFYUJOTUBODFUTY

  64. TSD!DPOUFYUDPOUFYUJOTUBODFUTY @context/http-providers에서 생성한 CollectProviderDependencies

  65. TSD!DPOUFYUDPOUFYUJOTUBODFUTY apiProvider는 repository에 주입되고 repository는 service에 주입되는 형태.

  66. 이제 View(Presentation Layer) 에서 사용하는 모습을 보러갑시다. (발표 끝나갑니다.)

  67. 1SFTFOUBUJPO

  68. 1SFTFOUBUJPO new Context를 통해 생성한 Application의 service호출

  69. 1SFTFOUBUJPO service중 포켓몬 수집 서비스 참조

  70. 1SFTFOUBUJPO 수집 서비스의 catch 함수 호출

  71. 1SFTFOUBUJPO

  72. 1SFTFOUBUJPO ੉ܳ ইө ࢓ಝࠄ ௿ܽইఃఫ୊ Ӓܿҗ োҙ૑য ࢤп೧ࠁݶ, ನ௄ހ ೙٘

    ஹನք౟ח uiۨ੉যী ೧׼೤פ׮. ࣻ૘ࢲ࠺झী catchо ੿੄ػ ࠗ࠙਷ gateWay ۨ੉যী ೧׼ೞҊ, catchೣࣻ ղࠗীࢲח repositoryܳ ా೧ ؘ੉ఠܳ ഐ୹ೞ޲۽ ই݃ب use caseۨ੉য۽ ࠅࣻ ੓ਸѪ эणפ׮. catchী ನೣغח بхݽন੄ ‘ನ௄ހ ੿ࠁ’ח entity۽ ߄ۄࠅ ࣻ ੓णפ׮.
  73. ೠ׀ীిইࠁӝ Clean Architecture

  74. Context - 대운동장 모든 것을 줄세우는 Presentation services View -

    Presentation Layer - router, component 등 WJFX TFSWJDF
  75. Context - 대운동장 모든 것을 줄세우는 Presentation services repositories View

    - Presentation Layer - router, component 등 WJFX TFSWJDF
  76. Context - 대운동장 모든 것을 줄세우는 Presentation services repositories View

    - Presentation Layer - router, component 등 WJFX TFSWJDF core Entity - Entity Layer
  77. Context - 대운동장 모든 것을 줄세우는 Presentation services repositories View

    - Presentation Layer - router, component 등 WJFX TFSWJDF core Entity - Entity Layer Service - Domain Layer Repository - Domain Layer DPOUFYUTFSWJDFTחDPSF੄TFSWJDFܳݽইم Interface
  78. Context - 대운동장 모든 것을 줄세우는 Presentation services repositories View

    - Presentation Layer - router, component 등 WJFX TFSWJDF core Service - Domain Layer http - Data Layer data Repository - Data Layer EBUBSFQPDPSFSFQPܳ*NQMFNFOUT Entity - Entity Layer Repository - Domain Layer Interface
  79. Context - 대운동장 모든 것을 줄세우는 Presentation services repositories View

    - Presentation Layer - router, component 등 WJFX TFSWJDF core Service - Domain Layer http - Data Layer data Repository - Data Layer EBUBSFQPDPSFSFQPܳ*NQMFNFOUT DPOUFYUTFSWJDFTחDPSF੄TFSWJDFܳݽইم Entity - Entity Layer Repository - Domain Layer Interface
  80. ݃ޖܻ

  81. $MFBO"SDIJUFDUVSF JO#BOL4BMBE

  82. View 는 Service 만 알았고, $MFBO"SDIJUFDUVSF JO#BOL4BMBE

  83. View 는 Service 만 알았고, $MFBO"SDIJUFDUVSF Service 안에 행동이 정의되어

    있으며 JO#BOL4BMBE
  84. View 는 Service 만 알았고, $MFBO"SDIJUFDUVSF Service 안에 행동이 정의되어

    있으며 그 행동은 주입받은 repository에 의존합니다. JO#BOL4BMBE
  85. View 는 Service 만 알았고, $MFBO"SDIJUFDUVSF Service 안에 행동이 정의되어

    있으며 그 행동은 주입받은 repository에 의존합니다. if ( 이 규칙을 이해한다 ) { JO#BOL4BMBE
  86. View 는 Service 만 알았고, $MFBO"SDIJUFDUVSF Service 안에 행동이 정의되어

    있으며 그 행동은 주입받은 repository에 의존합니다. if ( 이 규칙을 이해한다 ) { return 빠른 개발 } JO#BOL4BMBE
  87. View 는 Service 만 알았고, $MFBO"SDIJUFDUVSF Service 안에 행동이 정의되어

    있으며 그 행동은 주입받은 repository에 의존합니다. if ( 이 규칙을 이해한다 ) { return [빠른 개발 , 규칙적인 개발] } JO#BOL4BMBE
  88. #VUʜ #FTU1SBDUJDFۆ

  89. #VUʜ #FTU1SBDUJDFۆ

  90. #VUʜ #FTU1SBDUJDFۆ

  91. хࢎ೤פ׮ ੉ࣗ৔]FUIEVE!HNBJMDPN]IUUQTTPTPEFW

  92. Ref https://medium.com/@younghyun/클린-아키텍처-파트1-데이터베이스-vs-도메인-236c7008ac83 https://academy.realm.io/kr/posts/clean-architecture-in-android/ https://speakerdeck.com/sunghyunzz/clean-architecture-in-android-revised