본문 바로가기

분류 전체보기

(210)
[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..
[2/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..
Xcode 모바일 시뮬레이터 콘솔로그 확인 (웹 인스펙터) 1. Xcode 모바일 시뮬레이터 켠다 - Safari 접속 - 필요한 사이트 접속 (localhost 등)   2. PC 에서 Safari 켠다Safari - 개발자용 - 시뮬레이터 - 사이트
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 은, 편의점을 선택하..
위챗 페이 문서 통합 QR 코드 생성 APIhttps://pay.weixin.qq.com/wiki/doc/api/wxpay/en/pay/NativePay/chapter8_1.shtml WeChat Pay Open PlatformScenarios Information scene_info String(256) No Specify the payment scenarios, such as the store or mall information. { “store_id”:””, //Unique ID of store, Optional, string(32) “store_name”:””//Store name, Optional, string(64) } Example:pay.weixin.qq.com 결제 결과 리턴 APIhttps://p..
[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 는 클라이언트 사이드에서 요청을 해도 잘만 나..