React
/
/

Issue

<Issue>에서는 다양한 상황에서 해결했던 이슈들을 받아보실 수 있습니다.
Search
Issue
falsy 값을 할당할 수 없어서 생기는 문제다. 여기서는 0이나 false 등을 예시로 들었고, null도 마찬가지다.
type is not assignable to type CSSproperties typescript
2022/03/30
2022/05/05 13:04
icoa
icoa

getStaticProps/getServerSideProps는 페이지 구성 요소에 연결할 수 없습니다.

이 오류가 발생한 이유

페이지 구성 요소 중 하나 getStaticProps에 getStaticPaths, 또는 getServerSideProps별도의 내보내기 대신 구성원으로 첨부했습니다.
이러한 메소드는 동일한 방식으로 첨부할 수 없으며 getInitialProps자체 내보내기여야 합니다.
Move the method to it's own export from your page.
고치기 전
변경 후
getStaticProps/getServerSideProps can not be attached to the page component
NextJS
2022/03/26
2022/05/05 13:03
icoa
icoa
인식이 이상하게 frontend에서 잡히고 있어서
커밋을 할 때 루트 디렉터리 기준으로 잡히지 않는 현상이 있다.
찾아보니 이렇게 나온다.
.git이 프로젝트 내부의 frontend 폴더에도 들어있는 경우 해결방법

Mac의 Bluetooth 모듈 재설정

이렇게 하면 마우스/키보드를 포함한 모든 Bluetooth 액세서리의 연결이 끊어집니다. Mac 데스크탑용 유선 키보드/마우스가 있는지 확인하십시오.

macOS 몬테레이에서

여전히 Bluetooth 문제가 있는 경우 Mac의 Bluetooth 모듈을 재설정할 수 있습니다.
옵션 + shift + 메뉴 표시줄의 Bluetooth 아이콘 클릭(아래에 자세히 설명)은 Monterey에서 Bluetooth 재설정 옵션을 표시하지 않으므로 터미널 명령을 실행해야 합니다.
•
터미널 열기
•
"sudo pkill bluetoothd" 명령을 입력하십시오.
•
Return 키를 누른 다음 묻는 메시지에 비밀번호를 입력하십시오.
•
Mac 재설정

macOS Big Sur 또는 이전 버전에서

•
키보드의 option + shift를 누른 상태에서 메뉴 표시줄의 Bluetooth 아이콘을 클릭합니다.
•
"Bluetooth 모듈 재설정"을 클릭하십시오.
•
확인 프롬프트에서 "확인"을 선택합니다.
macOS Monterey에서 Bluetooth 모듈 재설정
2022/03/25
2022/05/05 13:02
icoa
icoa

했는데도 Reference Error가 난다면 비활성화.

Parsing error: Cannot find module 'next/babel'
2022/03/24
2022/05/05 13:03
icoa
icoa
skipping missing collection view for block 6d8aea24-ad2f-4290-b689-9049275b88a0라는 에러가 나면서 컬렉션 뷰가 보여지지 않는 문제가 있었다. 티스토리 블로그의 글들을 노션으로 전부 이동시키고 나서 확인해보니 이렇다. 아래의 사이트에서 이미 이슈에 대한 논의와 해결이 있었다.
react-notion-x 의 4.7.10 버전에서 업데이트되었다고 하는데 내가 사용하고 있는 버전이 더 낮은 것을 발견했고 이를 업데이트해주었다.
그래도 안되서 찾아보니 오늘 api를 변경시켜서 collection endpoint가 손상되어 작동이 안된다고 한다. 찾아보고 있다는 글이 1시간 전에 떠있다.(현재 211006. 12:52PM)
skipping missing collection view for block in react-notion-x
ReactJS
2021/10/06
2022/05/05 13:02
icoa
icoa
이와 같이 Warning: validateDOMNesting(...): <table> cannot appear as a child of <table>
라는 에러가 나타나서 구글링을 해보니 지금은 html 태그를 리액트의 jsx 문법으로 옮겨서 적용하는 중이였는데 table 태그를 사용하기 위해서는 table 태그의 내부에 <thead>와 <tbody>를 선언해주고 그 내부에 <tr>, <td> 태그를 사용해야만 한다는 사실을 알 수 있었다. th를 사용하기 위해서는 thead를 선언해야 한다. 리액트가 rerendering을 진행할 때 DOM tree가 예상과 달리 진행될 수 있어 작성해야 한다고 한다.
HTML table, tr, td 태그 쓰기, JSX에서 table 태그 쓰기, Warning: validateDOMNesting(...): <table> cannot appear as a child of <table>
ReactJS
HTML
2021/05/17
2022/05/05 13:04
icoa
icoa

Reactjs(리액트) 환경에서 Redux(리덕스) 실습을 해보던 와중에 FriendLists에 띄워줘야할 MockData들이 보여지지 않는 문제가 발생했고 경고 메시지를 보니 이와 같았다.

Array.prototype.map() expects a return value from arrow function, array-callback-return 에러 해결하기
Nextjs에서 React에 적용된 Redux 코드를 적용해보는 과정에서 실행할 때 에러가 많이 나왔다. 이를 해결한 방법을 정리해보려고 한다.

# 1

Module not found: Can't resolve 'react'null
라는 에러를 보고 해결 방법을 찾아보니 아래와 같이 설치해서 해결되었다.

# 2

Error from chokidar (D:\): Error: EBUSY:  ,,, 라는 메시지가 나타났는데 아래와 같이 설치하였다.

# 3

Module not found: Can't resolve 'redux-actions'
Nextjs에서 Redux 에러 해결하기 Error from chokidar (D:\): Error: EBUSY: resource busy or locked, lstat 'D:\pagefile.sys' // next-redux-wrapper // Module not found: Can't resolve 'react' // Module not found: Can't resolve 'redux-actions'
NextJS
2021/03/02
2022/05/05 13:03
icoa
icoa

# 시작

요새 vscode로 개발이나 코딩테스트를 위해 코딩을 하는데 과거에 자주 사용하던 주석 단축키가 잘 안되서 매우 불편했다. 개발하다가 보면 console.log로 데이터를 출력해서 디버깅하는 방식을 애용했었는데 이걸 블록처리해서 주석으로 바꾸는 단축키로 Ctrl+/를 사용해왔다. 그런데 어느날부터 갑자기 이 단축키가 잘 안되서 주석 단축키를 아예 바꿔버리겠다는 생각으로 구글링을 하다가 문제의 원인이 무엇인지 알게 되었다. 개발 환경은 윈도우10이다.
작업 표시줄 오른쪽 시계 옆을 보면 "한"이라는 글자가 보인다. 저게 입력기인데 주석 단축키가 안 먹히는 경우는 저게
한컴 입력기로 되어있을 가능성이 높다.
나도 그렇게 되어 있어서 Microsoft 입력기로 바꾸고 나니 주석 단축키가 매우 잘 된다. 주석 단축키가 되다 안되다 하는 사람들은 꼭 시도해보자.
[vscode] 주석이 안될 때, 주석 단축키가 안 먹힐 때, Ctrl+/가 안될 때, 주석 단축키 바꾸는 방법 찾을 때? Comment shortcut not working in vscode?
etc
2021/01/10
2022/05/05 13:02
icoa
icoa

# 시작

넥스트로 프로젝트 환경을 세팅하면서 typescript와 eslint, prettier를 한꺼번에 적용해보려고 하니 리액트 프로젝트 세팅할 때 겪었던 것처럼 에러가 여럿 눈에 보였다. eslint의 rules를 변경하면서 걸린 시간이 5시간은 족히 넘을 것 같다. 여기서는 구글링해서 따라하다가 막혔던 세 문제를 해결하고 글로 남긴다.
Next + eslint + prettier + typescript 환경을 이용해보려는 사람들은 참고했으면 좋겠다.
아래 사진들을 보면 코드 위에 에러 메시지들이 바로 띄워져있는 것을 볼 수 있다. 다른 사람들은 이렇게 바로 에러가 보이지 않을 수도 있는데 vscode의 익스텐션중에서 "Error Lens"라는 익스텐션을 사용하고 있다는 점을 참고하길 바란다.

# 1

Cannot find name "div" 에러

Nextjs로 프로젝트를 구성하고 나서 eslint와 prettier를 적용하려는 사람들 중에 아래와 같은 문제가 나타난 사람들이 있을 것이다.
리액트였다면 더 빨리 해결했을 것 같은데 뭔가 다른 설정을 건드려야되나 해서 더 오래 헤맸던 것 같다. 생각해보니 return문 내에서 jsx문법을 사용하고 있는데 옆의 파일을 보면 page2.ts라고 되어있다. 이것을 파일의 확장자를 "tsx"로 변경하면 해결된다.
아래는 참고한 사이트다.
stackoverflow.com/questions/51158080/typescript-cannot-find-name-errors-in-react-components

# 2

Replace `....`와 Insert `..` 에러

eslint를 적용하자마자 파일에서 에러들이 엄청 보인다.
NextJs+eslint 에러 해결, Cannot find name "div", Replace ....와 Insert .., Cannot find module 에러, 에러 메시지 미리 보기(Error Lens 사용)
NextJS
2020/12/30
2022/05/05 13:01
icoa
icoa
Missing return type on function 이 자꾸 떠서 보기 싫다. 그래서 rules 부분을 아래와 같이 설정해준다.
아래 설정에서 none을 warn으로 변경하면 경고를 띄우고, error를 띄우면 에러를 발생시킨다.
[typescript + react + eslint + prettier] Missing return type on function
TypeScript
ReactJS
2020/12/30
2022/05/05 13:01
icoa
icoa
Missing return type on function 이 자꾸 떠서 보기 싫다. 그래서 rules 부분을 아래와 같이 설정해준다.
아래 설정에서 none을 warn으로 변경하면 경고를 띄우고, error를 띄우면 에러를 발생시킨다.
자바스크립트 2개월차라 자바스크립트 문법이나 함수들을 능숙하게 다룰 줄 몰랐고 실무에서 리액트와 함께 Typescript(타입스크립트)를 사용한다는 사실을 알고도 적용할 엄두를 못 내고 있었는데 이번에 리덕스와 타입스크립트를 함께 공부해보면서 에러를 많이 뱉어 사용하지 않았던 eslint도 같이 적용해 프로젝트를 시작하게 되었다. 이 글은 ts와 eslint를 조합하면서 겪은 애로사항(최소 6시간 이상의 삽질)을 겪을 사람들을 위해서 아주 간단하게 정리했다. 이 이상으로 rules(에어비앤비 등등)을 적용할 분들은 지인의 도움을 받기를 추천한다.

CRA

cra에 typescript를 적용해보자

ESLINT + PRETTIER

ESLINT

eslint linting 라이브러리 eslint,eslint가 typescript를 lint 할 수 있도록 허용해주는 parser인 @typescript-eslint/parsertypescript에 구체화된 ESLINT rule들을 잔뜩 포함하는 플러그인인 @typescript-eslint/eslint-plugin
설치 후에는 configuration을 위해 프로젝트 디렉토리 최상단(root 디렉토리)에 .eslintrc.json 을 만들고 아래 코드를 저장한다.
이제 타입스크립트와 eslint를 함께 사용할 기본적인 준비가 되었다.
CRA로 Typescript + React에 eslint + prettier 적용하기(간단하게) Applying eslint + prettier to Typescript + React with CRA (simple)
TypeScript
ReactJS
2020/12/30
2022/05/05 13:01
icoa
icoa

재시작하면 다시 에러가 생긴다. 그래서 방법을 다른 방법을 찾았다.

vscode에서 typescript react 프로젝트를 하다가 eslint 때문에 자꾸 에러가 났다.
매 줄마다 Delete "CR" 라는 에러를 뱉어서 임시적인 해결방법으로 에디터 하단 중앙쪽에 CRLF를 눌러 LF로 변경해주면서 사용했다. 여기서 LF는 unix 환경에서 쓰이는 줄바꿈 관련 내용은 아래와 같다.
프로그래밍을 하다 보면 문자열의 줄 내림을 위해서 \n을 쓰는 경우가 있을 것이다. 그런데 윈도우즈에서 이것저것 하다 보면 단순히 \n만이 아닌 \r\n을 만나게 된다. 과연 이것은 무엇일까? \n은 Line Feed(
즉, 윈도우를 사용하기 때문에 겪는 에러였다. eslint 관련 설정을 맥 환경의 개발자들에게 맞춤으로 제공하기 때문인 것 같다. m1 칩이 출시되어 맥으로 넘어가고 싶다는 생각이 많이 들고 있었는데 이런 귀찮은 일까지 겪으니 더욱 마음이 동하는 것 같다. 어쨌든 아래와 같이 에러가 뜨지 않고, 매번 파일을 생성할 때마다 CRLF를 LF로 변경해주는 수고를 안해도 되는 .eslintrc.json 파일은 다음과 같다.
"linebreak-style": ["none"], 가 rules 안에 추가되어 있다. CRLF -> LF를 매번 바꾸는 게 너무 성가셨는데 이 에러를 해결하기 바로 전에 해결한 에러가 explicit-function-return-type에 대한 에러다. "Missing return type on function"이라는 경고를 계속 띄워줘서 성가셔서 변경하는 와중에 " [ ] " 를 이용해 내부에 "warn", "error"로 설정했을 때 정상적으로 동작하는 것을 알 수 있었다. 시험 삼아 "none"을 설정해보니 경고를 띄워주지 않는 것을 확인했다.
linebreak-style 속성에도 0을 주라는("none"을 적으면 integer을 줘야 된다고 에러가 발생한다.) 조언들을 따라 해보았지만 에러는 해결되지 않았고 위와 같이 배열처럼 넣어주니 해결되었다.

# 해결

위의 방법으로 해결했다가 프로젝트를 다시 켜서 파일을 생성하고 진행하면서 npm start를 해보니 Delete "CR" 에러가 다시 발생했다.
그 결과 스택오버플로우의 아래 정보를 보고
Setting(Ctrl + ,) -> "files eol" 검색 -> /n 선택
이렇게 하고 나면 기존 파일들은 LF로 변경해줘야 하지만 이제부터 생성하는 모든 파일들은 LF로 생성되기 때문에 매번 CRLF로 생성되는 파일들이 LF로 생성된다.
이 옵션을 바꿨던 기억이 있는데 원래 auto로 되어 있었다가 /r/n으로 선택했던 것 같다. 윈도우이기 때문에 auto로 했을 때도 CRLF로 생성된 것이고 /r/n으로 선택하면 오히려 CRLF로 fix해버리는 것인데 그 당시에 이해도 하지 못하고 따라해서 이런 실수가 생긴 것 같다.
windows 환경에서 vscode로 typescript + react를 시작하는 사람들이 eslint + prettier 설정과 에러 해결에 나처럼 애를 먹고 있을 것 같아 많은 도움이 되었으면 한다.
vscode typescript eslint에서 Delete "CR" 에러 해결 Fix Delete "CR" error in typescript+eslint+vscode
TypeScript
ReactJS
2020/12/30
2022/05/05 13:01
icoa
icoa
HTTP response status code(HTTP 응답 상태 코드)에 대해서
http
2023/02/26 12:38
icoa
icoa
위와 같은 명령어가 뜨면 docker service가 실행이 안되어있는것이다.
상태를 확인해 봐라 stop일 것이다
아래 명령어를 입력해 주자. 그리고 다시 명령어를 실행해보자
이렇게 하면 systemctl은 커맨드가 안 통한다. 위의 과정을 brew로 대신 할 수 있다.
Command + space 후 “docker”를 입력해서 도커를 실행시킨다.(도커 데스크탑, 클라이언트, 서버가 설치된 상태)
실행이 시작된다.
맥 도커 에러 Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
docker
2022/05/05 13:01
icoa
icoa
vim ~/.ssh/config로 재확인하고 git clone의 오타를 고쳐준다.
github Permission denined (public key )
2022/10/08 14:04
icoa
icoa

에러 메시지

copilot Your subscription has ended
구독 기간이 끝났다는 메시지를 띄우면서 not connect to server라는 말을 한다.
다른 계정으로 사용하다가 정지를 하는 경우 그리고 2개의 계정을 사용하고 있는 경우,
vscode 상에서 해당 계정과 다른 계정 둘다 copilot을 결제했을 때 구독되어 있지 않은 계정은 Sign out하면 된다. 아마도 구독중인 계정이 아닌 것이 존재하면 다른 계정에서 구독중이라도 사용불가로 막는 것으로 파악된다.

해결방법

코파일럿이 구독되어 있지 않은 계정을 vscode에서 로그아웃(Sign Out)한다.
→ copilot 삭제 → vscode를 껐다 키고 → copilot 설치 → github signin을 하면 해결된다.
copilot Your subscription has ended 에러
2022/09/27 02:31
icoa
icoa

babel.config.js를 수정한다.

node 프로젝트가 브라우저에 관련 있을 거라는 가정을 강하게 하고 있기 때문에 수정이 필요하다고 말한다.
Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db
2022/05/05 13:01
icoa
icoa
finnhubAPI에서 데이터가 넘어오지 않는 경우가 종종 발생했고, 이 경우 서버가 터졌다. 에러 처리를 해놓지 않았기 때문이다. 아래와 같은 메시지가 나타났다. 때마침 집에 인터넷이 고장나서 데이터가 넘어오지 않는 경우를 계속 볼 수 있었기 때문에 data가 null일 때 에러 처리를 위해 서버에 코드를 추가했다.
자 이렇게 하니까 서버가 터지지는 않는다.
그런데 이제 브라우저에는 data가 제대로 들어오지 않을 것이다. 에러메시지는 아래와 같다.
그러면 클라이언트 코드를 수정한다. 들어온 값을 찍어보니 초기값 null에서 받아온 값은 {}인 것을 볼 수 있다.
strapi 서버 500 에러
2022/05/05 13:00
icoa
icoa
[ESLint] 코드 저장시 autoformatting, var 키워드나 불필요한 return 등을 제거하는 방법
"Must use import to load ES Module..." #1346 @babel/eslint-parser 에러
‘₩’ 대신 ‘`’ 입력하기
들여쓰기 빨간색일 때 Editor.tabSize 맞추기
ESLint가 html에서 동작하지 않는 에러(plugin:jest/recommended, plugin/:jest/style 추가시 발생)
백준 메모리 초과) reduce 함수를 써서 순수함수로 문제를 풀었는데 메모리 초과 발생, for문으로 다른 배열을 변경시키는 방식은 정답 처리됨
ESLint error) Assignment to function parameter 'node'. 함수 매개변수에 재할당하지마라.
ESLint Error) ESLint: Unexpected use of file extension "mjs"
ESLint Error) The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype.
ESLint + Jest) 'test' is not defined
notion api는 예고없이 변경되는 것으로 악명이 높다. NotionAPI collectionQuery error Response code 400 (Bad Request)
ENOENT: no such file or directory, open 'XXX' npm run dev, npm install이 안될 때
.gitignore 파일을 만들지 않으면 node_modules를 전부 push한다.
npm audit fix란? —force 옵션을 줘도 되는가?
skipping missing collection view for block in react-notion-x
HTML table, tr, td 태그 쓰기, JSX에서 table 태그 쓰기, Warning: validateDOMNesting(...): <table> cannot appear as a child of <table>
Array.prototype.map() expects a return value from arrow function, array-callback-return 에러 해결하기
Nextjs에서 Redux 에러 해결하기 Error from chokidar (D:\): Error: EBUSY: resource busy or locked, lstat 'D:\pagefile.sys' // next-redux-wrapper // Module not found: Can't resolve 'react' // Module not found: Can't resolve 'redux-actions'
[vscode] 주석이 안될 때, 주석 단축키가 안 먹힐 때, Ctrl+/가 안될 때, 주석 단축키 바꾸는 방법 찾을 때? Comment shortcut not working in vscode?
NextJs+eslint 에러 해결, Cannot find name "div", Replace ....와 Insert .., Cannot find module 에러, 에러 메시지 미리 보기(Error Lens 사용)
[typescript + react + eslint + prettier] Missing return type on function
CRA로 Typescript + React에 eslint + prettier 적용하기(간단하게) Applying eslint + prettier to Typescript + React with CRA (simple)
vscode typescript eslint에서 Delete "CR" 에러 해결 Fix Delete "CR" error in typescript+eslint+vscode
json 형식 유의, 쌍따옴표와 쉼표
Made with