뒤죽박죽 공책 뒤죽박죽 공책

1. CSR이란 무엇이며, 그것의 장단점에 대하여 설명해주세요 CSR(Client-side-rendering)이란 CSR은 브라우저에서 자바스크립트로 페이지를 직접 렌더링하는 것을 의미한다. 즉 모든 로직과 데이터 패칭, 템플릿과 라우팅등을 서버가 아닌 클라이언트에서 처리하는 렌더링 방식을 말한다. 이러한 렌더링 방식으로 인해 서버에서 사용자 기기로 더 많은 정보를 전달할 수 있지만 그에따른 단점도 존재한다. 반대로 SSR(Server-side-rendering) 방식은 서버에서 페이지 전체의 HTML을 생성하여 브라우저에서 렌더링 하는 방식이다. 장점 향상된 사용자의 경험 CSR은 렌더링시 최소한의 자바스크립트와 CSS 파일이 포함된 HTML을 받아와 클라이언트에 전달해준 후 클라이언트는 스크립트를 동..

NextJS 프로젝트를 하면서 기존 React에서 하던 방식 대로 사용해도 괜찮지만 NextJS는 React와 다르게 동작하기 때문에 앱을 초기화하는 기존 코드를 약간 커스텀해서 작성해줘야 한다. 앱 초기화 단계 기존 리액트에서 사용하는 코드는 아래와 같다. 만약 리액트 혹은 순수 자바스크립트로 이루어진 프로젝트에서 firebase를 사용한다면 아래와 같이 작성해도 무관하다. import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://fireb..

NextJs를 사용하기 전에는 이미지를 넣어야 한다면 태그를 사용하여 이미지를 넣고는 하였다. 하지만 Next 자체에서 컴포넌트가 존재하기 때문에 이를 사용하여 이미지를 넣을 수 있다. 그렇다면 어떨 때 컴포넌트를 사용하고, 왜 사용하는 것인지에 대해 공부한 내용을 작성해보고자 한다. 컴포넌트는 lazy-loading이 지원되며 기본적으로 width와 heigth를 작성해줘야 한다. 또한 alt값을 필수로 작성해야만 오류가 발생하지 않는다. 또한 해당 컴포넌트는 이미지를 최적화해서 보여주기 때문에 사용처에 따라 이미지의 크기를 원본과 다르게 보여준다. 위의 값을 설정하기 위해 지원하는 옵션을 적어보고자 한다. width, heigth // 300px X 300px 괄호 안에 들어간 값은 픽셀로 이미지가 ..

NextJS를 사용한다면 무조건 사용하게 될 두 메서드에 대해서 공부한 내용을 작성해보고자 한다. 공통점 두 메서드는 서버사이드 렌더링을 하기 위해 존재하는 메서드이다. 리액트를 사용해본 경험이 있다면 화면을 새로고침하였을 때 살짝 깜빡이는 현상이나 로그인이 풀렸다가 로그인되는 현상을 겪어 보았을 것이다. 이런 현상이 발생하는 이유는 처음 Html파일을 로드한 후 데이터를 불러오기 때문에 이 짧은 시간으로 인해 새로고침되는 것처럼 보이는 것이다. 그래서 NextJS에서는 getStaticProps와 getServerSideProps를 지원하는데 해당 메서드를 사용하여 컴포넌트를 만든다면 빌드시에 미리 해당 컴포넌트에 필요한 데이터와 html파일을 모두 만들어 놓은 뒤 사용자에게 제공한다. 차이점 이 두개..