2024.02.08(목)

🪲리액트 디버깅 도구

• Chrome 웹 스토어에서 React Developer Tools 설치
  • 개발자 도구(F12)에 Components와 Profiler 탭이 추가됨

    탭	설명
    Components	component들의 props, state 등의 data를 확인할 수 있음
    Profiler	녹화되는 동안 render된 component들의 시간이 측정됨

🚀리액트 배포하기

1. npm run build → build 폴더가 생성됨
2. npm install -g serve
3. npx serve -s build

🫱🏻‍🫲🏼리액트와 node.js 서버 합치기

• 물리적으로 express server folder에 react project folder 넣기
  (또는 express server에서 react project 생성)
• express server의 app.js에서 다음과 같이 static 파일들과 root 설정

  const path = require('path')
  
  app.use(express.static(path.join(__dirname, 'coffee-store/build')))
  
  app.get('/', (req, res) => {
  	res.sendFile(path.join(__dirname, 'coffee-store/build/index.html'));
  });

  • Serving static files in Express
  • res.sendFile
• 리액트 useEffect에서 AJAX(axios)로 api 요청보내서 data 받아오기
• 리액트 코드를 변경하면 당연히 build를 다시 해야 반영됨