본문 바로가기

전체 글

 (176)
[개발, 매일메일] @tanstack/react-query v4/v5 차이...(suspense, error-boundary 처리) (개발자 강화/프론트엔드) 2025. 2. 14. 17:13 제가 직접 겪고 몸소 겪은 후 나중에 같은 실수 안반복하려고 정리합니다... React로 개발하다보면 react-query를 써야하는 경우가 있다 Q. @tanstack/react-query 왜 쓰나요?안좋은 답변: 친구들이 쓰길래요 (x) 한줄요약비동기 데이터(fetching, caching, 갱신 등)을 효율적으로 관리하고, 이로 인한 복잡도를 줄이기 위함 같은 데이터를 여러 곳에서 사용하는데 매번 api를 요청한다면... 필요없는 네트워크 트래픽이 늘어남react query는 query key로 캐시된 값을 불러와서 사용하는 등의 작업이 가능함 캐싱이 편해서 GOAT임예전에 연구실에서 개발할 때 몇 백개의 문제 데이터를 미리 가져와서 클라이언트가 들고 있어야 하는...뭐 그런 개발 시나리오가 있었는..
[매일메일] 민감한 데이터는 어디에 저장해야 할까? (FE.250211) (개발자 강화/프론트엔드) 2025. 2. 11. 15:51 localStroagesessionStorage데이터 지속성영구적 저장브라우저 닫거나, 장치 재부팅해도 유지현재 브라우저 세션 동안만 유지브라우저 탭 닫으면 데이터 삭제범위동일한 도메인 내의 모든 탭에서 데이터 공유동일한 도메인 내에서 탭 간 데이터 공유 안함예시테마 설정(다크모드)장바구니 데이터로그인 후 인증 데이터 일시 저장특정 탭에서만 사용할 데이터 관리목적장기 데이터 저장탭 단위 데이터 관리일시적 데이터 저장보안영구적으로 저장되므로 민감한 데이터 저장 주의세션 종료 시 데이터가 자동으로 삭제 되지만보안적으로 완전히 데이터를 방어할 수는 없음 Cookie데이터 지속성만료 시간 설정 가능범위동일한 도메인 내 모든 탭에서 공유예시세션 유지(로그인 상태)추적 정보 저장(광고 추적, 사용자 방문 기록)이 ..
[공부] BFF API란? (개발자 강화/프론트엔드) 2025. 2. 10. 14:46 BFF APIBFF: Backend-For-Frontend프론트엔드의 요구에 최적화된 백엔드의 레이어 멀티플랫폼을 지원하는 서비스에서 한 백엔드를 사용한다면, 한 백엔드가 여러 프론트엔드의 API 호출을 대응함백엔드 api는 여러 플랫폼의 요구사항을 모두 충족시키기 위해 모든 데이터를 반환하도록 구현하게 됨각 플랫폼의 프론트엔드는 요청한 것 외에 다른 데이터까지 함께 받게 되는 셈이라 데이터 처리 로직이 복잡해짐 MSA(MicroService Architecture) - 하나의 어플리케이션을 독립적인 여러 개의 마이크로 서비스로 구성여러 마이크로 서비스를 호출해서 데이터를 조합해야 하는 경우 클라이언트가 이를 직접 수행하면 api 호출 횟수 증가함BFF를 사용하면 여러 마이크로서비스에서 필요한 데이터를 ..

티스토리툴바