개발의 호흡

오류내역) CKEditor 이미지가 안 뜨는 이유: XSS 방어(HtmlSanitizer) 문제

[ CKEditor 이미지 로딩 실패 ] 오류 상황뉴스/게시글의 작성/수정 페이지에서 CKEditor로본문을 작성할 때 텍스트는 정상 저장되는데,이미지 첨부만 화면에 전혀 출력되지 않는 문제가 발생했다. 처음에는 'CKEditor 업로드 자체가 실패한 건가?'를 의심했다.그런데 확인해보니 업로드 요청 자체는 되고 있었고,DB에도 본문 HTML이 저장되고 있었다. 문제는 저장된 본문을 직접 확인했을 때 드러났다.엥?ㅋㅋㅋㅋㅋㅋㅋㅋㅋ즉, 'img 태그는 살아있는데 src 속성만 사라진 상태'였다.이 상태면 브라우저는 어떤 이미지를 불러와야 하는지알 수 없어서 화면에 이미지가 출력되지 않는다.[ 가설 수립: 'CKEditor 업로드 실패'가 아니라 '저장 전에 src가 지워진다' ]증상을 보면 핵심 포인트는 ..

비밀번호 보안 개선기: bcrypt 해시 저장/검증 구조 (Spring Boot + JDBC)

[ 비밀번호 평문 저장 문제 개선 ]이번 작업에서는 회원 기능 중에서도가장 기본이지만 나중으로 미루기 쉬운 비밀번호 처리 구조를 정리했다. 초기 구현에서는 회원가입, 로그인,비밀번호 변경 기능이 먼저 동작하는 데 집중하다 보니 비밀번호를 평문으로 저장하고,SQL에서 직접 비교하는 구조로 되어 있었다. 기능은 잘 돌아갔지만 이 상태는보안 관점에서 오래 가져가기 어려웠다. 특히 비밀번호는 회원가입만 고친다고 끝나는 게 아니라로그인현재 비밀번호 확인비밀번호 변경비밀번호 찾기 후 재설정까지 함께 점검해야 실제로 의미 있는 개선이 된다.이번 개선의 핵심은 아래 3가지다.저장은 encode()로 해시 처리검증은 SQL 비교 대신 matches()로 처리DAO와 Service 역할을 분리해서유지보수 가능한 구조로 정..

AI 추천 위젯 UX 개선기: 페이지 이동 후에도 '대화 복원'되도록 만들기

[ 위젯 개선 이유 ]이번 작업에서는 우하단 FAB 형태의AI 추천 위젯 UX를 개선했다. 기존에는 같은 사이트 안에서 페이지를 이동하면위젯 대화가 항상 초기화됐다.추천을 받고 상세 페이지로 이동한 뒤 다시 위젯을 열면,이전 추천 맥락이 사라져서 처음부터 다시 입력해야 했다. 특히 추천 위젯은 '더 추천', '조건 바꾸기'처럼이전 대화 상태를 이어가는 흐름이 중요한데,페이지 이동만으로 끊기는 구조는 UX 손실이 컸다. 이번 개선의 핵심은 아래 3가지다.open과 reset의 역할 분리/open 응답에 복원용 데이터 추가프론트에서 '초기 렌더'와 '복원 렌더' 분기 처리결과적으로 이제는 페이지 이동 후에도이전 대화와 마지막 추천 카드가 복원되고,추천 흐름을 자연스럽게 이어갈 수 있게 됐다.문제 상황기존 위..

[ 리팩토링을 하게 된 계기 ]게시글 상세 화면은 기능이 늘어날수록코드가 한 파일에 응집되고 조건 분기가 겹치면서 수정 난이도가 급격히 올라간다. 이번에는 기능을 ‘몇 개 더 붙인 것’에서 끝내지 않고,기능 추가로 생긴 상호작용을(노출 조건, 제재 정책, 동기/비동기 혼용)유지보수 가능한 구조로 정리하는 쪽으로 방향을 잡았다. 이번 상세 화면에서 실제로 늘어난 기능 흐름은아래처럼 한 덩어리로 얽혀 있었다.1) 신고로그인 + 본인 글 아님 + 미신고 + 작성자가ADMIN이 아님일 때만 노출, 모달 접수2) 좋아요토글 + 카운트 동기화 + ‘좋아요 누른 사람’ 모달3) 댓글목록은 비동기 렌더(정렬/갱신), 작성/수정/삭제는 동기 submit4) 제재회원댓글/신고/좋아요/게시글 수정 및삭제까지 공통 UX로 차..

[ 프론트 경로 통일 ]프로젝트를 진행하다 보면페이지는 정상인데 이미지가 안 나오거나,어떤 페이지에서는 링크가 되는데다른 페이지에서는 깨지는 상황이 은근히 자주 나온다. 대부분 원인은 단순하다.컨텍스트 경로(ctx)를 기준으로 링크를 만들지 않거나,정적 리소스 경로와 업로드 리소스 경로를 섞어서 쓰면서화면에서 참조하는 URL과 실제 파일 위치가 어긋나는 것이다. 이번에는 기능을 바꾸는 작업이 아니라,프론트 경로를 안정화하기 위해 아래 3가지를 통일했다.JSP 내부 링크/정적 리소스를 ctx 기준으로 통일정적 JS 파일에서도 ctx를 쓸 수 있게 전역으로 주입DB/서버가 내려주는 이미지 URL 형태가 제각각이어도화면이 깨지지 않게 URL 정규화 적용1. 왜 ctx(컨텍스트 경로) 통일이 필요한가개발 환경에..

[ 샘플 데이터 로딩 실패 ] 오류 상황뉴스 페이지에서 새로 추가한콘텐츠는 이미지가 정상 출력되는데,DB 넣어둔 샘플 데이터는 이미지가깨지면서 안 나오는 문제가 발생했다. 증상은 이런 형태였다.뉴스 리스트에서는 카드가 뜨는데,썸네일이 비거나 깨진 아이콘이 뜸뉴스 상세에서 본문 이미지 영역에 이미지가 안 뜨고 alt만 보이거나 빈 공간이 생김개발자 도구(Network)로 보면 이미지 요청이 404로 떨어짐 [ 가설 수립: '리소스 매핑/저장 경로 문제'다 ] 처음엔 페이지 이동 경로 문제를(JSP 링크, 컨텍스트 경로) 의심할 수 있다.하지만 이번 케이스는 페이지 라우팅이 아니라이미지 리소스를 가져오는 단계에서 깨진다. 가능한 원인은 딱 두 가지로 좁혀졌다.DB에 저장된 이미지 URL이 실제 파일 위치와 ..

내가 읽은 블로그 포스팅https://d2.naver.com/helloworld/6512234 [ 무중단 마이그레이션 사례 리뷰 ]네이버 스마트스토어 플랫폼의DB 마이그레이션 사례를 읽었다.10년 이상 운영된 Oracle 기반 레거시 프로젝트가서비스 중단 없이 MySQL로 전환하면서,어떤 전략을 선택했고 어떤 기술적 문제를 해결했는지전환 과정이 구체적으로 정리돼 있었다. 단순히 DB를 바꾸는 것이 아니라,무중단 운영과 신속한 롤백 가능성을동시에 만족시키기 위해 안전장치를여러 겹으로 쌓는 과정이 핵심이었다. 이번 포스팅에서는 이 글을 읽고 이해한전환 전략, 구현 포인트, 검증 방식(성능/정합성),그리고 트러블슈팅에서 얻은 인사이트를 정리한다. 핵심 요약핵심을 우선적으로 3가지로 요약하였다.운영 트래픽을 멈..

[ 게시글 상세보기 기능 추가 ]중프 때 만든 게시글 상세보기는 중프 설계 기준으로는 정상적으로 돌아갔다. 하지만 커뮤니티 운영 관점에서 꼭 필요한 요소들이 빠져 있었다. 신고 기능이 없어서문제 게시글을 수집할 방법이 없었고, 댓글 작성자 정보도닉네임 텍스트 정도만 보여줘서커뮤니티 느낌이 약했다.또 작성/수정일이 명확하지 않아서‘수정된 글인지’가 UX로 전달되지 않았다. 이번 작업에서는 이 3가지를 한 번에 보강하면서, 페이지 구조도 함께 정리했다.신고 버튼 + 신고 모달댓글 작성자 프로필(사진/꾸밈) 노출게시글/댓글 작성일·수정일 표시 규칙 적용그리고 유지보수를 위해 JSP / CSS / JS 분리1. 구조 분리중프 버전은 JSP 안에 CSS/JS가 섞여 있어서수정할 때마다 찾기 힘들고 충돌도 자주 났..

[ UI 설계와 기본 개념 ]소프트웨어 개발에서 설계가특히 중요한 축은 크게 두 가지다. 하나는 내부 구조를 다루는 아키텍처 설계,다른 하나는 사용자가 직접 마주하는사용자 인터페이스(UI) 설계다. 설계는 무엇인가를 구성하는 방법을 탐구하고,여러 대안 사이에서 절충하여최적의 구성을 찾아내는 과정이다. UI 설계는 단순히 화면을 예쁘게 꾸미는 작업이 아니라,사용자가 소프트웨어를 이해하고 효율적으로사용할 수 있도록 만드는 품질 설계다. 더 나아가 UI는 정적인 화면 구성에만 머무르지 않고,제품을 사용하는 과정에서느끼는 경험인 UX로 확장 연결된다. 또한 UI는 상호작용과 밀접하다.한번 구현된 뒤에는 워크플로우나상호작용 요소를 바꾸기 어렵기 때문에,UI 요소는 초기 단계에서 신중하게 확정되어야 한다.1. UI..

[ SQL 기본 ]SQLD에서 SQL 파트는 결국 2가지를 묻는다. 문법(키워드/형태)을 정확히 아는가처리 순서와 예외 규칙(함정 포인트)을 이해했는가특히 SELECT 처리 순서(FWG HSO),별칭(ALIAS) 규칙, NULL 처리,집계함수 + GROUP BY/HAVING,ORDER BY에서 많이 걸린다.1. 관계형 데이터베이스 개요DBMS (DataBase Management System)데이터베이스를 관리 및 접근하기 위한 환경을 제공하는 시스템RDBMS (Relational DBMS)데이터를 테이블 형태로 저장하고, 테이블 간 관계(PK, FK)를 활용해 관리하는 데이터베이스1970년 IBM의 Edgar F. Codd가 처음 제안한 모델대표적인 RDBMSORACLE, SQL SERVER, MYSQ..