프로그래밍 (8) 썸네일형 리스트형 Chart.js 버그 픽스 컨트리뷰션 회사에서 신규 화면 구성을 위해 Chart.js를 사용하던 중 복장터지는 레이아웃 버그를 하나 만나게 되는데... 바로 이 툴팁의 위치가 미묘하게 왼쪽으로 틀어져버리는 버그였다. Chart.js 옵션 중 stack이라는 것을 활용하면 위처럼 하나의 bar 엘레먼트에 두 데이터를 쌓아서 표시할 수 있는데, 이 경우에 툴팁의 포지션이 틀어져버리는 것이었다. 왜그러는 것인가.. 소스 코드를 분석하던 중 툴팁 관련 로직이 모여있는 plugin.tooltip.js 파일을 발견. 이 파일 안에 있는 `positioners.average` 함수가 툴팁의 위치를 계산해주는 놈이었다. const positioners = { average(items) { if (!items.length) { return false; } .. 혜움 레포트 프론트 개선 - 2 지난 이야기... 안녕하세요. 혜움랩스에서 개발자로 일하고 있는 문현제입니다. 이번 글에서는 전편에 이어서 프론트 개선 작업을 하면서 마주쳤던 어려움들과 해결 과정에 대해서 적어보려고 합니다. Frontend 마이그레이션 전략 장고템플릿과 Vue 코드가 강하게 결합된 기존 형태에서, 온전한 SPA로 프론트 앱을 어떻게 분리시킬지 결정이 필요했습니다. 기존에 동작하고 있는 서비스를 문제없이 사용자들에게 제공하면서 신규 프레임워크 Vue3도 적용할 수 있어야 했습니다. 여러 방식들을 리서치 해본 결과, path 별로 다른 앱을 보여주는 방식, 레거시 앱을 전부 신규 앱으로 이전하는 방식, 하나의 화면에 두 앱이 표시되는 multi-app 방식을 고려했습니다. path별 앱 분리 path 별로 앱을 분리하는 .. 혜움 레포트 프론트 개선 - 1 안녕하세요. 혜움랩스에서 개발자로 일하고 있는 문현제입니다. 혜움에는 혜움 레포트라는 세무 서비스를 위한 페이지가 있습니다. 이번 글에서 혜움 레포트를 점진적으로 개선했던 경험을 공유해보려고 합니다. 혜움의 서비스는 장고로 구성되어 있고 모든 트래픽을 장고에서 처리하는 방식이었습니다. 사용자가 브라우저를 통해 혜움 레포트에 접속하면 다음과 같이 요청이 처리되고 있었습니다. 그리고 혜움 레포트의 화면은 장고 템플릿으로 공통 컴포넌트가 그려지고 실제 메인 페이지 부분은 django-webpack-loader를 통해 vue.js앱이 그려지고 있었습니다. 또한 장고 템플릿으로만 작업된 페이지들도 있었습니다. 이런 구조 속에서 개발을 하면서 불편한 점이 몇 가지 있었습니다. 화면에 그려주는 로직이 프론트(vue... 레거시 코드에 대해 레거시라는 단어는 유산이라는 뜻이다. 이 단어 안에는 특정한 가치를 가지고 있지 않다. 물려 받은 유산이 좋은 것인지 나쁜 것인지 알 수 없기 때문이다. 다만 소프트웨어 업계에서는 이 단어가 꽤나 부정적인 뜻을 가지고 있는 것 같다. 레거시에 대한 이미지는 대부분 '잘 구조화 되어 있지 않은', '테스트가 잘 되어있지 않은', '복잡한', '구식의' 등의 단어를 연상하게 한다. 개발자로 일을 시작한지 얼마 안되었을 때, 제대로 짜여져있지 않은 레거시 코드들을 보며 이전 작업자들을 이해할 수 없다는 식으로 생각한 적이 있었다. '왜 이렇게 작업을 했지', '나라면 더 잘 짰을 것 같은데' 이런 생각을 하면서 말이다. 그런데 개발자로 조금 더 일을 해보니 생각이 달라졌다. 첫 번째로 바뀐 생각은 내가 했어도.. 타입스크립트가 싫다 js를 사용하는 곳이라면 대부분 ts를 도입하고 사용하려 한다. 타입이 모든 에러를 잡아줄 것이다라는 희망을 가진 수 많은 개발자들이 ts를 찬양하고 도입하는 추세이다. 근데 나는 ts가 별로인 것 같다. 모든 코드가 완벽한 타입으로 정의 되어있고 ide가 모든 것들을 잘 처리해주면 불만이 없을 텐데, 사용하다보면 타입 없이 js로 개발된 모듈을 사용해야될 때가 있고, 그를 보완하기 위해 @types/어쩌구 패키지를 설치해야하며, js로 작성된 모듈이 변경될 때 types도 수정을 해줘야한다. 그마저도 types 패키지가 없으면 직접 모듈 문서를 참고하여 타입을 선언해줘야 한다. any 같은 타입을 허용할 거면 애초에 ts를 쓰는 이유가 없다. 정적 타입 체킹이 과연 오류를 줄이는데 도움을 주는가에 대한.. 웹 푸시 구현에 대한 고민 웹 푸시를 어떻게 구현할 것인가? 1. websocket 서버를 구현하는 방법 - socket.io, spring websocket, ws, websocketd 등을 이용한 웹 소켓 서버 구현 - 클라이언트에서 적절한 라이브러리 혹은 api 로 실시간(에가까운) 양방향 통신 구현 - WebSocket api 가 지원되지 않는 브라우저나 환경에서는 long polling 이나 스트리밍 등의 방법으로 양방향 통신을 구현 - 트래픽 관리 다 직접 해야함 - 거의 모든 브라우저 환경 지원 가능 2. FCM 이용 - 다 좋은데 (무료, 트래픽 관리 안해도 됨) - Push API, Service Worker API 를 지원하는 브라우저에서만 사용 가능하다. - 즉 mac 사파리, iOS 사파리에서 fcm 사용 불.. mac 로컬 환경 https 구성 맥에서 로컬 개발환경을 https 로 만들기 위해서는 직접 ssl 인증서를 만들고 macOS에 등록하는 과정이 필요하다. 1. ssl 인증서 만들기 - https://letsencrypt.org/docs/certificates-for-localhost/ 참고 openssl req -x509 -out localhost.crt -keyout localhost.key \ -newkey rsa:2048 -nodes -sha256 \ -subj '/CN=localhost' -extensions EXT -config 응용 프로그램 -> 유틸리티 -> 키체인 접근 어플리케이션 실행 상단 파일 메뉴 -> 항목 가져오기 -> 생성된 crt 파일 가져오기 키체인 앱 리스트에 추가된 인증서 더블클릭 -> 신뢰 탭 -> 이 .. [번역글] 자바스크립트의 이벤트 처리 순서 (Event order in Javascript) 원문 : https://www.quirksmode.org/js/events_order.html 첫 번역 글이라 뭔가 매끄럽지 못하네요. 궁금하신 점이 있거나 번역 수정에 대한 의견은 댓글로 주시면 감사하겠습니다. 자바스크립트 이벤트 순서show page contentsSee section 7D of the book.Netscape 4 only supports event capturing, Explorer only supports event bubbling. Netscape 6 and Konqueror support both, while Opera and iCab support neither. 자바스크립트 이벤트 소개 에서 처음에 제가 이해가 잘 안되는 질문을 했었습니다. “만약 어떤 엘리먼트와 그 상위 .. 이전 1 다음
