들어가며 React 팀은 작년 11월 React 18을 Alpha에서 Beta로 Release 했다. Beta로 넘어오면서 Production으로 Release가 될 때 까지 새로운 API의 추가는 없다고 밝혔다. 즉, 현재 공지된 기능이 Fix 되었다는 것을 의미한다. 관련된 문서로 아래 링크를 참고하면 된다. https://ko.reactjs.org/blog/2021/06/08/the-plan-for-react-18.html https://github.com/reactwg/react-18/discussions/112 React 팀은 Working Group 이라는 새로운 개념을 도입해 React 개발자와 소통하며 더 개선할 수 있는 부분과 문제점들을 소통하며 피드백을 진행하고 있다. React 팀 내..

Hydrate Hydrate란 수화의 의미를 가지고 있다. 수화란, 우리 몸에 필요한 수분을 보충하는 행위를 뜻한다. React에서는 Server Side 단에서 렌더링 된, 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤 클라이언트 단에서 HTML 코드와 JS 코드를 서로 매칭시키는 과정을 Hydrate라 칭하고 있다. SSR의 동작 방식을 참고해보자. [참고 : [Browser] SSR, CSR 그리고 SPA] 동작 방식중 5번 ~ 7번을 보면 JavaScript를 다운로드 후 이전에 받은 HTML DOM 요소 위에서 다시 한번 더 렌더링 하여 각각의 배치에 맞게 JavaScript가 채워지게 되는데 이 때 빈 HTML에 JavaScript를 채워넣는다고 하여 Hydrate라고 하는 것 같다..

Next.js에서는 사용자의 요청 혹은 Build Time에서 Data를 Fetching하고 배치시키기 위해 사용하는 함수가 있다. (CSR React 딴에서 useEffect(ComponentDidMount)를 이용해 Data Fetching을 진행하여 데이터를 보여주는 것과 같다고 생각하면 된다.) 이에 대해 사용하는 방법과, 각자의 특성에 대해 설명하고자 한다. getInitialProps 페이지를 SSR로 생성하며 Data fetching를 해야할 경우 사용된다. function Page({ stars }) { return Next stars: {stars} } Page.getInitialProps = async (ctx) => { const res = await fetch('https://api..

* 본 포스팅은 Next.js를 기반으로 작성되었음을 알립니다. * Next.js에서는 SSG를 SG(Static-Generation)으로 표현하고 있지만, 통용적으로 SSG라 사용되고 있다. SSR과 CSR의 차이는 이전 포스팅에 모두 나와 있으니, 해당 포스트를 참고하면 된다. SSR과 SSG 차이 Next.js에서는 두 가지 형태의 사전 렌더링(Pre-Rendering) 방법을 제공하고 있다. SSR : 사용자의 요청에 의해 동적인 HTML을 생성하는 렌더링 방법이다. 사용자 요청 횟수에 따라 계속해서 HTML을 생성한다. SSG : 빌드시 최초 1회 작성되는 정적인 HTML을 생성하는 렌더링 방법이다. 빌드시 생성된 HTML은 이 후 재요청시 재사용 된다. Next.js에서는 위 2개의 사전 렌더..

Next.js React로 만드는 서버 사이드 렌더링(Server Side Rendering 이하 SSR) 프레임워크 제공되는 주요 기능 ▶ hot reloading - 개발중 저장되는 코드는 자동으로 새로고침 된다. live loading과는 다른 점을 지니고 있으며, 차이점은 아래와 같다. hot reloading - Application의 현재 상태를 잃지 않고 변경된 사항을 수정한다. live reload - Application의 현재 상태를 초기화하고, 처음으로 돌아가 새로고침 처리한다. ▶ Automatic routing - React에서 라우팅을 하기 위해서는 태그나, 특정 코드를 작성해야 했다. ("'/posts' url로 접속시 Post Component를 보여줘!" 라는 코드) 하지만..

들어가기 전 이 글은 GraphQL에 대해서 테스트를 작성하는 것이 아니다. React-Query에 대해서 작성하는 것이다. 모든 코드들은 Typescript로 작성되었으며, 선행 지식이 필요하다. 선행 자료 참고 문서) [TDD/Jest] 모킹하기 Mocking [TDD/Jest] Jest로 Test 코드 작성하기 [React.js] React + Typescript 테스트 코드 작성하기 [React.js] React-Testing-Library 사용하기 [React.js] React Query(useQuery, useMutation) 완성된 코드) y0ngha/react-query-tdd Typescript + React-Query를 사용해 테스트 코드를 작성하는 것은 자료를 찾아도 너무 안나온다. ..