Just Do IT!

프로젝트를 하던 와중에, 이런 에러가 발생했다. 구글링해보니 useEffect 관련 오류라서 오류 해결한 걸 남겨보려고 한다.  useState() 는 비동기로 상태값을 변경하기 때문에 렌더링 시점에서 상태가 개발자의 의도대로 업데이트 되지 않은 상태일 수도 있다. 그래서 나는 useEffect를 이용해 특정 값이 바뀔때마다 무적권 해당 콜백함수가 실행되도록 하게 했는데, 그렇게 하다보니 저 에러가 발생한 것이었다. 무한 루프의 warning... 이걸 해결하는 방법은 두 가지가 있다. 1. useEffect 안으로 해당 무한 렌더링 되는 함수를 아예 집어 넣기2. useCallback 함수를 이용해서 특정 값이 변화하지 않을 때는 이전 값을 재활용해서 쓰도록 하기  이 두 가지가 있는데, 나는 첫 번째..

nextjs 공부 겸 알고리즘 전용 블로그를 만들어보고자 프로젝트를 하고 있는데, link 코드를 작성하다가 오류가 나서 기록해본다. import Link from "next/link"; import navlinks from "../data/navlinks"; const Nav = () => { return ( {navlinks.map((nav) => ( {nav.title} ))} ); }; export default Nav; 위의 코드가 그 코드인데, npm run dev를 하고 연 순간 오류가 발생했다. 이런 오류였는데, 처음에는 뭐가 뭔지 몰라 당황했는데 직역해보니 간단했다. a태그를 지우거나 Link에 legacyBehavior를 넣어주라는 것이었다. 그래서 공식 문서를 조금 찾아보니, next..

인프런에서 nextjs 무료 강의가 있어서 듣고 있다. 프로젝트 생성하고 vscode에서 열어서 파일들을 살펴보고 있는데, 아무것도 안하고 에러가 났다. main.ts 파일을 열어보니, 이러한 에러가 나왔다. 그래서 바로 해결하기 위해 구글링을 했고, 해결할 수 있었다. 문제 원인 OS 별로 줄바꿈을 하는 방식이 다르기 때문에 발생하는 문제이다. 줄바꿈 방식에는 CR, LF, CRLF 방식이 존재한다. CR : Carrige Return / LF : Line Feed(LF)의 약자이다. 줄바꿈할 때 커서를 아랫줄로 이동시켜주는 것이 LF, 왼쪽 끝단으로 이동시켜 주는 것이 CR이다. Linux 기반의 OS는 LF를 default로 사용하고, Window OS에서는 CR, 그리고 CRLF를 default ..

요즘 인프런에서 따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기 강의를 듣고있는데, 강의 코드를 치면서 배우는 와중 오류가 발생했다. 리액트 서버와 노드 서버를 동시에 열기 위해서 package.json 을 아래와 같이 수정했다. 리액트로 만든 frontend 서버는 'npm run frontend'로 열고,node로 만든 backend 서버는 'npm run backend'로 열기로 명령어를 지정했는데,두 서버를 동시에 열기 위해서 'dev'라는 명령어를 따로 만든 것이다.(강의 그대로 수정했다.) 그런데, 중간에 api가 제대로 작동하는지 보고 싶어서 서버를 켰는데,아래와 같은 오류가 나왔다. 원인은? Node.js 버전 호환성 문제로 웹팩(webpack)이 해당 Node.js 버전과 함..

과제 전형 진행하던 와중에 저런 문구가 나왔다. useEffect에 나온 경고 문구였고 실행하는데는 문제가 없지만 이상하게 거슬려서(?) 구글에 그대로 쳐보았고, 역시나 같은 경고문을 받은 사람들의 글들이 나왔다. 원인 ' useEffect 내부에서 실행된 함수 ' 에서 사용되는 변수를 useEffect의 배열안에 넣어주지 않았기 때문에 발생한다고 한다. 경고문이 나온 코드에서는 useEffect 안의 함수를 따로 바깥으로 빼내서 작성하고 그 함수만 넣어주었는데, 그래서 이 경고문이 나오지 않았나 싶다. 해결 방법 함수의 선언을 useEffect 내부로 옮겼고, 함수에서 사용되는 변수를 [] 안에 넣었더니 바로 오류가 해결되었다. 다른 방법도 있다. 바로 useCallback()을 사용하는 방법이다. 이..

styled-components 설치하려는데 자꾸 이 에러가 나와서 뭔가 하고 구글링으로 검색했다. 원인은, latest version of styled-components is v6 but there is some issue while doing npm i styled-components styled-components version6 이후로 에러가 발생한다는 것이었다. version6 이후부터는 저 명령어를 써서 설치하면 안된다는 것이었다...! npm install styled-components@latest // use yarn yarn install styled-components 이렇게 @latest 를 추가해서 최신 버전을 다운받으면 해결 완료했다.

firebase를 이용해서 로그인 기능을 구현하고 난 뒤 로그아웃 기능까지 구현 완료했다. 그리고 난 뒤에 currentUser가 있을 때는 로그아웃 버튼을, 없을 때는 로그인 버튼이 보이도록 삼항 연산자를 이용해 구현했는데, 새로고침하니까 로그인이 되었음에도 로그인 버튼이 웹페이지에 보였다. 그래서 로그인 버튼을 다시 눌렀더니, 로그인이 되어 있다는 의미로 로그아웃 버튼으로 다시 바뀌는 것이다. 이런 버그는 왜 생기는 걸까, 고민하다가 currentUser가 있다는 것보다 렌더링이 먼저 되서 그런거라는 생각이 들었다. 그래서 setTimeout() 함수를 이용해서 currentUser가 있는 지 확인하고 있다면 '로그아웃'을, 없다면 '로그인' 버튼이 나오도록 구현했다. 아래 코드가 해결한 코드의 일부..

header 컴포넌트에서 useNavigate()를 사용했는데 아래와 같은 에러가 발생했다. useNavigate() may be used only in the context of a component. 이런 오류였는데 뭔지 궁금해서 구글링 해보다가 해결 방법을 알게 되었다. useNavigate()는 Router 구성 요소의 컨텍스트에서만 사용할 수 있다는 점이다. 오류가 났던 원인은 거기에서 있었다. header가 모든 페이지에서 사용되기 때문에 App.tsx 파일에서 header를 추가했었다. // App.tsx import Router from "./shared/Router"; import Header from "./components/header/Header"; import Footer from..

TIL에도 언급했듯이 vercel로 프로젝트를 배포했더니, api가 받아와지 않고 아래와 같은 에러가 발생했다. Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. This request has been blocked; the content must be served over HTTPS. 이 에러를 구글링해보니 원인과 해결 방법을 알 수 가 있었다. 원인 암호화된 HTTPS 페이지에 암호화되지 않은 HTTP를 통해 요청할 때 발생하는 에러 https 사이트에서 ajax를 사용해서 비동기로 http 사이트에 request를 요청해서 문제가 발생 이러한 원인 때문에 Mi..

폰으로 QR코드 인식 할 때 로딩이 좀 길어진다 싶더나 저런 에러가 나왔다. Network response timed out. 로딩이 길어진다 싶더니 저 에러가 나온게 세번이라서 바로 구글에 검색해봐서 지금은 오류를 해결했다. 그런데 혹시 까먹을 수도 있으니 에러 해결을 위해 시도했던 방법들을 정리해보기로 했다. 동일한 네트워크를 사용하고 있는지 확인 처음에는 내 노트북과 핸드폰의 wifi가 다른지 확인해봤다. 그랬더니 똑같은데...? 다른 wifi를 사용한다면 이런 오류가 발생한다고 해서 둘 다 들어가봤는데 동일했다. 그래도 혹시 모르니 핸드폰의 wifi를 껐다가 다시 실행시켜봐도 똑같은 오류 발생. +) 혹시라도 같은 오류가 생겼을 때 제일 먼저 확인해야 할건 맞는 것 같다. 방화벽 설정 확인하기 설..