Trouble Shooting

yarn unknown workspace 오류 해결

프로젝트에 모노레포를 적용해보는 중에 한 워크스페이스에만 패키지를 추가하기 위해 커맨드를 입력했다. // yarn workspace [워크스페이스 이름] add [패키지 이름] yarn workspace admin-front add @mui/material @emotion/react @emotion/styled 하지만 Unknown workspace 라는 오류가 발생했다. 해결 방법 1. 루트 package.json의 workspaces의 값들이 배열로 되어있는지 확인 { // ... "workspaces": [ "common/*", "apps/*" ] } 루트 디렉토리에 있는 package.json의 workspaces가 배열로 되어있는지 확인한다. 2. workspace 이름과 package.json..

Delete `␍`eslint(prettier/prettier) 해결하기

새로 프로젝트를 생성했는데 위와 같은 오류가 발생했다. (전에도 비슷한 오류가 발생했었는데 어떻게 해결했는지 기억이 나지 않아서 정리해보려 한다.) VSCode의 Change End of Line Sequence를 통해 바꿔줄 수도 있다. 하지만 이는 근본적인 해결방법이 아니며, 모든 파일마다 바꿔주기에는 너무 번거롭다. 해결방법 ESLint 설정 부분에서 rules 옵션에 아래 내용을 추가해주면 된다. .eslintrc.json { "rules": { "prettier/prettier": [ "error", { "endOfLine": "auto" } ] } } 이는 prettier 2.0 버전 이상에서 endOfLine 옵션의 default 값이 auto에서 lf로 바뀌었기 때문이라고 한다. auto로..

[passport] req#logout requires a callback function 오류 해결

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] Component selectors can only be used in conjunction with @emotion/babel-plugin 해결

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] the process '/usr/bin/git' failed with exit code 128 해결

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 서버로 먼저 코드를 내려받은 후에 ..

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

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

[React] 여러 개 요소 return할 때 key값 지정하기

Problem? react 컴포넌트를 만들다가 map 안에서 여러 개의 요소를 리턴할 때 key값을 설정해주는 부분에서 헷갈리는 부분이 있었다. const Child = ({ data }: Props) => { return ( {data?.map((child) => { return ( {child.name} {child.type === 'folder' && } ) })} ) } 여러 요소를 리턴할 때 div로 요소들을 감싸고 key값을 지정해줘도 되지만, 아래와 같은 마크업 구조를 만들고자 했기 때문에 따로 div로 감싸고 싶지 않았다. Child1 Grand Child 1 Grand Child 2 그래서 빈 태그 로 감싸주고 나머지 요소들에 key값을 따로 지정해주면 될 것이라고 생각했는데 key값이 ..

[axios, jest] Cannot use import statement outside a module 에러 해결

axios 버전: 1.1.3 jest 버전: ^29.2.1 새로운 프로젝트를 시작하면서 package.json의 모듈 버전들을 다 upgrade해보았다. 리액트 프로젝트에서 jest로 테스트 코드를 작성했는데, 실행을 하니 axios를 import하는 부분에서 Cannot use import statement outside a module라는 오류가 발생했다. D:\--\node_modules\axios\index.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js'; SyntaxError: Cannot use import statement outside a m..