4주차 - 주특기, level 4/5

Fact

Level 4 - 인증/인가 활용 🔗

• PrivateRoute로 인증화면 분기
• Mixed Content, vercel proxy로 해결

Level 5 - 나만의 React앱 구현(구현중... 🔗)

• react-query활용

Finding

💥 Mixed Content 해결

• 서비스 배포 후(https적용), http API접근 시 오류 발생
• 해결을 위해 proxy로 우회하려 했으나, vite.config의 설정은 개발단계에서만 적용됨
• 운영 서버에서의 우회를 위해, vercel의 서버를 이용한 proxy활용
  • vercel.json을 작성하면, 경로를 rewrite해준다.

  // ./vercel.json
{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "http://3.38.191.164/:path*"
    },
    {
      "source": "/api/:path*/",
      "destination": "http://3.38.191.164/:path*/"
    },
    { "source": "/(.*)", "destination": "/" }
  ]
}

Zustand

• global state와 관련하여 새로운 라이브러리를 검색하다보니, zustand가 괜찮아 보였다.
• 그 이유로는,
  • 작은 번들 사이즈
  • provider 불필요
  • RTK와 같은 state와 action이 모여있는 형태
  • recoil과 같은 use함수의 사용방법
  • redux devtools 사용가능!

Atomic - Props drilling 보완

• Atomic 패턴을 활용해 컴포넌트를 쪼개다 보면, 불필요하게 props를 전달해주어야 하는 상황이 발생하게 된다.
• Props drilling을 보완해줄 수 있는 방법이 있는데, Compound방법이 있다.

Compound

• 여러 개의 하위 컴포넌트가 하나의 부모 컴포넌트 안에서 작동하도록 하는 설계 방식이다.

function App() {
  return (
    <Tabs>
      <Tab>Tab 1</Tab>
      <Tab>Tab 2</Tab>
      <Tab>Tab 3</Tab>
    </Tabs>
  );
}

Feeling & Future

• Recoil, RTK가 state관리에서 주로 사용된다고 생각했지만, 큰 번들사이즈 늦은 업데이트 주기 등으로 인해 Zustand가 급격하게 인기를 얻고 있는 것 같다.
  • 앞으로 라이브러리를 선택할 때, 익숙한 것이 아닌 업데이트 주기 등을 고려하여 선택하는 것도 좋은 방법이 될 것 같다.
• Atomic패턴 개선
  • Atomic패턴을 도입할 때 만해도, 정리가 잘 되어가는 느낌에 이건 최고야..! 라고 느꼈지만, Props drilling, molecules<->organisms 경계모호 등의 문제를 보며, 좋은 패턴을 도입하더라도, 주관적인 기준을 확립하고 사용할 때 빛을 발하는 것 같다.