소셜 로그인을 구현하던 도중 다른 프론트엔드 개발자분과 next-auth를 사용해보기로 했다. 쉬운 구현 속성으로 할 수 있는 다양한 기능 access token 및 refresh token 생성 가능 소셜 정보 가져오기 가능 여러가지 기능을 지원하고 있어 매우 좋아보였고, next와의 호환도 잘 될것 같아 한번 사용해보기로 했다. 사용하는 과정에서 여러가지 에러들을 만날 수 있었다. Error 1. 앱 관리자 설정 오류(KOE006) redirect 경로를 권장하는 주소와 다르게 해서 나타나는 오류였다. next-auth를 사용할 때에는 꼭 /api/auth/callback/[provider]로 지정해야한다. 왜 그런지는 나중에 알 수 있었다. 에러를 잡고나서 oauth는 redirect url로 au..

내가 까먹지 않으려고 저장해놓는 정보들 react 설치 npx create-react-app 프로젝트명 index.html root안에 app.js를 넣어서 구현함 렌더링 되는 파일이긴 하나 실제 코딩은 app.js에서 한다고 보면 됨 node_modules 프로젝트에 사용할 라이브러리를 모아 놓은 폴더 src 주된 source들이 있는 폴더 public static 파일(정적인 파일)들을 보관해놓은 폴더 package.json 설치한 라이브러리들을 모아 놓은 목록 기초문법 className - class라는 키워드가 이미 등록되어 있으므로 class 대신 className을 씀 {} - 변수명, 함수 등을 {}안에 넣어 바인딩 한다 style={ { overflow: 'hidden' } } - 태그안에..

컴포넌트란? 사전적 의미로는 구성 요소를 뜻한다. 이러한 의미 그대로 컴포넌트란 UI를 구성하는 개별적인 요소로써, 이것들을 조합하여 프로그래밍 할 수 있다. 컴포넌트를 사용하게 되면 여러가지 장점이 있다 1. 긴 html 태그들을 한 줄로 깔끔하게 치환할 수 있다. //Before function App() { return ( Logo About Work Contact title contents Logo About Work Contact contact me 010-1234-5678 dev-ee.tistory.com ⓒ2022. dev-ee all rights reserved ); }; //After function App() { return ( title contents ); }; 2. 각각 나눠져 있..

react-router-dom이란? 리액트에서 라우팅할 때 사용하는 라이브러리로, URL 주소를 감지하여 다른 페이지를 보여주는 역할을 한다. 리액트는 Single Page Application인데 SPA에서는 다른 페이지를 가져오고자 할 때 새로 불러오는 것이 아니라 하나의 페이지 안에서 데이터를 가져온다. 설치 npm install react-router-dom 사용 이동할 각 페이지 및 컴포넌트를 만든 후 App.js에 BrowserRouter, Routes, Route를 이용해 라우팅해준다. *6 버전으로 업그레이드하면서 Switch가 Routes로 변경되고, exact옵션이 삭제 되는 등 문법이 바뀌었으므로 버전에 주의하여 사용한다. import { BrowserRouter, Route, Rou..

State란 리액트의 중요한 개념 중 하나로, 컴포넌트 내에서 관리되는 변수를 말한다. state는 값을 변화시킬 수 있다. 따라서 동적인 데이터(자주 바뀌는 중요한 데이터)를 사용할때 state를 사용한다. 리액트는 state가 바뀌게 되면 자동으로 render를 다시 해준다. (단순히 변수에 다른 값을 할당할 때는 render가 되지 않는다) state를 변경할 때는 setState함수를 이용하여 변경할 수 있다. 솔직히 처음 공부했을 때는 뭔말인지 이해가 가지 않았다. 리액트를 여러번 사용해보면서 내가 익힌 것을 토대로 설명해보자면 state값이 바뀔 때 자동으로 render해준다는 것이 가장 중요한 개념인것 같다. SPA의 장점은 새로고침 없이 자연스럽게 데이터를 다르게 보여주는 것인데, 이러한 ..