https://www.typescriptlang.org/ko/docs/handbook/2/functions.html#%EB%82%98%EB%A8%B8%EC%A7%80-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98%EC%99%80-%EC%9D%B8%EC%88%98 Documentation - More on Functions TypeScript에서 함수가 어떻게 동작하는지 알아봅시다. www.typescriptlang.org 나머지 매개변수와 인수 나머지 매개변수(Rest Parameter) 정해지지 않은 수의 인수를 받아들이는 함수를 Rest Parameter를 이용해 정의할 수 있다. function multiply(n: number, ...m: number[]) { return m...

Passport Version 0.6.0 패키지를 최신 버전으로 업그레이드하면서 기존에 잘 작동했던 passport 코드에서 오류가 발생했다. ^0.5.3 -> ^0.6.0 기존에는 아래와 같이 사용했었다. userRouter.get('/logout', (req, res) => { req.logout(); res.clearCookie('token'); res.redirect(req.get('Referrer')); }); passport 0.6.0버전 업데이트 내용을 보면 기존의 req.logout()은 동기적으로 작동했지만, 0.6.0 이후로는 비동기 함수가 되었다. 따라서 콜백함수를 logout에 넘겨주는 방식으로 써주면 된다. userRouter.get('/logout', (req, res) => {..

Next.js에서 emotion을 사용하고 있었는데, 컴포넌트 선택자를 사용하려는 중에 이런 오류를 만났다. Server Error Error: Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform. 컴포넌트 선택자는 상위 컴포넌트에서 하위의 컴포넌트를 선택해서 스타일링 하는 것을 의미한다. import styled from '@emotion/styled' const Child = styled.div` font-size: 14px; ` const Parent - styled.div` ${Child..

Github Actions로 CI/CD를 구축하면서 paths filter를 사용하려던 중 the process '/usr/bin/git' failed with exit code 128라는 오류를 만났다. fatal: not a git repository (or any of the parent directories): .git Error: The process '/usr/bin/git' failed with exit code 128 오류 메시지를 읽어보니 not a git repository라는 부분이 있어서 작성했던 yml 파일을 다시 보니 checkout보다 paths filter를 먼저 써줘서 생기는 오류였다. checkout을 통해 repository로부터 CI 서버로 먼저 코드를 내려받은 후에 ..

배포 자동화를 해놓지 않았을 때 인스턴스 접속 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..