Just Do IT!

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가 있는 지 확인하고 있다면 '로그아웃'을, 없다면 '로그인' 버튼이 나오도록 구현했다. 아래 코드가 해결한 코드의 일부..