![]()
pages 파일 기반 라우팅지금까지는 pages에 App.tsx만 있어서 하나의 파일에 대해 html을 만들어서 전송했었다.하지만 Next에서는 pages에 있는 모든 파일이 라우팅되어, 해당 경로로 접근하였을때 페이지를 제공해준다.이번에는 이 기능을 구현해 볼 것이다. pageFiles찾기우선 이를 위해서는 pages의 파일이름들을 가져올 수 있어야한다. 그래서 바벨로 트랜스파일링된 dist/pages내부의 모든 tsx파일을 찾아올 것이다.const PAGES_PATH = 'dist/pages';export const getPagesFiles = async (pagesPath = PAGES_PATH) => { const files: string[] = await new Promise((resolve,..
![]()
이전에 동일한 JSX를 갖고 html과 React App을 렌더링하고, 이 둘을 연결시켜보았다.이번에는 Next(12버전)의 핵심 기능중 하나인 getServerSideProps를 구현하고, 이걸 클라이언트와 연동시켜보고자 한다. getServerSideProps아래는 Next docs에서 가져온 사진이다.이걸 어떻게 사용하는지는 이미 알고있다고 가정하고, 이 코드들의 특성을 분석해보자. 이 코드를 보면 네가지를 알 수 있다.getServerSideProps는 page컴포넌트에 작성되어야한다.함수 이름은 getServerSideProps이며, export되어야한다.page컴포넌트에 getServerSideProps에서 반환된 값을 props로 넘겨준다.page컴포넌트 자체는 default export되어..
![]()
이전 게시글에서 호환 가능한 JSX 컴포넌트를 만들었다.이제는 JSX를 사용해서 SSR에서 반환할 HTML과 클라이언트에서 hydrate, 업데이트할 코드를 작성해볼 것이다. 이번 게시글에서 할 일jsx함수로 부터 반환된 miniReactNode객체를 서버에서 HTML String으로 변환할 것이다.(클라이언트로 js파일을 여기서 보내 줄 것이다.)jsx함수로 부터 반환된 miniReactNode객체를 클라이언트에서는 DOM으로 변환할 것이다.클라이언트에서는 이전에 만들어둔 miniReact를 활용하여 useState을 통해 update할 것이다.update는 VDOM을 비교하여 바뀐부분만 업데이트한다.받은 클라이언트는 js파일을 통해 hydrate를 하여 miniReact로 동작하는 어플리케이션을 조작..
![]()
구성하기내가 원하는 것app.get('/', (req, res) => { const html = createHTML(); res.send(html);});바로 이런 그림이다. 클라이언트와 동일한게 을 렌더링하고, 이걸 초기 HTML로 전송해주는 것이다. 그리고 클라이언트에서는 이렇게 App을 렌더링해줄 것이다.import App from '../src/pages/App';import { hydrate } from '@core/render';hydrate(, document.getElementById('_miniNext')); 이러면 클라이언트와 서버에 대해서 동일한 App컴포넌트를 통해 따로 따로 코드 해당 환경에 맞는 코드를 작성할 필요없이 통합적으로 관리해줄 수 있다. 따라서 필요한 것들을 준비할..
![]()
시작하며이전에 리액트가 어떻게 동작하는지, 이해하기 위해서 리액트처럼 동작하는 어플리케이션을 만들어보았었다.https://0422.tistory.com/317 리액트를 만들면서 이해해보자 (1) - JSX와 React.createElement이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. JSX jsx는 javascript + xml의 줄임말이다. 이걸 쓰면 html0422.tistory.com이번에도 마찬가지다. 이번에는 Next의 SSR과 hydrate과정을 직접 만들어보면서 이해해보고자 한다. 배경 : SSR과 CSRSSR이란 Server Side Rendering의 줄임말으로, 서버에서 사용자에게 보여줄..
