프론트 개발 블로그

Next.js 를 설명하는 글들을 찾아보면, Next.js 에서 어떻게 페이지 이동을 하는 지의 대한 튜토리얼이 꼭 들어가 있다. 왜 그러한 튜토리얼이 들어가 있는 지 알아보기 위해 SSR 그리고 CSR, Next.js 구동 방식에 대해 공부해보자! SSR(Server Side Rendering, 서버 사이드 렌더링) 서버 사이드 렌더링이란, 사용자가 웹 페이지를 방문했을 때 브라우저에서 자바스크립트 코드를 다운받아 해석할 때까지 기다리지 않고, 서버에서 보여질 HTML을 미리 준비해 클라이언트(브라우저)에 응답하는 방식을 말한다. 이를 통해 사용자는 바로 렌더링되는 화면을 보기 때문에 사용자 경험이 높아진다. 장점 1. 검색 엔진 최적화 가능 2. 한 번에 렌더링 되기 때문에 초기 로딩 속도가 빠르다...

1) Next.js 란? Next.js 는 React 프레임워크로 생산을 위해 만들어졌습니다. 여기에서 말하는 생산이란 프로덕션, 즉 실제 서비스를 운영하는 환경을 말합니다. The React Framework for Production 프로덕션에 필요한 기능, - 하이브리드 정적 및 서버 렌더링 - TypeScript 지원 - 스마트 번들링 - route 프리 패치 등 최고의 개발자 경험을 제공하고, config(구성)이 필요하지 않습니다. 왜 Next.js 인가요? 이미지 최적화 : 인스턴트 빌드를 통한 및 자동 이미지 최적화 Interantionailzed (국제적인 라우팅) : 빌트 인 도메인 및 서브 도메인 라우팅 및 자동 언어 감지 Next.js Analytics : 실제 방문자 데이터 및 페..

Next.js 설치 시 'package.json' 에 'scripts' 를 추가하게 된다. 이 스크립트는 애플리케이션 개발의 여러 단계를 참조한다. - 'dev' - 'next dev' 개발 모드에서 Next.js 를 시작하는 실행 - 'build' - 'next build' 프로덕션 용도로 애플리케이션을 빌드하는 실행 - 'start' - 'next start' Next.js 프로덕션 서버를 시작하는 실행 추가 내용 (210413 추가) - next dev 커맨드에는 source map 과 hot code reloading 이 제공되어 디버깅 시 매우 유용하다 - build, start 명령어는 운영 버전의 사이트를 로컬에서 배포하는데 사용해야 하는 명령어로 최종 사용자들에게 유익하지 않을 source..

The Next.js Handbook 내용 스터디 https://www.freecodecamp.org/news/the-next-js-handbook/ 번역 : https://coffeeandcakeandnewjeong.tistory.com/5#ch-7 Q. 우측 하단 번개 아이콘은 무엇인가요? 페이지의 우측 하단의 번개 모양 아이콘이 보이시나요? 마우스(Hover)를 가져가면 "Prerendered Page"라고 뜹니다 : 1. 이 아이콘은 개발 모드에서만 볼 수 있다. 2. 이 아이콘은 자동 정적 최적화에 적합한 경우 이를 알려주는 표시이다. 3. 자동 정적 최적화란? 3-1. Next.js는 리액트를 사용할 때 정적 웹 사이트, 즉 SSR(Server Side Rendering)을 쉽게 할 수 있도록..