치춘짱베리굿나이스

Hydration Failed… React Portal을 이용하여 토스트를 구현하던 중에 이런 오류를 마주했다 서버에서 렌더링한 UI와 초기 UI가 달라서 Hydration을 실패했다는 오류이다 이 이슈는 왜 발생하는 것일까? 한번 알아보도록 하자 이유와 해결법 기존 코드 const element = document.getElementById('toast-root') if (!element) return ; return ReactDOM.createPortal( ... ); 컴포넌트 내부에 document 에 접근하는 코드가 존재하는데, 서버사이드에서 document 가 존재하지 않을 경우 element가 존재하지 않을 것이기 때문에 예외를 처리해주었다 문제는 이 예외 처리에서 발생한다… 먼저 Next.j..

내보내기 리액트 컴포넌트 또는 html 요소를 구성하면 이를 pdf로 만들어주는 기능이 필요했다 라이브러리를 알아보니 크게 두 가지로 갈리는 것 같은데 두 라이브러리를 모두 써보고 느낀 점을 적어보려고 한다 사실 라이브러리 선택하기 위해 팀원 보여주려고? 설득하려고?.. 쓴 글임 최근까지도 업데이트가 활발한 두 라이브러리 케이스를 가져와 보았다 React-pdf 링크 https://github.com/diegomura/react-pdf https://react-pdf.org 설명 리액트를 이용하여 pdf를 생성해주는 라이브러리 pdf 뷰어는 https://github.com/wojtekmaj/react-pdf 쪽으로 가라고 한다 자체적으로 지원하는 컴포넌트들을 조합하여 pdf 페이지를 구성하고, 이를 바..

useMemo, useCallback 리액트를 쓰면서 이름만 몇번 들어본 훅이지만 내가 잘 사용할 엄두가 안나서 (…) 사용해 본 적도 정리도 못하고 있었다 (핑계임) 캐싱 비슷한 기능으로 불필요한 연산 수를 줄이는 것이라고만 알고 있었는데 한번 정리하면서 익혀보려고 한다 사실 필수적인 훅이 아니라 성능 최적화를 위한 훅이라 크게 필요성을 못 느낀 것도 있는데 그렇게 배움을 미루는 건 너무나도 게으르다 useMemo 기본 예시 import { useState } from "react"; function multiply10(n: number) { console.log("곱하기 10 계산 중..."); return n * 10; } export const MemoTestPage = () => { const ..

마운트, 언마운트, 렌더링, 리렌더링 맨날 헷갈려서… 마운트 DOM 객체가 (렌더링을 통해) 생성되어 브라우저에 나타나는 시점 클래스 컴포넌트 기준으로, 생성자가 호출된 후 render() 메서드가 호출되면 마운트가 발생한다 컴포넌트의 생명주기 동안 단 한 번, 처음으로 DOM에 컴포넌트가 추가될 때 수행된다 componentDidMount 클래스 컴포넌트에서의 componentDidMount 메서드는 컴포넌트가 마운트된 직후에 호출되며, API 콜이나 이벤트 리스너 설정 등의 작업을 수행할 수 있다 useEffect useEffect(() => { ... }, []); 함수 컴포넌트에서의 useEffect() 는 컴포넌트가 마운트됐을 때 최초로 한 번 콜백을 수행한다 의존성 배열에 값을 아무것도 넣지 ..

Socket.io https://socket.io/ 사이트와 라이브러리명이 같다 (ㅋㅋ) 트랜센던스 하면서 가장 많이 신세진 라이브러리인데, 미루고 미루다가 이제야 글을 적게 되었다… 설치 $> npm i socket.io // 서버 측 $> npm i socket.io-client // 클라이언트 측 $> yarn add socket.io // 서버 측 $> yarn add socket.io-client // 클라이언트 측 npm 링크 https://www.npmjs.com/package/socket.io yarn 링크 https://classic.yarnpkg.com/en/package/socket.io 설명 WebSocket 프로토콜 위에서 동작하며, 소켓 통신을 손쉽게 설정 및 수행할 수 있는 라..

CSR, SSR, SSG 이걸 설명해줄 일이 생겼었는데 나도 뭔가 횡설수설 하는 감이 있어서 정리하기로 했다 Next.JS 공부는 계속 하는데 뭔가 이론적인 면에서 공부가 너무 부족한것 같아서… CSR Client-Side Rendering 페이지의 핵심이 되는 HTML을 클라이언트에서 생성한다면 클라이언트 사이드 렌더링이라고 부른다 서버로부터는 최소한의 HTML만 전달받고, 클라이언트에서 대부분의 렌더링을 수행하면 클라이언트 사이드 렌더링이 된다 과정 클라이언트가 특정 URL로 페이지를 요청한다 서버는 최소한의 HTML만을 클라이언트에 응답한다 클라이언트는 HTML을 파싱하고, 필요한 리소스를 파악한 뒤 추가적으로 요청한다 (JS, CSS, 미디어 등) 서버는 리소스를 응답한다 (미디어의 경우, 외부 ..

삽질의 기록 스토리북 설치, 타입스크립트 지원 및 scss 로더를 통한 컴파일은 성공했으나 scss 변수 import가 계속 실패해서 엄청난 난항을 겪는 중 하나하나 적어볼까 함 특히 게시글들이 다 Webpack 기준이었어서 해결법이 더 찾기 어려웠던 것 같다... Storybook 설치 npx storybook@latest init 번들러 고르기 Vite, Webpack 중 하나를 고르자 나는 번들링 속도가 빠르다는 Vite로 골라봤다 사실 항상 Webpack으로 프로젝트를 설정하다 보니 한번쯤은 Vite를 쓰고 싶어서… 프로젝트 유형 고르기 화살표 아래로 내려보면 ember, preact, svelte 등의 다양한 프레임워크들이 사용 가능하다 react 컴포넌트를 만들 것이므로 react로 선택하였다..

scroll-snap 웹앱 등지에서 스크롤을 넘기다 보면 특정 컴포넌트에서 자석같이 멈추는 느낌의 스크롤을 볼 수 있다 위의 이미지에서도 중간즈음까지 스크롤을 넘기면 자동으로 컴포넌트의 왼쪽에 맞춰서 착 달라붙는 것을 볼 수 있다 임의로 자석 스크롤, 쫀쫀 스크롤이라고 부르고 있었는데 CSS에서의 정식 명칭은 scroll-snap이었다 (이하 위와 같은 동작을 ‘스냅’ 이라고 부르도록 하겠다) 이 모션을 위한 총 3개의 스크롤 관련 CSS 속성이 존재하는데, 하나는 부모 컨테이너에 적용하고, 두 개는 스크롤이 스냅되길 원하는 자식 박스에 적용하면 된다 세 개의 속성들 scroll-snap-type (부모) scroll-snap-type: [ x | y | block | inline | both] [ ma..