front/next.js (4) 썸네일형 리스트형 [Next.js] next-themes로 Nextjs에서 간단히 다크모드 구현하기 (feat. tailwind) 1. next-themesnext-themes는 next.js에서 쉽게 다크 모드 및 기타 테마를 구현할 수 있도록 도와주는 라이브러리이다.해당 라이브러리를 사용하면 정말 간단하게 다크 모드를 구현할 수 있다. 아래 사용방법은 nextjs + tailwind에서 다크모드를 구현하는 방법이다. 2. 사용방법1) 설치npm install next-themesyarn add next-themes npm을 통해 next-themes를 설치해 준다. 2) tailwind css와 연동// tailwind.config.jsmodule.exports = { darkMode: 'class', // 다크 모드를 클래스 기반으로 설정 content: [ './app/**/*.{js,ts,jsx,tsx}',.. [Next.js] Next-auth 사용방법 & 구글 연결하기 1. Next-auth란? Next-auth는 Next.js에서 주로 사용하는 오픈 소스 인증 라이브러리이다. 소셜 로그인을 간단하게 구현할 수 있도록 도와주는 역할을 한다고 생각하면 된다. google, kakao, facebook, instagram, naver 등 다양한 소셜 로그인을 지원한다. 2. 사용방법(구글 로그인 연결) next-auth를 통해 구글 로그인 연결하는 방법을 알아보자. 1) 구글 key 발급 우선, 구글 로그인을 연결하기 위해선 OAuth ID와 비밀번호가 필요하다. 우선, 구글 API로 들어간 후, Oauth 동의 화면으로 들어간다. 위 사진을 클릭하면 해당 페이지로 이동된다. 그 후, 앱 이름, 지원 메일을 적고 저장 버튼을 클릭한다. 총 4페이지가 나오는데 * 표시되어 .. Headless CMS란? (feat. Sanity) 1. CMS란? CMS는 Content Management System의 약자로, 콘텐츠를 관리하는 시스템을 의미한다. 콘텐츠 관리와 프론트엔드 디스플레이를 결합한 통합 시스템이라 생각하면 된다. 사용자가 콘텐츠를 생성, 편집 및 관리할 수 있는 관리자 인터페이스를 제공하고 이를 데이터 베이스에 저장하는 역할을 한다. 관리자용 인터페이스가 제공되기 때문에 개발자가 아니어도 쉽게 콘텐츠를 관리할 수 있다. 단, 컨텐츠와 프론트엔드 화면이 연결되어 잇기 때문에 콘텐츠를 수정했을 때, 화면에 영향이 갈 수도 있다. 2. HeadlessCMS란? HeadlessCMS는 일반적인 CMS와 달리 콘텐츠 관리와 프론트엔드 디스플레이를 분리한 것을 말한다. 콘텐츠 관리는 특정한 백엔드 시스템에서 이루어지고, 해당 콘텐.. [Error] Next.js & styled-components, 새로고침 시 css 초기화 에러 발생 이유와 해결방법 1. Next.js Error Next.js에서 새로고침 시 css가 초기화되는 오류가 발생했다. 다시 저장하면 제대로 css가 적용되지만, 새로고침만 하면 css가 먹지 않고 초기의 모습 그대로 출력됐다. 2. 에러 생성 이유 구글에 해당 에러에 대한 해결방안을 검색해보자, styled-components와 렌더링 문제라는 것을 알게 되었다. 1) Next.js 렌더링 과정 해당 에러의 원인을 알기 위해선, Next.js의 렌더링 과정을 먼저 알아야 한다. Next.js는 서버에서 모든 페이지를 미리 렌더링(pre-render) 한다. 그 후, 서버는 클라이언트에 미리 렌더링 한 HTML 문서를 전달한다. 브라우저는 서버에서 받은 HTML을 문서를 화면에 렌더링 하면서 해당 문서에 존재하는 자바스크립트.. 이전 1 다음
