From 1d0b1876cad58d5ce17264a71eb5570f0e64f949 Mon Sep 17 00:00:00 2001 From: Donghyun Park Date: Sun, 28 Sep 2025 21:19:35 +0900 Subject: [PATCH 1/6] =?UTF-8?q?[8=EC=9E=A5]=20=EB=A6=AC=EC=95=A1=ED=8A=B8?= =?UTF-8?q?=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EA=B4=80=EB=A6=AC=20-=20?= =?UTF-8?q?=EB=B0=95=EB=8F=99=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\353\260\225\353\217\231\355\230\204.md" | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 "8\354\236\245-\353\246\254\354\225\241\355\212\270 \353\215\260\354\235\264\355\204\260 \352\264\200\353\246\254/\353\260\225\353\217\231\355\230\204.md" diff --git "a/8\354\236\245-\353\246\254\354\225\241\355\212\270 \353\215\260\354\235\264\355\204\260 \352\264\200\353\246\254/\353\260\225\353\217\231\355\230\204.md" "b/8\354\236\245-\353\246\254\354\225\241\355\212\270 \353\215\260\354\235\264\355\204\260 \352\264\200\353\246\254/\353\260\225\353\217\231\355\230\204.md" new file mode 100644 index 0000000..a122488 --- /dev/null +++ "b/8\354\236\245-\353\246\254\354\225\241\355\212\270 \353\215\260\354\235\264\355\204\260 \352\264\200\353\246\254/\353\260\225\353\217\231\355\230\204.md" @@ -0,0 +1,29 @@ +# 8 리액트 데이터 관리 + +상태공유의 문제를 살펴보고 context api가 어떻게 도움이 되는지 알아보는 파트 + +- 비지니스 로직 누수 현상 +- ACL +- Prop Driling +- Context API를 통한 Props Driling 문제 해결 + +## 비즈니스 로직 누수란? + +- 비즈니스 로직과 관련없는 컴포넌트나 애플리케이션 영역으로 흘러 들어가는 현상을 비지니스 로직 누수라 함. + +특히 변환이 코드베이스 전반에 중복되면, 특히 백엔드 데이터 구조가 변경될때 일부 영역에서 업데이트를 놓칠 수 있음 + +이러한 변환들을 데이터 변형이 이루어지는 한 곳으로 모을 수 있음 이를 ACL을 통해 설명함 + +### ACL(오류 방지 계층) + +ACL은 프런트엔드와 백엔드 api를 연결해 주는 역할을 함. FE개발은 일관성이 부족하거나 복잡한 데이터 형식을 가진 여러 서비스를 다루어야 할 때가 종종 있음 +이떄 ACL을 구현하여 서비스들과 상호 작용하는 통합 인터페이스를 만들면 좋음 + +ex) +RESTFull API와 GraphQL서비스, Websocket서버와 상호 작용해야 할 때 이 서비스들은 고유의 규칙과 복잡성을 가짐 +이를 ACL을통해 FE app이 이해할 수 있는 형태로 변환하면 UI는 각 서비스별 데이터 형식의 복잡한 세부사항에 신경쓰지 않아도 됨 + +고로 개발과 테스트 유지보수에 용이하며, 캐시 처리, 오류 변환 등 여러 문제를 처리하는 전략 계층으로 활용될 수 있음(중복 배제 효과도 있음) + +transform같은 메서드를 만들어 같은 타입의 객체를 반환하는 형식 From 0b618e95932143691f972033b7acaa2a81d78bf2 Mon Sep 17 00:00:00 2001 From: Donghyun Park Date: Sun, 28 Sep 2025 21:19:39 +0900 Subject: [PATCH 2/6] =?UTF-8?q?[9=EC=9E=A5]=20=EB=A6=AC=EC=95=A1=ED=8A=B8?= =?UTF-8?q?=20=EC=84=A4=EA=B3=84=20=EC=9B=90=EC=B9=99=20=EC=A0=81=EC=9A=A9?= =?UTF-8?q?=20-=20=EB=B0=95=EB=8F=99=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\353\260\225\353\217\231\355\230\204.md" | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 "9\354\236\245-\353\246\254\354\225\241\355\212\270 \354\204\244\352\263\204 \354\233\220\354\271\231 \354\240\201\354\232\251/\353\260\225\353\217\231\355\230\204.md" diff --git "a/9\354\236\245-\353\246\254\354\225\241\355\212\270 \354\204\244\352\263\204 \354\233\220\354\271\231 \354\240\201\354\232\251/\353\260\225\353\217\231\355\230\204.md" "b/9\354\236\245-\353\246\254\354\225\241\355\212\270 \354\204\244\352\263\204 \354\233\220\354\271\231 \354\240\201\354\232\251/\353\260\225\353\217\231\355\230\204.md" new file mode 100644 index 0000000..e69de29 From 6e66dd5f409bad0bb111dcc57a95ade43b462187 Mon Sep 17 00:00:00 2001 From: Donghyun Park Date: Sun, 28 Sep 2025 21:19:41 +0900 Subject: [PATCH 3/6] =?UTF-8?q?[10=EC=9E=A5]=20=ED=95=A9=EC=84=B1=20?= =?UTF-8?q?=ED=8C=A8=ED=84=B4=20-=20=EB=B0=95=EB=8F=99=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\353\260\225\353\217\231\355\230\204.md" | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 "10\354\236\245-\355\225\251\354\204\261 \355\214\250\355\204\264/\353\260\225\353\217\231\355\230\204.md" diff --git "a/10\354\236\245-\355\225\251\354\204\261 \355\214\250\355\204\264/\353\260\225\353\217\231\355\230\204.md" "b/10\354\236\245-\355\225\251\354\204\261 \355\214\250\355\204\264/\353\260\225\353\217\231\355\230\204.md" new file mode 100644 index 0000000..7b08153 --- /dev/null +++ "b/10\354\236\245-\355\225\251\354\204\261 \355\214\250\355\204\264/\353\260\225\353\217\231\355\230\204.md" @@ -0,0 +1,5 @@ +# 합성패턴 + +HOC를 통하여 합성하는 방법과 훅을 통해 로직을 캡슐화하며 제공하는 방법 설명 + +훅을통해 헤드리스 컴포넌트 패턴을 유지하여 로직부분과 ui부분을 나눌 수 있음 From fa5c1fac6c5aee66f65aa1638445f46bc8acf16b Mon Sep 17 00:00:00 2001 From: Donghyun Park Date: Sun, 28 Sep 2025 21:19:43 +0900 Subject: [PATCH 4/6] =?UTF-8?q?[11=EC=9E=A5]=20=EB=A6=AC=EC=95=A1=ED=8A=B8?= =?UTF-8?q?=20=EA=B3=84=EC=B8=B5=20=EA=B5=AC=EC=A1=B0=20=EC=95=A0=ED=94=8C?= =?UTF-8?q?=EB=A6=AC=EC=BC=80=EC=9D=B4=EC=85=98=20-=20=EB=B0=95=EB=8F=99?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\353\260\225\353\217\231\355\230\204.md" | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 "11\354\236\245-\353\246\254\354\225\241\355\212\270 \352\263\204\354\270\265 \352\265\254\354\241\260 \354\225\240\355\224\214\353\246\254\354\274\200\354\235\264\354\205\230/\353\260\225\353\217\231\355\230\204.md" diff --git "a/11\354\236\245-\353\246\254\354\225\241\355\212\270 \352\263\204\354\270\265 \352\265\254\354\241\260 \354\225\240\355\224\214\353\246\254\354\274\200\354\235\264\354\205\230/\353\260\225\353\217\231\355\230\204.md" "b/11\354\236\245-\353\246\254\354\225\241\355\212\270 \352\263\204\354\270\265 \352\265\254\354\241\260 \354\225\240\355\224\214\353\246\254\354\274\200\354\235\264\354\205\230/\353\260\225\353\217\231\355\230\204.md" new file mode 100644 index 0000000..a8e8fb8 --- /dev/null +++ "b/11\354\236\245-\353\246\254\354\225\241\355\212\270 \352\263\204\354\270\265 \352\265\254\354\241\260 \354\225\240\355\224\214\353\246\254\354\274\200\354\235\264\354\205\230/\353\260\225\353\217\231\355\230\204.md" @@ -0,0 +1,12 @@ +# 리액트 계층 구조 애플리케이션 + +애플리케이션을 계층화하면 핵심 문제들을 해결할 수 있습니다. + +- 관심사 분리 + 서로 다른 계층은 각기 다른 책임을 다루게 되므로 코드 베이스를 쉽게 이해하고 찾아볼 수 있습니다. +- 높은 재사용성 + 비즈니스 로직과 데이터 모델을 애플리케이션 전반에서 재사용하기 쉬워집니다. +- 테스트 용이성 + 계층 구조는 단위 테스트와 통합 테스트를 작성하기 수월하게 하므로 더욱 탄탄한 애플리케이션을 만들 수 있습니다. +- 유지보수성 + 계층 구조로 설계하면 애플리케이션이 커지더라도 기능을 추가하기가 수월합니다. From c2e8e69a859f30ae4e1938b02536629ccbd96605 Mon Sep 17 00:00:00 2001 From: Donghyun Park Date: Sun, 28 Sep 2025 21:19:45 +0900 Subject: [PATCH 5/6] =?UTF-8?q?[12=EC=9E=A5]=20E2E=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=EC=A0=9D=ED=8A=B8=20=EA=B5=AC=ED=98=84=ED=95=98=EA=B8=B0=20-?= =?UTF-8?q?=20=EB=B0=95=EB=8F=99=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\353\260\225\353\217\231\355\230\204.md" | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 "12\354\236\245-E2E \355\224\204\353\241\234\354\240\235\355\212\270 \352\265\254\355\230\204\355\225\230\352\270\260/\353\260\225\353\217\231\355\230\204.md" diff --git "a/12\354\236\245-E2E \355\224\204\353\241\234\354\240\235\355\212\270 \352\265\254\355\230\204\355\225\230\352\270\260/\353\260\225\353\217\231\355\230\204.md" "b/12\354\236\245-E2E \355\224\204\353\241\234\354\240\235\355\212\270 \352\265\254\355\230\204\355\225\230\352\270\260/\353\260\225\353\217\231\355\230\204.md" new file mode 100644 index 0000000..e69de29 From 798b438c6606fe6991eb7ad3e7f93de2b89cdd2e Mon Sep 17 00:00:00 2001 From: Donghyun Park Date: Sun, 28 Sep 2025 21:19:55 +0900 Subject: [PATCH 6/6] =?UTF-8?q?[13=EC=9E=A5]=20=EB=A6=AC=EC=95=A1=ED=8A=B8?= =?UTF-8?q?=20=EC=95=88=ED=8B=B0=ED=8C=A8=ED=84=B4=20=EC=9B=90=EC=B9=99=20?= =?UTF-8?q?=EB=8F=8C=EC=95=84=EB=B3=B4=EA=B8=B0=20-=20=EB=B0=95=EB=8F=99?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\353\260\225\353\217\231\355\230\204.md" | 1 + 1 file changed, 1 insertion(+) create mode 100644 "13\354\236\245-\353\246\254\354\225\241\355\212\270 \354\225\210\355\213\260\355\214\250\355\204\264 \354\233\220\354\271\231 \353\217\214\354\225\204\353\263\264\352\270\260/\353\260\225\353\217\231\355\230\204.md" diff --git "a/13\354\236\245-\353\246\254\354\225\241\355\212\270 \354\225\210\355\213\260\355\214\250\355\204\264 \354\233\220\354\271\231 \353\217\214\354\225\204\353\263\264\352\270\260/\353\260\225\353\217\231\355\230\204.md" "b/13\354\236\245-\353\246\254\354\225\241\355\212\270 \354\225\210\355\213\260\355\214\250\355\204\264 \354\233\220\354\271\231 \353\217\214\354\225\204\353\263\264\352\270\260/\353\260\225\353\217\231\355\230\204.md" new file mode 100644 index 0000000..5bf64be --- /dev/null +++ "b/13\354\236\245-\353\246\254\354\225\241\355\212\270 \354\225\210\355\213\260\355\214\250\355\204\264 \354\233\220\354\271\231 \353\217\214\354\225\204\353\263\264\352\270\260/\353\260\225\353\217\231\355\230\204.md" @@ -0,0 +1 @@ +# 리액트 안티패턴 원칙 돌아보기