전체 글

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..

[카카오 공채 바이블] 준비 방법 총정리 + 꿀팁 (코테, 면접)

바이블이라고 제목을 짓긴 했지만, 많이 부족합니다. 귀엽게 봐주시면 감사하겠습니다. 당연한 얘기지만, 글의 내용이 무조건 정확한 것은 아니기 때문에 가볍게 참고만 해주세요! 들어가기 전에 저는 2022년, 2023년 카카오 신입 공채에 지원하여, 모두 최종 단계까지 갈 수 있었으나, 모두 최종 단계에서 불합격했습니다 ㅜㅜ 불합격자이긴 하나, 전체 전형을 전부 2번씩 겪어본 사람으로서, 앞으로 공채를 지원하실 분들에게 팁을 남겨드리고자 이렇게 글을 작성하게 되었습니다. 2022, 2023 년도의 세부 전형들에 대한 후기는 각각 게시글로 남겨두었으니, [취업, 이직] 카테고리의 게시글을 참고해주세요! 카카오 신입 공채란? 모두가 아는 테크 기업 "카카오" 본사 및 계열사에 신입 개발자로서 입사할 기회를 얻을..

카카오 2차 최종 면접 후기 [2023 공채]

요약 최종 탈락 ㅜ 지난 전형 요약 1차 코테 3.5 / 7문항 합격 2차 코테 95등 / ?? 명 합격 (2000명 예상) 1차 면접 합격 2차 면접 준비 1차 코테부터 2차 면접까지 전체 프로세스를 작년에 한 번 경험했었기 때문에, 수월하게 올라왔습니다. 작년에는 인성면접은 무조건 붙는거라 생각해서 자만했었지만, 그렇지 않다는 것을 알았기 때문에 열심히 준비했습니다. 크게 준비한 내용은 인성 면접 준비 + 프로젝트 질문 입니다. 인성면접 준비는, 창의성, 리더십, 실패 경험이나 팀원과 의견 충돌이 발생한다면~, 왜 카카오에 지원했는지~ 와 같은 일반적인 인성 질문들에 대한 준비입니다. 지원하는 기업과 상관없는 일반적인 질문들을 많이 준비했고, 추가로 카카오에 대한 준비도 했습니다. 프로젝트 질문에 대..

카카오 1차 면접 후기 [2023 공채]

요약 작년의 경험을 바탕으로 어렵지 않게 합격! 들어가기 전에 작년에 CS 지식 0인 상태에서 벼락치기로 어찌저찌 합격했습니다. 후기는 아래 포스팅을 참고해주세요! 카카오 1차 면접 후기 [2022 공채] 요약 얼떨결에 올라와버린,, 1차 면접 합격! 코테 1,2차 후기 1차 코테는 4.5솔 / 7문제로 합격 2차 코테는 1,500명 중 250등 정도로 합격! 자세한 후기는 이전에 작성한 글들을 참고해주세요. [카카오] dd5dd5.tistory.com 1차 면접 준비 1차 면접 구성은 매년 동일합니다. CS + 2차 코테 + 프로젝트 크게 3가지로 분류되고, 1시간을 3등분하여 20분 가량씩 할당됩니다. (당연히 쁠마 4-5분 면접관 재량 ㅎㅎ) 인성 질문은 작년에도 안받았고, 주변에서도 딱히 그랬다는..

카카오 2차 코딩테스트 후기 [2023 공채]

요약 2차 코테 캇~ 들어가며 카카오 1차 코테를 턱걸이로 합격했습니다. 1차 코테 후기는 아래 게시글을 참고해주세요. 카카오 1차 코딩테스트 후기 [2023 공채] 요약 조마조마하게 합격! 들어가며 저는 작년 2022 공채 최종 면접에서 탈락했습니다. 탈락 후 다른 회사에 합격하여 반년 좀 넘는 경력을 쌓았고, 다음 카카오 공채를 기다리며 공부를 하고 경험 dd5dd5.tistory.com 또, 저는 작년 2차 코테도 응시했고, 합격했습니다. 작년 2차 코테 후기는 아래 게시글을 참고해주세요. 카카오 2차 코딩테스트 후기 [2022 공채] 요약 2차 코테 합격! 팁은 아래 ★로 표시해두었습니다 들어가며 카카오 1차 코테를 거의 커트라인으로 합격하고, 2차 코테를 준비했습니다. (1차 컷은 7문제 중 4..

카카오 1차 코딩테스트 후기 [2023 공채]

요약 조마조마하게 합격! 들어가며 저는 작년 2022 공채 최종 면접에서 탈락했습니다. 탈락 후 다른 회사에 합격하여 반년 좀 넘는 경력을 쌓았고, 다음 카카오 공채를 기다리며 공부를 하고 경험도 쌓았습니다. 시간이 빨리 흘렀는지 벌써 2023 공채 시즌이 다가왔고, 지원했습니다! 작년엔 별 생각 없이 지원했었는데, 올해는 준비 많이해서 지원했더니 긴장이 좀 되더군요 ㅋㅋ 작년 응시 후기는 아래 글을 참고해주세요! 카카오 1차 코딩테스트 후기 [2022 공채] 요약 합격! 들어가며 전국민 코딩테스트인 카카오 공채에 지원해봤습니다. 평소 알고리즘 문제 풀이에 자신이 있었기 때문에, 실력 체크도 해볼 겸.. 카카오에 입사하고 싶다! 는 마음은 딱히 없 dd5dd5.tistory.com 문제 풀이 저는 자바스..

카카오 2차 최종 면접 후기 [2022 공채]

요약 최종 면접 탈락.. ㅜㅜ 지난 전형 요약 1차 코테 4.5솔 / 7문항 합격 2차 코테 250등 / 1,500명 합격! 1차 면접 아슬아슬.. 합격! 자세한 후기는 지난 포스팅들을 참고해주세요! 2차 면접 준비 2차까지 왔을 때는, 다 끝난 줄 알았습니다. 인성면접이라고 들었고, 소신껏 잘 말하면 되지.. 싶었습니다. 인성 면접 질문 리스트 쭉 뽑아서 답변을 작성해보았습니다. 50개 정도? 되었는데, 인성 질문이다보니 달달 외우지 않고 어느정도 흐름만 기억해두면 질문이 나왔을 때 잘 말할 수 있을 것 같았어요. 혹시 CS나 프로젝트 질문이 나올 수도 있으니 가볍게 복습도 했습니다. 이정도 준비했는데, 더 뭘 준비해야할지 모르겠는 느낌이었습니다. 1차 면접 준비할 내용은 산더미여서 시간에 쫓기듯 준비..