한준호

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

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

웹 페이지에서 URL을 입력하면 어떤 동작이 발생할까? URL 입력 URL의 호스트 이름이 DNS를 통해 IP로 변환 해당 IP 주소를 갖는 서버에 요청 ■ HTTP 브라우저와 서버가 통신하기 위한 프로토콜 HTTP 1 => connection당 하나의 요청과 응답만 처리, 처리 시간은 리소스 개수에 비례 HTTP 2 => connection당 다중 요청과 응답 처리, HTTP 1에 비해 50% 빠름 ■파싱 텍스트 문서의 문자열을 토큰으로 분해하고 파스 트리를 생성하는 것 파스 트리를 바이트 코드로 변환하여 실행한다. ■ 렌더링 HTML, CSS, js로 작성된 문서를 브라우저에 그리는 것 - 렌더링 순서 브라우저는 HTML, CSS, js, 이미지, 폰트 등 필요한 리소스를 요청하고 서버로부터 응답을 ..

spa의 가장 큰 단점은 웹에 진입할 때 번들링한 리소스를 한번에 받는 것이다. 따라서 초기 진입 속도가 느릴 수 밖에 없다. 이를 개선하기 위해 웹팩의 코드 스플리팅을 통한 chunck를 활용하여 초기 화면에 접근할 때 필요 없는 리소스를 제외하고 필요한 경우 그때 그때 받아오는 원리가 lazy loading 이다. 1. chunck 를 하기 위한 컴포넌트와 라우트를 설정한다. 2. dynamic import로 선언한다. 예를 들어 Layout 컴포넌트의 자식 컴포넌트들로 MainPage, Login 두 컴포넌트를 라우팅하려고 한다. 사실 Layout은 공통 부모 컴포넌트이기 때문에 chunck로 분리하는 의미는 없지만 예시를 위해 함. const Layout = () => import(/* webpa..