Web/React 2

Next.js 소개 (2. Next.js 에서 제공하는 기술들)

Next.js는 React의 SSR(Server Side Rendering)을 지원하는 Framework이며 개발 방법은 기존 React와 거의 같다. Next.js를 사용해 페이지를 개발할 경우 메인화면은의 응답 포맷은 아래와 같다. 상단은 기존 React 처럼 모든 개발 내용을 가지고 있는 javscript가 import 되어있고 일반 웹페이지 처럼 Tag도 같이 제공되고 있다.. 이렇게 페이지를 제공할 때 2가지의 장점이 있다. 1. 이전 글에서 언급한 검색봇의 문제를 해결할 수 있다. - 검색 봇이 크롤링을 수행할 때 이제는 페이지 안의 많은 내용을 취득할 수 있게 된다. 2. 브라우저의 렌더링 속도가 빨라진다 - React의 경우 모든 소스코드가 Javascript로 이루어져 있고 Javascr..

Web/React 2022.07.07

Next.js 소개 (1. React에서 지원하지 못하는 것)

일반 적으로 웹 페이지는 HTML, CSS, Javascript 3가지의 언어로 구성되어 있다. 이 3가지의 언어로 구성된 페이지를 서버에서 다운받고 클라이언트인 브라우저에서 로드하여 렌더링 하면.. 현재의 페이지가 출력된다. 실제 네이버 홈페이지에 접속해 응답받은 파일을 보면 HTML, CSS, Javscript로 구성되어 있다. 요즘 많이 사용하는 React와 Angular 등의 홈페이지에서는 파일이 어떻게 구성되어 있을까? 내용이 하나도 없다. 아까 예시의 네이버에서는 홈페이지에서 보이는 글, 그림 등이 모두 HTML에서 Tag로 구성되어 있는것을 확인할 수 있었는데 React로 개발한 페이지는 아무 내용을 확인 할 수 없다. 하지만 브라우저에서는 렌더랑 완료된 화면이 동작한다. 어떻게 된 것일까?..

Web/React 2022.07.07