2025년 되돌아보기
·
카테고리 없음
글쓰기블로그에 프로젝트 관련 글을 꾸준히 쓰려고 노력했다. 지금껏 해왔던 것들을 잘 정리해 남겨두고 싶기도 했고, 내용을 외부에 공개한다면 정리를 할 때 더 객관적으로 해야 한다는 압박감을 느낄 수 있을 것 같았기 때문이었다. 노력과는 별개로 스스로 글쓰기 실력이 형편없다고 느꼈는데, 이건 알고리즘 문제 풀이처럼 꾸준히 하다 보면 언젠가 더 나아지지 않을까 생각한다. 취업 준비이력서와 포트폴리오는 작성 환경을 노션에서 피그마를 옮겼고 나름 공을 들였더니 전체적으로 나아졌다. 자기소개서 작성과 면접 준비는 지속적인 노력에도 불구하고 개선이 거의 느껴지지 않는 부분이라 큰일이다. Problem Solving 올해도 매일 백준에 접속해 한 문제씩 골라 풀었다. 문제는 [난이도: 골드5~3] and [푼 사람 ..
외부 API 호출을 I/O Multiplexing과 반응형 프로그래밍으로 최적화하기
·
Project: Trendlapse
배경수집 작업은 크게 Fetch와 Store로 나뉘는데, 나는 앞서 Store 작업을 최적화하여 소요시간을 70~90초에서 1~2초로 감소시켰다. 덕분에 수집 작업 전체 소요시간이 30초 부근으로 줄어든 상황이었다. 로그를 통해 확인한 Fetch 작업에 소요되는 시간은 아래와 같았다. 전체 수집 작업 소요시간에서 Fetch 작업의 비중이 30%에서 80%로 증가하게 되었다. 전체 소요시간을 최대한 줄여야 했기 때문에 Fetch 작업 로직을 살펴보며 시간이 어디서 많이 소요되는지 파악을 시작했다. 최적화 가능 지점 탐색 Store 작업 최적화에서도 그랬듯 Fetch 작업을 최적화할 때도 마찬가지로 Trending 부분만 대상으로 했다. 왜냐하면 Video와 Channel 수집 작업에서 API 호출 횟수..
수집 데이터 DB 삽입 최적화하기
·
Project: Trendlapse
배경예전에 Amazon EC2를 써봤던 적이 있는데 컴퓨팅 자원을 그닥 사용하지 않았음에도 달마다 5,000원씩 청구되어 당황스러웠었다. 그래서 그동안 운영중인 서비스의 API 서버, DB, 모니터링 앱은 모두 자원이 넉넉한 미니PC에서 실행시켜왔다. 그러다가 최근 집 인터넷에 문제가 생겨서 수집 작업을 한 번 실패했었는데, 데이터에 공백이 생겼다는 사실이 나를 계속 찜찜하게 만들었다. 재시도 로직을 넣어 일시적인 장애에 대해서는 대처를 했지만, 돌연 미니PC가 갑자기 꺼지거나 하는 등 더 큰 장애 발생할지도 몰랐기 때문에 좀처럼 불안함이 가시질 않았다. 그래서 미니PC는 서비스 초기 개발 환경으로만 쓰기로 하고, 지금처럼 개발이 어느 정도 진행이 된 서비스는 클라우드 환경으로 옮겨놓기로 마음먹었다. ..
무거운 조회 요청 처리를 최적화하기
·
Project: Trendlapse
서비스 상황Youtube 인기 급상승 동영상 순위 변동을 Chart Race로 보여주는 서비스가 있다. 위 그림처럼 1시간마다 Youtube Data API로 인기 급상승 동영상 목록을 수집해서 DB에 저장해 둔다. 너무 큰 응답 지연인기 급상승 동영상은 1시간에 100개씩 쌓이며 최근 30일까지의 데이터를 저장하므로, 응답해야 하는 데이터의 건수는 최대 72,000(100 x 24 x 30)이 된다. 기간을 30일 잡아놓고 요청을 보낸 후 개발자 도구로 확인해 보면 7초가 넘게 걸린다. 최대 기간 범위라는 것을 감안해도 7초라는 지연은 너무 크다고 느꼈고, 이를 최대한 줄여보고자 조회 로직을 살펴보기 시작했다. 조회 로직 분석데이터 저장 구조는 짚고 넘어가자면, 인급동이 동영상을 참조하고, 동영상이..
[프로젝트:Focus Anchor] 2편 - 표식을 그려보자. 그리고 앞뒤로 움직여보자.
·
Project: Focus Anchor
개발 배경이 궁금하다면 이전 글도 읽어보세요. 2025.07.21 - [Project] - [프로젝트:Focus Anchor] 1편 - 개발 후기 [프로젝트:Focus Anchor] 1편 - 개발 후기사용자 수 100명 달성 이전에 크롬 웹스토어에 올렸던 크롬 확장 프로그램 Focus Anchor가 어느덧 사용자 수 100명을 달성했다. 그래서 기념으로 이걸 왜 개발했고, 또 어쩌다 웹스토어에 게시하게 되hamsteak.tistory.com 일단 화면에 뭐라도 그려보자프론트엔드 개발 경험이 거의 없었기 때문에, 프로젝트 기본 세팅 이후 먼저 화면에 무언가라도 그려보는 것을 목표로 삼고 관련 내용을 학습했다.는 HTML 요소 중 하나로서, 스크립트(보통은 JavaScript)를 사용하여 그림을 그리는 데에..
비효율적인 데이터 수집 로직을 최적화해보자
·
Project: Trendlapse
상황Youtube의 인기 급상승 동영상 랭킹이 시간에 따라 바뀌는 것을 Chart Race로 시각화 해주는 서비스를 개발중이었다. 데이터를 시각화하기 위해서는 지속적으로 데이터를 수집해놓는 작업이 필요했다. 서비스 개요Backend에서 다음과 같은 기능을 제공하는 것을 목표로 했다.사용자는 최근 30일 내 특정 기간, 특정 지역의 Youtube 인기 급상승 동영상 순위 변동을 조회할 수 있다.이를 위해서 일정 주기로 각 지역의 Youtube 인기 급상승 동영상 목록을 조회해서 DB에 저장해두는 로직을 구성했다. 데이터 수집 흐름데이터 수집 로직의 흐름은 다음과 같았다.인기 급상승 동영상에 해당하는 영상 ID 목록을 조회한다. ( [ videoA, videoB, ... ] )영상 ID를 통해 채널 ID를..
Spring AOP는 여러 횡단 관심사를 어떻게 하나의 프록시만으로 처리할까?
·
Spring
*** 여러 자료와 디버깅을 통해 얻은 결론을 정리해 본 글입니다. 혹시 잘못된 내용이 보인다면 적극적으로 피드백해주세요. *** Spring AOP는 여러 횡단 관심사를 하나의 프록시로 처리할 수 있다 얼마 전 Spring AOP는 Bean에 적용되는 Advisor가 여러 개 존재하는 경우에도 프록시를 그 수만큼 만들지 않고 하나만 만들어 처리할 수 있다는 것을 알게 됐다. 예를 들자면 위 그림처럼 `RealService`에 대해 `FooAdvisor`, `BarAdvisor`라는 횡단 관심사가 있다고 했을 때, 프록시 객체를 하나만 만들고도 `RealService` 전후로 `FooAdvisor`, `BarAdvisor`를 실행할 수 있다는 뜻이다. 어떻게 프록시 하나만으로 부가 기능이 포함된 실행 흐..
[프로젝트:Focus Anchor] 1편 - 개발 후기
·
Project: Focus Anchor
사용자 수 100명 달성 이전에 크롬 웹스토어에 올렸던 크롬 확장 프로그램 Focus Anchor가 어느덧 사용자 수 100명을 달성했다. 그래서 기념으로 이걸 왜 개발했고, 또 어쩌다 웹스토어에 게시하게 되었는지 과정을 적어보려 한다. 개발 배경 면접 준비를 하면서 기업 관련 뉴스를 많이 읽어야 했는데 간혹 집중이 산만해져 읽기 속도가 아주 느려질 때가 있었다. 어떻게든 집중력을 유지하려고 마우스로 한 문장 읽을 때마다 첫 번째 글자를 드래그해 가며 읽고 있는 문장이 어딘지 계속 표시했다.하지만 문장을 읽을 때마다 매번 마우스를 조작해야 하니 손목이 아팠다. 또한 책상에 발을 올리고 의자를 뒤로 젖힌 편한 자세로는 마우스를 정확하게 움직이는 것이 매우 어려웠다.문장 단위로 읽고 있는 위치를 표시할 수 ..
[프로젝트:아기자기] 무중단 배포 파이프라인 구축
·
Project
배경SSAFY 공통 프로젝트 진행 당시, 백엔드 코드 변경 사항을 서버에 반영하는 시간 동안에는 프론트엔드 팀원들의 API 사용이 불가능했다.프로젝트 후반부에는 Jenkins를 통해 서버에 빌드 후, 배포하는데까지 1분이 넘게 걸렸다.도커 이미지 빌드과정에서 의존성 파일 다운로드 과정을 캐싱하면 시간을 충분히 줄일 수 있지 않을까 생각했다. 하지만 테스트 결과 의존성 파일들이 모두 다운로드된 새 스프링 프로젝트에서도 빌드가 완료되려면 10초가 넘게 소요되는 것을 확인했다.더 나은 방법을 찾던 와중 NGINX의 리버스 프록시를 이용하면 1~2초 이내로 해결 가능하다는 것을 알게 됐다. 요구사항백엔드 코드 변경사항을 서버에 반영하는 동안에도 프론트엔드에서 API를 호출할 수 있어야 한다.해당 과정의 목표는 ..
[프로젝트:닥터스터디] 3편 - 인터프리터 (1)
·
Project
인터프리터 구상 우선 스크립트에서 함수 호출 표현식을 읽었을 때, 이것을 어떻게 실제 스터디 내에서의 동작으로 이을 수 있을지 고민했다. 위 그림과 같이 구상을 했고 나열해 본 단계별 과정이다.블록코딩 환경에서 유저가 배치한 'AI 사회자 발화' 블록은 스크립트 생성 과정을 거쳐 'AI_사회자_발화'라는 함수가 된다.클라이언트는 서버에게 스크립트를 전달하고, 서버는 인터프리터에게 스크립트를 전달한다.인터프리터는 스크립트로부터 함수명이 'AI_사회자_발화'이고 인수목록은 ["저는 AI 사회자입니다"] 라는 정보를 획득한다.인터프리터는 TTS로 음성을 만들어서 스터디룸 오디오 채널에 출력한다.그리고 위 단계별 과정으로부터 인터프리터에 필요한 기능을 작성해보았다.문자열 형태인 함수 호출 표현식으로부터 함수의 ..