Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Clean Architecture-in Banksalad

Clean Architecture-in Banksalad

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

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

SoYoung210

October 07, 2019
Tweet

More Decks by SoYoung210

Other Decks in Programming

Transcript

  1. $MFBO"SDIJUFDUVSF
    ੉ࣗ৔]FUIEVE!HNBJMDPN

    IUUQTTPTPEFW
    *O#BOL4BMBE

    View full-size slide

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



    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. X5ZQF4DSJQU
    $MFBO"SDIJUFDUVSF
    JO#BOL4BMBE

    View full-size slide

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

    View full-size slide

  11. #೐۽ં౟ҙ੼

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    (새로 입사해서 레거시 인계받은 사람)
    ഈসҙ੼

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. ‘개발 방법’ 을 어떻게 합의해야 할까?
    ഈসҙ੼
    п੗੄ҳഅ੉ઁпп੉૑ঋب۾ೞݶࢲبഛ੢ࢿਸ೧஖૑ঋח

    ੸׼ೠઁೠਸفযݽفٜ೯ࠂೞѱ੉Սחӏ஗
    변경에 빠르게 대응할 수 있도록
    이해하기 쉽도록
    확장에 용이하도록

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Let’s introduce.

    $MFBO"SDIJUFDUVSF
    JO#BOL4BMBE

    View full-size slide

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

    View full-size slide

  25. useCase ઺बਵ۽ ҙबࢎ੄ ܻ࠙, ੄ઓࢿ ઱ੑ੉ ੉ܖযઉঠ ೠ׮.
    entity৬ useCaseח ࠺ૉפझ object۽ ߄ۄࠁҊ,

    ui١ ৻ࠗࣁ҅ח gatewayܳ ా೧ usecase৬ ࣗా೤פ׮.

    ҙबࢎܳ ܻ࠙ೞҊ ࠺ૉפझ ۽૒ਸ/ ߄Չࣻ ੓ח ݽٚ ਃࣗ۽ࠗఠ ܻ࠙ೞח Ѫ੉

    ௿ܽইఃఫ୊੄ ೨बੑפ׮.

    View full-size slide

  26. https://www.youtube.com/watch?v=5eOYb0Yvqh0
    https://speakerdeck.com/sunghyunzz/clean-architecture-in-android-revised
    :
    :
    ௿ܽইఃఫ୊ ੿ࢳী ҙೠ ؊੗ࣁೠ ղਊ੉ ҾӘೞद׮ݶ,

    ৢ೧ ٘۽੉٘ա੉எীࢲ ࣗѐػ ௿ܽইఃఫ୊ী ؀ೠ ߊ಴ܳ ୶ୌ٘݀פ׮.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. ੹୓੸ੋ ҳઑח ੉ۧѱ ؾפ׮.

    Contextח ੄ઓࢿ ઱ੑ੉ ੉ܖয૑ח Ҕ,

    Domain Layer৬ Entity Layerܳ ನೣೞҊ ੓ח core,

    Data Layerܳ ׸׼ೞח Dataಫ؊, ӒܻҊ Presentationਵ۽ ҳࢿؾפ׮.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. Context - 대운동장

    View full-size slide

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

    View full-size slide

  35. Service는 repository 를 주입받습니다.

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

    View full-size slide

  36. 1SFTFOUBUJPO
    ನ௄ހ ೙٘ۄח viewח য়૒ serviceܳ ଵઑೞҊ ੓Ҋ,

    Ӓ উী ੿੄ػ ೯زਸ ഐ୹ೞҊ ੓ח ഋకੑפ׮.

    ৈӝࢲח ࣻ૘ࢲ࠺झܳ ഐ୹ೞҊ ੓णפ׮.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. !DPOUFYUTFSWJDFJOEFYUTY
    service dependencyۄח ੉ܴਵ۽ ೙ਃೠ ৈ۞о૑ ࢲ࠺झо ࢤࢿغҊ,

    RepositoryDependencies ۄח Ѫਸ ઱ੑ߉חѪਸ ࠅ ࣻ੓णפ׮.

    View full-size slide

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

    View full-size slide

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

    पઁ ҳ୓੸ੋ ೯ز਷ ੉ 3о૑ ۨನ૑షܻী ੿੄غয ੓ח ഋకੑפ׮.

    serviceח RepositoryDepnedencyܳ ઱ੑ߉Ҋ, п RepositoryDependencyח

    ೙ਃೠ ׮ܲ Repositoryܳ о૕ ࣻ੓णפ׮.ҳ୓੸ੋ ೯ز਷ ৈӝী ੿੄غয ੓חѪ੉ભ.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. !DPOUFYUIUUQQSPWJEFST
    apiо ৈ۞ serverীࢲ ҙܻؼ ٸ,

    server nameਸ ӝળਵ۽ ޘযفח ࠗ࠙ੑפ׮.
    ex: Serviceח Server, ח api serverܳ ଵઑೠ׮ݶ

    ੉ܳ ա־য فӝ ਤೣ.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. DPSFTFSWJDF DPSFSFQPTJUPSZ
    : Domain Layer - 사용자의 use case로 분리되는 Layer
    interface로 정의된
    Repository를 주입받는다.
    catch৬ call਷ ࢎਊ੗੄ use case۽ ࠅ ࣻ ੓णפ׮.

    ೙ਃೠ ૒੽੸ੋ ৻ࠗ ܻࣗझח Ӓ ޖ঺ب աఋա੓૑ ঋणפ׮.

    ੉ ࠗ࠙਷ ,߸ೡ ࣻ ੓ח ਃࣗ۽ࠗఠ ܻ࠙दఃӝ ਤೣੑפ׮.

    View full-size slide

  53. TSDEBUB
    : Data Layer - 네트워크를 포함한 데이터를 가져오는 Layer
    ߸ೡࣻ ੓ח ਃࣗח DataLayerী ੿੄ೞѱ ؾפ׮.

    Data Layerо ߄۽ ֎౟ਕ௼ܳ ನೣ೧ࢲ ؘ੉ఠܳ оઉয়ח Layer੉ӝ ٸޙੑפ׮

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. TSD!DPOUFYUDPOUFYUJOTUBODFUTY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. 1SFTFOUBUJPO

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  70. 1SFTFOUBUJPO

    View full-size slide

  71. 1SFTFOUBUJPO
    ੉ܳ ইө ࢓ಝࠄ ௿ܽইఃఫ୊ Ӓܿҗ োҙ૑য ࢤп೧ࠁݶ, ನ௄ހ ೙٘ ஹನք౟ח uiۨ੉যী ೧׼೤פ׮.

    ࣻ૘ࢲ࠺झী catchо ੿੄ػ ࠗ࠙਷ gateWay ۨ੉যী ೧׼ೞҊ,

    catchೣࣻ ղࠗীࢲח repositoryܳ ా೧ ؘ੉ఠܳ ഐ୹ೞ޲۽ ই݃ب use caseۨ੉য۽ ࠅࣻ ੓ਸѪ эणפ׮.

    catchী ನೣغח بхݽন੄ ‘ನ௄ހ ੿ࠁ’ח entity۽ ߄ۄࠅ ࣻ ੓णפ׮.

    View full-size slide

  72. ೠ׀ীిইࠁӝ
    Clean Architecture

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  76. 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

    View full-size slide

  77. 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

    View full-size slide

  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
    DPOUFYUTFSWJDFTחDPSF੄TFSWJDFܳݽইم
    Entity - Entity Layer
    Repository - Domain Layer
    Interface

    View full-size slide

  79. $MFBO"SDIJUFDUVSF JO#BOL4BMBE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  86. #VUʜ
    #FTU1SBDUJDFۆ

    View full-size slide

  87. #VUʜ
    #FTU1SBDUJDFۆ

    View full-size slide

  88. #VUʜ
    #FTU1SBDUJDFۆ

    View full-size slide

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

    View full-size slide

  90. 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

    View full-size slide