Just Do IT!

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

요즘 next.js로 정적 블로그 만들기 관련 글들을 살펴보다가 공통적으로 나오는 contentlayer에 대해 알게 되었다. next.js 13버전에서 사용했던 것 같은데, next.js14에서도 적용할 수가 있었다. 아직 블로그 글을 작성하지 않아서 모르는데, 추후에 확실히 적용되는지 볼 예정이다. 우선, Next.js의 getStaticPaths 함수에 대해 알아야 한다. getStaticPaths? 정적 생성(static generation)을 위한 경로를 동적으로 설정하는 메서드이다. 이 함수는 next.js 에서 동적 경로를 사용하는 페이지에 사용된다. getStaticPaths 함수는 비동기 함수로 작성이 되고, 경로 데이터를 동적으로 생성하는 로직을 구현해야 한다. 이 함수의 반환 값은 객..

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

사이드 프로젝트에서 tooltip에 대해 알게 되었다.뭐인지 알고 있기는 했지만 실제로 구현해본 적이 없기도 하고 css로만 구현하는 것 같아서 뭔가 헷갈리기도 했다.아무튼 나는 나중으로 미루고(?) 있었는데 메인 페이지 UI 구현하면서 실제로 구현해봤다.물론 다른 프론트엔드 개발자 분이 구현하신 tooltip 파일을 보고 만든 것이다. 그런데 여러 페이지마다 쓰이고 있어서 모든 폴더마다 새로 만들게 아니라 custom hook으로 만들어 쓰는게 더 효율적일 것 같아서 다른 분의 코드를 토대로 구현했다.          tooltip이란? 해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과를 툴팁(tooltip) 효과라고 한다.       useTooltip 코드 tooltip에는 꼭 생각해..

취업 준비를 하면서, 포토폴리오에 대한 고민이 깊어졌다. 원래 있던 노션 포토폴리오가 있는데, 이력서를 갈아엎고 수정하는 과정에서 방치되었다. 그래서 종종 포토폴리오를 요구하는 회사는 지원하지 못했었는데, next.js 공부도 할 겸 개인 프로젝트로 포토폴리오를 만들어보기로 했다. (tmi, 이렇게 블로그에 적어놓으면 미래의 내가 찔려서라도 만들 것 같았다...) 그래서 잊어버리지 않기 위해 초기 세팅에 대한 글을 적어본다. 1. Next.js 설치하기 npx create-next-app@latest [projectName] react로 프로젝트 세팅할 때와 비슷하지만 다른 명령어이다. projectName은 본인이 원하는 이름으로 작성하면 끝. 2. 이어지는 질문들 대답하기 2-1. Would you ..

tailwind CSS란? 맞춤형 사용자 인터페이스를 빠르게 구축하기 위한 유틸리티 우선 CSS 프레임워크이다. 공식 홈페이지: https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com 모든 HTML 파일, JavaScript 구성 요소 등에서 클래스 이름을 검색하고 해당 스타일을 생성한 다음 정적 CSS 파일에 작성하여 작동하기 때문에 빠른 코드 작..

인프런에서 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 ..

react-dropzone 라이브러리란? 파일 업로드 라이브러리이다. 간단하게 drag&drop으로도 사용 가능하고 클릭하여 파일을 업로드할 수도 있다. 그리고 이미지 썸네일 미리보기를 지원하며 멀티 업로드 기능 역시 지원한다. https://www.npmjs.com/package/react-dropzone https://www.npmjs.com/package/react-dropzone react-dropzone Simple React hook to create a HTML5-compliant drag'n'drop zone for files. Documentation and examples at https://react-dropzone.js.org. Source code at https://github...

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

JSON Web Token이란? JSON 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim 기반의 Web Token 토큰 자체를 정보로 사용하는 Self-Contained 방식으로 정보를 안전하게 전달한다. 주로 회원 인증이나 정보 전달에 사용된다. 공식 홈페이지에서 더 많은 정보를 알 수 있다. https://jwt.io/ JWT.IO JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. jwt.io JWT는 왜 사용할까? 유저가 로그인에 성공한 후에는 access token이라고 하는 암호화된 유저 정보를 첨부해서 request를 보내게 된..