Next 2

CSR vs SSR (feat. Next.js)

페이지는 누가 렌더 하는가? 리액트를 공부하다 보면 접하게 되는 용어 중 CSR(Client-Side Rendering)이 있습니다. 이름 그대로 클라이언트 측에서 렌더링을 하는 것인데, 이것이 정확히 무슨 의미일까요? 이와 비교되어 항상 등장하는 다른 용어로는 SSR(Server-side Rendering)이 있는데 둘은 어떻게 다를까요? 이를 설명하기 위해선 다양한 방법이 존재하겠지만, 이번 글에서는 간단하게 Next.js를 사용해보면서 Next.js가 제공하는 data-fetching 함수와 연결하여 설명해보려고 합니다. Next.js란? Next.js by Vercel - The React Framework Production grade React applications that scale. Th..

웹/React 2021.03.07

(서버 API가 아직 개발중이라면) MSW로 Mock API 제작하기

서버 API 나왔나요? 네? 아직 없다고요? 아직 기업 규모의 프로젝트를 경험해보진 못했지만, 웹 서비스를 만들게 되면 크게 프론트엔드 개발자와 백엔드 개발자로 나누어져 작업을 했습니다. 서로 처음 기획 단계에서 도란도란 어떻게 통신할지, API는 어떤 것이 필요한지 논의를 한 뒤 각자 할 수 있는 걸 열심히 뚝딱뚝딱 만들어갑니다. 그러다 프론트엔드 개발자는 이제 api로 데이터를 받아와 화면에 출력하는 작업을 하고 싶어집니다. 그래서 백엔드 개발자에게 물어봅니다. '서버 API 나왔나요?' '아 아직 완성이 안 돼서 없는데요...!' 없더라도 침착하자 사실 당연한 상황이라고 생각합니다. 서버나 API가 미리 갖춰진 프로젝트에 새로이 프론트가 붙는 것이 아니라 무언가 바닥부터 만들기 시작했다면 어떻게 보..

2021.02.28