SSR 2

Nextjs에서 Quill Editor 적용하기

서버사이드렌더링을 위한 프레임워크인 Nestjs를 사용해서 프로젝트를 시도해서 개발중이다.🙄 물론 처음이니까 아직 Nextjs를 안다기보단 겉햙기 중인데, 워낙 도큐멘트나 깃에 정리가 잘 되어있는 편이라 조금씩 읽어보면서 셋팅 및 개발해보고 있다. 이번 프로젝트에서 에디터 적용이 필요한 경우여서, 여러 개를 서칭해봤는데 React와 Quill Editor를 많이 사용하고 있는 것 같아서 선택하게 되었다. (summernote만 해본자,,,, 🧐) 허나, 서버사이드렌더링이란 특징때문에 그대로 Quill을 적용하게 되면 아래와 같이 document is not defined라는 에러가 발생하게 될 것이다. 그래서 해결한 소스는 아래와 같다! Next.js는 JavaScript 용 ES2020 dynamic ..

Developer/React 2021.03.27

SSR(Server-side-rendering) & CSR(Client-side-rendering)

렌더링이란? 웹페이지 접속시, 그 페이지를 브라우저에 그려주는 것. SPA(Single Page Application)란? 생긴 이유? 모바일의 시대가 도래하면서, 모바일은 데스크탑에 비해 성능이 낮고 유저의 모바일 웹에서의 동작 및 요청이 많아 웹페이지를 기존에 방식과 다르게 렌더링할 필요가 느껴지면서 등장한 클라이언트 사이드 렌더링 Single Page Application(SPA) 어떤게 있는가? 우리가 아는 React, Angular 등 대부분의 자바스크립트 프레임워크를 말한다. 특징과 차이 SSR(Server-side-rendering) 전통적인 웹 방식. 즉, 브라우저에 나타나는 형태 그대로를 HTML로 만들어 제공하고, 브라우저는 HTML을 표시하는 방식 장점 검색엔진최적화(SEO)에 문제없..

Developer/Web 2020.08.12