NuxtJS 활용한 웹 개발, 프로젝트 생성 방법 및 CSR 렌더링 SSR 렌더링에 대해서

필자는 조금 더 최신적이고 모던적인 라이브러리 및 프레임워크를 찾아보던 도중에 NuxtJS 라는 프레임워크를 발견하게 되었다. 비슷한 프레임 워크로는 NextJS 라는 것이 존재하는데, NuxtJS와 NextJS 는 도대체 무엇인지, 그리고 이전에 내가 찾아본 프론트엔드단 렌더 도구들인 VueJS, React 등은 무엇인지 어느정도의 감이 잡혔고, NuxtJS 로 최종 공부 방향을 잡게된 계기에 대해서 기록한다.

기본적으로 React 나 VueJS 는 프론트엔드 작업을 수월하게 하고 여러 기능들을 제공하는 반응형식 구현이 가능한 프론트엔드 프레임워크이다. 이러한 프레임워크를 사용하면 웹의 전환을 조금 더 부드럽고 능동적으로 손쉽게 개발할 수 있다는 장점이 있다.

보통 자바스크립트를 사용해서 일일이 Dom 에 연결하고 데이터를 가져와서 뿌려주고 가리고 움직이고 표시하는 그런 작업들을 컴포넌트 단위로 수행할 수 있기에 디자인 및 비즈니스 로직 개발에 더 수월한 것이다.

하지만 이러한 도구에는 치명적인 문제가 존재한다. 바로 SEO 검색 노출에 비효율적이라는 것이다. 이러한 도구들은 서버에서 렌더링된 최종 HTML을 반환하는 것이 아니라 JavaScript 로 웹 브라우저가 접속하면 빈 화면에 스크립트와 스타일 데이터를 받아 자바 스크립트를 실행하여 화면을 채우는 구조이기 때문에 검색 수집 도구들이 서버에 요청을 하면 실제 비즈니스 로직과는 전혀관련 없는 프론트엔드 로드 도구들만 표시된다.

따라서 블로그나 검색 등록등의 필요성이 존재하는 웹 서비스들은 검색 봇이 접근 요청하면 정적 웹 서비스 처럼 반환해줄 필요가 존재하는데, 이를 통합적으로 알아서 관리해주는 것이 NextJS 또는 NuxtJS 이다. NextJS는 React를 위한 프레임워크 , NuxtJs는 VueJS를 위한 프레임워크라고 보면된다.

우선 자세한 것은 아래 프로젝트 생성후 동작 원리를 통해 설명하도록 하겠다.

NuxtJS 프로젝트 생성

프로젝트를 생성하기 위해서는 npx 도구를 사용해야 한다.