J2ong 님의 블로그

안녕하세요! 오랜만에 인사드립니다.이번 글에서는 제가 직접 기획하고 개발한 SNS 웹서비스 TalkHub를 소개하고자 합니다.TalkHub는 일상의 기록과 실시간 소통에 초점을 맞춘 소셜 플랫폼으로, PC와 모바일 버전을 모두 지원하여 언제 어디서든 편리하게 사용할 수 있습니다.📌 TalkHub를 기획한 이유해외에는 Facebook, Instagram, X(Twitter) 등 다양한 형태의 SNS가 존재하지만, 국내에서는 대부분의 사용자가 카카오톡과 같은 메신저 중심 서비스에 익숙해져 있습니다.물론 카카오톡은 한국인의 소통 습관에 잘 맞는 훌륭한 플랫폼이지만, 사용자의 일상과 관심사를 자유롭게 기록하고 공유하는 기능은 부족한 편입니다.이에 착안하여, 해외 SNS처럼 게시물 중심의 공유 기능을 갖춘 플랫..

안녕하세요!이번 글에서는 포트원 ((구)아이포트) 정기 전자 결제 연동 가이드(Test)에 대해 설명하겠습니다.저는 KG이니시스 통합인증 + 정기결제 (비인증 결제) 두개의 결제 모듈로 진행하였습니다.📌 두개의 모듈을 선택한 이유KG이니시스는 하나의 정기결제 모듈로 본인인증과 수기결제를 함께 제공하지만 다음과 같은 이유로 두 모듈을 별도로 사용하였습니다.본인인증 모듈의 단점인증서 기반 본인확인 필요본인인증 UI 커스터마이징 불가→ 사용자 경험 저하선택한 방식통합인증 모듈을 이용한 간편 본인인증 처리수기/정기 결제 모듈(비인증 결제)을 통한 카드정보 직접 입력 방식⚠️ 참고: 비인증 결제는 대행사 심사 기준이 더 까다롭습니다. 📌 포트원 전자 결제의 장점다양한 PG사 통합 관리간편한 스크립트 연동직관..

안녕하세요!이번 글에서는 크롬 확장 프로그램이 무엇인지, 어떤 구조로 되어 있는지, 그리고 어떻게 시작할 수 있는지를 간단하게 소개하겠습니다.📌 크롬 확장 프로그램의 장점HTML, CSS, JavaScript만으로도 개발 가능웹 프론트엔드 개발 지식만으로 빠르게 제작 가능브라우저 환경에서 직접 실행되므로 테스트와 배포가 간편자주 사용하는 기능을 자동화하거나 커스터마이징 가능 📌 기본 구조📁 icons // 확장 프로그램에 사용될 아이콘 모음📁 popup ├─ popup.html // 확장 프로그램 실행 시 보이는 팝업 UI ├─ popup.css // 팝업 스타일 정의 └─ popup.js // 팝업에서 실행되는 JavaScript📄 content.js // 사용자가 방문하는 웹..

안녕하세요!이번 글에서는 Spring + React 기반의 프로젝트에서 한글 초성 검색이 가능한 사용자 검색 기능을 어떻게 구현했는지 정리해보겠습니다.기본적인 방식은 사용자의 이름에서 초성만을 추출하여 별도로 저장하고, 검색 시 입력된 검색어를 초성으로 변환하여 비교하는 방식입니다. 이를 통해 'ㅎㄱㄷ'과 같이 초성만 입력해도 '홍길동'과 같은 이름이 검색될 수 있습니다.📌 검색 기능 구현 (DB)컬럼명설명user_name사용자의 이름user_consonants이름에서 추출한 초성 문자열 📌 검색 기능 구현 (Spring)Handler (초성 추출 유틸 클래스)public class KoreanUtils { private static final char HANGUL_BEGIN_UNIC..

안녕하세요!React 프로젝트에서 다양한 아이콘을 간편하게 활용할 수 있는 방법 중 하나는 Google Font Icon을 사용하는 것입니다.이 글에서는 Google Font Icon을 사용하는 이유부터, 실제 적용하는 방법까지 단계별로 소개하겠습니다.📌 Google Font Icon을 사용하는 이유간편한 사용: 별도의 패키지 설치 없이 한 줄로 바로 사용 가능다양한 디자인: Filled, Outlined, Rounded, Sharp, Two Tone 등 여러 스타일 지원경량성: SVG보다 가볍고, 페이지 로딩 속도에 부담이 적음디자인 일관성: Material Design 기반으로 설계되어 UI 전체의 통일성을 유지하기 쉬움 📌 Google Font Icon 적용 방법 (React) 1. Goo..

안녕하세요!이번 글은 이전 게시글인 파일 업로드 구현 방식에 이어서, Firebase Storage를 활용해 배포 환경에서도 안정적으로 동작하는 파일 업로드 방식을 소개합니다. 파일 업로드 통합 구현 방식은 이전 게시물을 참고해주세요.2025.04.21 - [개인 프로젝트] - Spring + React 파일 업로드 통합 구현 (korean-romanizer 라이브러리를 활용한 한글 파일명 오류 해결) Spring + React 파일 업로드 통합 구현 (korean-romanizer 라이브러리를 활용한 한글 파일명 오류 해결)안녕하세요!이번 글에서는 Spring Boot와 React 환경에서 파일 업로드 기능을 구현하는 방법을 공유합니다. 특히 한글 파일명을 업로드할 때 생길 수 있는 문제를 해결하는 방..

안녕하세요!이번 글에서는 Spring Boot와 React 환경에서 파일 업로드 기능을 구현하는 방법을 공유합니다. 특히 한글 파일명을 업로드할 때 생길 수 있는 문제를 해결하는 방법도 함께 다룹니다.📌 Spring 파일 업로드 및 로컬 저장 한글 파일명 문제 해결한글 파일명을 그대로 저장하면 시스템에 따라 파일 접근 시 문제가 생길 수 있습니다. 이를 해결하기 위해 korean-romanizer 라이브러리를 사용해 로마자로 변환해줍니다. 자세한 설명은 korean-romanizer 문서를 확인해주세요. GitHub - crizin/korean-romanizer: 한국어를 입력하면 로마자로 변환해주는 Java 라이브러리한국어를 입력하면 로마자로 변환해주는 Java 라이브러리. Contribute to..

안녕하세요!이번 게시글에서는 Cloudtype을 통한 Github Actions CI/CD 서비스 배포 방법을 공유하려 합니다.우선, Cloudtype을 이용해 기본적인 배포를 완료한 상태라고 가정하고 진행합니다.Cloudtype 배포를 진행하지 않은 분들은 아래 링크를 달아두었으니 이전 게시물을 참고해주세요. 2025.03.27 - [개인 프로젝트] - React + Spring 배포 (Cloudtype - 배포) TalkHub - 1인 SNS 웹개발 프로젝트: 개발 과정 (Cloudtype - 배포)안녕하세요! 이번 게시글에서는 Cloudtype을 통한 서비스 배포 방법을 공유하려 합니다.📌 웹서비스 배포웹사이트 배포 서비스의 종류웹사이트 배포 방식은 크게 두 가지로 나뉩니다. 1. 정적talkh..