분류 전체보기 (172) 썸네일형 리스트형 [개발, 매일메일] @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를 사용하면 여러 마이크로서비스에서 필요한 데이터를 .. [매일메일] 스케일 아웃 & 스케일 업 (BE.250210) 2025. 2. 10. 14:17 기존 서버가 한계에 도달하는 경우 사용할 수 있는 방법 스케일 업기존 서버를 더욱 높은 사양으로 업그레이드하는 것수직 스케일링(vertical scaling)이라고도 함예: AWS에서 EC2 t2.micro에서 t2.small로 업그레이드 간단하게 서버의 성능을 향상할 수 있음(단순히 더 높은 사양의 서버로 갈아타는 것)그러나, 서버를 무한정 업그레이드하는 것만으로는 한계가 있음서버 한 대에 부하가 몰려서 문제 대응이 어려움장애에 대한 자동 복구(failover)나 다중화 (re-dundancy) 방안을 제시하지 않음 향후 사용량을 미리 추정하여 미리 고사양 서버를 확보하는 경우에실제 필요한 서버보다 과한 사양으로 확보하면 비용적 손실이 존재할 수 있음 스케일 아웃비슷한 사양의 장비를 추가해 수평으로 확.. 🌟[공부, 매일메일] Suspense란? 2025. 2. 10. 13:50 SuspenseReact의 Suspense는 비동기적인 데이터 로딩을 보다 자연스럽게 처리할 수 있도록 도와줌특정 컴포넌트가 데이터를 가져오는 동안 로딩 상태(Loading State)를 보여줌 핵심 개념1. 비동기 렌더링 지원- React가 데이터를 기다리지 않고 UI를 먼저 그린 뒤, 데이터가 준비되면 다시 렌더링함 2. 자동적인 Fallback UI- 데이터가 로딩 중일 때, 특정 UI(로딩 화면 등)를 부여줄 수 있음. 3. Concurrent Mode와 호환- React의 Concurrent Rendering에서 자연스럽게 동작해, 사용자 경험 향상시킴 사용법import React, { Suspense, lazy } from 'react';// lazy를 사용하여 컴포넌트를 동적으로 로드con.. 🌟[공부] NestJS의 Custom Decorators란? 2025. 2. 9. 18:52 NestJS의 Custom Decorators반복적인 로직을 재사용 가능하게 만들고, 코드의 가독성을 높이기 위해 사용함NestJS에서 제공하는 기본 데코레이터(@Body(), @Query(), @Param() 등) 외에 사용자가 직접 커스텀 데코레이터 정의 Custom Decorator의 필요성1. 반복되는 코드 제거: 컨트롤러에서 동일한 로직을 적용할 때 유용2. 코드 가독성 향상: req.user.id 같은 접근 방식을 단순화 가능3. Middleware 또는 Guard와 조합 가능: 사용자 인증, 권한 체크 등에 활용 Custom Decorator 사용법1. 메소드 매개변수용 데코레이터컨트롤러에서 매개변수 값 추출 및 변환을 쉽게 하기 위한 데코레이터 @GetUser() 데코레이터를 만들어서, J.. 🌟[공부, 개발] NestJS의 Pipes란? 2025. 2. 8. 23:39 NestJS의 Pipes데이터 변환, 검증, 정제(sanitization) 역할을 수행하는 미들웨어와 비슷한 기능요청(Request)에서 들어오는 데이터를 변환하거나, 특정 조건을 만족하는지 검증하는 데 사용됨 Pipes의 주요 역할1. 데이터 변환(Transformation): 문자열을 숫자로 변환 ("123" -> 123)2. 데이터 검증(Validation); 값이 특정 조건을 충족하는지 확인(이메일 형식 체크)3. 데이터 정제(Sanitization): 공백 제거, 특수문자 제거 Pipes 사용법Pipe설명ValidationPipeDTO 기반 유효성 검사ParseIntPipe문자열을 정수로 변환ParseBoolPipe"true", "false"를 boolean으로 변환ParseUUIDpipeUUI.. [매일메일] 캐싱 전략 (BE.250205) 2025. 2. 8. 21:15 캐시의 목표: 성능 향상, 부하 감소 Cach Aside(Lazy Loading)캐시 히트 시 캐시에서 데이터를 불러옴캐시 미스 시 원본 데이터베이스에서 조회해서 반환하고, 캐시에 데이터를 적재함 캐시는 데이터베이스와 직접 통신하지 않고, 어플리케이션이 캐시의 모든 것을 관리함. 장점실제 요청된 데이터만 캐시에 저장됨. 불필요한 데이터 캐싱을 줄일 수 있음캐시에 문제가 발생해도, 원본 데이터베이스에 직접 접근해서 서비스가 계속 작동될 수 있음단점요청 초기에는 모든 요청마다 캐시 미스가 발생해 데이터베이스에 부하가 발생할 수 있음캐시 미스가 발생한 경우만 데이터를 캐시에 적재하므로 원본 데이터베이스와 값이 다를 수 있다(캐시 불일치) Cach Inconsistency(캐시 불일치) 해결법원본 데이터베이스에.. 이전 1 2 3 4 5 6 7 ··· 22 다음
