프론트 개발 블로그

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)을 쉽게 할 수 있도록..

문제 리액트에서 컴포넌트 모듈 가져올 때 경로 설정하는 방법. depth가 깊어질수록 경로 설정이 불편하기 때문에 사용. 해결 jsconfig.json (타입 스크립트를 사용한다면 tsconfig.json) 파일을 생성하여 옵션을 작성하면 된다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } create-react-app.dev/docs/importing-a-component/#absolute-imports

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. 문제발생 CRA 에서 npm install node-sass 설치 시 위와 같은 에러 문구가 발생하였다. 왜? CRA 사용 시 미리 설치된 sass-loader 에서 발생하는 에러로 node-sass@latest 는 v.5.0.0 버전이고 (내가 설치한 node-sass 가 5.0.0 버전) sass-loader는 v4.0.0을 예상하므로 버전이 호환되지 않음으로 생긴 에러라고 한다. -> stackoverflow 인용 노드 버전에 지원 정책에 따라 지원되는 node-sass 버전이 다르므로 node-sass 설치 시 노드 버전을 확인해봐야 한다. github.com/sass/node-sass/re..

애플리케이션에서 긴 목록을 렌더링 하는 경우 ' Windowing' 이라는 기법을 사용하는 것을 추천합니다. 이 기법은 주어진 시간에 목록의 부분 목록만 렌더링 하며, 컴포넌트를 다시 렌더링하는 데 걸리는 시간과 생성된 DOM 노드의 수를 크게 줄일 수 있습니다. React 공식 문서에서 추천하는 windowing 라이브러리 react-window react-virtualized react-window VS react-virtualized NPM Trends 사이트로 확인 해보면 react-virtualized 패키지의 사용자가 더 많은 것을 확인 할 수 있습니다. 그러나 React-virtualized는 React-window 패키지의 비해 크기가 무겁기 때문에 React-virtualized 에서도 ..

Ref 란? React 에서 컴포넌트에 접근할 수 있는 특수한 어트리뷰트를 말합니다. React.createRef() 함수 / 콜백 함수 / 문자열(레거시 API) 로 생성할 수 있습니다. ref 어트리뷰트가 콜백 함수인 경우, 함수는 DOM 엘리먼트나 Class 인스턴스를 인자로 받습니다. Ref 사용 함수형 컴포넌트를 사용할 땐 : useRef() Hook API 클래스형 컴포넌트를 사용할 땐 : React.createRef() 메서드 React 에서 DOM 을 직접 선택 해야 할 떄, Ref 를 사용합니다. 특정 엘리먼트의 크기나 위치를 선택 해야 할 때 포커스 설정을 해야 할 때 스크롤 바의 위치나 설정 등 미디어의 재생을 관리 할 때 (VideoJS 등 HTML5 비디오 관련) 서드 파티 DOM..

Refs 전달하기 React.forwardRef 는 부모 컴포넌트에서 자식 컴포넌트로 ref 를 전달하여 부모가 자식 ref 를 참조 하는 기술입니다. - DOM 컴포넌트에 Refs 전달하기 - 컴포넌트 라이브러리 관리자를 위한 참고 사항 - 고차 컴포넌트(HOC)에서의 forwarding Refs - 개발자도구(DevTools)에 사용자 지정 이름 표시하는 방법 이 기법은 잘 사용되지 않지만, 아래의 두 시나리오에서는 특히 유용합니다. DOM 엘리먼트로 ref 전달하기 고차 컴포넌트(HOC) 로 ref 전달하기 DOM 컴포넌트에 Refs 전달하기 1 2 3 4 5 6 7 function FancyButton(props) { return( {props.children} ); } React 컴포넌트는 렌더..