한준호

Recoil vs Jotai vs Zustand 리액트 진영에서 사용되는 클라이언트 상태 관리 라이브러리에 대한 간략한 스터디로 무거운 redux와 mobx는 고려하지 않음. 위 라이브러리들은 공통적으로 기존 상태관리(redux, mobx, context api)에 대한 성능 개선과 보일러플레이트 개선을 위해 등장했다. Redux 외부 상태로 Store를 취급하기 때문에 동시성 모드를 구현하기 제한됨 복잡한 Boilerplate Store, Action, Reducer 등 코드량이 많음 비동기 Saga, Thunk 등 서드파티 라이브러리 필요 mobx 클래스 컴포넌트에 맞춰져있음 (hook을 위해 추가 라이브러리 필요) 객체지향 딱히 단점이라곤....? Context value가 업데이트될 때마다 구독 ..

사이트 메인 화면에서 크롬 권장 팝업을 띄우기 위해 사용자의 브라우저 정보를 알아낼 필요가 있었다. 이미 많은 게시글에서 해당 내용을 다루었고 대부분 user agent를 파싱해서 단순 비교하는 코드였다. checkBrowser() { const agent = navigator.userAgent.toUpperCase(); if (agent.indexOf("TRIDENT") >= 0) { return "IE"; } else if (agent.indexOf("FIREFOX") >= 0) { return "FIREFOX"; } else if (agent.indexOf("EDG") >= 0) { return "EDGE"; } else if (agent.indexOf("SAFARI") >= 0) { return ..

지난 작업에서 번들 파일의 용량을 parsed 기준 18MB 에서 10MB까지 줄였다. 사실 번들 파일을 줄이는 것만으로는 큰 성능 향상을 기대하기는 힘들다. 이번엔 번들 파일 최적화와 더불어 다른 작업들도 진행하였고 그 결과 번들 파일의 크기를 4.3MB까지 감소하였고 DOMContentLoad 50% 단축, 로드 완료 시간을 1/6으로 단축하였다. 작업한 것은 크게 3가지이다. 1. 필요없는 라이브러리, asset, 컴포넌트 삭제 사용하지 않는 코드들은 웹팩의 트리셰이킹을 통해 어느정도 미연에 방지가 가능하지만 트리셰이킹도 관계가 애매한 파일에 대해서는 진행하지 않는다. 언젠가는 쓰겟지 라는 생각으로 주석처리 해놓고 남겨놨던 코드들과 여러 파일들이 시간이 지나다 보니 사용하는 것 보다 사용하지 않는..

코테를 풀던 중 인덱스에 대한 예외 처리를 하면서 다음과 같은 결과가 나오는 것을 알게되었다. 둘 다 존재하지 않는 인덱스에 대해 참조를 하였지만 결과가 달랐다. 자바스크립트의 경우 이차원 배열은 사실 일차원 배열이 쪼개져 있는 것이다. 즉, a[0][1] 을 참조하게 되면 a[0]으로 부터 배열을 반환받고 a[0]에서 다시 [1] 의 요소를 찾게 된다. 따라서 a[-1][0] 의 경우는 undefined[0] 과 같고 undefined는 인덱스 요소를 가지지 않기 때문에 Error가 나오게 되고 a[0][-1]의 경우는 a[0]인 [1, 2]의 -1번째 요소를 참초하게 되므로 undefined가 나오게 된다. const a = [[1,2], [3,4]] console.log(a[-1][0]) // Er..

자바스크립트 파일 다운로드는 정말 간단하다. 태그의 속성인 download에 url을 지정해주면 된다. 끝!! . . . . 하지만 이렇게 다운로드를 하게 되면 파일 명이 url로 저장되어 버린다. 이 이미지의 이름은 원래 image.png 였는데, 어떻게 하면 원래의 이미지로 다운을 할 수 있을까 a 태그에 클릭 이벤트로 downloadResource를 걸어주었다. downloadResource(url, filename) { fetch(url) .then((response) => { return response.blob(); }) .then((blob) => { const blobURL = window.URL.createObjectURL(blob); const a = document.createElem..

이전까지는 webpack기반으로 vue를 실행하는 vue-cli를 통해 개발해왔지만 1월 14일 Evan You의 세미나를 보고 새로운 과제가 생겼음을 깨닫게 되었다. 세미나 내용은 대층 vue3, pinia, vite가 vue의 표준으로 바뀌게 된다는 얘기들이었다. vue3야 기존 vue2에서 지원되던 라이브러리 중 호환이 안되는 것 때문에 프로덕션 레벨에서 활용이 망설여졌지만 개인 프로젝트 정도는 충분히 할 가치가 있어 보인다(Composition API 등 ...) ts는 이제 프론트엔드 개발자의 기본기나 다름없고.. 사실 vuex가 불편한 지는 모르겠는데 pinia가 더 많은 개선을 들고왔다고 하니 사용해볼 예정. (pinia는 상태 관리 라이브러리이다.) vite를 써야 하는 이유는 아래와 같다..

■ REST API - HTTP를 기반으로 클라이언트가 서버에 접근하는 방식을 규정한 아키텍쳐 구성 요소 내용 표현 방법 자원 자원 URI 행위 자원에 대한 행위 HTTP 요쳥 메소드 표현 자원에 대한 행위의 구체적 내용 페이로드 REST에서 가장 중요한 기본 원칙은 두 가지다. 1. URI는 리소스를 표현해야 한다 리소스를 식별할 수 있는 이름은 동사보다 명사를 사용 #bad GET / getTodos / 1 GET / todos / show / 1 #good GET / todos / 1 2. 리소스에 대한 행위는 HTTP 요청 메소드로 표현한다. GET POST PUT PATCH DELETE HTTP 요청 메소드 종류 목적 페이로드 GET index/retrieve 모든/특정 리소스 취득 X POST..

회사 서비스 YalliYalli의 브라우저 렌더링 속도가 느려지기 시작했습니다. 브라우저 사용 중 99%의 사용자 경험은 네트워크 속도에 의존한다고 하지만 1%에 해당하는 0.0몇초의 성능 차이가 좋은 서비스와 나쁜 서비스의 차이라고 생각합니다. 프론트엔드에서 바라보는 성능 최적화는 여러 가지 관점에서 바라볼 수 있습니다. 번들링 파일 최적화, lazy loading, dynamic import, css 스프라이트, 리플로우/리페인팅 분석 ... 저는 그 중에서 1. 번들링 파일 최적화 2. lazy loading, dynamic import 을 적극 활용하였습니다. *성능 측정은 차이를 극명하게 보여주기 위해 로컬 개발 환경을 기준으로 하였습니다. 1. 번들링 파일 최적화 webpack-bundle-a..

DM 알림창을 만들고 있다. 알림창의 경우 화면의 크기가 작으므로 text overflow의 기능을 활용하기로 하였다. 메세지 알림 기능 구현만 한 상태. 텍스트의 길이가 길어지면 모두 보여주기 위해 많은 칸을 차지하게 되고 메세지가 많이 오면 리스트가 너무 길어질 것이다. 최대 2줄까지 보이다가 마우스를 hover하면 남은 메세지를 보이도록 처리 .message-hidden { min-height: 20px !important; max-width: 200px !important; overflow-y: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; -moz-text-overflow: elli..