CRA

cra 를 사용하여 react app 만들기 fullstack 폴더에서 frontend 폴더를 생성합니다. npx create-react-app frontend UI를 위한 코드 작성 수정되는 UI 를 바로 확인하기 위해서 react app을 실행합니다. npm start http://localhost:3000 글을 입력할수 있는 Input box 와 확인을 누를 수 있는 Button을 추가하겠습니다. App.js import logo from './logo.svg'; import './App.css'; function App() { return ( 확인 ); } export default App; 이벤트 핸들러 와 최종적인 코드입니다. 이글은 react 를 위한 글이기보단 docker 설정에 초점을 맞..

현재 hello world 문구를 수정하면 build 를 다시해야 반영이 됩니다. 매번 build를 하지 않게 hot reloading을 설정합니다. hot reloading hot reloading을 사용하기 위해서는 front 에서도 server가 필요합니다. $ yarn add webpack-dev-server -D npm 의 사소한 에러들이 있는데 아직 해결하지 못해서 yarn 으로 대체했습니다. 추후에 수정하겠습니다. webpack-dev-server 는 추후에 proxy server의 역활도 합니다. cors에러 문제 해결 등등.. $ yarn add webpack-cli $ yarn add -D @types/webpack-dev-server $ yarn add @pmmwh/react-refr..