티스토리

J2ong 님의 블로그
검색하기

블로그 홈

J2ong 님의 블로그

talkhub.co.kr/m

J2ong 님의 블로그입니다.

구독자
0
방명록 방문하기

주요 글 목록

  • 크롬 확장 프로그램 개발 가이드 안녕하세요!이번 글에서는 크롬 확장 프로그램이 무엇인지, 어떤 구조로 되어 있는지, 그리고 어떻게 시작할 수 있는지를 간단하게 소개하겠습니다.📌 크롬 확장 프로그램의 장점HTML, CSS, JavaScript만으로도 개발 가능웹 프론트엔드 개발 지식만으로 빠르게 제작 가능브라우저 환경에서 직접 실행되므로 테스트와 배포가 간편자주 사용하는 기능을 자동화하거나 커스터마이징 가능 📌 기본 구조📁 icons // 확장 프로그램에 사용될 아이콘 모음📁 popup ├─ popup.html // 확장 프로그램 실행 시 보이는 팝업 UI ├─ popup.css // 팝업 스타일 정의 └─ popup.js // 팝업에서 실행되는 JavaScript📄 content.js // 사용자가 방문하는 웹.. 공감수 2 댓글수 2 2025. 5. 3.
  • Spring + React 한글 초성 검색 기능 구현하기 안녕하세요!이번 글에서는 Spring + React 기반의 프로젝트에서 한글 초성 검색이 가능한 사용자 검색 기능을 어떻게 구현했는지 정리해보겠습니다.기본적인 방식은 사용자의 이름에서 초성만을 추출하여 별도로 저장하고, 검색 시 입력된 검색어를 초성으로 변환하여 비교하는 방식입니다. 이를 통해 'ㅎㄱㄷ'과 같이 초성만 입력해도 '홍길동'과 같은 이름이 검색될 수 있습니다.📌 검색 기능 구현 (DB)컬럼명설명user_name사용자의 이름user_consonants이름에서 추출한 초성 문자열 📌 검색 기능 구현 (Spring)Handler (초성 추출 유틸 클래스)public class KoreanUtils { private static final char HANGUL_BEGIN_UNIC.. 공감수 1 댓글수 1 2025. 4. 26.
  • Google Font Icon을 활용한 아이콘 사용법 (React) 안녕하세요!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.. 공감수 0 댓글수 0 2025. 4. 23.
  • Firebase Storage를 활용한 파일 업로드 구현 방법 안녕하세요!이번 글은 이전 게시글인 파일 업로드 구현 방식에 이어서, Firebase Storage를 활용해 배포 환경에서도 안정적으로 동작하는 파일 업로드 방식을 소개합니다. 파일 업로드 통합 구현 방식은 이전 게시물을 참고해주세요.2025.04.21 - [개인 프로젝트] - Spring + React 파일 업로드 통합 구현 (korean-romanizer 라이브러리를 활용한 한글 파일명 오류 해결) Spring + React 파일 업로드 통합 구현 (korean-romanizer 라이브러리를 활용한 한글 파일명 오류 해결)안녕하세요!이번 글에서는 Spring Boot와 React 환경에서 파일 업로드 기능을 구현하는 방법을 공유합니다. 특히 한글 파일명을 업로드할 때 생길 수 있는 문제를 해결하는 방.. 공감수 2 댓글수 2 2025. 4. 22.
  • Spring + React 파일 업로드 통합 구현 (korean-romanizer 라이브러리를 활용한 한글 파일명 오류 해결) 안녕하세요!이번 글에서는 Spring Boot와 React 환경에서 파일 업로드 기능을 구현하는 방법을 공유합니다. 특히 한글 파일명을 업로드할 때 생길 수 있는 문제를 해결하는 방법도 함께 다룹니다.📌 Spring 파일 업로드 및 로컬 저장 한글 파일명 문제 해결한글 파일명을 그대로 저장하면 시스템에 따라 파일 접근 시 문제가 생길 수 있습니다. 이를 해결하기 위해 korean-romanizer 라이브러리를 사용해 로마자로 변환해줍니다. 자세한 설명은 korean-romanizer 문서를 확인해주세요. GitHub - crizin/korean-romanizer: 한국어를 입력하면 로마자로 변환해주는 Java 라이브러리한국어를 입력하면 로마자로 변환해주는 Java 라이브러리. Contribute to.. 공감수 1 댓글수 1 2025. 4. 21.
  • Github Actions와 Cloudtype을 활용한 CI/CD 자동 배포 설정 안녕하세요!이번 게시글에서는 Cloudtype을 통한 Github Actions CI/CD 서비스 배포 방법을 공유하려 합니다.우선, Cloudtype을 이용해 기본적인 배포를 완료한 상태라고 가정하고 진행합니다.Cloudtype 배포를 진행하지 않은 분들은 아래 링크를 달아두었으니 이전 게시물을 참고해주세요. 2025.03.27 - [개인 프로젝트] - React + Spring 배포 (Cloudtype - 배포) TalkHub - 1인 SNS 웹개발 프로젝트: 개발 과정 (Cloudtype - 배포)안녕하세요! 이번 게시글에서는 Cloudtype을 통한 서비스 배포 방법을 공유하려 합니다.📌 웹서비스 배포웹사이트 배포 서비스의 종류웹사이트 배포 방식은 크게 두 가지로 나뉩니다. 1. 정적talkh.. 공감수 0 댓글수 0 2025. 4. 20.
  • React + Spring 배포 (Cloudtype - 배포) 안녕하세요! 이번 게시글에서는 Cloudtype을 통한 서비스 배포 방법을 공유하려 합니다.📌 웹서비스 배포웹사이트 배포 서비스의 종류웹사이트 배포 방식은 크게 두 가지로 나뉩니다. 1. 정적 웹사이트 배포 서비스정적 웹사이트는 HTML, CSS, JavaScript로만 구성되며, 서버에서 미리 생성된 페이지를 제공하기 때문에 사용자 입력에 따라 내용이 변경되지 않습니다.Netlify, Vercel, GitHub Pages, AWS S3, Firebase Hosting 등2. 동적 웹사이트 배포 서비스동적 웹사이트는 데이터베이스 및 서버와의 상호작용을 통해 사용자의 요청에 따라 화면이 바뀌고 데이터를 실시간으로 업데이트할 수 있습니다.Apache, AWS EC2, Nginx, Microsoft IIS.. 공감수 1 댓글수 1 2025. 3. 27.
  • Perspective API - 욕설 및 비속어 필터링 안녕하세요! 이번 게시글에서는 Perspective API를 활용한 욕설 및 비속어 필터링 방법을 공유하려 합니다.SNS 서비스의 특성상 관리자가 유해 콘텐츠를 하나하나 수동으로 필터링하는 것은 현실적으로 많은 인적 자원과 시간이 소모됩니다. 따라서 자동화된 유해 콘텐츠 필터링 기능이 필요하다고 생각하였고, 이를 위해 욕설 및 비속어 필터링 시스템을 도입하는 것이 중요하다고 판단했습니다.📌 Perspective API란?기존 욕설 필터링 방식욕설 및 비속어를 필터링하는 방식으로 대표적인 방법은 크게 두 가지가 있습니다:리스트 기반 필터링미리 정의된 욕설 및 비속어 리스트를 생성하고, 사용자가 입력한 텍스트에 해당 단어가 포함되어 있으면 필터링하는 방식입니다. 이 방법은 구현이 비교적 간단하지만, 리스.. 공감수 0 댓글수 0 2025. 3. 22.
  • WebSoket-STOMP (Spring + React) 안녕하세요! 이번 게시글에서는 웹소켓을 통한 실시간 메시지 전송 방법을 공유하려 합니다.제 프로젝트에서 가장 많은 시간을 할애한 기능입니다.📌 WebSoket과 STOMP의 이해우선 WebSoket과 STOMP가 무엇인지에 대한 이해가 필요합니다.저는 다른 관련 정보들을 읽어보고 제대로 이해하지 않은 채 WebSoket만을 통해 채팅 시스템을 구현했었는데요.WebSoket만으로 구현했을 때는 사용자가 채팅방에 참여할 때마다 새로운 WebSocket 연결을 관리해야 했고, 특정 방의 메시지만 받아야 하는데 이를 수동으로 필터링해야 해서 코드가 복잡해졌습니다.그제서야 검색을 통해서 STOMP에 대한걸 접해서 코드를 대폭 수정할 수 밖에 없었습니다. 그로 인해 시간을 많이 소비하게 되었네요.저처럼 다른 사.. 공감수 3 댓글수 3 2025. 3. 19.
  • 구글 간편 로그인 구현 (react-oauth/google 라이브러리) 안녕하세요! 이번 게시글에서는 저번 게시물에서 다룬 카카오 간편 로그인, 네이버 간편 로그인에 이어, Spring + React 프로젝트의 구글 간편 로그인 기능 구현 방법을 공유하려 합니다.📌 Google Cloud Console구글 간편 로그인을 구현하기 위해서는 카카오 간편 로그인과 네이버 간편 로그인 처럼 개발자 센터에서 API 설정을 해줘야 합니다.구글 로그인은 네이버 로그인과 동일한 방식으로 동작합니다.로그인 성공 후 인증 코드를 먼저 반환하고, 이 코드를 이용해 access token을 요청한 뒤 개인정보를 가져옵니다.자세한 사항은 구글 클라우드 API 문서를 참고해주세요. REST API 사용 | Identity Platform Documentation | Google Cloud의.. 공감수 0 댓글수 0 2025. 3. 18.
  • 네이버 간편 로그인 구현 (react-naver-login 라이브러리) 안녕하세요! 이번 게시글에서는 저번 게시물에서 다룬 카카오 간편 로그인에 이어, Spring + React 프로젝트의 네이버 간편 로그인 기능 구현 방법을 공유하려 합니다.📌 NAVER Devlopers네이버 간편 로그인을 구현하기 위해서는 NAVER Developers에서 애플리케이션을 등록하고 API 설정을 진행해야 합니다. 네이버 간편 로그인은 카카오와 조금 다른 방식으로 동작하는데요.카카오 로그인은 로그인 요청 후 받은 토큰으로 개인정보를 가져올 수 있지만,네이버 로그인은 로그인 성공 후 인증 코드를 먼저 반환하고, 이 코드를 이용해 access token을 요청한 뒤 개인정보를 가져올 수 있습니다.보다 자세한 사항은 네이버 로그인 개발 가이드를 참고하세요. 네이버 로그인 개발가이드 - LOGI.. 공감수 1 댓글수 1 2025. 3. 18.
  • 카카오 간편 로그인 (react-kakao-login 라이브러리) 안녕하세요! 이번 게시글에서는 Spring + React 프로젝트의 카카오 간편 로그인 기능 구현을 공유하려 합니다.📌 Kakao Devlopers우선 카카오의 간편 로그인 기능을 구현하기 위해서는 kakao developers를 설정해줘야 합니다. 저는 조금 더 간편하게 구현하기 위해서 JavaScript SDK를 이용해서 진행했습니다. 아래는 JavaScript SDK를 사용한 카카오 로그인 과정을 나타낸 시퀀스 다이어그램(Sequence diagram)입니다.자세한 설명은 카카오 개발자 센터 API 문서를 참고해주세요. Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.deve.. 공감수 1 댓글수 1 2025. 3. 17.
  • 인피니트 스크롤 구현 (Spring + React) 안녕하세요!이번 게시글에서는 Spring + React 프로젝트의 인피니트 스크롤을 활용한 페이징 구현 방법을 공유하려 합니다.📌 트래픽 최적화에 대한 고민웹 서비스를 개발할 때, 특히 SNS와 같은 데이터 중심 애플리케이션에서는 트래픽 최적화가 중요한 문제입니다.저 역시 TalkHub를 개발하면서 트래픽 감소 및 성능 최적화에 대한 고민을 많이 했습니다.제가 개발한 프로젝트에서 가장 많은 트래픽이 발생할 가능성이 있는 기능은 다음과 같습니다.게시글 리스트 조회 (피드 로딩) 메시지 리스트 조회 (채팅 내역 불러오기) 초기에는 한 번에 모든 데이터를 불러오는 방식을 고려했지만, 데이터가 많아질수록 서버 부하가 커지고 사용자 경험(UX)도 저하될 위험이 있었습니다.따라서, 페이징(Pagination) .. 공감수 0 댓글수 0 2025. 3. 16.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.