Clean Architecture-in Banksalad

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

react-router webpack & loader redux & redux- middleware babel react 프로젝트를 셋팅하기 위해서는 정말 많은 것들이 필요합니다.

Slide 6

Slide 6 text

: 어찌저찌.. 필요한 것들을 다 갖추었다..

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

: 어찌저찌.. 필요한 것들을 다 갖추었다.. : 음, 그… Clean Architecture 어떨까요 : Routing 규칙은 어떻게할까요? 데이터를 받아와서 View에서 사용하는건 어떻게 연결할까요? 비즈니스 로직 처리는 어디서 할까요? 세부 서비스가 있는데 이런건 어떻게 구분해서 규칙을 세울까요? 최초에 token처리를 해야하는데 이건 어디서 이루어 지나요? 구조를 어떻게 가져갈까요?

Slide 9

Slide 9 text

X5ZQF4DSJQU $MFBO"SDIJUFDUVSF JO#BOL4BMBE

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

#೐۽ં౟ҙ੼

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

클라이언트는 제품의 정보가 수렴하는 곳. 프로젝트는 관리하기 어려워집니다. 이 모든 카테고리가 수렴하는 곳이 바로 클라이언트, 즉 웹 프론트엔드 입니다. 여러가지 서비스를 제공하는 하나의 프로젝트를 어떻게 구성해 나가는의 관점에서 이 발표를 들어보시면 좋을것 같습니다.

Slide 15

Slide 15 text

Q. 개발에서 협업은 왜 필요할까? ഈসҙ੼

Slide 16

Slide 16 text

Q. 개발에서 협업은 왜 필요할까? A. 내가 모든 서비스를 만들 수 없어요.. ഈসҙ੼

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Q. 협업 과정에서 중요한 것은? = 합의된 규칙을 공유하는 것 ഈসҙ੼

Slide 19

Slide 19 text

‘개발 방법’ 을 어떻게 합의해야 할까? ഈসҙ੼ 변경에 빠르게 대응할 수 있도록 이해하기 쉽도록 확장에 용이하도록

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ѐߊജ҃ҙ੼ 없는 것을 참조하던 시절..

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ٜযоӝ੹ী 이런것들을 이야기 합니다. 이런 내용을 포함하지 않습니다. 1. 자세하게, Clean Architecture는 어떤 것인가? : ⚠ 재해석한 구조이기 때문에, Clean Architecture에서 말하고 있는 부분과 일부 다른점이 존재. 2. Domain 주도 개발에 대한 A to Z 1. 간단하게, Clean Architecture는 어떤 것인가? 2. BankSalad에서 바라봤었던 Clean Architecture의 구현체

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

useCase ઺बਵ۽ ҙबࢎ੄ ܻ࠙, ੄ઓࢿ ઱ੑ੉ ੉ܖযઉঠ ೠ׮. entity৬ useCaseח ࠺ૉפझ object۽ ߄ۄࠁҊ, ui١ ৻ࠗࣁ҅ח gatewayܳ ా೧ usecase৬ ࣗా೤פ׮. ҙबࢎܳ ܻ࠙ೞҊ ࠺ૉפझ ۽૒ਸ/ ߄Չࣻ ੓ח ݽٚ ਃࣗ۽ࠗఠ ܻ࠙ೞח Ѫ੉ ௿ܽইఃఫ୊੄ ೨बੑפ׮.

Slide 27

Slide 27 text

https://www.youtube.com/watch?v=5eOYb0Yvqh0 https://speakerdeck.com/sunghyunzz/clean-architecture-in-android-revised : : ௿ܽইఃఫ୊ ੿ࢳী ҙೠ ؊੗ࣁೠ ղਊ੉ ҾӘೞद׮ݶ, ৢ೧ ٘۽੉٘ա੉எীࢲ ࣗѐػ ௿ܽইఃఫ୊ী ؀ೠ ߊ಴ܳ ୶ୌ٘݀פ׮.

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

*-BZFST 1SFTFOUBUJPO %BUB %PNBJO &OUJUZ 사용자에게 보여지는 로직과 관련된 Layer 네트워크를 포함한 데이터를 가져오는 Layer 사용자의 use case로 분리되는 Layer 개념을 정의하는 Layer ⚠ Uncle Bob didn't say this.⚠ -BZFSܻ࠙৬੄ઓࢿ઱ੑী'PDVT

Slide 30

Slide 30 text

코드로 한번 살펴볼까요 자! 이제 시작이야!()

Slide 31

Slide 31 text

੹୓੸ੋ ҳઑח ੉ۧѱ ؾפ׮. Contextח ੄ઓࢿ ઱ੑ੉ ੉ܖয૑ח Ҕ, Domain Layer৬ Entity Layerܳ ನೣೞҊ ੓ח core, Data Layerܳ ׸׼ೞח Dataಫ؊, ӒܻҊ Presentationਵ۽ ҳࢿؾפ׮.

Slide 32

Slide 32 text

Context에서 무엇인가 가져옵니다. export const Application = new Context(…)

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Context - 대운동장

Slide 35

Slide 35 text

VIEW Services Interface 가 정의되어 있다. Context - 대운동장 모든 것을 줄세우는

Slide 36

Slide 36 text

Service는 repository 를 주입받습니다.  뒤에서 더 자세히.. Context - 대운동장 모든 것을 줄세우는 Services Interface 가 정의되어 있다. 원칙☝: 종속성 주입. VIEW

Slide 37

Slide 37 text

1SFTFOUBUJPO ನ௄ހ ೙٘ۄח viewח য়૒ serviceܳ ଵઑೞҊ ੓Ҋ, Ӓ উী ੿੄ػ ೯زਸ ഐ୹ೞҊ ੓ח ഋకੑפ׮. ৈӝࢲח ࣻ૘ࢲ࠺झܳ ഐ୹ೞҊ ੓णפ׮.

Slide 38

Slide 38 text

ৈӝө૑੄Ѿۿ਷ View가 알아야 할것

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Services 에는 View가 알아야 할 모든 것들을 정의해 둡니다. ࣻ૘ ஖ܐ ؀Ѿ ҃ো ୓ਭҙFUD

Slide 42

Slide 42 text

!DPOUFYUTFSWJDFJOEFYUTY service dependencyۄח ੉ܴਵ۽ ೙ਃೠ ৈ۞о૑ ࢲ࠺झо ࢤࢿغҊ, RepositoryDependencies ۄח Ѫਸ ઱ੑ߉חѪਸ ࠅ ࣻ੓णפ׮.

Slide 43

Slide 43 text

!DPOUFYUSFQPTJUPSJFT context/Repository는 필요한 모든 Repository를 가집니다. data/repository

Slide 44

Slide 44 text

src/@context/repositories/센터.tsx ৘ٜܳয, context੄ ನ௄ހ ࣃఠ ۨ౵૑ షܻח 3о૑ ۨನ૑షܻܳ о૘פ׮. पઁ ҳ୓੸ੋ ೯ز਷ ੉ 3о૑ ۨನ૑షܻী ੿੄غয ੓ח ഋకੑפ׮. serviceח RepositoryDepnedencyܳ ઱ੑ߉Ҋ, п RepositoryDependencyח ೙ਃೠ ׮ܲ Repositoryܳ о૕ ࣻ੓णפ׮.ҳ୓੸ੋ ೯ز਷ ৈӝী ੿੄غয ੓חѪ੉ભ.

Slide 45

Slide 45 text

@context/index.tsx 에서 RepositoryDependencies 를 갖고 있게 됩니다.

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

!DPOUFYUIUUQQSPWJEFST apiо ৈ۞ serverীࢲ ҙܻؼ ٸ, server nameਸ ӝળਵ۽ ޘযفח ࠗ࠙ੑפ׮. ex: Serviceח Server, ח api serverܳ ଵઑೠ׮ݶ ੉ܳ ա־য فӝ ਤೣ.

Slide 48

Slide 48 text

DPSFFOUJUZ : Entity Layer - 개념을 정의하는 Layer

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

VIEW Services Interface 가 정의되어 있다. Context - 대운동장 모든 것을 줄세우는 Entity 입니다.

Slide 52

Slide 52 text

이런 것들을 모두 Entity로 정의합니다.

Slide 53

Slide 53 text

DPSFTFSWJDF DPSFSFQPTJUPSZ : Domain Layer - 사용자의 use case로 분리되는 Layer interface로 정의된 Repository를 주입받는다. catch৬ call਷ ࢎਊ੗੄ use case۽ ࠅ ࣻ ੓णפ׮. ೙ਃೠ ૒੽੸ੋ ৻ࠗ ܻࣗझח Ӓ ޖ঺ب աఋա੓૑ ঋणפ׮. ੉ ࠗ࠙਷ ,߸ೡ ࣻ ੓ח ਃࣗ۽ࠗఠ ܻ࠙दఃӝ ਤೣੑפ׮.

Slide 54

Slide 54 text

TSDEBUB : Data Layer - 네트워크를 포함한 데이터를 가져오는 Layer ߸ೡࣻ ੓ח ਃࣗח DataLayerী ੿੄ೞѱ ؾפ׮. Data Layerо ߄۽ ֎౟ਕ௼ܳ ನೣ೧ࢲ ؘ੉ఠܳ оઉয়ח Layer੉ӝ ٸޙੑפ׮

Slide 55

Slide 55 text

TSDEBUBSFQPTJUPSZ api ৬ storageܳ ઱ੑ߉ইࢲ ೙ਃೠ Ѫٜਸ ഐ୹ೞҊ ੓ח ഋకੑפ׮.

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

server로부터 받은 json을 Entity로 TSDEBUBIUUQBQJ

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

TSD!DPOUFYUDPOUFYUJOTUBODFUTY

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

1SFTFOUBUJPO

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

1SFTFOUBUJPO

Slide 72

Slide 72 text

1SFTFOUBUJPO ੉ܳ ইө ࢓ಝࠄ ௿ܽইఃఫ୊ Ӓܿҗ োҙ૑য ࢤп೧ࠁݶ, ನ௄ހ ೙٘ ஹನք౟ח uiۨ੉যী ೧׼೤פ׮. ࣻ૘ࢲ࠺झী catchо ੿੄ػ ࠗ࠙਷ gateWay ۨ੉যী ೧׼ೞҊ, catchೣࣻ ղࠗীࢲח repositoryܳ ా೧ ؘ੉ఠܳ ഐ୹ೞ޲۽ ই݃ب use caseۨ੉য۽ ࠅࣻ ੓ਸѪ эणפ׮. catchী ನೣغח بхݽন੄ ‘ನ௄ހ ੿ࠁ’ח entity۽ ߄ۄࠅ ࣻ ੓णפ׮.

Slide 73

Slide 73 text

ೠ׀ীిইࠁӝ Clean Architecture

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

݃ޖܻ

Slide 81

Slide 81 text

$MFBO"SDIJUFDUVSF JO#BOL4BMBE

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

#VUʜ #FTU1SBDUJDFۆ

Slide 89

Slide 89 text

#VUʜ #FTU1SBDUJDFۆ

Slide 90

Slide 90 text

#VUʜ #FTU1SBDUJDFۆ

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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