Frame 36 (1).png

이음 접속하기 https://eum-interlink.vercel.app/

<aside> 📎 아키텍쳐

</aside>

image.png

<aside> 🗣 기술적 의사결정

</aside>

선택한 기술 이 기술을 선택한 이유
React 1. Virtual DOM, CSR 방식으로 페이지 내에 변경된 부분만을 감지해서 필요한 부분만 렌더링 할 수 있습니다.
  1. 커뮤니티가 많습니다. | | TypeScript | 1. Type을 미리 지정하여 Type에 맞지않는 부분들을 RunTime 이전에 에러로서 확인할 수 있어 RunTime 이 후에 일어날 수 있는 버그,에러들을 사전에 방지 할 수 있습니다.
  2. 작성한 코드가 나중에 보았을 때 어떤 Type의 코드인지 명확히 알 수 있습니다. (가독성) | | Recoil | 1. 컴포넌트의 상태를 자동으로 추적하여 Context API와 다르게 필요한 상태만 렌더링하고 성능을 최적화 할 수 있습니다.
  3. 저희 프로젝트는 많이 복잡한 편이 아니기에 BoilerPlate가 적은 Recoil을 선택하였습니다.
  4. React를 개발한 Facebook에서 개발하여 React와 상성이 좋으며 Facebook의 대규모 애플리케이션에서 테스트하고 사용되었기 때문에 안정성,성능면 에서 뛰어나다 평가되고 있어 선택하였습니다. | | React-Query v4 | 1. 데이터를 캐싱하고 최신 데이터를 가져와서 자동으로 UI가 업데이트 되도록 할 수 있어 불필요한 API호출을 줄이고 성능을 향상시킬 수 있습니다.
  5. 코드가 짧아 가독성이 좋습니다.
  6. 다양한 옵션으로 편리합니다. | | Firebase | 1. 회원정보를 AuthService를 통해 보안성을 향상시키기 위해 선택하였습니다.
  7. 간편한 소셜 로그인을 지원하기 위해 사용하였습니다. |

<aside> ✨ 성능 개선

</aside>

저희는 최적화된 사이트를 만들기 위해 지속적인 성능 개선을 실시 하였습니다.

최초 성능 검증 (23.02.23)

Untitled

1차 성능 개선 (23.02.23)

Untitled

2차 성능 개선 (23.02.25)