Clean Architecture-in Banksalad

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

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

Transcript

1. $MFBO
   "SDIJUFDUVSF ੉ࣗ৔
   ]
   FUIEVE!HNBJMDPN
 IUUQTTPTPEFW
   *O
   #BOL4BMBE
2. য়ט੄
   ղਊ 3FBDU
   ೐۽ં౟ী
   ҳઑо
   ೙ਃೠ
   ੉ਬ
   য়ט
   ࣗѐ
   ೡ
   ইఃఫ୊ GFBU
   54
    
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. X
   5ZQF4DSJQU
   
   $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의 구현체
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 EBUBSFQP
    
    DPSFSFQPܳ
    *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 EBUBSFQP
    
    DPSFSFQPܳ
    *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
    ʜ #FTU
    1SBDUJDFۆ
89. 
    #VU
    ʜ #FTU
    1SBDUJDFۆ
90. 
    #VU
    ʜ #FTU
    1SBDUJDFۆ
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