programming (124) 썸네일형 리스트형 [RangeError] : Incorrect locale information provided 1. Next.js 어플리케이션 ECS 컨테이너 로그에 동일로그 반복적인 발생[RangeError] : Incorrect locale information provided 2. 로그를 통해 원인 추정Error [RangeError]: Incorrect locale information providedat Intl.getCanonicalLocales ()Intl.getCanonicalLocales는 국제화 API (Intl)에서 사용되며, 브라우저 또는 Node.js에서 locale string이 유효한지 검사할 때 호출된다.이 함수에 잘못된 locale 문자열(예: en_kr 혹은 undefined, 123)이 들어오면 RangeError가 발생.발생 위치 : file:///application/.nex.. [Next.js] 외부 스크립트로 인한 removeChild 오류 분석 및 해결 전략Cannot read properties of null (reading 'removeChild') Next.js App Router 환경에서 removeChild 에러가 발생하는 현상을 분석하고, 근본 원인 및 실질적인 해결 방법을 안내합니다.1. 에러 현상 개요Next.js 기반의 서비스에 외부 라이브챗 서비스를 연동한 후, 페이지 이동시 global-error 페이지로 떨어지는 형상이 발생했다.또한, Sentry와 같은 APM 도구에서는 다음과 같은 형태로 에러가 포착:TypeError: Cannot read properties of null (reading 'removeChild')incomplete-app-router-transaction 단순히 외부 라이브챗 스크립트를 적용했을 때만 발생하는 현상이었으므로, 외부스크립트의 동작이 원인일 것으로 예측하였다. 2. 현상 파악 과정과거에도 동일한 .. [3/3] Next.js + AWS ECS 컨테이너 배포하기 : CodePipeline 활용한 CI/CD 자동화와 Docker 빌드 최적화 사례 분석 ⚠️ 주의: 이 포스팅을 포함한 총 3편의 Next.js 배포 최적화 시리즈는 제가 실제 환경에서 시행착오를 겪으며 얻은 경험과 지식을 정리한 글입니다.이 글들은 완벽한 정답이 아니라, 다양한 시도와 시행착오를 통한 저의 삽질기이자 성장 과정이며, 동시에 나와 비슷한 고민을 하는 사람들과 지식을 나누고자 하는 목적으로 작성되었습니다.따라서, 가능하면 3편의 글을 모두 읽고, 환경과 상황에 맞춰 신중히 테스트한 후 적용하는 것을 추천합니다.마지막까지 읽으시면 무엇이 문제였는지, 그리고 어떻게 해결했는지 확인할 수 있습니다! 🚨🚧✨ 📋 총 3편의 글 리스트 https://tacit.tistory.com/267 Next.js + AWS ECS 컨테이너 배포하기 : CodePipeline 활용한 CI/CD.. [1/3] Next.js + AWS ECS 컨테이너 배포하기 : CodePipeline 활용한 CI/CD 자동화와 Docker 빌드 최적화 사례 분석 ⚠️ 주의: 이 포스팅을 포함한 총 3편의 Next.js 배포 최적화 시리즈는 제가 실제 환경에서 시행착오를 겪으며 얻은 경험과 지식을 정리한 글입니다.이 글들은 완벽한 정답이 아니라, 다양한 시도와 시행착오를 통한 저의 삽질기이자 성장 과정이며, 동시에 나와 비슷한 고민을 하는 사람들과 지식을 나누고자 하는 목적으로 작성되었습니다.따라서, 가능하면 3편의 글을 모두 읽고, 환경과 상황에 맞춰 신중히 테스트한 후 적용하는 것을 추천합니다.마지막까지 읽으시면 무엇이 문제였는지, 그리고 어떻게 해결했는지 확인할 수 있습니다! 🚨🚧✨ 📋 총 3편의 글 리스트 https://tacit.tistory.com/267 Next.js + AWS ECS 컨테이너 배포하기 : CodePipeline 활용한 CI/CD.. PR에 이미 병합된 커밋이 다시 나타남 (Bitbucket pull request 기존 커밋 포함) 부제: 브랜치 간 머지베이스 불일치로 인해 발생하는 중복 Merge 현상🚩 발생한 문제현재 메인으로 사용하는 브랜치는 두 가지입니다.master: production 환경을 위한 소스dev: dev 환경을 위한 소스다음과 같은 순서로 작업을 진행하였습니다.feature/account-add 브랜치를 master에서 생성작업 완료 후 commit (feature/int-script)feature/account-add → dev 머지dev 환경 배포 후 정상 작동 확인release/0410 브랜치를 master에서 생성feature/account-add → release/0410 머지 (master 배포 준비)release/0410 → master 머지 후 production 배포 정상 확인새 작업을 위해.. Github actions 배포완료시 slack 으로 알림받기 1. 슬랙 앱 생성 및 설정 링크 접속: https://api.slack.com/apps Slack API: Applications | SlackYour Apps Don't see an app you're looking for? Sign in to another workspace.api.slack.com 2. Create New App- From scratch 선택- App name : Front Release Notification App- 슬랙 워크스페이스 선택 3. Incoming Webhooks 탭 이동- On 활성화 처리 4. 화면 하단의 Add New Webhooks to Workspace - 게시할 채널 선택 : 알림 받을 채널을 선택- 생성된 Webhook Url 복사 5. Githu.. Auth.js signIn 완료 후 session 이 여전히 null (수동 리프레시를 해야만 session 이 업데이트 됨) 참고 : https://github.com/nextauthjs/next-auth/issues/9504#issuecomment-2326123445 [BEFORE]layout.tsx import Footer from "@/components/footer";import Header from "@/components/header";import ReactQueryProvider from "@/components/provider/ReactQueryProvider";import type { Metadata } from "next";import { SessionProvider } from "next-auth/react";import localFont from "next/font/local";import { Toast.. 프론트에서 (Next.js) 에서 POST FormData 응답 받기 (ECPAY) USECASE : 대만 ECPAY 편의점 픽업 지점 선택을 위한 Request the e-map of convenience store(B2C/C2C) [ECPAY 개발문서] 문서에 명시되어 있다시피,HTTPS Transfer ProtocolHTTP Method：POSTAccept：text/htmlContent Type：application/x-www-form-urlencoded form 형태로, POST 로 게다가 텍스트로 데이터를 요청/응답 받아야한다. 프론트에서 Request 파라미터를 말아서 form 으로 보내고, Request 파라미터 중 하나인 "ServerReplyURL" 키에 어떤 값을 담아 보내야 하는지가 고민이었다. 왜냐하면, ServerReplyURL 이 url 은, 편의점을 선택하.. [Next.js] Google Map Distance Matrix API 프론트단에서 사용하기 목표 : 출발지 주소 ~ 목적지 주소 사이의 거리 구하기 이슈 : 클라이언트 사이드에서 fetch 요청을 하면, CORS 에러가 발생클라이언트 사이드에서 fetch 요청을 하는 경우 참고 코드 How to Use Google Maps Distance Matrix API in React.jsReact.js is a popular JavaScript library for building user interfaces, and integrating Google Maps services can add powerful location-based…medium.com 원인 : distancematrix API 는 서버사이드에서 요청을 해야한다반면에 geocode API 는 클라이언트 사이드에서 요청을 해도 잘만 나.. Next.js App Router SSR 용 fetch 코드 (헤더 쿠키, Authorization 세팅) SSR 용 Fetch 인스턴스 구현 내용https://mypage.com/kr/ko" 와 같이, /[country]/[language] 정보를 url params 로 제공한다.상품 디테일 페이지를 서버사이드 랜더링으로 제공한다.상품 디테일 정보는 국가/언어 에 따라 달라진다.국가/언어 정보를 HTTP 요청 헤더에 Country, Language 를 키값으로 전달한다.상품 "좋아요"/"위시리스트" 등과 같은 유저 데이터를 제공하여야한다.게스트는 쿠키의 "DJSESSION" 값 으로 유저 데이터를 제공한다 -> Cookie 를 헤더에 담아서 전송 코드"use server";import { cookies } from "next/headers";import { getServerSession } from "nex.. 이전 1 2 3 4 ··· 13 다음
