코린이의 개발 일지

Next.js 쓰면 되는데, SSR을 직접 구현하는 이유? Next.js를 다뤄 보면서 내가 SSR에 제대로 이해하지 못하고, 구현에 급급하여 사용하고 있다는걸 느꼈다. Server Side Rendering을 조금 더 깊게 이해해보고자 React로 직접 구현해보기로 했다. 프로젝트 목표 기존에 구현했던 CSR 프로젝트를 SSR로 바꿀 것이다. 구현이 완료된 이후에는 기존 CSR 프로젝트와 SSR 프로젝트의 성능을 비교해볼 예정이다. 순전히 궁금증과 학습을 위해서 시작한 프로젝트이기 때문에 SSR을 처음 접하는 분이라면 Next.js를 사용하는걸 추천한다. Next.js가 리액트 라우터와 호환이 안되는게 불만이라면 Remix라는 프레임워크를 추천한다. 우선 서버 사이드 렌더링의 기본 동작 과정부터 살펴보..

설치 yarn add react-query React-Query가 주장하는 Global State 개념 Global State라는 말을 쓰지 말자: 전역 state는 Client와 Server로 분류할 수 있고, 이 두 State는 다른 방식으로 다뤄져야 효율적인 앱을 만들 수 있다. Server State 세션간 지속되는 데이터 비동기적 세션을 진행하는 클라이언트만 소유하는게 아니고 공유되는 데이터도 존재하며 여러 클라이언트에 의해 수정될 수 있음. 클라이언트에서는 서버 데이터의 스냅샷만을 사용하기 때문에 클라이언트에서 보이는 서버 데이터는 항상 최신임을 보장할 수 없다. ex) 비동기 요청으로 받아올 수 있는, 백엔드 DB에 저장되어 있는 데이터 Client State 세션간 지속적이지 않은 데이터 ..

Next.js란? 서버사이드 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능하게 하는 Node.js위에서 빌드된 오픈소스 웹 개발 프레임워크 SSR을 이해해보자 우선 SSR을 이해해보자 SSR이란? 서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링 하는 방식 SSR과 CSR의 차이점 리액트는 CSR 기반이고 Next는 SSR 기반이라는건 알겠는데, 그럼 정확히 동작이 어떤식으로 흘러간다는 걸까? 아래의 그림을 보면 좀 더 명확히 이해가 가능하다. 가장 주요한 차이점은 SSR의 경우 브라우저에 대한 서버의 응답이 렌더링할 준비가 된 페이지이고, CSR은 자바스크립트만 연결된 거의 빈 페이지를 응답으로 받는다. 즉 SSR은 자바스크립트가 다운로드되고 실행될..

window.addeventListener를 써보자 맨처음에 이 방법으로 keyDown이벤트를 발생시켜 보았다. 리액트스럽게 훅으로만 대부분을 해결해서 코드를 짜는게 목표였지만 onKeyDown으로 도저히 작동을 안해서 (내가 잘못쓰고 있는 것였다.) 그냥 직접 이벤트 리스너를 붙여봤다. (리액트에서 권유하는 방법은 아니니 안쓰는 편이 좋다) 근데 문제가 발생했다. 이벤트 리스너를 렌더링 할 때마다 달아주면 리스너가 너무 많이 달리니까 useEffect안에 넣어뒀는데 그것도 문제였다. 리스너는 딱 한번만 호출되어야하는데 useEffect가 여러번 호출되면서 이벤트 리스너가 너무 많이 붙여지는게 문제였다. 해결한 코드는 다음과 같다. import React, { RefObject, useRef, useEf..