uncertainty

Issue

uncertainty

Issue

🧞

Issue

태그보기

사진보기

제목보기

태그검색

Type {} is not assignable to type CSSProperties. typescript

Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share your research! Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great answers.

https://stackoverflow.com/questions/64077051/type-is-not-assignable-to-type-cssproperties-typescript

falsy 값을 할당할 수 없어서 생기는 문제다. 여기서는 0이나 false 등을 예시로 들었고, null도 마찬가지다.

type is not assignable to type CSSproperties typescript

2022/03/30

2022/05/05 13:04

icoa

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

gssp-component-member | Next.js

On one of your page's components you attached either getStaticProps, getStaticPaths, or getServerSideProps as a member instead of as a separate export. These methods can not be attached in the same way as getInitialProps and must be their own export Move the method to it's own export from your page.

https://nextjs.org/docs/messages/gssp-component-member

이 오류가 발생한 이유

페이지 구성 요소 중 하나 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

인식이 이상하게 frontend에서 잡히고 있어서

커밋을 할 때 루트 디렉터리 기준으로 잡히지 않는 현상이 있다.

찾아보니 이렇게 나온다.

https://zetawiki.com/wiki/하위_.git_폴더_모두_제거

지우는 커맨드를 입력해서 지워준다.

이어서 frontend 프로젝트를 커밋해서 올리는 과정이다.. 캐시를 지워줘야 변경사항이 적용되어 깃이 트래킹한다.

푸시 성공

.git이 프로젝트 내부의 frontend 폴더에도 들어있는 경우 해결방법

Tips and tricks to fix Bluetooth connection issues on Mac

We rely on Bluetooth for more and more devices, and while the wireless standard is very convenient, it can be really frustrating when our peripherals don't work consistently. Read along for five tips and tricks to fix Mac Bluetooth issues, including resetting your Bluetooth module and ways to remove interference.

https://9to5mac.com/2022/02/16/how-to-fix-mac-bluetooth-issues/

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

Parsing error : Cannot find module 'next/babel'

https://stackoverflow.com/questions/68163385/parsing-error-cannot-find-module-next-babel

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

Parsing error: Cannot find module 'next/babel'

2022/03/24

2022/05/05 13:03

icoa

skipping missing collection view for block 6d8aea24-ad2f-4290-b689-9049275b88a0라는 에러가 나면서 컬렉션 뷰가 보여지지 않는 문제가 있었다. 티스토리 블로그의 글들을 노션으로 전부 이동시키고 나서 확인해보니 이렇다. 아래의 사이트에서 이미 이슈에 대한 논의와 해결이 있었다.

react-notion-x - githubmemory

react-notion-x repo issues

https://githubmemory.com/repo/NotionX/react-notion-x/issues?cursor=Y3Vyc29yOnYyOpK5MjAyMS0wOC0wOFQwNjo1MjoyOCswNDowMM45a280&pagination=next&page=2

react-notion-x 의 4.7.10 버전에서 업데이트되었다고 하는데 내가 사용하고 있는 버전이 더 낮은 것을 발견했고 이를 업데이트해주었다.

그래도 안되서 찾아보니 오늘 api를 변경시켜서 collection endpoint가 손상되어 작동이 안된다고 한다. 찾아보고 있다는 글이 1시간 전에 떠있다.(현재 211006. 12:52PM)

Collection Views Not working anymore - githubmemory

Collection Views Not working anymore

https://githubmemory.com/repo/NotionX/react-notion-x/issues/139

skipping missing collection view for block in react-notion-x

ReactJS

2021/10/06

2022/05/05 13:02

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

Array.prototype.map() expects a return value from arrow function

코드를 보니 MockData(timelines)를 map()을 사용하여 뿌려주는 Arrow function이 ( ( item ) => ( return할 값 ) ) 의 구조를 지켜야 한다는 사실을 알게 되었고, 아래의 경우는 Friends의 예시이지만 저렇게 return을 쓰지 않고 소괄호() 안에 Return할 값을 넣어주어 에러를 해결할 수 있었다.(쉽게 말해 화살표 다음에 리턴하려는 값을 중괄호로 감싸는 게 아니라 소괄호로 감싸야 한다.

Array.prototype.map() expects a return value from arrow function, array-callback-return 에러 해결하기

Nextjs에서 React에 적용된 Redux 코드를 적용해보는 과정에서 실행할 때 에러가 많이 나왔다. 이를 해결한 방법을 정리해보려고 한다.

# 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 사용)

Missing return type on function 이 자꾸 떠서 보기 싫다. 그래서 rules 부분을 아래와 같이 설정해준다.

아래 설정에서 none을 warn으로 변경하면 경고를 띄우고, error를 띄우면 에러를 발생시킨다.

[typescript + react + eslint + prettier] Missing return type on function

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)

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

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

이 글을 작성하는 이유

400, 401, 402, 403, 404는 자주 만나봤는데 가끔 마주치는 에러 코드에 대해 바로 떠오르지 않는 경우가 있는데, 이번에 HTTP response status code에 대해 한번 정리해본다.

HTTP 응답 상태 코드

•

100 Continue

클라이언트가 서버로 보낸 요청에 문제가 없으니 다음 요청을 보내라는 뜻이고, 다음 요청할 게 없으면 무시하면 된다.

이를 수행하게 하려면 클라이언트는 첫 요청에서 Expect :100-continue를 헤더로 보낸다.

•

101 Switching Protocols

서버가 전환되는 프로토콜. 클라이언트의 Upgrade (en-US)에 명시되어 있다. 서버는 이 헤더를 응답에 포함시킨다.

예제

•

102 Processing

deprecated

HTTP response status code(HTTP 응답 상태 코드)에 대해서

http

2023/02/26 12:38

icoa

evan-moon.github.io

위와 같은 명령어가 뜨면 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

league-cat.tistory.com

git clone git@github.com:BonhaengLee/nextjs-cornerstone.git
Cloning into 'nextjs-cornerstone'...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

vim ~/.ssh/config로 재확인하고 git clone의 오타를 고쳐준다.

github Permission denined (public key )

2022/10/08 14:04

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

babel.config.js를 수정한다.

Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db

2022/05/05 13:01

icoa

finnhubAPI에서 데이터가 넘어오지 않는 경우가 종종 발생했고, 이 경우 서버가 터졌다. 에러 처리를 해놓지 않았기 때문이다. 아래와 같은 메시지가 나타났다. 때마침 집에 인터넷이 고장나서 데이터가 넘어오지 않는 경우를 계속 볼 수 있었기 때문에 data가 null일 때 에러 처리를 위해 서버에 코드를 추가했다.

자 이렇게 하니까 서버가 터지지는 않는다.

그런데 이제 브라우저에는 data가 제대로 들어오지 않을 것이다. 에러메시지는 아래와 같다.

그러면 클라이언트 코드를 수정한다. 들어온 값을 찍어보니 초기값 null에서 받아온 값은 {}인 것을 볼 수 있다.

strapi 서버 500 에러

2022/05/05 13:00

icoa

Issue

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

이 오류가 발생한 이유

그것을 고칠 수있는 가능한 방법

이어서 frontend 프로젝트를 커밋해서 올리는 과정이다.. 캐시를 지워줘야 변경사항이 적용되어 깃이 트래킹한다.

푸시 성공

Mac의 Bluetooth 모듈 재설정

macOS 몬테레이에서

macOS Big Sur 또는 이전 버전에서

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

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

Array.prototype.map() expects a return value from arrow function

# 1

# 2

# 3

# 시작

# 시작

# 1

Cannot find name "div" 에러

# 2

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

CRA

ESLINT + PRETTIER

ESLINT

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

# 해결

이 글을 작성하는 이유

HTTP 응답 상태 코드

에러 메시지

해결방법

babel.config.js를 수정한다.