cra 환경에서 패키지를 만들어서 npm에 배포를 하다가 문제가 발생했다. 해결하기 위해서 이곳 저곳 찾아봤는데, babel 문제로 파악되었다. { "presets": ["@babel/preset-env", "@babel/preset-react"] } 해당 내용을 package.json에 넣어주니 배포가 되었다. 배포한 패키지를 다운받아서 테스트를 해보니 이번에는 React is not defined가 나왔다. 다시 한번 찾아보니 preset-react에 추가적인 옵션을 줘야 했다. presets: [ "@babel/preset-env", ["@babel/preset-react", {"runtime": "automatic"}] ] runtime 옵션을 주니 이번엔 배포가 되고 다운 받아도 문제 없이 실행..

지난번에는 React와 Nginx를 함께 사용해서 배포하는 작업을 진행했다. 이번에는 React와 Nginx를 Docker를 사용해서 이미지화 시켜서 컨테이너로 클라이언트를 배포할 계획이다. 환경 정보 Server : Naver Cloud os : Ubuntu 20 필요한 파일 설치 apt install npm // npm 설치 sudo apt-get install build-essential libssl-dev curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash source ~/.bashrc // nvm 설치 nvm install 18.12.1 // 필요한 npm 버전 설치 npm을 설치하고 defaul..

React 프로젝트를 만들고 이제 배포를 하는 작업이 필요하다. 여러가지 방법이 있겠지만 역시 가장 만만한건 Nginx가 아닐까 생각된다. Naver Cloud에 Nginx를 사용해서 배포하는 작업을 진행할 것이다. 환경 정보 Server : Naver Cloud os: 우분투 20 서버를 만드는 작업은 이전에 작성한 글이 있기 때문에 그것을 참고하길 바란다! 그리고 기본적으로 배포할 React 프로젝트가 있다는 것은 전제로 진행하겠다. 필요 파일 설치 apt install npm npm이 서버에 설치되어 있지 않을 것이기 때문에 설치해준다. apt install nginx 마찬가지로 nginx도 설치되어 있지 않기 때문에 설치해준다. 패키지 가져오기 뭐 별거 없다. 깃허브에 저장되어 있는 Repo를 클..

0. 사건의 발단 평화로운 어느 날... 나는 내가 만든 프로젝트를 Github에 배포하기 위해서 작업을 진행했다. 분명 로컬에서는 문제없던 프로젝트인데 배포분에서는 원하던 페이지가 나오는 것이 아닌 메인 페이지가 나왔다... 1. 문제 이유 Github는 도메인/페이지 방식이 아닌 도메인/프로젝트명/페이지 방식이어서 라우터를 이동했을 경우 도메인/페이지로 이동되어서 이상한 페이지로 이동된 것이다. ex) https://seojaewan.github.io/react-sns-login/ React Project! seojaewan.github.io = 구글 페이지 이동 => https://seojaewan.github.io/Google?type=Setting/ seojaewan.github.io 뒤에 있던..