CRA (Create React App)

React의 개발환경 설정을 간단하게 대신 해주는 것 ➡️ 설정 없이도 개발 가능

CPA의 설정

• Webpack : 모듈 번들러 설정(entry, output, loader, plugin 등)
• Babel
• ESLint
• PostCSS
• Fast Refresh
• 환경 변수
• 개발 서버
• 파일 구조

단점

• 추상화된 설정값을 수정하기 번거로움(Webpack, Babel 등)
• SSR을 제공하지 않아, 추가적인 설정이 필요

SSR(Server-Side Rendering)

React 컴포넌트를 서버에서 HTML로 렌더링한 뒤 브라우저에 전달하는 방식
사용자가 서버에 접속하면, 서버에서 이미 렌더링된 HTML을 만들어서 보여준다.

⚙️ CRA에서 SSR을 구현하려면 필요한 설정

1. ReacDOM.render() → ReactDOM.hydrate() 변경 → 서버가 HTML 전달했다고 알려주는 역할
2. 서버 생성(예: Express, Node.js 기반 서버) → 사용자에게 보내줘야 함
3. Webpack 설정을 eject 해서 설정을 직접 수정 → 서버 렌더링 가능
4. 라우팅 조정(React Router 설정 주의) → 서버도 경로를 인식하고 페이지를 그려야 함
5. 데이터 불러오기 → 필요한 데이터를 서버에서 미리 가져오기 → 빈 화면 보이지 않도록

❗️ Next.js 같은 SSR 프레임워크를 사용하는 것이 더 효율적

npm run eject : CRA 내부에 있는 추상화된 Webpack, Babel 등 설정 파일들 을 프로젝트 밖으로 꺼내서 직접 수정 가능하도록 하는 작업

❗️오류 발생

npx create-react-app react-app 으로 설치 중 오류 발생하여 설치가 되지 않음
해결 방법
1. npm 캐시 클리어 npm cache clean --force
2. npx 캐시 디렉토리 삭제 rm -rf ~/.npm/_npx
후 다시 실행 시 Happy Hacking! 뜨면 설치 성공