front (12) 썸네일형 리스트형 [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와 달리 콘텐츠 관리와 프론트엔드 디스플레이를 분리한 것을 말한다. 콘텐츠 관리는 특정한 백엔드 시스템에서 이루어지고, 해당 콘텐.. [Javascript] 배열 추가, 삭제, 수정 메서드 splice 코딩테스트를 준비하다 보니 메서드에 대해서 제대로 알고 있지 못하다는 생각이 들었다. 해당 메서드가 기존 배열을 수정하는지 안 하는지, 어떤 것을 리턴하는지 등을 정확하게 알고 있어야 코드를 클린 하게 짤 수 있을 거 같다. 따라서 앞으로 코테 문제에 사용했던 메서드들을 정리하려 한다. 첫 스타트는 splice! 1. splice array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) splice는 배열의 기존 요소를 삭제 또는 교체 하거나 새 요소를 추가해서 배열의 내용을 변경하는 메서드이다. splice를 통해 배열을 수정하면, 기존 배열도 같이 변경된다. 1) start 배열 변경의 시작 인덱스를 입력한다. 입력된 인덱스부터 배열이 변경된다. 음수.. [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 2 다음
