구름

안녕하세요 :) 오늘은 SSR(Server Side Rendering)과 CSR(Client Side Rendering)의 차이점에 대해 알아 보겠습니다. 🐹 🙌🏻 SSR (Server Side Rendering) 서버 사이드 렌더링(SSR)이란, UI 로직이 담긴 HTML 파일을 서버 측에서 렌더링하는 방식을 말합니다. 서버에서 렌더링이 완료된 HTML 파일을 전달받기 때문에 사용자는 곧바로 웹 사이트를 볼 수 있습니다. 그러나 사용자와의 인터렉션을 요구하는 자바스크립트 파일이 브라우저상에 다운로드되기 전까지 사용자는 어떠한 행위도 수행할 수 없어, TTV(Time To View)와 TTI(Time To Interaction) 사이의 공백 시간이 존재하게 됩니다. 🙌🏻 CSR (Client Side..

현재(2023.04.30) Next.js 프레임워크를 사용하여 블로그를 개발 중에 있습니다. 블로그에서의 사용자 인증은 next-auth 라이브러리로 구현했습니다. next-auth 라이브러리에서 제공하는 NextAuth는 로그인 시 signIn 메소드를 통해 사용자의 정보를 session에 저장하기 때문에 사용자의 정보를 가져오거나 로그인/로그아웃 상태를 판별할 때 session을 사용하면 편리합니다. 이번 포스트에서는 Next.js 페이지에 적용한 렌더링 방식과 그 렌더링 방식에서 session을 pre-fetch하는 방법에 대해 알아 보겠습니다. 🙂 🌳 Why SSG -> SSR? Next.js 공식 문서에서는 "성능 상의 이유로 서버 측 렌더링을 통한 정적 생성 방식을 사용하는 것을 권장한다. 정..

이전 포스터에서는 Next.js에서 Planet Scale + Prisma 배포하는 방법에 대해 알아 보았습니다. main 브랜치를 배포용 브랜치로 설정한 이후에 스키마를 새로 추가하거나 수정할 경우에는, 수정 내용을 어떻게 main 브랜치에 반영할 수 있을까요? 그 해답을 지금부터 알아가 봅시다. 🤸🏻‍♀️ 1. 스키마 수정 먼저 스키마를 수정해주세요. 2. 수정한 내용 develop branch에 반영 npx prisma db push 수정된 내용을 develop branch (개발용 브랜치)에 반영하기 위해 위 명령어를 입력해 줍니다. 3. develop branch의 내용을 main branch에 반영 현재는 수정된 내용이 develop branch에만 반영됐기 때문에 배포 환경에서는 이 변경 사..

🚀 프로젝트 배포하기 개발 환경에서 사용하던 DB와 배포 환경에서 사용할 DB를 혼용하지 않기 위해서는 프로젝트 개발 시에 만든 DB branch를 배포하는 것이 좋습니다. 지금부터 branch 배포 방법을 한 단계씩 알아가 봅시다. (글쓴이는 Vercel로 프로젝트를 배포했습니다.) 1. Promote branch https://app.planetscale.com/ Sign in - PlanetScale auth.planetscale.com 우선 PlanetScale 사이트에 접속해 로그인 후, main branch에 접속합니다. Promote a branch to production 버튼을 클릭하면 main branch가 production으로 설정됩니다. 2. Add Environment Varia..

The Most Advanced WYSIWYG HTML Editor | Trusted Rich Text Editor | TinyMCE TinyMCE is the most advanced WYSIWYG HTML editor designed to simplify website content creation. The rich text editing platform that helped launched Atlassian, Medium, Evernote and more. www.tiny.cloud 왜 TinyMCE 라이브러리를 선택했을까? TinyMCE 에디터는 무료 버전도 있고 가장 많이 사용되는 CKeditor보다 가벼워서 선택하게 되었습니다. 무엇보다 티스토리 블로그에서도 TinyMCE 에디터를 사용하고 있..