why-typescript-with-clean-architecture.pdf

8IZ5ZQFTDSJQUXJUI$MFBO"SDIJUFDUVSF ۨ੉פझ౟੿ਬ૓ HQFEEMFS!SBJOJTUDPN

Ѣ؀ೠਢ೐۽ં౟ܳ҃೷ೞݶࢲוԕ؍ ޙઁ੄धҗѾۿ য়טա־Ҋर਷੉ঠӝח

೐۽ં౟

ࣗ࠺੗оࢶఖೞחӘਲ਼ ઁಿ੄.*44*0/ ೐۽ં౟

ࣗ࠺੗оࢶఖೞחӘਲ਼ ೐۽ં౟

ઁಿ੉׮ܖח૑ध੉݆ӝद੘ೞפ ೐۽ં౟ܳҙܻೞӝبয۰ਕ૓׮

౱੉וԕ؍ޙઁ੄ध ઁಿҙ੼ ഈসҙ੼ ѐߊജ҃ҙ੼

ઁಿ੄Ҿӓ੸ੋݽणਸ࢚࢚೧ࠁݶ

ઁಿ੄Ҿӓ੸ੋݽणਸ࢚࢚೧ࠁݶ ੿݈Әਲ਼੄ݽٚѪਸ׮ܙѪэ׮

ઁಿ੄Ҿӓ੸ੋݽणਸ࢚࢚೧ࠁݶ ੿݈Әਲ਼੄ݽٚѪਸ׮ܙѪэ׮ э਷઱ઁبৈ۞ҙ੼ীࢲ׮ܙѪ੉׮

ࢲߡח੉ۧѱߑ؀ೠ૑धਸ׮ܖӝਤ೧ пࢲߡо׸׼ೞח੹ޙ૑धਸ୊ܻೞب۾ࢸ҅ .JDSPTFSWJDF"SDIJUFDUVSF

Ӓۧ׮ݶ௿ۄ੉঱౟ীࢲח

"1*(BUFXBZ $MJFOU

௿ۄ੉঱౟חઁಿ੄૑ध੉ࣻ۴ೞחҔ যڌѱ೧ঠ׮নೠ૑धਸਗഝೞѱాઁೡࣻ੓ਸө

ഈসীࢲ઺ਃೠѪ਷ޖ঺ੌө

ഈসীࢲ઺ਃೠѪ਷ޖ঺ੌө ৢ߄ܲҙ੼ਸ׮э੉ҕਬೞחѪ

2જ਷ஹನք౟ۆޖ঺ੌөਃ FY

2જ਷ஹನք౟ۆޖ঺ੌөਃ FY "੤ࢎਊࢿ੉ڪযդஹನք౟оજ਷ஹನք౟ইקөਃ "৉द֫਷ࢿמ੄ஹನք౟оજ਷Ѣભ "੹୓੸ਵ۽ࠂ੟بܳծ୾઱חஹನք౟ࢸ҅оજ਷Ѫэইਃ "ݺद੸ਵ۽ੜ੘ࢿػஹನք౟оજ਷Ѫэইਃ

2જ਷ஹನք౟ۆޖ঺ੌөਃ FY "੤ࢎਊࢿ੉ڪযդஹನք౟оજ਷ஹನք౟ইקөਃ "৉द֫਷ࢿמ੄ஹನք౟оજ਷Ѣભ "੹୓੸ਵ۽ࠂ੟بܳծ୾઱חஹನք౟ࢸ҅оજ਷Ѫэইਃ "ݺद੸ਵ۽ੜ੘ࢿػஹನք౟оજ਷Ѫэইਃ э਷઱ઁبݽفо׮ܲࢤпਸо૓׮

౱ীৢ߄ܲҙ੼੉ాੌغ૑ঋ੗ੌযդഅ࢚

ࢲ۽о݅ٚ௏٘ܳ೧ࢳೞӝয۵׮ ׼ࢎ੗оইפݶਬ૑ࠁࣻীҕࣻо௼׮ ௏ܻ٘࠭ܳ೧بझఋੌ߆ী૑੸غ૑ঋח׮ ࠺ૉפझ۽૒੄ਤ஖оઁпп੉׮ ׮द݅૑ӝफ׮ j

ѐߊ౱ীৢ߄ܲҙ੼੉ాੌغӝਤ೧೙ਃೠѤަө

"1*ࢲߡܳكੌ߈੸ੋਢ௏٘ҳઑ "1*ഐ୹ ݽ؛ച ۽૒୊ܻ ୹۱

class Human { constructor(name, age) { this.name = name; this.age
= age; } } class Profile extends React.Component { render() { const yujin = new Human('yujin', 24); return ( <div> <h1>{ yujin.name }</h1> <h2>{ `${yujin.age}ࣁ` }</h2> <h3>{ yujin.githubUrl }</h3> </div> ) } }

class Human { constructor(name, age) { this.name = name; this.age
= age; } } class Profile extends React.Component { render() { const yujin = new Human('yujin', 24); return ( <div> <h1>{ yujin.name }</h1> <h2>{ `${yujin.age}ࣁ` }</h2> <h3>{ yujin.githubUrl }</h3> </div> ) } } ী੉ࢸ݃

੿࢚୹۱ ब૑য௑ࣛହীبহחয়ܨ

"1*ഐ୹ ݽ؛ച ۽૒୊ܻ ୹۱ য়ܨѨ୹9 য়ܨѨ୹9 য়ܨѨ୹9

पࣻೞӝցޖજ਷঱য ӓࠂೡߑߨ੉হਸө

׮নೠ૑धਸਗഝೞѱాઁ ৢ߄ܲҙ੼ాੌ पࣻܳ୭ࣗചೡࣻ੓חѐߊജ҃ ౱੉וԕ؍ޙઁ੄ध ઁಿҙ੼ ഈসҙ੼ ѐߊജ҃ҙ੼

ޙઁ೧Ѿߑউ 5ZQFTBGFೠ঱যӝ߈ਵ۽ ૑ध઺ब੄ݺഛೠইఃఫ୛ܳࢸ҅ೞ੗

ױ ѐߊࣘبחڄয૑ݶউظjƕƕ ޙઁ೧Ѿߑউ 5ZQFTBGFೠ঱যӝ߈ਵ۽ ૑ध઺ब੄ݺഛೠইఃఫ୛ܳࢸ҅ೞ੗

؊ա਷ઁಿਸਤ೧ೞաঀ೧Ѿ೧ࠇद׮

5ZQFTBGFೠ঱য ૑ध઺ब੄ݺഛೠইఃఫ୛ ࡅܲѐߊࣘب

5ZQFӝ߈ ਢѐߊ੉оמೠ঱য 5ZQFTDSJQU &MN %BSU ,PUMJO+T j

tनӏ଻ਊ੉оמೠ঱যח u 5ZQFӝ߈ ਢѐߊ੉оמೠ঱য 5ZQFTDSJQU &MN %BSU ,PUMJO+T j

5ZQFTDSJQU 5ZQFTBGFೠ঱য ૑ध઺ब੄ݺഛೠইఃఫ୛ ࡅܲѐߊࣘب

਋ܻ৬э਷Ҋ޹ਸ੿ܻೠࣗ೐౟ਝয٣੗ੋ %PNBJO%SJWFO%FTJHO

بݫੋ੹ޙо ূ૑פয %PNBJO.PEFM рױೞѱࢸݺೞ੗ݶ ೨ब੉غחبݫੋਸ૑ࣘ੸ਵ۽੿੄ೞҊ ೧׼بݫੋਸ઺बਵ۽ࣗ೐౟ਝযܳࢸ҅ೞחѪ

ѐߊߑߨ੉ইצޙઁ೧Ѿਸਤೠ੽Ӕߨ

FY ഌఖӝળਵ۽ݽٚ஠٘ࢎ੄नਊ஠٘ܳ࠺Ү೧઱੗ بݫੋ੹ޙо ূ૑פয "஠٘ࢎ஠٘ҳઑ ഌఖ҅࢑۽૒ #஠٘ࢎ஠٘ҳઑ оݚ੼੿ࠁ ഌఖҳઑ ഌఖ҅࢑੉оמೠ
नਊ஠٘ݽ؛ ஠ؘ٘੉ఠా೤ ഌఖ੿ࠁழޭפா੉࣌۽૒ ࣗ࠺ಁఢ੿੄ ஠٘ ഌఖীҙೠبݫੋ૑ध j ؘ੉ఠా೤ҙܻ಴അਸਤೠ૑ध j

Ӓۢपઁҳഅ਷যڌѱೞݶજਸө

Ӓۢपઁҳഅ਷যڌѱೞݶજਸө $MFBO"SDIJUFDUVSF

੉੉ঠӝחઑӘٍীद੘೧ࠁѷणפ׮ IUUQGJWFBHFODZBOESPJEBSDIJUFDUVSFQBSUDMFBOBSDIJUFDUVSF

$MFBO"SDIJUFDUVSF 5ZQFTDSJQU 5ZQFTBGFೠ঱য ૑ध઺ब੄ݺഛೠইఃఫ୛ ࡅܲѐߊࣘب

ࡅܲѐߊಌನݢझܳਬ૑ೞחѪ

ࡅܲѐߊಌನݢझܳਬ૑ೞחѪ ࢲ࠺झ੄߸ചীٮܲ௏٘߸ചо୭ࣗೠੋѪ

ৈӝࢲ׮द$MFBO"SDIJUFDUVSF۽جই২פ׮ &OUJUZ 6TF$BTF $POUSPMMFS 6*

&OUJUZ 6TF$BTF $POUSPMMFS 6* بݫੋ৔৉ بݫੋ੹ޙо৬೤੄ೠ઺ब৔৉ ѐߊ ӝദ ؘ੉ఠݽفৈӝࢲ୹ߊೠ׮ بݫੋ৔৉ী؀ೠ੉೧о֫ই૗ীٮۄ૑ࣘ੸ਵ۽ߊ੹
ѐߊ঱য ࣽࣻۄ੉࠳۞ܻ৻੄ઓࢿ੉হ਺ ߸ച੄಩੉௼૑ঋ׮ ੉Ҕী௾߸ചо੓׮חѪ਷بݫੋਸੜޅ੉೧೮׮חѪ೐۽ં౟িযঠೠ׮

&OUJUZ 6TF$BTF $POUSPMMFS 6* ࠺૑פझ۽૒৔৉ ࢲ࠺झоઁҕೞחӝמ੉ҳ୓੸ਵ۽੿੄غҊبݫੋؘ੉ఠܳোѾೠ׮ ؘ੉ఠܳઁҕೞӝٸޙী%BUBCBTF )551١ী੄ઓ੸੉׮ بݫੋؘ੉ఠо߸ചೞѢա੄ઓࢿ੉੓חۄ੉࠳۞ܻ߸ചীٮۄ߸ചೠ׮

&OUJUZ 6TF$BTF $POUSPMMFS 6* 7JFX৔৉ ࢲ࠺झ੄&OE1PJOU ઁಿ੄٣੗ੋ ಴അ੄ݒѐ୓ ਢ੉ۄݶ࠳ۄ਋੷ 7JFXMJCSBSZ١ী੄ઓ੸
о੢݆੉߸ചೞח৔৉

߸ചীٮܲ௏٘߸ചܳాઁೡࣻ੓חইఃఫ୛׮ ѐߊࣘبܳࡅܰѱਬ૑ೡࣻ੓׮

5ZQFTBGFೠ঱য ૑ध઺ब੄ݺഛೠইఃఫ୛ ࡅܲѐߊࣘب $MFBO"SDIJUFDUVSF 5ZQFTDSJQU

पઁ۽ਢী੸ਊ೧ࠇद׮ ৘ઁ IUUQTHJUIVCDPNHQFEEMFSXFCDMFBOBSDIJUFDUVSF

٣۩షܻҳࢿ

%PNBJO-BZFS %%%੄بݫੋਸ׸׼ೞח৔৉ &OUJUZ3FQPTJUPSZ6TF$BTF۽ҳࢿ

&OUJUZ بݫੋ੄೨बҳࢿਃࣗ JE৬э਷Ҋਬࢿ੉ࠁ੢غחੋ੗۽&OUJUZ৬7BMVF0CKFDU۽ҳ࠙ ٍীࢲࢎ۹۽ਫ਼Ӭ׮ܖѷणפ׮ class User implements
Entity { id: number; name: string; type: User.Type; constructor( id: number, name: string, type: User.Type ) { this.id = id; this.name = name; this.type = type; } }

Repository - Entity를 제공하기 위한 Interface - 실제 구현은 DataSource에
의존성을 가지는 Data Layer에서 이루어짐 interface UserRepositoryType extends RepositoryType { search(query: string): Observable<List<User>> }

class SearchUsers extends UseCase<List<User>> { private repository: UserRepositoryType; query: string;
constructor(repository: UserRepositoryType) { super(); this.repository = repository; } protected build(): Observable<List<User>> { return this.repository.search(this.query); } protected validate(): boolean { return !!this.query; } } UseCase - 도메인 영역의 End-Point - 실제로 서비스를 이용하는 사용자가 하는 행동을 정의 - repository의 interface 기능을 조합하여 원하는 결과값을 하나로 돌려준다

൒ܴ੿ܻ tѨ࢝যܳੑ۱ೞݶ೧׼ೞחࢎਊ੗ݾ۾ਸࠁৈળ׮u 6* 6TF$BTF 4FBSDI6TFST 3FQPTJUPSZ 6TFS3FQPTJUPSZ Ѩ࢝য -JTU6TFS *OQVU.PEFM
-JTU&OUJUZ

%PNBJO-BZFS 6* 6TF$BTF 4FBSDI6TFST 3FQPTJUPSZ 6TFS3FQPTJUPSZ Ѩ࢝য -JTU6TFS *OQVU.PEFM -JTU&OUJUZ
൒ܴ੿ܻ tѨ࢝যܳੑ۱ೞݶ೧׼ೞחࢎਊ੗ݾ۾ਸࠁৈળ׮u

6* 6TF$BTF 4FBSDI6TFST 3FQPTJUPSZ 6TFS3FQPTJUPSZ Ѩ࢝য -JTU6TFS *OQVU.PEFM -JTU&OUJUZ ൒ܴ੿ܻ
tѨ࢝যܳੑ۱ೞݶ೧׼ೞחࢎਊ੗ݾ۾ਸࠁৈળ׮u

%BUB-BZFS 6* 6TF$BTF 4FBSDI6TFST 3FQPTJUPSZ 6TFS3FQPTJUPSZ Ѩ࢝য -JTU6TFS *OQVU.PEFM -JTU&OUJUZ

%BUB-BZFS पઁؘ੉ఠܳࠛ۞য়ח࠺ૉפझ۽૒ਸҳഅೞחҔ %BUB4PVSDFܳࢎਊೞӝਤೠ௏٘о੘ࢿػ׮

3FQPTJUPSZ بݫੋ৔৉੄3FQPTJUPSZӝמਸҳഅ ೙ਃೠ%BUB4PVSDFо઱ੑغযҳഅػ׮ interface UserRepositoryType extends RepositoryType {
search(query: string): Observable<List<User>> } class UserRepository implements UserRepositoryType { private githubApi: GithubApiProvider; constructor(githubApi: GithubApiProvider) { this.githubApi = githubApi; } search(query: string): Observable<List<User>> { return this.githubApi.searchUser(query); } }

"1*4FSWFS 6* 6TF$BTF 4FBSDI6TFST 3FQPTJUPSZ 6TFS3FQPTJUPSZ Ѩ࢝য -JTU6TFS *OQVU.PEFM -JTU&OUJUZ

6*-BZFSী6TF$BTFܳઁҕೞӝਤ೧ݽٚJOTUBODFܳ઱ੑ೧સפ׮ interface ApiProviderDependencies { github: GithubApiProvider; } interface RepositoryDependencies {
user: UserRepository; } interface UseCaseDependencies { searchUsers: SearchUsers; } class Context { private githubAxiosInstance: AxiosInstance; private apiProviders: ApiProviderDependencies; private repositories: RepositoryDependencies; useCases: UseCaseDependencies; constructor(githubAxiosInstance: AxiosInstance) { this.githubAxiosInstance = githubAxiosInstance; this.apiProviders = { github: new GithubApiProvider(githubAxiosInstance) }; this.repositories = { user: new UserRepository(this.apiProviders.github) }; this.useCases = { searchUsers: new SearchUsers(this.repositories.user) } } } const axiosInstance = Axios.create({ baseURL: Config.hosts.github, timeout: Config.timeout, headers: { 'Accept': 'application/json' } }); export const Application = new Context(axiosInstance);

6* $POUFYU 4FBSDI6TFST Ѩ࢝য -JTU6TFS t6*-BZFSח੉ઁ"QQMJDBUJPO$POUFYU݅ঌݶؾפ׮u

6*-BZFS ਬ੷ীѱઁҕೡ6*ܳઁҕೞחҔ 6TF$BTFܳഐ୹ೞҊ୭ઙ੸ੋ಴അ੉ੌযդ׮ $MFBO"SDIJUFDUVSFী૘઺೧ࢲࢸݺೞӝਤ೧৘ઁীח6* -BZFSীࢲ۽૒ਸܻ࠙ೞחইఃఫ୛оহणפ׮ 3FEVY .71
.77.١੗ਬ܂ѱ੸ਊೡࣻ੓णפ׮

private renderUsers = (users: List<User>) => <ul> { users.map((user, i)
=> <li key={ `users-${i}` }> { user.name } </li> ) } </ul>; apply(Application.useCases.searchUsers, it => it.query = query) .runOnAnimateFrame() .subscribe( users => this.setState({ users, fetchState: FetchState.FETCHED }), error => this.setState({ fetchState: FetchState.ERROR }) ) .unsubscribeBy(this.subscriptionBag)

पઁ۽೐۽ં౟ী੸ਊ೧ࠁҊդറӝ

t׳ۄ૓௏ܻ٘࠭u

஠٘ࢎ੉߮౟ ૐӂࢎ੉߮౟ t׳ۄ૓௏ܻ٘࠭u

஠٘ࢎ੉߮౟ ૐӂࢎ੉߮౟ ਢ౱ tل੉Ѣ੄ڙэ੉ࢤ҂Ҋ ݺࣁب࠺तೠؘ u t׳ۄ૓௏ܻ٘࠭u

t׳ۄ૓௏ܻ٘࠭u interface Event { id: string; name: string; } class
CardCompanyEvent implements Event { id: string; name: string; } class StockFirmEvent implements Event { id: string; name: string; }

interface Event { id: string; name: string; } class CardCompanyEvent
implements Event { id: string; name: string; } class StockFirmEvent implements Event { id: string; name: string; } ܻ࠭ب઺ r&OUJUZী೧ࢳ੉ੌযդѪэ਷ؘ s t$BSE$PNQBOZ&WFOUJE4UPDL'JSN&WFOUJE੉ݶل੉э਷੉߮౟ীਃ u t׳ۄ૓௏ܻ٘࠭u

஠٘ࢎ੉߮౟ ૐӂࢎ੉߮౟ ࢲߡ౱ ஠٘ࢎ੉߮౟ૐӂࢎ੉߮౟ ਢ౱ ஠٘ࢎ੉߮౟ૐӂࢎ੉߮౟ t׳ۄ૓௏ܻ٘࠭u

%PNBJO 6* 'BDU 5IFPSZ ݺ੉п੗ٜ݅যبэইঠೡ௏٘ ݺ੉п੗ٜ݅ݶ׮׮ܳ௏٘

૑Әө૑਋ܻо঴݃ա೧ࢳਤ઱੄௏٘ܳ੘ࢿ೮ח૑ഥҊೡࣻ੓঻णפ׮ ੉ઁৢ߄ܲҙ੼ਸ୶ҳೞחઑ૒੉غӝद੘೮׮חૐѢ

੿ܻ ׮নೠ૑धਸਗഝೞѱాઁ ৢ߄ܲҙ੼ాੌ पࣻܳ୭ࣗചೡࣻ੓חѐߊജ҃

بݫੋਸ઺बਵ۽ࢸ҅ೞৈ೧Ѿ ૑ध੉טযաѢա߸ച೧ب߸ೞחࠗ࠙੉ੌ੿ೞ׮ সޖदр୶੿ীبੌࠗب਑੉غ঻਺ ੿ܻ ׮নೠ૑धਸਗഝೞѱాઁ ৢ߄ܲҙ੼ాੌ पࣻܳ୭ࣗചೡࣻ੓חѐߊജ҃

%%%ܳా೧௏٘߬੉झ੄ݺഛೠ઺ब੉ࢤ҂׮ ࢎपҗ೧ࢳਸҳ࠙ೡࣻ੓ѱغ঻׮ ௏ܻ٘࠭ী߸ചоࢤ҂׮ ੿ܻ ׮নೠ૑धਸਗഝೞѱాઁ ৢ߄ܲҙ੼ాੌ पࣻܳ୭ࣗചೡࣻ੓חѐߊജ҃

5ZQFTDSJQU۽ࠁ׮উ੹ೠ௏٘߬੉झٜܳ݅঻׮ -BZFSFE"SDIJUFDUVSF۽ଵઑҙ҅оݺഛ೧૑פࠗ࠙੸ਵ۽5FTUооמ೧઎׮ ੜޅೞݶ੉ઁয়ܨоդ׮ ݅ࣁ ੿ܻ ׮নೠ૑धਸਗഝೞѱాઁ ৢ߄ܲҙ੼ాੌ पࣻܳ୭ࣗചೡࣻ੓חѐߊജ҃

੉۠द೯଱য়ٜਸэ੉ѻਵݶࢲഴܯೠઁಿਸ݅٘पੋ੤ܳݽ૘ೞҊ੓णפ׮ HQFEEMFS!SBJOJTUDPN കಕ੉૑ IUUQTSBJOJTUDPN ীߑޙೞदݶ଻ਊ੿ࠁܳഛੋೞपࣻ੓णפ׮

хࢎ೤פ׮

why-typescript-with-clean-architecture.pdf

why-typescript-with-clean-architecture.pdf

Featured

Transcript