본문 바로가기

CRA3

[WEB] 웹 렌더링 SSG, SSR, CRS 이란? SSG (Static-Site Generation) 빌드 타임에 js를 변환하여 html을 미리 만들어 둠 > 요청이 들어오면 이미 완성된 html을 반환 빠름 단점 정적 파일로 제공되기 때문에 현재의 사용자 수준에 상응하는 웹 서비스를 제공하기 어려움. SSR(Server-Side Rendering) 전통적인 렌더링 방식 페이지를 새로고침 > 서버에 요청이 들어오면 html로 바로 만들어서 응답 SEO에 유리함 단점 페이지 이동 시 화면 깜박임 새로운 파일을 받아 다시 로드하므로, 클라이언트에서 메모리에 데이터를 유지할 수 없음 CSR(Client-Side Rendering) SPA 처음 웹사이트 진입 시, 비어 있는 html 응답 > 클라이언트 브라우저에서 어플리케이션 렌더링 진행 초기 로드 이후, .. 2021. 12. 13.
[React]CRA 세팅 Failed to compile 에러 (eslint, prettier) MEGAFOX 팀 프로젝트 - 초기세팅 을 참고하여 개인 포트폴리오를 위한 새로운 CRA 프로젝트를 생성했다. 그 짧은 시간동안 react-router의 업데이트(v5 → v6)가 있어서 이번 프로젝트에 적용해보기로 했다. 그렇게 세팅을 하고 npm start !! prettier 플러그인 로드에 실패했다. eslint-plugin-prettier 모듈을 찾을 수 없다구. .eslintrc에 사용하겠다고 적어두었는데 찾을 수가 없네? CRA에는 eslint가 내장 되어있지만, 추가설정을 위한 package는 따로 설치해야한다. npm install -D prettier eslint-config-prettier eslint-plugin-prettier 성공과 동시에 네! 다음 Error😃 Failed to.. 2021. 11. 17.
[React]CRA설치 에러 A template was not provided. This is likely because you’re using an outdated version of create-react-app. 왜? 왜 나만 뭐 설치하려고 할 오류나?😂 또 오류나면 다시 보려고 적어두는 기록✍️ (오류가 그래요. 해결했던 기억을 잊어 갈 때 쯤, 다시 찾아오더라고요.) 먼저 주어졌던 과제를 정리하면 ✔️ node.js 설치 ✔️ npm 설치 ✔️ create-react-app 설치 이렇게 준비해야 했다. [첫 실패🤯] // node.js 버전 확인 node -v // npm 버전 확인 npm -v 우선 기존에 설치되었는지 확인하려 버전을 체크하니 지난 버전이 설치되어 있는 걸 확인하고 패스. (어쩌면 이게 문제의 시발점이었다. '왜? 설치돼있지?'하고 의문을 안가진 것) ✨ 설치 방법 ✨ // 1. 설치할 경로로 진입 cd 설치할 디렉토리 경로 // 2. create-react-app 설치 npx create-.. 2021. 9. 21.