Study Log Study Log

CSR(Client Side Rendering) 💡 렌더링이 클라이언트에서 일어나는 방식입니다. 즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내줍니다. 클라이언트는 그것을 받아 렌더링을 시작합니다. 사용자가 페이지 접근 서버가 웹이 필요로 하는 스크립트와 스타일이 포함된 기본 html 마크업만 전송 클라이언트가 html과 js 다운 받음 다운 완료된 js가 실행, 데이터를 위한 api 호출 서버가 api로부터의 요청에 응답 api로부터 데이터를 받은 후 페이지 상호작용 가능 💡 자바스립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는 것이 없습니다. 장점 초기 로딩 이후에 페이지 일부를 변경할 때는 구동 속도가 빠름 서버 부하 적음 단점 초기 로딩 속도 느림 SEO에 불리..

원티드 프리온보딩 4월 챌린지를 수강할 때 vite를 얕게 배웠었고, 빌드 속도가 매우 빨라진다는 점을 듣고 현재 진행하고 있는 프로젝트에도 적용하면 좋을 것 같아 Vite를 사용해보고자 했습니다. 이미 많이 진행된 프로젝트에 번들러를 webpack에서 vite로 바꾸는 과정을 진행했습니다. Vite Vite는 Vue.js 팀이 개발한 웹 개발용 빌드 도구입니다. 인기 비결은 뭐니해도 ‘속도’입니다. 개발과 빌드 속도가 매우 빠릅니다. Vite가 빠른 이유 개발 서버: Webpack의 번들 기반 개발 서버는 소스 코드와 모든 종속 관계의 모듈을 번들링 후 서버가 준비됩니다. 반면에 Vite는 극단적으로 빠른 Esbuild로 미리 번들링 한 모듈을 필요시 동적으로 가져오므로 명령 시 즉각적으로 서버가 구동..

프로젝트에서 Recoil을 사용하여 상태관리를 하고자 해서 Recoil에 대해 알아보며 정리한 글이다. 설치 yarn add recoilRecoilRoot 리코일 state를 사용하는 컴포넌트들은 를 필요로 한다. 를 사용하는 가장 좋은곳은 root component이다. // index.tsx import ReactDOM from 'react-dom'; import App from './App'; import 'styles/reset.scss'; import 'styles/global.scss'; import { RecoilRoot } from 'recoil'; ReactDOM.render( , document.getElementB..