본문 바로가기

Next.js2

Next.js 에 toast ui Editor 을 같이 사용하는 방법 (짱쉬움) next.js 에 tui Editor을 쓰고자 하시는 분들께 도움이 되길 바랍니다! 기본적으로 next.js를 쓴다는건 ssr을 하겠다는 이야기 인데 tui Editor에서는 ssr을 지원하지 않습니다. (딱히 지원할 이유도 없구요) 그렇기에 이둘을 같이 쓰게 되면 아래와 같이 window is not defined 라고 에러가 뜹니다. 이유는 window 객체는 client-side에서만 존재하는데 server-side에서 먼저 실행되기에 window 객체가 없다는 에러가 뜨는 것이지요. 즉 브라우저에서만 작동되기 때문입니다. With no SSR 자 그러면 에디터가 나오는 부분은 ssr을 하지 않아주도록 합시다. 공식문서를 보면 모듈에 브라우저에서만 작동하는 라이브러리가 들어있는 경우엔 서버측에 모듈.. 2021. 4. 6.
React에의 서버사이드렌더링(SSR) vs 클라이언트사이드렌더링(CSR) 최근에 next.js를 시작하며, 기존의 클라이언트렌더링 방식과 서버사이드렌더링의 방식은 어떤 차이가 있는지 적어두기로 했다. 웹 개발자라면 ssr과 csr방식이 어떻게 돌아가고 있는지 정도는 알아야 할 필요가 있다고 생각한다. 기존의 렌더링 방식(SSR) 전통 방식인 서버사이드렌더링의 동작은 다음과 같다. 1)브라우저에서 프론트서버로 부터 페이지를 요청한다. 2)프론트서버는 브라우저에 그려주어야 하는 데이터를 백엔드서버로 요청한다. 3)백엔드서버는 데이터베이스로 부터 데이터를 가져온다. 4)백엔드 서버는 가져온 데이터를 프론트서버로 전송한다. 5)프론트서버는 백엔드서버에서 받은 데이터를 가지고 html과 합쳐 브라우저에 전송한다. 전통적인 ssr 방식이 불러일으킨 이슈 하지만 이런 전통적인 ssr방식은.. 2020. 10. 23.