SPA 이전에 생긴 개념... 변천사 Static Sites iframe XMLHttpRequest AJAX SPA (Single Page Application) AJAX등을 이용하여, 하나의 어플리케이션을 이용하듯 사용자가 하나의 페이지에 머무르면서 필요한 데이터를 부분적으로 받아와 업데이트를 해줌. CSR (Client Side Rendering) 특징 클라이언트에서 전반적인 렌더링을 전부 전담함. HTML의 body 태그 내부가 비어있음. (id=”root” 와 어플리케이션에서 필요한 자바스크립트의 링크만 들어 있음) 웹사이트에 처음 접속하면 빈화면이 보이고, 링크된 자바스크립트를 서버로부터 다운로드 받고, 이 내부에는 필요한 로직뿐만 아니라 어플리케이션을 구동하는 프레임워크와 라이브러리의 소스코드..

서버사이드 렌더링 개요 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시 하는 기법 이동 할때 마다 새로운 페이지 요청 완성된 페이지 형태로 응답 페이지 이동시 화면이 깜빡 거림 SSR vs CSR SSR 장점 초기에 HTML만 렌더링하여 보여주기때문에 초기 로딩속도가 빠름 검색엔진(SEO) 최적화가 가능 SSR 단점 서버에서 처리를 해주기 때문에 서버에 부하가 발생할 수 있음 SPA는 기본적으로 CSR 방식이 기본 React에는 Next, Gatsby 등 도입하여 SSR 방식을 겸함 Vue에는 Nuxt가 SSR 지원 Next.js Next.js 란? 공식 홈페이지 링크 Vercel 에서 제작한 리액트를 서버사이드렌더링(SSR)으로 쉽게 구현할수 있도록 환경을 제공해주는 리액트 프레임워..

1. Formatting 💡 ES, TS, Vue, HTML, CSS, SCSS, Java 등 모든 언어의 포매팅을 지원합니다. Intellij File > Setting > Editor > Code Style 에서 각 언어별로 설정 Scheme 파일을 프로젝트 또는 IDE 단위로 Export/Import 할 수 있어, 통합 관리가 가능함 Prettier 공식 홈페이지 설치 // npm npm install --save-dev --save-exact prettier // yarn yarn add --dev --exact prettier Prettier 의 Configuration은 루트디렉토리에 .prettierrc.js 파일에 설정 IDE 별 초기 설정 방법 WebStorm 마켓플레이스에서 Pretti..