Deep Dive
Chart.js line chart - mouse hover로 강조하기
목표 위 이미지와 같이, 여러 dataset을 하나의 line chart에서 보여주고, label에 mouse hover했을 때 해당 dataset만 강조하려고 한다. 이미지는 이해를 돕기 위한 예시이다. (출처) 위 예시는 amchart 라이브러리를 사용하여 구현되었으며, 나는 chart.js로 위 기능을 구현하고자 한다. 1차 Solution chart option > legend에 onHover, onLeave 이벤트 핸들러 추가 function handleHoverLineLegend(...) { // hover된 legend 연결 dataset 색상을 강조색으로 변경 // 그 외 dataset 색상을 gray로 변경 logic(); // 변경된 색상을 기반으로 chart update chart.u..
Webpack 빌드 파일은 어떻게 캐시되어 제공되는가 (with Nginx)
들어가며 우리가 React.js 로 작성한 웹사이트를 클라이언트에서 public하게 접속할 수 있게 하려면 프로젝트를 build하여 웹 서버를 통해 배포해야 한다. (주로 webpack으로 build) 그러나 코드가 변경되었을 때마다 모든 파일을 새롭게 빌드하여 배포하는 것은 리소스 혹은 네트워크 측면에서 매우 비효율적일 것이다. 이 과정을 최대한 효율적으로 관리하기 위해 번들러(webpack)는 파일명에 해시값을 부여하고, 웹서버(Nginx)는 빌드된 파일을 캐시하여 제공한다. 이 과정이 어떻게 이루어지는지 살펴보자. 필요성 위 과정이 필요한 이유는 크게 다음과 같다. 버전 관리 및 캐싱 효율성 각 빌드 파일에 해시가 포함되면 파일 내용이 변경될 때마다 파일 이름이 변경된다. 브라우저와 CDN(Cont..
Nginx 에 POST 요청하기 (405 Not Allowed)
문제 상황 서드파티 결제 서비스를 연동하여 cash 입출금 작업을 진행하는 과정에서 에러가 발생했다. 결제 성공/실패/취소 상황에 대한 redirect URL들을 payload에 담아 API로 요청하는데, 성공/실패의 경우 정상적으로 redirect 되었으나 취소의 경우 redirect된 url에서 아래와 같이 405 Not Allowed 응답을 받았다. 성공, 취소의 redirect url을 동일하게 설정해도 같은 현상이 반복되었다. 네트워크 탭에서 각 요청을 살펴보았는데, 아래와 같이 요청 Method가 달랐다! 서드파티 앱 쪽에, 성공은 GET으로 / 취소는 POST 로 요청하도록 미리 설정된 모양이다. (성공/실패 시에는 단순 리다이렉트만으로 충분하고, 취소시에는 별도 action이 필요할 수 있..
React popup window와 소통하기 - 서드파티 결제 서비스 연동
목적 서드파티 결제 서비스를 연동한다. 일반 modal이 아닌 pop-up window를 사용하여, 부모-자식 window 간 메시지 통신을 한다. Process payment 요청 클라이언트에서 서버로 요청 성공, 실패, 취소에 따른 popup callback(redirect) url을 payload에 포함 payment API 요청 서버측에서 payment 서비스에 API call Payment API Response payment 서비스에서 서버로 API response (결제 가능 URL 포함) Payment URL 반환 결제 진행 가능 URL 을 클라이언트로 전달 Payment URL redirect 전달받은 결제 진행 URL로 연결 popup 창을 띄우고, 해당 URL 로 redirect Pa..
Github 프로필 기술 스택 아이콘 꾸미기
양식 아래와 같은 코드를 삽입하면 해당 기술 스택 뱃지가 생성된다. 기술명, 배경색, 모양, 아이콘, 글자색 위 항목들을 본인이 원하는 스택에 맞게 변경해서 삽입하면 된다. 아래 자세하게 설명해두었습니다. 예시 1. 기술명 본인이 넣고 싶은 이름 넣으면 된다. 양식은 없다. 2. 배경색 / 4. 아이콘 명 https://simpleicons.org/ 위 사이트에서 아이콘과 그에 맞는 색상 코드를 얻을 수 있다. 배경색 - 좌측 하단 색상 코드를 '#' 제외하고 입력하면된다. 코드 클릭시 클립보드에 자동으로 복사된다. 아이콘명 - 위 이미지처럼 표시된 이름을 소문자로 입력하면 된다. 아이콘 이름에 띄어쓰기가 포함된 경우, 띄어쓰기는 '%20' 으로 사용하면 된다. ex) ruby on rails => ru..