배포환경에서 프론트-백엔드간 API를 테스트하던 중 계속해서 제기됐던 문제가 하나있다.바로 여러기기를 사용해서 로그인 하는 경우, 기존에 사용하던 기기는 액세스토큰 만료와 동시에 리프레쉬 토큰이 INVALID해진다는것! 이렇게만 말하면 대체 무슨소리인가 싶을수도 있는데, 좀더 자세히 설명해보도록 하겠다. 문제상황 분석우선, 각 토큰이 포함하고 있는 데이터는 다음과같이 설정되어있었다."Access-Token" : userId + providerCode + 동의한약관버전 + 비밀key + 만료시간(1분)"Refresh-Token" : 비밀key + 만료시간(7일) 위 상태에서, 로그인로직의 경우 다음과같이 동작한다.로그인에 성공하면 두 토큰을 모두 재발급해준다. 또한 동시에 Refresh토큰값을 DB에 저장..

배포환경에서 로그인 시스템에 문제가 생겼다. access-token 만료시 refresh-token 재발급 로직이 비정상적으로 동작하고 있었던 것. 즉 액세스토큰 재발급 API가 매번 런타임 에러를 뱉고 있는것이였다. 간단해보였던 이 문제는 우리팀을 꽤나 고생시켰는데... 크게 두가지 문제가 있어서 그랬던거였다.1. 액세스토큰 재발급 로직에서 액세스토큰을 검증하는 불필요한 로직이 있었음2. 리프레쉬토큰이 정상적으로 발급되지 않고 있었음 여기서 두번째 문제가 오늘의 주제, '다른 도메인간 쿠키 문제 해결하기!' 이다.또한 이 문제를 해결하면서 마주친 다양한 에러들에 대해 좀 더 기술해보도록 하겠다. 더보기(CF) 1번 문제 해결첫번째 문제는 오늘의 주제와는 동떨어진 휴먼에러이기 때문에 넘어갈까 했지만, 혹..

'빼곡'을 개발하면서, 유저의 최근검색어를 보여주는 API를 구현하게 되었다.  기본적으로 RDB를 사용하고 있었으므로 CRUD로 구현해도 되지만, 몇가지 의문이 생긴다.1. 해당 데이터는 검색 페이지에 접근할때마다 필요한데, 매번 DB에 접근해서 가져오는건 너무 느리지 않을까?2. 최근 검색한 5개의 검색어만 저장하는데, 검색어 추가에 따라 insert 및 delete(5개가 넘을때) 작업이 수행되는건 너무 오버헤드가 크지 않을까?3. 최근검색어를 삭제할때마다 RDB에서 해당 검색어를 삭제하는 작업도 기능에비해 오버헤드가 크다. 결론적으로, '최근검색어'라는 기능을 구현하기에 RDB는 오버헤드가 큰 접근법이라는 판단을 하게 되었다.그렇다면 RDB에 접근하지 않고 이 기능을 구현하려면 어떻게 해야할까? ..

SEMENTO 프로젝트에선 Jenkins 기반의 CI/CD 로직을 구현했었다. 그런데 SSAFY 수료 이후, 우수작품 전시에 이 프로젝트를 올리고자 서버를 이전해달라는 요청이 왔다. 그래서 우리팀은 새로운 서버에 Jenkins 및 관련 스크립트, 그리고 Docker와 NginX설정 등을 다시 만들어야 했었다. 이 과정에서 반복작업에 불편함을 느꼈던 나는, 서버 이전을 고려한 아키텍처를 설계할 수는 없을까? 라는 고민을 하게 되었다. 결과적으로, 클라우드 기반 CI/CD 파이프라인 구축으로 서버 이관시의 비효율을 해결하고, 자동화 할 수 있었다. 기존 시스템의 비효율본격적인 설명에 들어가기 전에, 기존 시스템 아키텍처에 대해 설명해보고자 한다.  docker cp /home/.../config.proper..

나는 그동안 AWS 프리티어를 통해 프로젝트를 배포해왔다. 그러나 프리티어는 단 1년만 주어졌기에 현재는 프로젝트들이 전부 내려간 상태고, 대체제를 찾고자 오라클 서버, GCP 등을 고려해봤지만 가입과정의 오류, 결국 필연적인 과금의 위험성 등의 문제로 인해 최적의 선택지가 되어주진 못했다. 그러던중 친구가 '미니PC 같은걸로 홈서버를 만들어보는게 어때?' 라는 제안을 해왔고, 내가 만들었던 작은 프로젝트들을 올려두기에 딱 맞는 선택지라는 판단하에 실행에 옮기게 되었다.   무릇 백엔드 개발자라면 서버 하나쯤 있어야지!   서버 자원으로는 일반PC, 미니PC, 안드로이드 스마트폰 등 다양한 선택지가 존재한다. 나는 그중에서도 라즈베리파이를 선택했다! 아무래도 학부생 시절 임베디드 프로젝트등을 해왔다보니,..

과거 첫 웹개발을 배웠을땐 MyBatis로 백엔드를 개발했었다. DB와 데이터를 주고 받으려면 VO와같은 객체를 정의해두고, SQL문을 작성하는 방식이다. 다만 그 과정에서, 간단한 select문들도 매번 새로 정의해주는점이 불편하게 느껴졌고, 무엇보다 VO를 계속해서 만들다보니 이게 과연 객체지향적인 설계인가에 대한 고민이 생겼다. 그래서 조사한 결과, SQL Mapper인 MyBatis와는 달리, ORM으로 작동하는 JPA가 이러한 비효율을 해결해줄 수 있음을 알게되었었다. 백엔드단에 테이블 정보를 객체로 매핑함으로써, 기존의 SQL중심적 개발에서 객체중심의 개발로 전환할 수 있게 된 것이다! 이는 어마어마한 장점을 가져오는데, 개발 생산성과 유지보수에서 아주 큰 이점을 가진다. 특히 JpaRepos..

기업 SEMES와의 연계프로젝트였던 을 개발하며 발생했던 문제중 하나였던 "느린 집계속도" 문제를 해결했던 방법에 대해 포스팅 해보려고 한다.(해당 프로젝트의 내용, 그리고 아키텍처 설계에 관해선 이전 포스팅에서 볼 수 있다.) 프로젝트의 초기 설정을 간단히 보고 가자면, AnyLogic이라는 시뮬레이션 툴이 OHT 물류 데이터를 생산한다. 이는 그대로 RDB에 저장되며, Spring에서 select 쿼리를 날림으로써 데이터를 집계하게 된다.  그리고 바로 여기서 문제가 발생한다.AnyLogic은 시간당 10만, 즉 하루 300만개의 데이터를 생산하는데, 실제 시스템에선 한달이 넘는 기간에 대한 요청이 들어올 수 있다. 이경우 select쿼리가 수행되는데 아주 오랜 시간이 걸린다.   RDB의 Full-..

SSAFY에서 좋은 기회로 기업 SEMES와의 연계프로젝트를 진행했었다.당시 전달받은 주제는 이었다. 간단하게 설명하자면, OHT라는 반도체 운송장비가 일을 하며 만드는 대용량 로그를 직접 학습시킨 AI를 통해 분석한다. 이를통해 단순 운송 로그만으로도 몇시에 정체가 일어났는지, 그리고 그 원인은 무엇인지 쉽게 알 수 있게 해주는 프로젝트다. 나는 이 프로젝트에서 AI를 제외한 모든 역할, 즉 백엔드/프론트엔드/인프라/디자인을 담당했고, 이과정에서 가장 신경썼던 부분중 하나가 바로 오늘의 주제, "아키텍처 설계" 이다. 최종적인 아키텍처 설계도는 몇가지 문제상황을 마주치면서 크게 수정되었다, 자세한 내용은 다음과 같다.  1. AnyLogic 시뮬레이터로 발생하는 실시간 데이터 보안상 문제로 직접 공장 ..

는 AI를 활용한 조제약 분석 웹으로, Vue.js를 통해 개발했었다. 당시 백엔드, 프론트엔드, 디자인을 모두 맡고, 기술리더 역할까지 일임했었는데, 프론트엔드가 가장 힘들었다ㅎㅎ... 아무래도 백엔드에 비해서는 경험이 부족한데다가, 이전 프로젝트에 비해 화면도 굉장히 많았다. 하지만 팀원들을 도우면서 가장 많이 성장하기도 했다.  당시 내가 단독으로 디자인한 UI이다. 60개에 달하는 화면....디자인도 힘들었지만, 진짜 문제는 개발이었다. 어떻게해야 짧은 시간안에 이 모든 화면을 구현할 수 있을까?그때 생각한게 바로 컴포넌트 주도 개발(CDD)였다. 컴포넌트 주도 개발은 앱의 UI를 재사용 가능한 컴포넌트로 쪼개어 개발하는 방식이다. 이를 통해 UI를 더 효율적으로 관리하고, 재사용성과 유지보수성을..

오늘은 chart.js를 활용해서 위와같은 디자인의 라인차트를 커스텀 하는 방법을 포스팅 하려고 한다. chart.js는 대표적인 차트용 라이브러리로, 굉장히 다양한 커스텀 방식을 지원한다.Line Chart의 공식문서에 의하면, 초기 셋팅은 다음과 같다.   나는 위 셋팅에서 꺾임은 좀 더 부드럽게, 가로선을 없애며, 각 데이터별 point부분도 생략할것이다.뿐만아니라 그래프 아래에 그라데이션을 만들고, 맨 위에 데이터명에 해당하는 범례는 다른디자인을 쓰기 위해 생략할것이다. 구현 당시 특히 그라데이션 부분을 어떻게 해야할지 고민이 많았다. 자료가 없었기 때문에 ㅜ_^ 같은 상황을 겪는 분들에게 팁을 주자면, 구글에 영어로 chart.js line chart 등의 키워드로 검색한 뒤, 이미지탭에서 내가..