져니의 개발 & 공부 기록 블로그

💳 들어가며Next.js 15 + TypeScript 프로젝트에서 결제 기능을 구축할 때,포트원(PortOne, 구 아임포트)을 활용하면 다양한 PG사를 간단히 연동할 수 있습니다.이 글에서는 결제 시스템을 테스트하는 실제 흐름을 예제로 보여드리며,개발 환경에서 어떻게 테스트 결제를 구현하고 확인하는지를 단계별로 설명드립니다. PG사(Payment Gateway)란?PG사는 결제 대행사입니다.사용자가 신용카드, 계좌이체, 휴대폰 결제 등으로 결제할 수 있도록 중간에서 연결해주는 회사예요.온라인 쇼핑몰, SaaS, 구독 서비스 등에서 결제 요청이 들어오면, PG사가 카드사·은행·통신사와 연결해 결제를 대신 처리하고, 결과를 돌려줍니다.✅ 대표적인 PG사 목록PG사 이름특징KG 이니시스국내 최대 규모, ..

지난 2025.02.18. ~ 2025.02.21. 카카오와 구름이 주관하여 진행했던 구름톤 해커톤,3박4일간의 경험 회고.(회사 일이 바빠서 거의 두 달이 넘어서 기록하는..💦) 당시 회사에 입사한 지 2년, 곧 3년 차에 접어들 무렵이었다.협업 경험이 부족하다는 생각은 항상 들었고, 계속해서 무언가 성장할 계기를 찾고 있었다. 요즘 너무 바쁘고 정신 없기도 해서 리프레시가 필요하다고 느끼던 와중, 대학 친구가 예전에 말해줬던 '구름톤'이 떠올랐다.딱 타이밍 좋게 모집 중이었고, 제주도에서 해커톤을 진행한다기에 고민이 됐지만.. 한 번쯤 꼭 해커톤을 해보고 싶었기에 '지금 아니면 못하겠다' 싶어서 망설임 없이 바로 지원했다. ☁️ 구름톤이란?kakao x goorm 제주에서 펼쳐지는 해커톤더보..

코딩테스트를 자바스크립트로 준비할 때, 기본 문법 외에도 꼭 알아둬야 하는 필수 내장 함수들이 있습니다.이 함수들만 제대로 이해하고 익혀도, 대부분의 배열/문자열 문제는 훨씬 쉽게 풀 수 있어요.오늘은 코딩테스트에서 실제로 자주 쓰이는 JavaScript 함수들을 예제와 함께 정리해볼게요! 🗂️ 배열함수✅ map()배열을 다른 배열로 가공할 때 사용기존 배열을 가공해서 "새로운 배열"을 만들고 싶을 때[1, 2, 3].map(x => x * 2); // [2, 4, 6] ✅ filter() 조건을 만족하는 요소만 골라낼 때 사용"짝수만", "특정 문자열 포함된 것만" 등 조건 필터링[1, 2, 3, 4].filter(x => x % 2 === 0); // [2, 4] ✅ reduce()배열의 값을 누..

TailwindCSS를 활용해서 React 프로젝트를 개발하고 있던 와중, 다음과 같이 텍스트가 정해진 부모 영역을 벗어나는 문제를 마주했다.나는 모든 텍스트를 표출하되, 부모 영역보다 텍스트가 넘치는 경우자연스럽게 줄바꿈이 되기를 원했다.  기존 코드 구조는 다음과 같다. {label} {value}  ✅ 1. 텍스트가 영역을 벗어나는 이유원인 또는 태그에 다음과 같은 속성 설정이 부족하거나 잘못된 경우 발생합니다:고정된 너비 (width)가 설정되지 않음텍스트 넘침 처리(overflow)를 하지 않음줄바꿈 제한 (white-space: nowrap)이 있을 경우이런 조건에서 긴 텍스트(예: 이메일, 긴 설명, 코드 등)가 있을 경우:부모 영역 너비..