SSR

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되어..

구성하기내가 원하는 것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://blog.cau-likelion.org/ LikeLionCAU Blog this This 키워드동작은 나타내는 메서드는 자신이 속한 객체의 상태, 프로퍼티를 참조하고 변경이 가능해야 한다.그러기 위해서는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. blog.cau-likelion.org tistory, velog, 네이버 블로그등 동아리원들의 블로그를 모아 우리 동아리만의 피드를 제공하는 서비스를 제작했다. Next13으로 진행한 첫 프로젝트다. 배포는 vercel로 진행했다. 로직 1. rss를 받아온다. 2. 해당 rss를 rss-parser를 통해 파싱한다. 3. 불필요한 광고 태그를 제거한다. 4. content에서 제일 처음 만나는 img태그를 끌고와서 썸네일로 ..