NeXT

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

왜 도입하게 되었나 블로그 피드를 만들긴 했으나, 블로그 글이 올라왔을때, 알림이 오게 하고 싶었다. https://0422.tistory.com/300 풀과 푸시 풀 일반적으로 사용되는 HTTP요청의 모습이다 request가 오면 서버가 response를 주는 형태이다. 푸시 푸시는 요청이 없어도 응답을 내려준다. fcm에서는 서비스워커(firebase-messaging-sw.js)가 일을 한다고 한다. FCM이란? Firebase Cloud Messaging의 약자이다. 위 사진처럼 동작한다. 위사진 과정을 이해해보자. 준비과정 1. Get Token 클라이언트는 디바이스 고유의 token을 firebase로부터 발급받는다. 이 token은 기기마다 고유하다! 2. Send and store toke..

두가지 페이지에서 효과는 다르지만, 동일한 로직으로 슬라이더를 구현할 일이 생겼다. 원래는 하나의 페이지마다 코드를 작성했지만, 반복되는 영역이므로 이를 Hook으로 처리해 주자. const useSlider = ( data: T[], duration?: number, moveScale?: number, opacity?: boolean, type?: 'spring' | 'linear' | 'tween' | 'inertia', ): [index: number, direction: number, increase: () => void, decrease: () => void, animationVariant: Variants]=>{ ... } 나중에 슬라이더의 애니메이션을 커스텀 할수 있도록, duration(지..