본문 바로가기

Frontend/React.js

CSR과 SSR, SSG ◼ 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업을 브라우저 렌더링이라고 한다. ◼ 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 화면에 그려주는 것이다. ◼ 그리고 이러한 브라우저 렌더링은 크게 CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation)으로 나뉘어 이에 대해 알아보고자 한다. CSR(Client Side Rendering) CSR은 클라이언트(브라우저)에서 렌더링이 이루어지는 방식을 말한다. 즉, 클라이언트는 서버로부터 HTML, CSS, JavaScript를 받아와서, 받아온 파일들을 이용.. 더보기
React 성능 개선하기 📒 왜? ◼ React는 SPA로, 사용자가 처음 메인 페이지에 접속하면, 모든 js 파일을 다운로드 하여 초기 로딩 속도가 느려, 성능 개선 작업을 위한 방법에 대해서 알아보고자 한다. 📒 React 성능 개선하기 ✔ 개발 도구 설치 ◼ React Developer Tools를 설치한다. ◼ Components 창에서 Component의 구조, Props 등을 확인할 수 있다. ◼ Profiler 창에서 성능 저하가 발생하고 있는 Component를 찾을 수 있다. (녹화 버튼을 누르고 페이지 이동 및 버튼 클릭 등 사용하다 보면 Component 별로 렌더링 속도를 알려준다.) 💥 대부분의 지연은 서버의 통신이 느린 것 ✔ Lazy 로딩 ◼ React는 SPA이기 때문에, 하나의 html, js, c.. 더보기
React 사용하기 📒 왜? (React 사용 이유) ◼ Single Page Application을 만들 때, 사용한다. 💬 Single Page Application은 새로고침 없이 돌아가는 페이지로 앱처럼 부드럽게 동작한다. ◼바닐라 JS로 웹 페이지를 만들 경우, 코드가 길어지고 너무 복잡해진다. 그래서 React 라이브러리를 사용한다. ◼ React를 사용하면 HTML 재사용이 편리해진다. ✨ React는 HTML, CSS, JavaScript 웹 개발을 편리하게 도와주는 라이브러리이다. 📒 개발 환경 세팅하기 1. node js를 설치한다. 2. 터미널에서 원하는 경로로 이동한 뒤, npx create-react-app {프로젝트 폴더명} 명령어를 입력한다. 💬 create-react-app(cra)는 React.. 더보기

티스토리툴바