TailWind Mui를 사용했던 프로젝트를 tailwind로 마이그레이션 하기 위해 MUI를 밀고 tailwind를 설치했다. 이후 tailwind가 적용되지 않는 문제가 발생했는데, 폴더의 구조나 layout, global.css 등의 파일을 모두 확인해보아도 적용되지 않았다. solution 내 문제는 아니었지만 작성해보자면...

Next version 14 Error Next v13에서 14로 리팩토링 하던 와중에 발생한 에러 redux-persist failed to create sync storage. falling back to noop storage. redux-persist가 동기화된 스토리지를 생성하지 못하고 noop으로 대체된 ...

TailWind Tailwind는 HTML 안에서 CSS 스타일을 만들 수 있게 해주는 프레임 워크이다. Next.js를 사용할 때 서버 컴포넌트를 만들어야 한다면 styled-components는 적합하지 않다. styled-components는 런타임에서 실행되어 스타일 요소를 DOM에 주입하는 방식으로 클라이언트 컴포넌트에서 동작하...

Next v12를 기준으로 합니다. Head Next.js v14 에서는 Metadata를 가져와 그대로 사용할 수 있었다. v12에는 없기 때문에 import Head from “next/head”를 가져와서 metadata 를 작성하고, 동적 메타 데이터를 작성하는 방식과 유사하게, 일일이 작성하는 것이 아닌 동적으로 작성할 ...

Next 기존 fetching data 기존의 데이터 페칭은 클라이언트에서 일어난다. 가져온 데이터로 useState를 설정하고, 설정된 데이터를 활용하여야 하며 이러한 작업은 클라이언트 컴포넌트, 즉 브라우저가 API 요청을 보내는 것을 기반으로 하며, 브라우저에서 보내는 API 요청은 필연적으로 Loading 상태를 사용자가 인지할 수...

Next v14를 기준으로 합니다. 기존 Next.js 를 page router 정도의 개념으로 생각하며 사용해왔기에, SSR 등의 규칙과 14버전의 업데이트에 맞춰 다시 정리해보는 글. Next.js v14 React Framework React는 자바스크립트 라이브러리이다. 라이브러리와 프레임워크에 대한 개념도 ...

Next next-auth Google 구글 Cloud 참고자료 상단 로고 옆 리스트 선택 > 새 프로젝트 생성 프로젝트를 만들고 좌측 메뉴바에서 사용자 인증 정보의 동의 화면 구성 클릭 외부 버튼 클릭 후 동의 화면에서 앱 이름과 메일 주소 등의 정보 입력하고 다음 버튼을 눌러 저장한다.(앱 도메인 등의 작성란은 빈...

Next next-auth 참고자료 간편한 소셜 로그인을 위한 라이브러리이다. 이전 게시글에서 작성했던 kakao API의 code, access token을 사용하여 해당 유저의 정보를 가져오는 로직을 단순화하게 사용할 수 있다. 또한 구글, 애플, 네이버, 카카오 등 라이브러리가 지원하는 auth가 많기 때문에 사용이 간편하다...

Next 가입된 소셜 계정에 따라 로그인을 간편하게 할 수 있는 소셜 로그인 구현 본 포스팅은 프론트 단에서만 이뤄진 요청, 서버까지 구현 시, 카카오에서 사용자에게 전송된 인증 코드를 갖고, 서버에서 카카오톡으로 유효한 인증 요청 등의 과정을 거친다. Kakao API 카카오 개발 카카오에서는 네비, 검색, 지도 등의 다양한 ...

Next SSR 환경에서 리덕스를 사용할 때에는 추가 작업이 필요하다. 서버 사이드 환경에서 스토어를 생성하고, 이후 클라이언트 사이드 환경에서 나머지 로직들을 수행하며 만들어진 스토어가 다르기 때문에 이 둘을 합쳐주는 과정이 필요하다. 또한 유저가 페이지를 이동하며 페이지를 요청할 때마다 스토어가 생성되기 때문에 리덕스 스토어가 여러 ...