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부분을 나눌 수 있음 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 @@ +# 리액트 계층 구조 애플리케이션 + +애플리케이션을 계층화하면 핵심 문제들을 해결할 수 있습니다. + +- 관심사 분리 + 서로 다른 계층은 각기 다른 책임을 다루게 되므로 코드 베이스를 쉽게 이해하고 찾아볼 수 있습니다. +- 높은 재사용성 + 비즈니스 로직과 데이터 모델을 애플리케이션 전반에서 재사용하기 쉬워집니다. +- 테스트 용이성 + 계층 구조는 단위 테스트와 통합 테스트를 작성하기 수월하게 하므로 더욱 탄탄한 애플리케이션을 만들 수 있습니다. +- 유지보수성 + 계층 구조로 설계하면 애플리케이션이 커지더라도 기능을 추가하기가 수월합니다. 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 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 @@ +# 리액트 안티패턴 원칙 돌아보기 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같은 메서드를 만들어 같은 타입의 객체를 반환하는 형식 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