만들면서 학습하기

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의 줄임말으로, 서버에서 사용자에게 보여줄..

본 게시글의 코드는 리액트 16버전을 기준으로 하고있습니다. 이전 게시글에서 reconciler 패키지의 rednerWithHooks함수를 찾았고, 거기서 훅을 주입한다는 것을 알게되었다. 그럼 실제 코드를 확인하며 어떻게 훅을 주입하고 있는지 확인해보자. renderWithHooks 우선 함수의 인자들을 확인해보자. current와 workInProgress, Component, props, refOrContext, nextRenderExpirationTime을 받아서 사용한다. 자... 하나씩보자. 일단 current와 workInProgress는 넘어가자. Component는 실행시켜야할 함수를 말한다. (ReactElement의 tag 프로퍼티) props는 ReactElement의 props를 ..

본 게시글의 코드는 리액트 16버전을 기준으로 하고있습니다. 이 글을 쓰게된 계기 이전 게시글까지 리액트처럼 동작하는 코드를 작성해보았다. 그런데 이전 게시글에서 만든 useState는 한가지 치명적인 문제가 있다. useState를 쓰는 컴포넌트가 조건부 렌더링이 되는 경우, states배열이 망가진다는 것이다. const Component1=()=>{ const [inner,setInner]=useState("컴포넌트1입니다!"); return {inner}; } const Component2=()=>{ const [inner,setInner]=useState("컴포넌트2입니다!"); return {inner}; } const App=()=>{ const [state,setState]=useState..

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. 기존의 리렌더 기존의 리렌더링(사실 리렌더가 아니고 다른걸 렌더하는 거지만)은 명시적으로 다른 element를 넘겨서 업데이트 하는 형태였다. import App from './components/App'; import React from './core/React'; import { Change } from './components/Change'; const app = document.getElementById('root'); const prev = App(); React.render(prev, app); setTimeout(() => React.updateDOM..

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. 이전게시글에서 render와 rerender를 구현했다....만 너무 성능이 안좋을 것 같으니 개선을 해보고자 한다. 참고로 아래의 diffing알고리즘은 이 블로그 글의 코드를 기반으로 작성, 개선되었다. 기존의 DOM요소 변경은 특정 DOM요소를 DOM API를 통해 가져와서 그 부분만 업데이트하는 형태이다. 이런 형태를 지금의 render방식에 적용할수는 없을까? 할수있다! 바로 기존의 element객체를 활용하는 것이다. 우리는 element객체를 DOM요소로 변경했다. 따라서 element객체의 중첩구조와 DOM요소의 중첩구조는 완벽하게 동일하다. 따라서..

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. 이전게시글을 통해 JSX요소를 객체형태로 변환하는 것 까지 진행했다. 이제 JSX 컴포넌트는 tagName, props객체, children배열을 가진 객체로 관리된다. 그럼 이제 이걸 DOM api를 사용해서 객체를 DOM요소로 변환시키자. makeDOM /** * @param {object} element createElement로 만들어진 요소 * @param {string} element.tagName 요소의 태그 이름 * @param {object} element.props 요소의 속성 객체 * @param {Array|undefined} element...