S3 버킷 권한 정책을 설정하는 도중에 AmazonS3FullAccess 정책이 아닌 커스텀 된 정책을 적용하는 도중 이슈가 발생. Aws\S3\Exception\S3Exception: Error executing "PutObject" on .... AWS HTTP error: Client error ..... resulted in a `403 Forbidden` response 특정 iam 계정에 쓰기 권한을 부여하고 업로드 과정에서 403 forbidden 에러가 발생하는 것.. 우선은 어떤 이유로 업로드가 안되는건지 AmazonS3FullAccess 정책을 다시 부여하고 업로드 시도를 해보았는데 정상적으로 업로드 처리가 됐다. ( AmazonS3FullAccess 정책이 작동하는 이유는 이 정책이 ..

Hot Module Replacement (HMR) 웹 애플리케이션을 개발할 때 사용하는 모듈 교체 기술 이 기술은 웹 애플리케이션의 실행 중에 개별 모듈을 교체하거나 수정하면서 애플리케이션을 다시 로드하지 않고 변경 사항을 반영 이렇게 하면 개발자가 변경사항을 실시간으로 확인하면서 효율적으로 작업할 수 있다. HMR의 핵심 이점은 아래와 같다. 개발 속도 향상: 변경 사항을 반영하려면 전체 애플리케이션을 다시 로드할 필요가 없으므로 개발 시간을 절약할 수 있다. 상태 보존: HMR을 사용하면 수정된 모듈만 업데이트되고, 애플리케이션의 전체 상태는 유지된다. 따라서 매번 상태를 재설정하지 않아도 되므로 테스트와 디버깅이 쉬워집니다. 스타일 조정: CSS/SCSS와 같은 스타일 시트를 수정할 때, HMR은..

Next.js는 빌드 과정에서 여러가지 최적화와 사전 계산 작업을 수행하며, 이러한 작업의 결과물은 .next 디렉토리에 저장된다. .next 디렉토리 안의 하위 디렉토리들의 역할은 아래와 같다. cache: 이 디렉토리는 Next.js의 빌드 캐시를 저장하는 곳! 이를 통해 변경되지 않은 소스 코드에 대한 재컴파일을 방지하고 빌드 속도를 향상시킨다. 이 캐시는 next build를 실행할 때마다 생성되고, next dev를 실행할 때는 사용되지 않는다. server: 이 디렉토리는 서버사이드 렌더링(SSR)이 필요한 페이지의 결과물을 포함. 이는 Next.js가 초기 페이지 로드를 처리하기 위해 Node.js 환경에서 실행하는 JavaScript 파일들이며. 여기에는 각 페이지의 HTML을 생성하는 로..

트레일링 슬래시는 URL 끝에 붙는 슬래시('/')를 말합니다. 예를 들면, https://www.example.com/ 에서 마지막에 붙는 슬래시가 바로 트레일링 슬래시입니다. 트레일링 슬래시의 사용은 웹사이트의 구조와 관련된 설정이며, 종종 SEO (검색 엔진 최적화) 문제와 연관이 있습니다. 일부 웹서버와 프레임워크는 URL 끝에 슬래시가 있는 페이지와 없는 페이지를 다르게 취급할 수 있습니다. 예를 들어, https://www.example.com/page -> 파일 https://www.example.com/page/ -> 디렉토리 위 두 도메인은 다른 페이지로 간주될 수 있습니다. 이런 경우 중복 콘텐츠 문제로 SEO에 영향을 미칠 수 있습니다. 따라서 일관된 URL 구조를 유지하는 것이 중요..

JavaScript에서 ??와 ||는 둘 다 "또는"의 개념을 표현하는 연산자이지만, 그 작동 방식은 약간 다르다. `??` 연산자는 "Nullish coalescing operator"라고 불립니다. 이 연산자는 첫 번째 피연산자가 null 또는 undefined일 경우에만 두 번째 피연산자를 반환합니다. let value = null ?? "default string"; console.log(value); // "default string" `||` 연산자는 "Logical OR operator"라고 불립니다. 이 연산자는 첫 번째 피연산자가 falsy값일 경우에만 두 번째 피연산자를 반환합니다. JavaScript에서 falsy값에는 false, 0, ''(빈 문자열), null, undefined..

Axios 인터셉터는 HTTP 요청이나 응답을 가로채서 그 전후에 어떤 작업을 수행하도록 하는 기능 요청을 보내기 전에 헤더를 수정하거나 응답을 처리하기 전에 데이터를 변환하는 것과 같은 작업을 수행할 수 있다. 나의 경우 JWT 엑세스 토큰을 발급, 헤더에 담아 사용을 하였고 페이지 리프레쉬 과정에서 해당 토큰이 유실되는 이슈로 인해서 아래의 인터셉터를 활용했다. 구현 로직은 아래의 코드를 참조 // 인증 헤더를 설정하는 요청 인터셉터 axios.interceptors.request.use( request => { const token = store.get('jwtToken') // store는 로컬 스토리지나 쿠키를 관리하는 라이브러리로 가정 if (token) { request.headers['Au..