Velog 자동화 기록 결과(깃허브 프로젝트 정리1)

About this offer

JSP 화면 구조 확장과 차트 데이터 연동 정리 구현 배경 오늘은 프리뷰 화면을 JSP·컨트롤러·CSS·JavaScript로 분리한 작업부터 투자 관련 화면과 차트 연동을 확장한 변경까지 정리했다. 이번 비교 범위에는 텍스트 파일 155개의 변경이 포함되어 있다. 커밋 기록에는 봇 거래 화면, 투자 계획과 투자 기록, 계좌 추가, 일간·섹터 리포트, 모바일 UI 조정 등이 남아 있다. 다만 제공된 diff는 차트 코드 중간에서 잘려 있다. 프로젝트 메모리에도 구체적인 설계 내용은 아직 없어, 전체 기능의 동작을 단정하기보다는 파일과 커밋으로 확인되는 변경 범위 와 코드에서 직접 확인한 로직 을 나누어 기록했다. 변경 구조 변경 파일에서는 다음과 같은 구성을 확인할 수 있었다. 영역 변경에 포함된 구성 서버 화면·API 컨트롤러, 서비스, 리포지터리, 요청 객체와 모델 화면 기능별 JSP, 공통 헤더·푸터, 리포트 조각 JSP 프런트엔드 공통·페이지별 CSS, 페이지 스크립트, 모달·사이드바·스위치 스크립트 차트 HTML 진입 화면, 심볼 검색·조회 JSP, 데이터피드, 레이아웃 저장·조회 코드 데이터·설정 스키마 초기화 클래스, 스키마·시드 SQL, 데이터소스 설정, 비밀 설정 예제 봇, 계좌, 리포트 영역에는 컨트롤러·서비스·리포지터리 파일이 함께 포함되어 있다. 다만 파일 목록만으로 각 계층의 실제 호출 관계나 트랜잭션 경계까지 확인할 수는 없다. 차트 쪽은 공개된 diff에서 조금 더 구체적인 흐름을 볼 수 있었다. 브라우저의 데이터피드 객체가 JSP 엔드포인트를 호출하고, 응답을 차트 라이브러리의 콜백으로 전달하는 방식이다. 핵심 로직 심볼 검색과 시계열 조회 분리 범용 차트 화면의 데이터피드에는 역할별 메서드가 나뉘어 있다. onReady : 지원 주기와 검색 필터 설정 전달 searchSymbols : 입력어와 필터로 심볼 검색 resolveSymbol : 선택한 심볼의 상세 정보 조회 getBars : 심볼·주기·조회 구간으로 시계열 데이터 요청 검색 조건과 시계열 조회 조건은 URLSearchParams 로 구성해 POST 요청으로 보낸다. 지원 주기에는 일·주·월·연 단위가 설정되어 있고, 범용 차트에는 심볼 검색 요청 지연값으로 500ms가 지정되어 있다. 이는 설정값이며, 실제 응답 시간이나 성능 개선을 측정한 결과는 아니다. 조회 결과를 세 가지 상태로 전달 getBars 는 서버 응답 상태에 따라 차트 콜백을 다르게 호출한다. if (data.status == "success") { onHistoryCallback(data.data, { noData: false }); } else if (data.status == "nextData") { onHistoryCallback([], { nextTime: data.nextTime }); } else { onHistoryCallback([], { noData: true }); } 데이터가 있는 경우, 다음 조회 시점이 있는 경우, 데이터가 없는 경우를 구분한 구조다. 요청이나 JSON 처리 중 예외가 발생하면 별도의 오류 콜백으로 전달한다. 다만 마지막 분기는 모든 나머지 상태를 데이터 없음으로 처리한다. 서버가 어떤 상태값을 반환하는지는 공개된 범위만으로 확인되지 않아, 업무 오류까지 빈 결과로 표시되는지 추가 검증이 필요하다. 차트 레이아웃 저장과 복원 차트 위젯의 저장·불러오기 어댑터에는 목록 조회, 삭제, 저장, 개별 내용 조회가 연결되어 있다. 저장할 때는 레이아웃 ID 유무에 따라 신규 저장과 수정을 구분한다. 기존 ID가 객체 형태인지도 확인하고, 최종적으로 문자열로 변환한다. 여기에 저장 시각과 사용자·메뉴 구분 정보를 붙이고 차트 내용을 JSON 문자열로 직렬화한다. 목록 조회에서는 응답의 타임스탬프를 1,000으로 나누는 변환이 있다. 저장 시각은 밀리초로 생성하므로, 서버와 차트 어댑터 사이의 시간 단위를 함께 확인할 필요가 있다. 또한 선택한 심볼이 여러 개라면 첫 번째 심볼을 기본으로 사용하고, 차트 준비 완료 후 나머지를 오버레이로 추가한다. 사용 기술 이번 변경에서 확인한 기술과 구성은 다음과 같다. Java·JSP : 서버 코드와 화면, 차트 연동 엔드포인트 JavaScript·HTML·CSS : 차트 초기화, API 호출, 화면 구성 Fetch API·URLSearchParams·JSON : 폼 요청과 JSON 요청·응답 처리 차트 라이브러리의 데이터피드·저장 어댑터 API : 심볼 검색, 시계열 조회, 레이아웃 관리 TypeScript·Rollup : UDF 데이터피드 소스와 빌드 설정 파일 Maven·SQL : Java 빌드 구성과 스키마·시드 파일 구체적인 라이브러리 버전과 빌드·배포 성공 여부는 제공된 자료로 확인하지 못했다. 고려한 점/문제 해결 이번 기록에는 재현 과정이나 테스트 결과가 포함되어 있지 않다. 따라서 해결을 완료했다고 쓰기보다는, 구현 상태에서 확인한 경계와 추가 검증할 점을 남겼다. 실시간 관련 이름과 실제 구독 구현 구분 커밋에는 실시간 차트 변경이 있고, 일부 요청에는 실시간 여부를 나타내는 값이 포함되어 있다. 하지만 공개된 두 차트 화면의 subscribeBars 와 unsubscribeBars 는 본문이 비어 있다. 이 화면들에서 지속적인 실시간 갱신이 구현되었다고 단정할 수는 없다. 잘린 파일의 나머지 코드와 별도 데이터피드 구현을 확인해야 한다. 요청별 오류 처리 차이 심볼 상세 조회는 response.ok 를 검사하지만, 공개된 시계열 조회와 레이아웃 요청에는 같은 검사가 보이지 않는다. 일부 저장·조회 요청은 예외를 로그로 남기는 데 그친다. 추가 검증할 점 은 HTTP 오류, JSON 파싱 오류, 서버의 업무 오류가 각각 차트와 사용자 화면에 어떻게 전달되는지다. 저장 목록의 반복 조회 레이아웃 목록 조회는 응답 항목을 내부 배열에 계속 추가한다. 공개된 메서드 안에는 배열을 초기화하는 코드가 없다. 반복 호출 시 중복 항목이 쌓이는지, 그리고 해당 내부 배열이 실제 화면 표시에 사용되는지 확인할 필요가 있다. 현재 자료만으로 중복 표시 문제가 발생했다고 말할 수는 없다. 비밀 설정 제외 범위 .gitignore 에는 비밀 설정 파일과 개인 키 확장자를 제외하는 규칙이 추가되었다. 동시에 모든 .properties 파일과 빌드 설정 파일을 제외하는 규칙도 포함되어 있다. 추가로 확인할 항목은 다음과 같다. 이미 추적 중인 민감 파일이 남아 있는지 필요한 공통 설정까지 제외되는지 비밀값 없이도 빌드를 재현할 수 있는지 제외 규칙 추가만으로 기존 Git 이력의 민감 정보까지 제거되었다고 볼 수는 없다. 배운 점 이번 자료에는 시행착오나 검증 결과가 없어, 특정 문제를 해결하며 무엇을 배웠다고 단정하지 않았다. 대신 다음 확인 작업을 남긴다. 데이터피드 계약 : 상태값과 nextTime 의 의미·시간 단위 확인 레이아웃 왕복 저장 : 신규 저장, 즉시 재저장, 불러온 뒤 수정하는 흐름 확인 실시간 갱신 : 구독·해제 구현 위치와 화면 전환 시 정리 여부 확인 모바일 UI : 커밋에 기록된 조정이 실제 화면 크기별로 동작하는지 확인 설정 관리 : 공개 가능한 기본 설정과 비밀 설정의 경계 확인 오늘은 화면 확장 범위를 정리하고, 차트의 검색·조회·저장 흐름을 코드 기준으로 살펴봤다. 다음에는 이 흐름을 실제 요청과 화면 동작으로 검증해, 구현된 부분과 아직 확인이 필요한 부분을 더 명확히 구분하려고 한다.