전체 글

배포 자동화를 해놓지 않았을 때 인스턴스 접속 git pull 백엔드 폴더에서 yarn install -> 배포 프론트 폴더에서 yarn install -> yarn build -> 배포 배포 자동화를 해놓지 않았을 때는 위 과정의 반복이었다. 조그마한 변경이 있어도 매번 이렇게 해야해 너무 번거로웠다. 그래서 Github Actions를 이용해 CI/CD를 구축해보기로 했다. CI/CD를 처음 시도해봤기 때문에 어디서부터 어떻게 해야할지 참 막막했다. 현재 오라클 클라우드를 사용 중인데 오라클에서 제공하는 OCI DevOps는 유료 서비스여서 시도해보지 못했고, OCI 블로그에 나와있는 방법이나 OCI CLI를 이용하는 방법을 모두 시도해보았으나 실패했다. 그래서 평소대로 ssh로 연결한 후 배포가 진..

프로젝트에서 로컬/배포 환경에서 각각 따로 설정해주어야 하는 부분이 있었는데, 매번 배포할 때마다 코드 일부분을 수정했다. 너무 번거롭기도 하고, 맞는 방법이 아닌 것같아서 개발 모드와 배포 모드 각각의 환경에서 다르게 동작할 수 있도록 코드를 수정해주었다. node환경에서 개발 모드를 감지하려면 process.env.NODE_ENV를 확인해주면 된다. 1. React if (process.env.NODE_ENV === 'development') { // development 환경일 때 실행할 코드 } else { // development 환경이 아닐 때 실행할 코드 } 이런 식으로 process.env.NODE_ENV가 'development'인지 또는 'production'인지 확인해주는 if문을 ..

Nginx로 배포했던 프로젝트에서 루트 경로가 아닌 다른 하위 경로에서 페이지 새로고침을 하면 404 에러가 발생했다. 찾아본 결과 nginx의 config를 파일에서 try_files 부분을 수정해주면 된다는 것을 확인했다. sudo vi /etc/nginx/sites-available/default 기존의 파일 내용에서 location 부분에서 try_files를 보면 아래와 같이 되어있었다. 기본이 404로 되어있어서 그런 것이었다. 이를 아래와 같이 수정해주면 된다. try_files $uri /index.html; 파일을 저장해준 후, nginx를 다시 켜주면 더이상 새로고침을 해도 404 페이지가 뜨지 않는 것을 확인할 수 있다. sudo systemctl reload nginx Referen..

netlify로 올려놓았던 프로젝트에서 페이지 새로고침 시 Page Not Found가 뜨는 오류가 발생했다. public 폴더에 redirects 추가 public 폴더에 _redirects 라는 이름의 파일을 만들고 아래와 같은 내용을 작성해주면 된다. public/_redirects /* /index.html 200 혹시 이 방법이 안된다면? 루트 디렉토리에 netlify.toml파일을 만들고 안의 내용을 아래와 같이 작성해주면 된다고 한다. netlify.toml [[redirects]] from = "/*" to = "/index.html" status = 200 References https://stackoverflow.com/questions/58065603/netlify-renders-40..

현재 위치를 구하려면 날씨 앱 구현을 위해 Web API인 Geolocation API를 사용해 현재 위치를 구할 수 있는 hook을 만들어보았다. Geolocation API는 사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API이다. Geolocation은 navigator.geolocation을 통해 접근하고, 사용자가 허가할 경우 현재 장치에서 GPS, Wifi 등 사용 가능한 최선의 방법으로 위치를 알아낸다. 위치 정보를 가져오는 방법에는 두 가지가 있다. Geolocation.getCurrentPosition(): 장치의 현재 위치를 가져온다. Geolocation.watchPosition(): 장치의 위치가 바뀔 때마다 자동으로 새로운 위치를 사용해 호출할 처리기 함수를 ..

생활코딩님의 쇼츠보고 감명받아 정리하는 내용! 프로젝트를 하면 할수록 쌓이는 node_modules의 지옥.. npkill을 통해 좀 더 편리하게 node_modules를 관리해보자. https://www.npmjs.com/package/npkill npkill List any node_modules directories in your system, as well as the space they take up. You can then select which ones you want to erase to free up space.. Latest version: 0.10.0, last published: 3 months ago. Start using npkill in your project by runnin..

자바스크립트 패키지 매니저 패키지를 프로젝트에 설치, 갱신, 삭제하는데 사용되는 도구를 패키지 매니저라고 한다. 자바스크립트의 패키지 매니저는 npm, yarn이 있다. 두가지 모두 패키지 잠금 기능을 지원한다. npm은 package-lock.json을, yarn은 yarn.lock 파일을 패키지 잠금 파일로 사용한다. 즉, 패키지 잠금 파일은 프로젝트에서 어떤 패키지 매니저를 사용하는지에 따라 달라진다. 패키지 관리 매커니즘 npm을 사용하든 yarn을 사용하든 프로젝트의 메타 정보는 package.json을 통해 관리된다. package.json에는 해당 프로젝트가 의존하고 있는 모든 패키지 이름과 버전이 나열되어 있다. 일반적으로 설치되어야 하는 패키지들은 dependencies에, 개발할 때만 ..