전체 글 61
HTTP 요청 관련 개념 정리 (Axios, Content-Type, Binary 처리 등)
오늘은 웹 개발 중 자주 마주치는 HTTP 요청 관련 개념들을 정리했다.Axios를 사용하면서 겪은 궁금증들을 하나씩 정리하며 개념을 명확히 했다. HTTP 요청 헤더: Authorization과 쿠키 인증Access Token은 보통 Authorization: Bearer 헤더에 넣어 전송.하지만 토큰을 쿠키에 저장하는 경우, 별도로 Authorization 헤더는 비어있거나, 없어도 된다. 브라우저가 자동으로 쿠키를 보내주기 때문. (withCredentials: true를 설정하면 쿠키가 자동 전송)Refresh Token은 보통 별도의 엔드포인트(/auth/refresh)를 호출해서 새로운 Access Token을 받아오는 방식으로 사용. Referer를 활용한 뒤로 가기 처리찾아보던 중에 R..
2025. 5. 1.
이미지 업로드 최적화 트러블슈팅 (react-image-file-resizer -> browser-image-compression)
💾 배경메인서비스에서 사용자가 이미지를 자주 추가하거나 변경합니다.이미지를 입력받으면, 각 이미지에 대해 Presigned URL을 요청하고, 최적화(용량 압축 및 리사이징) 과정을 거친 후 서버에 업로드합니다. 서버에 올리기 전에 이미지 최적화가 필요하고, 또한 유저는 업로드한 이미지를 즉시 미리보기로 확인할 수 있어야합니다. ⚠️ 문제 상황처음에는 react-image-file-resizer를 사용하여 이미지 최적화를 구현했습니다. (기존에 팀원이 사용하고 있어서)하지만 이 라이브러리는 리사이징 중심이기 때문에 반드시 파일 이미지의 width, height를 명시해야합니다.프로필 이미지와 같이 크기가 항상 동일한 파일은 상관이 없지만, 아래와 같이 이미지 파일의 크기가 제각각인 경우에는 이미지 크..
2025. 4. 30.
Next.js 14 PWA 적용하는 방법!
1. next-pwa 설치 next-pwaNext.js with PWA, powered by workbox.. Latest version: 5.6.0, last published: 3 years ago. Start using next-pwa in your project by running `npm i next-pwa`. There are 85 other projects in the npm registry using next-pwa.www.npmjs.com 2. mainfest 추가public 폴더에 넣으면 됩니다. PWA Manifest Generator | ProgressierThis free tool allows you create an app manifestprogressier.com{ "sho..
2025. 4. 3.
프로젝트에서 Route Handler 안 쓰고 Server Action만 쓴 이유 (feat. Supabase)
Next.js로 모하루(개인 프로젝트)를 진행하면서, 모든 서버 통신은 Server Action을 이용해 구현했습니다.Route Handler와 Server Action 중에서 Server Action을 선택한 이유는비즈니스 로직을 클라이언트로부터 분리하고, 보안을 강화하기 위해서Server Action은 서버 환경에서만 실행되기 때문에, 민감한 로직이나 API 키, 인증 정보 등을 클라이언트에 노출시키지 않고 안전하게 처리할 수 있습니다.Supabase를 백엔드로 사용했기 때문입니다.Supabase에서 제공하는 메서드들은 fetch로 직접 호출하는 방식이 아니라, 서버 환경에서 동작하는 클라이언트를 통해 호출해야 하기 때문에, Server Action을 활용하는 것이 더 적합했습니다.모든 서버 통신이 ..
2025. 3. 14.
카카오맵 API 타입스크립트로 사용하기 (kakao.maps.d.ts로 Type 적용)
카카오맵을 사용한 프로젝트를 진행하고 있는데, 타입 정의 문제가 발생했다.처음에는 kakao 객체 존재 여부를 TS에서 인식하지 못하기 때문에, 객체가 window에 있다고 선언했다.declare global { interface Window { kakao: any; }} 카카오에서도 이렇게 선언하라고 했는데, (https://devtalk.kakao.com/t/typescript/126917/2)개발 과정에서는 문제 없이 실행되더라도, 문제는 빌드였다.빌드 과정에서 any 타입에 모든 빨간줄을,,, ㅠㅠ 카카오에서는 API 타입을 따로 제공하지 않았다 😱그래서 임시로 장소 결과 객체 타입을 정의했으나export type KakaoPlace = { address_name: string; //..
2025. 2. 26.
자바스크립트는 싱글 스레드 언어인데, 어떻게 동시에 여러 작업들을 수행하나요?
A자바스크립트는 싱글 스레드 언어로, 한번에 하나의 작업만 진행할 수 있는 단일 콜스택을 가집니다.하지만 Web API, 이벤트루프를 통해 비동기 작업을 진행할 수 있습니다. 1. fetch, promise, setTimeout과 같은 비동기 작업이 발생하면, 자바스크립트 엔진은 해당 작업을 브라우저 web api에 위임하고 다음 코드를 실행합니다.2. web api에서 비동기 과정이 완료되면, 해당 콜백함수가 태스크 큐에 추가됩니다.3. 이벤트 루프는 콜스택이 모두 비어있는지를 확인 후, 비어있다면 태스크 큐의 작업들이 콜스택으로 전달합니다. 이러한 구조로 싱글 스레드인 자바스크립트에서 동시에 여러 작업을 수행할 수 있습니다. Q 앞서 말씀하신 태스크 큐의 종류에는 어떤 게 있나요? 태스크 큐의 종류는..
2025. 2. 4.
리액트에서 index를 key값으로 사용하면 안되는 이유
A리액트는 key를 통해 리스트에서 어떤 요소가 변경, 추가, 삭제 되었는 지를 추적합니다.따라서 key값이 달라지면 새로운 요소로 인식하여 불필요한 리렌더링이 발생할 수 있습니다. 만약 index로 key값을 설정하면, 리스트 중간 요소를 제거하거나, 리스트 요소의 순서가 변경될 때 등과같은 상황에서 잘못된 렌더링이 발생할 수 있습니다. 따라서 key는 db id와 같은 고유한 값이나 item.title과 같은 속성들을 결합해 유니크한 값을 사용합니다.또한 uuid나 Math.random과 같이 동적으로 id를 생성하는 것도 렌더링 간 key가 일치하지 않아 부적합합니다. 참고자료 [React] 배열의 index를 key로 쓰면 안되는 이유React 공식 Document를 보다가 아래 노란색으로 캡쳐..
2025. 2. 2.
Promise의 resolve()와 fulfilled에 대해서
Aresolve()는 pending 상태인 promise를 완료 상태로 변경하는 함수이고,fulfilled는 resolve()에 의해 promise가 완료된 상태를 의미합니다. promise는 대기 상태인 pending, 성공 상태인 fulfilled, 실패 상태인 rejected 3가지의 상태가 존재합니다. promise가 생성될 때, resolve와 reject를 인자로 받는 콜백함수를 실행하며 비동기 작업이 진행됩니다.비동기 처리 성공 후 resolve를 호출되면 fulfilled 상태가 되고, 비동기 처리가 실패 시 reject를 호출해 rejected 상태가 됩니다. fulfilled가 된 promise는 then()에서 값을 받게 되고, rejected가 된 promise는 catch()에서 ..
2025. 2. 1.
