분류 전체보기 (54) 썸네일형 리스트형 [Identicon library] 랜덤 프로필 이미지 생성하기 개요#1. 기본 사용자 프로필 이미지 생성사용자 프로필을 구성할 때 이미지를 업로드 하기로 했다. 원하는 이미지를 프로필 사진으로 정하는 일반적인 방식인데만약 사용자가 이미지를 업로드 하지 않는다면 기본 이미지가 필요해진다. Github에서 사용하는 랜덤 프로필 이미지 생성기를 사용하면 좋겠다 생각해서 적용해봤다.라이브러리는 Identicon을 사용했다. GitHub · Change is constant. GitHub keeps you ahead.Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source communit.. [React Query] 응답 처리 ‐ API 함수 vs Callback(onSuccess onError) 역할 분리 개요#1. React Query Hook의 역할 정의 고민React Query를 사용하다 보면 아래와 같은 고민을 가지게 됐었다.응답(성공/실패) 처리 로직을 어디서 관리할 것인가? 프로젝트를 진행하면서 나는 queryFn/mutationFn와 같은 API 함수 내부에서 처리하도록 정의했다.export function useMyHook() { return useQuery({ queryKey: [...], queryFn: async () => { try { const response = await axios({ method: 'GET', url: '/v1/mypath' }); // == 성공 응답에 대한 별도 처리 .. [HTTPS] Vite HTTPS 개발 환경용 OpenSSL 인증서 발급 가이드 개요API 서버 프로토콜 변경과 Cookie 보안을 위해 Secure 속성이 추가됨에 따라웹 서버도 HTTP 프로토콜에서 HTTPS 프로토콜로 변경해야 한다. 이 가이드는 OpenSSL만 사용하여 CSR 파일 없이(.csr 생략)자체 서명(Self-Signed) SSL 인증서를 발급하고, macOS 및 Windows 환경에서 Vite 개발 서버에 적용하는 방법을 설명한다. 생성할 파일은 다음 두 개다.localhost-key.pem → 개인 키 (private key)localhost-cert.pem → 자체 서명 인증서 (self-signed certificate) 이 파일들은 Vite 설정에서 다음과 같이 사용된다.https: { key: fs.readFileSync(path.resolve(p.. [HTTPS] Vite 개발 환경에서 HTTPS 적용하기 with Proxy 개요API 서버가 HTTPS 프로토콜로 변경됐으며 Secure 속성이 추가된 Cookie를 사용하기 위해로컬에서도 HTTPS 개발 환경을 구성할 필요가 있다. Vite 기반 프로젝트에서는 Proxy 기능을 활용해 프로토콜을 재지정하고,CORS 회피를 위해 Cookie의 SameSite 설정을 함께 조정한다.내용#1. Proxy란Proxy는 클라이언트와 서버 사이에서 요청을 대신 전달해 주는 대리 서버를 의미한다.클라이언트가 직접 백엔드 서버에 접근하지 않고, 프론트 개발 서버(Vite)가 요청을 받아 대신 전달하는 방식이다. 일반적인 요청 흐름은 아래와 같다.브라우저 > Vite dev server(프록시) > 백엔드 API 서버┌──────────────┐ 요청 ┌──────.. [배포] Cloudflare Pages 배포에 인증 추가하기 개요Gihub Pages 이용을 계획해 배포를 진행했고 인증이 허가된 사용자만 접근하길 원함Gihub Pages에서 제공하는 Environment secrets 또는 variables를 활용해 간단한 인증 절차를 만들고자 계획런타임에 인증 정보를 입력해서 접근을 허용하려 했으나, Github Pages 자체는 런타임에서 환경변수를 읽어줄 서버가 없다고 함이러한 문제를 해결하기 위해 Cloudflare Pages를 대안으로 찾아 배포 진행인증을 처리해줄 Middleware를 생성해서 인증에 성공한 유저만 접근 허용내용#1 Github Pages는 “모두”에게 공개되는 배포 사이트Github Pages를 통해서 손쉽게 정적 페이지를 배포할 수 있었음gh-pages를 라이브러리를 사용하면 간단한 빌드 스크립트.. [Image Upload]이미지 리사이징(Resizing) with pica lib 개요#1. 필요 기능프로필 및 상품 이미지 업로드다운로드 시 리사이징을 적용해 속도 향상 및 화면 잘림 방지#2. 업로드 방식 논의#2-1. 서버 경유 방식서버가 이미지를 받아 S3에 업로드다운로드 시 서버에서 리사이징 처리#2-2. S3 Presigned URL 방식클라이언트가 직접 S3에 업로드업로드 전 클라이언트에서 pica 라이브러리로 리사이징#2-3. 향후 계획Presigned URL 방식 적용 가능 여부 검토 후 최종 업로드 방식 확정최종 결정 대기 중#3. 최종 결정S3 Presigned URL 방식으로 진행[ 🔎 백엔드 의견 ]#서버에 이미지를 다량 업로드 하게 될 경우 ec2 저장소 공간 부족 우려#ec2 사양 업그레이드를 위한 추가 비용이 발생할 수 있으므로 S3를 연동해 처리#더불어.. [키워드 알림] 통신 방식 비교 (Polling, SSE) 전제최대 1분(60초)의 처리 지연은 허용최대 동시접속자수는 1천명 가정선결론지연 허용(≤1분) 이면 둘 다 가능.단순함 우선 → Polling.RPS/헤더 오버헤드 최소화 + 즉시성(수초~수십초) → SSE가 유리.관리 차원에서 부차적으로 발생하는 소스코드 처리 비용 종류Polling: 주기/백오프/지터/빈(Not Modified)응답(304)/커서 관리가 주요 비용.SSE: 장기연결(하트비트), 재연결/리플레이(Last-Event-ID), 백프레셔가 주요 비용.SSE 방식이 적절해 보임Polling 방식은 Http 요청이 많이 발생한다는 점에서 서버 과부하를 야기시킬 수 있겠다 판단했기 때문비교#1 종합항목PollingSSE동작주기적 요청(T초)단방향 스트리밍 연결 유지지연평균 ≈ T/2이벤트 발생 .. [HTTP method] DELETE method 의견 및 사용 개요API 규격을 정의하며 DELETE method도 사용할 수 있으면 좋겠다는 의견DELETE method는 서버의 리소스를 제거할 수 있다는 점에서 보안상 취약하다는 얘기를 들음자료 확인 후 추후 답변 드린다고 안내확인 결과, 적절한 인증과 권한 확인 절차가 있다면 문제없음시도해 보자내용#1 DELETE 메소드는 정말 위험할까?MDN에서 서버 상태에 따른 “안전함”을 정의하는 개념이 있음요청을 서버로 전송할 때 서버의 리소스를 변경하지 않는 method라면 “안전” 그렇지 않으면 “위험”으로 보는 개념https://developer.mozilla.org/ko/docs/Glossary/Safe/HTTP 안전함 (HTTP 메서드) - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN devel.. 이전 1 2 3 4 ··· 7 다음