전체 글

IOS 18 시뮬레이터 StoreKit 2 로컬 인앱 결제 테스트 트러블 슈팅 기록 1. 증상 및 문제 개요하이브리드 앱 시뮬레이터에서 구매 버튼을 클릭 했을 때, 상품 정보를 불러오지 못하고 다음과 같은 플랫폼 콘솔 에러가 발생하며 가상 결제창이 뜨지 않음. 프로젝트 내부에서 로컬 .storekit 파일이 존재함에도 불구하고 시뮬레이터의 Storekit 시스템 데몬(storekitd)이 빈 상품 목록을 반환하거나, 로컬 파일을 무시하고 실제 애플 앱스토어 샌드박스 서버(amp-api.sandbox.apple.com)로 통신을 시도하며 실패 2. 근본 원인 분석원인은 총 4가지의 플랫폼 설정 오류 및 규격 불일치가 중첩되어 발생 1) Xcode 스키마의 상대 경로 불일치- 현상 : 시뮬레이터가 로컬..

문제 상황로컬호스트 실행했을때 사이트 연결안됌DB는 문제 없음서버 실행했을때도 오류 없음 (npm run dev, build, boot run 등) 해결과정1. 포트 충돌 확인 포트 사용 확인: 현재 사용하려는 포트가 점유 중인지 확인하고, 점유 중이라면 해당 프로세스를 종료하거나 서버의 포트 번호를 변경해야 함.Windows (CMD/PowerShell): netstat -ano | findstr : 명령어를 사용하여 확인Mac/Linux (터미널): lsof -i tcp: 명령어를 사용하여 확인포트 변경: 서버 설정 파일에서 사용 포트를 다른 번호(예: 8081, 3001 등)로 변경한 후 다시 접속 시도 2. CORS 문제 의심통신이 되기도 전에 사이트 연결부터가 되지 않아 문제 원인이 아닌 것으..

1. SCSS 기본 구조와 중첩 문법SCSS에서는 CSS처럼 단순히 선택자와 속성을 나열하는 대신, HTML의 계층 구조를 반영하여 중첩(nesting)을 사용할 수 있습니다.  예시 :.parent { color: blue; .child { font-size: 16px; margin: 10px; } &.active { background-color: yellow; }} 컴파일된 CSS 결과 :.parent { color: blue;}.parent .child { font-size: 16px; margin: 10px;}.parent.active { background-color: yellow;}  2. SCSS 작성 시 주요 문법과 사용법(1) 중첩HTML 구조를 반영하여..

이런 사각형과 뾰족한 삼각형이 합쳐져 말풍선 형태를 나타내는 툴팁을 만들 예정입니다. 보통 사각형이 되는 div에 before나 after와 같은 가상선택자를 이용하여 삼각형을 구현해 주는데,우리의 디자인은 border와 그림자가 있는 관계로 사각형과 삼각형이 분리되어 보이는 이슈가 있었습니다. 사각형과 삼각형이 자연스럽게 어울려 말풍선 모양의 툴팁을 구현하는 방법은 아래와 같습니다. HTML setPointTooltip(true)}> ※ 포인트의 최소 사용 단위는 1,000점 입니다. ※ 가족 포인트는 예약자(본인)의 포인트를 모두 사용하셔야 다른 가족의 포인트 합산 사용이 가능합니다. ※ 가족 포인트는 등록된 가족이 예약자(본인)의 포인트 합..

백단은 닷넷 -> 스프링부트로 컨버팅하는 작업의 1단계가 거의 마무리 되어가는 시점이라 프론트에 연동하는 작업을 시작했다. 프론트 도메인은"http://localhost:3000", "https://localhost:4433"두 개를 사용한다. 백엔드 도메인은http://localhost:8091/이다. 하나의 api만 변경해서 적용을 해봤는데어마어마한 cors 에러가 났다..  CORS의 동작 방식CORS는 브라우저에 관련된 정책이기 때문에, 클라이언트에서 외부 API 서버로 바로 요청을 보내면 CORS 문제가 발생한다.즉, 서버에서 서버로 리소스를 요청할 때는 CORS 정책을 위반하지 않고 정상적으로 응답을 받을 수 있다.그러므로 이 문제를 해결하는 방식은 다음과 같겠다.내 api 서버로의 접근에서 ..

여담에서 전체적으로 alert();을 활용하다가 간혹가다가 종종 모바일에서 알럿이 안떠서 오류처럼 화면이 멈춰버리는 이슈가 발생되어 alert을 인라인 에러메세지, 토스트메세지, 다이얼로그 등으로 변경하는 작업을 거쳤다.이번에는 다이얼로그를 공통 컴포넌트로 만들어 활용하는 방법에 대해 기록해두려 한다. 1. 다이얼로그 컴포넌트 만들기// Dialog.jsimport Button from "@material-ui/core/Button";import Dialog from "@material-ui/core/Dialog";import DialogActions from "@material-ui/core/DialogActions";import DialogTitle from "@material-ui/core/Dial..

1. action 파일// actions/toast.jsimport { SHOW_TOAST, HIDE_TOAST } from "./types";export const showToast = (message, state) => (dispatch) => { dispatch({ type: SHOW_TOAST, payload: { message: message, state: state }, });};export const hideToast = () => ({ type: HIDE_TOAST,}); 2. types 파일export const SHOW_TOAST = "SHOW_TOAST";export const HIDE_TOAST = "HIDE_TOAST"; 3. reducer 파일import { SH..

element { width: 100%;}element.faded { width: 100%; height: 700px; overflow: hidden; position: relative;}element.faded:after { content: ""; position: absolute; display: block; width: 100%; height: 100%; top: 0; background: linear-gradient(to top, white, white 10%, transparent); background-repeat: no-repeat; transition: all 500ms ease;}