문제 정의 Next.js에서 Jest를 사용할때 RSC에 async를 붙일경우 에러가 발생하는 오류를 발견하였습니다. async를 붙이기전 export default function Page() { return <h1>App Router</h1>; } async 붙인후 export default async functio...

개요 커스텀모달이 필요할 것 같아 모달 관련 라이브러리를 사용하지 않고 Redux-toolkit을 이용해서 직접 만들려고 하니 오류가 저를 기쁘게 반겨주었습니다. A non-serializable value was detected in an action, in the path: `payload.Component`. Value: ƒ Login(par...

개요 React일 경우 저는 http-middleware-proxy을 이용한 방법을 자주 사용했습니다. Next.js에서는 다른 방식을 사용해야 했습니다. 해결방안 next.js에서는 next.config.mjs에서 rewrites을 추가해서 해당 주소로 요청을 보낼 때 cors 우회를 할 수 있었습니다. /** @type {import('...

개요 Next.js를 사용하다보면 React 라이브러리를 설치해서 해당 컴포넌트를 사용하게 될때 SSR를 지원하지 않는다면 오류가 발생합니다. 이것은 Next.js가 SSR 기반으로 각 페이지들을 pre-rendering 하기 때문에 발생하는 것 입니다. 저 같은 @toast-ui/react-editor를 사용할때 발생했습니다. 해당 문제를 해결...

개요 Next.js 가장 최신인 14 버전을 사용했고 Toast ui는 @toast-ui/react-editor 3.2.3 버전을 사용했습니다. Toast ui 설치하기 Next.js로 모든 세팅이 끝난다는것을 가정하고 Toast ui를 설치하겠습니다. https://www.npmjs.com/package/@toast-ui/react-edito...

개요 최근 팀프로젝트를 진행하던 도중 카카오맵을 이용하다 현재위치를 가져와야 하는 상황이 발생했고 Geolocation API을 통해 React에서 현재 위치를 가져올수 있었습니다. Geolocation API는 브라우저에서 지원해주는 웹 애플리케이션 위치 정보 API입니다. 개념 navigator라는 프로퍼티 안에 geolocation을...

참여하게 된 계기 퍼블리셔로 일하고 프론트엔드 공부를 한지 약 1년이 다 되어가는데 아직 실무 경험은 없었기 때문에 실무에서 어떤 것을 쓰는 것이 좋을지 지금 내 이력서에는 부족한 것이 무엇인지 내가 잘 배우고 있는지 궁금해서 프리온보딩을 신청해서 듣기로 정했습니다. 사전과제 사전과제는 그렇게 어렵지 않았습니다 간단 todolist 만드는것과 질...

HTTP 메서드에 대해서 HTTP 메서드는 웹브라우저(클라이언트) 와 웹 서버간의 이루어지는 요청(request)과 응답(response) 데이터를 전송하는 방식입니다. 서버가 어떤 방식으로 동작할지 지정하는 요청(request)을 보내는 행동 이라고 보면 됩니다. HTTP 메서드의 종류 HTTP 메서드는 총 9가지를 가지고 있는데 그중에서 5...