전체 글

[Nginx] 페이지 새로고침 시 Page Not Found 오류 해결

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 오류 해결

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..

[React] geoLocation API로 현재 위치를 알아보자

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

불필요한 node_modules 한번에 삭제하기

생활코딩님의 쇼츠보고 감명받아 정리하는 내용! 프로젝트를 하면 할수록 쌓이는 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..

[TIL] 23.01.26 패키지 잠금 파일(package-lock.json, yarn.lock)

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

inefficient regular expression complexity in nth-check

github dependabot alert 라이브러리 하나 추가하고 깃허브에 푸시했는데 갑자기 dependabot alert 여러개가 와다닥 떴다. 그 중 몇개는 서버에서 쓰는 jsonwebtoken의 버전을 upgrade하라는 alert였다. 그래서 jsonwebtoken을 latest 버전으로 업그레이드해주었더니 해결되었다. 사라지지 않는 nth-check alert Inefficient Regular Expression Complexity in nth-check Upgrade nth-check to fix 1 Dependabot alert in client/yarn.lock Upgrade nth-check to version 2.0.1 or later. For example: nth-check@^2..

[TIL] 23.01.17 프리온보딩 챌린지 3회차

한 번쯤은 build한 결과물을 열어서 내가 작성한 코드가 어떻게 변환되어 있는지 확인해보자. 프론트엔드 또한 인프라 환경에 관심을 가져야 한다. 특히 웹 서비스의 많은 부분이 컨테이너 기반으로 돌아가기 때문에 도커는 언제든지 공부해두면 무조건 도움이 된다! redux는 flux 패턴을 자바스크립트로 표현한 구현체라고 생각하면 된다. redux-thunk는 까보면 53줄 밖에 안된다.(코드 보기 전부터 겁먹지 말자) React Query뿐만 아니라 SWR 등의 캐시 패러다임의 라이브러리들이 채택하고 있는 전략이 stale-while-revalidate이다. stale-while-revalidate로 최신 상태 유지(꼭 읽어보기) stale-while-revalidate는 1) 캐시된 응답이 오래될 수도 ..

[TIL] 23.01.15 타입스크립트 핸드북 - More on Functions(2)

함수 오버로드 몇몇 자바스크립트 함수는 다양한 인수의 개수, 타입을 통해 호출될 수 있다. (eg. Date를 생성하고 인수로 타임스탬프 하나만 받을 수도 있고 월, 일, 연도를 받는 함수를 만들 수도 있다.) 타입스크립트에서는 이를 오버로드 시그니처를 작성함으로써 묘사할 수 있다. 그러기 위해 함수 시그니처 몇 개(보통 2개 이상)를 적은 후 함수 본문을 작성하면 된다. function makeDate(timestamp: number): Date; // 오버로드 시그니처 1 function makeDate(m: number, d: number, y: number): Date; // 오버로드 시그니처 2 function makeDate(mOrTimestamp: number, d?: number, y?: ..