잡동사니
9 posts
Error Boundary(feat. React)

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 🗂️ Error Boundary Error Boundary란 를 의미한다. 즉, 특정 Error Boundary로 감싸여진 구간에서 에러가 발생하면 그 에러를 잡아내서 처리할 수 있다는 것이다. 이에 대한 개념을 적용한 Error Boundary 컴포넌트를 리액트에서는 공식문서를 통해 제공하고 있다. 먼저 리액트 공식문서에서 설명하는 Error Boundary를 살펴보자. 아래는 리액트 공식문서를 번역하여 정리한 내용이다. 리액트는 기본적으로 어플리케이션에서 에러를 던진다면 화면으로부터 UI를 지울 것이다. 이것을 방지하기 위해서는 컴포넌트들을 Error Boundary로 감싸야한다. Error Boundary는 특별한 컴…

September 03, 2023
잡동사니
React Test and Optimization(feat. Web Vitals)

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 들어가기에 앞서 이 글은 원티드에서 주관하는 프리온보딩 프론트엔드 챌린지 8월 - 리액트 리팩토링 실전가이드: 테스트부터 최적화까지 에 제출할 사전과제를 기반으로 작성한 글입니다. 🗂️ 1) 테스트 1-1) 유닛테스트 vs 통합테스트 vs E2E테스트를 비교하여 설명해주세요 유닛테스트 실행 가능한 가장 작은 단위의 소프트웨어(주로 )를 테스트 일반적으로 함수, class의 method 단위로 진행한다. 가장 작은 단위를 테스트하는만큼 좀더 직관적이고 빠른 테스트가 가능하다. 사실상 테스트의 기본이라고 할 수 있다. JS 진영에서는 주로 를 사용한다. 통합테스트 유닛테스트보다는 큰 단위의 소프트웨어를 테스트 개발자가 변경할 수…

July 31, 2023
잡동사니
Proxy in JS

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 🗂️ 작성하게 된 이유 바닐라 JS로 간단한 기능을 구현하다가 Proxy 객체를 알게 되었다. 이전에도 살짝 공부는 했었지만, 개념은 기억이 나도 객체 자체의 사용방법은 기억이 나질 않아서 정리하게 되었다. 🗂️ Proxy Proxy는 주로 , , 등의 의미를 갖는다. 흔히 우리가 라고 부르는 스파이 느낌의 단어도 Proxy에서 유래된 것이다. IT 용어로 Proxy(프록시)가 사용되는 다양항 상황이 있다. 우선 Proxy 서버라고 하면 라고 생각하면 된다. 클라이언트가 서버에 요청을 보내면 Proxy 서버가 요청을 받아서 서버에 요청을 보내고, 서버가 응답을 보내면 Proxy 서버가 응답을 받아서 클라이언트에게 응답을 보내…

July 26, 2023
잡동사니
CSR/SSR with Next.js

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 들어가기에 앞서 이 글은 원티드에서 주관하는 프리온보딩 프론트엔드 챌린지 7월 직접 만져보는 Next.js 해부학 교실 - CSR / SSR with Next.js 에 제출할 사전과제를 기반으로 작성한 글입니다. 🗂️ CSR(Client-side Rendering)이란? 그리고 장단점 서버와의 최초 통신에서 HTML, CSS, JS를 응답받아온 후 JS의 코드에 따라 데이터만 요청하여 웹 페이지가 복잡해짐에 따라 매번 페이지마다 새로운 HTML을 받아오는 방식에서 벗어나 한번에 받아온 후 동작하는 CSR 방식이 많아졌다. 장점 유저와의 인터렉션에 따라 필요한 데이터만 요청하여 받아오기 때문에 부분적으로 빠르게 인터렉션할 수…

July 02, 2023
잡동사니
onKeyDown in Korean(feat. React)

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 🗂️ onKeyDown in Korean 리액트에서 onKeyDown 이벤트를 사용하다가 한글 입력 시 이벤트가 두번 발생하는 문제가 있었다. 먼저 코드는 아래와 같다. 위 처럼 이벤트가 발생했을 때, 이벤트(e)의 key값이 인 경우에만 함수를 실행하도록 했다. 그런데 문제는 한글을 적고 를 입력하면 한글 한번, 그 한글의 끝 글자 하나가 또 입력되는 것이었다. 해서 위와 같이 이벤트를 콘솔로 찍어보았다. 아래는 만 입력 후, 를 눌렀을 때의 콘솔이다. 분명 과 만 했는데, event 객체는 3개가 찍혀있다. 3개의 객체를 좀더 자세히 살펴보자. 순서대로 객체의 이미지를 나열하면 뭔가 이상하다. 첫번째 과 …

May 03, 2023
잡동사니
useEffect vs useMemo vs useCallback vs useRef vs React.memo

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 🗂️ useEffect vs useMemo vs useCallback vs useRef vs React.memo 훅들을 다시 복습하는데… 이 녀석들 정말 묘하게 아주 묘하게 다르다. 각각의 목적 그리고 이름에 담긴 의미, 활용을 간단하게 기록해두려 한다. useEffect 여기서 Effect란 를 의미한다. 리액트는 렌더링 결과물을 화면에 반영하는 것이 주목적이다. 이 때, 렌더링과 무관한 작업들을 라고 할 수 있다. 는 이러한 를 수행하기 위해 사용한다. 예를 들어 를 사용하여 요청을 보내거나, 를 남기거나, 를 설정할 수 있다. 위의 예시 코드에서 useEffect 내의 함수는 요청을 보내고, 함수를 반환한다. 이 …

May 02, 2023
잡동사니
commonjs VS esm

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 Module: commonjs vs esm CommonJS(cjs) 를 사용한다. CJS module loader는 동기적으로 작동한다. CJS에서는 ESM을 할 수 없다.(CJS는 을 지원하지 않기 때문이다.) CJS는 Tree-shaking(필요치 않은 코드와 사용되지 않는 코드를 삭제하여 JS 번들의 크기를 가볍게 만드는 기술) 적용이 어렵다. 이는 빌드 타임에 정적 분석을 적용하기 어렵고 런타임에서만 모듈관계를 파악할 수 있기 때문인데, 단순하게 생각하면 우리가 일반적으로 쓰는 코드처럼 require을 사용할 수 있기 때문이다.(동적으로 사용 가능하다.) ECMAScript Modules(ESM) 를 사용한다. ES…

March 25, 2023
잡동사니
fetch VS axios

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 🗂️ fetch VS axios 두 라이브러리 모두 JS 진영에서 통신을 위해 사용된다. 단순하게는 fetch가 좀더 예전 라이브러리, axios가 좀더 최신 라이브러리라고 생각해도 좋다. 비교하게 된 계기 그리고 fetch에서의 에러 처리 동료인 시저가 아래의 코드에서 왜 굳이 를 쓰고 나서 또 그 안에서 res.ok로 에러 처리를 하는건지 궁금해하였다. 얼핏 보면 가 굳이 있어야하나 싶었다. 어차피 로 에러 처리를 할텐데 굳이 또 조건문을 써줄 필요가 있을까? 하는 생각. 잘 생각해보면 이라는 건 HTTP를 통해 우리끼리 약속한 것이다. 즉, 300번이든 400번이든 함수 입장에서는 아무튼 비동기 처리가 완료되었으니 Pr…

March 24, 2023
잡동사니
캐러셀(Carousel)

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 🗂️ 캐러셀(Carousel) 슬라이드쇼와 같은 방식으로 컨텐츠를 표시하는 UX 구성 요소 일반적으로 일정 시간에 따른 자동 재생 혹은 사용자가 수동으로 탐색하는 방식을 사용한다. 다양하게 활용할 수 있지만, 보통 홈페이지에서 이미지, 제품 및 프로모션을 표시할 때 사용된다. 성능 캐러셀의 동작 방식만 생각해보면 페이지 렌더링에 많은 영향을 줄 것 같았는데, 생각보다 잘 구현된 캐러셀은 그 자체로는 성능에 미치는 영향이 매우 적거나 없다고 한다. (다만 캐러셀에 포함된 큰 미디어 자산이 영향을 줄 수 있다.) LCP(Largest Contentful Paint; 최대 콘텐트풀 페인트) 페이지가 처음으로 로드된 시점을 기준으로…

March 22, 2023
잡동사니