Chunho’s DevLife

Facebook Login을 구현하기 위해 먼저 appId를 발급받아야 한다. https://developers.facebook.com/?locale=ko_KR Meta for Developers Conversations 2022: 제1회 Meta 비즈니스 메시지 콘퍼런스 가장 인기 있는 메시지 플랫폼에서 더욱 빠르고 개선된 경험을 구축하고자 하는 비즈니스, 개발자 및 파트너를 위한 제1회 콘퍼런스를 개최 developers.facebook.com 위 url에서 발급받을 수 있으며, 발급받는 과정은 생략하겠다. npm install react-facebook-login 타입스크립트일 경우 @types/react-facebook-login 명령어를 통해 라이브러리를 설치해준다. 나같은 경우 peer de..

로그인 방식에 구글 계정으로 로그인을 추가하기 위해 google cloud platform에서 Client ID를 발급받고, react-google-login 라이브러리를 사용하여 access token을 받아오던 중 예상하지 못한 에러가 발생했다. 위 과정까지는 https://jforj.tistory.com/239 블로그를 참고하였다. You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. 라는 내용의 에러 메세지로, 새로운 라이브러리를 찾아 적용하기 위해 @react-oauth/google@latest를 설치하였다. ..

NextJS에서 SSR을 하는 중, 서버사이드에서 데이터를 받아올 때 url에 있는 id값을 사용해 서버에 요청을 해야했다. 이 때 getServerSideProps가 제공하는 context 파라미터를 사용하여 query 정보를 가져올 수 있었다. context 파라미터에는 query 데이터를 제외하고도 여러가지 정보가 포함되어 있다. url에 있는 query를 가져오기 위해서는 context.query를 사용하면 된다. export async function getServerSideProps(context: GetServerSidePropsContext) { const cookie = getServerSidePropsUserCookie(context) const props: IProps = { data..

최근 NextJS로 SSR을 적용한 회사 프로젝트를 진행하며, Session 인증 방식을 사용하여 로그인을 할 때, 클라이언트에 쿠키 정보가 저장되지 않아 getServerSideProps 함수를 사용하여 SSR를 할때 문제가 생기는 Issue가 있었다. [문제 발생] API 호출시 사용자 로그인 여부 확인 불가 (클라이언트에 쿠기값이 없음) getServerSideProps 사용자 정보가 필요한 API 호출시 사용자 정보 없음 -> 오류 -> 특정 정보 안내려옴 / 클라이언트쪽에서만 호출 가능 [문제 원인 파악] 문제 1. 클라이언트에서 api 호출시 브라우저에 저장된 쿠키 정보를 자동으로 가져와서 넣어준다. (withCredentials) -> getServerSideProps는 서버측에서 실행되므로..

모달창이 닫힐 때 에니메이션을 주기 위해 우선 모달창을 제어하는 state를 제외하고 에니메이션을 제어 할 state를 하나 더 만들어주었다. const [animationOn, setAnimationOn] = useState(false) 이후 닫기 버튼 클릭 시 animationOn을 true로 바꿔주고, setTimeout을 사용하여 0.5초 후 animationOn과 modalOpen을 false로 바꿔주면 된다. setAnimationOn(true) setTimeout(() => { setAnimationOn(false) setModalOpen(false) }, 500) animationOn이 true로 설정되어 있을 때, 아래와 같이 에니메이션 css를 적용해주어 효과를 입힐 수 있었다.ㅁ $..

const [modalOpen, setModalOpen] = useState(false) const el = useRef() useEffect(() => { window.addEventListener('click', handleCloseModal) return () => { window.removeEventListener('click', handleCloseModal) } }, [modalOpen]) const handleCloseModal = (e: MouseEvent) => { if (modalOpen && e.target !== el.current) { setModalOpen(false) } } //모달 모달 영역의 엘리먼트를 지정해주기 위해서는 useRef를 사용한다. useRef를 사용해 모달 ..

React-router-dom v6 에서는 import React from 'react' import Index from '../pages/Works' import SearchPortfolio from '../pages/Works/components/SearchPortfolio' const Works = { name: 'works', path: '/works', element: , children: [{path: ':id', element: }] } export default Works 위와 같이 useRoutes를 사용하여 params를 지정해줄 때 {params.id ? ( ) : query.type === 'weplanet' ? ( ) : query.type === 'client' ? ( ) : (..

로그인 기능을 구현하기 위해 다음과 같은 로직을 적용했다. 1. Id, Password를 입력받고 로그인 시 state에 있는 Id와 Password를 첨부하여 API에 POST 요청을 보낸다. 2. accessToken, refreshToken을 받아온다. 3. status가 200이면 Redux에 accessToken을 dispatch하고 localStorage에 refreshToken을 넣은 후 메인 페이지로 이동한다. 4. 만료 시간 1분 전에 localStorage에 저장되어 있는 refreshToken을 사용하여 accessToken을 refresh해준 뒤 dispatch한다. 5. 메인 페이지 컴포넌트가 랜더링 됐을 때 useEffect 또는Componentdidmount 함수를 사용하여 R..

버튼을 클릭했을 시 사용자의 클립보드에 원하는 text를 복사하기 위해 react-copy-to-clipboard 라이브러리를 사용하였다. 타입스크립트 기준으로 npm install --save @types/react-copy-to-clipboard 명령어를 통해 라이브러리를 설치할 수 있다. 먼저 두 개의 state를 만들어주었다. const [value, setValue] = useState('') const [copied, setCopied] = useState(false) 첫 번째는 clipboard에 copy할 텍스트이며, 두 번째는 복사가 됐을 때 변경해줄 boolean 값이다. import {CopyToClipboard} from 'react-copy-to-clipboard' 라이브러리를 사..

페이지를 이동할 때 props를 가지고 이동하고 싶을 때가 있다. 이 때 react-router-dom v6의 Nevigate를 사용하면 된다. const [clicked, setClicked] = useState(false) const state = {user: 'lee', error: null} const handleClicked = () => { setClicked(true) } return ( { handleClicked() }} > {' '} 블로그 {clicked && } ) } export default BlogSection 위와 같이 state 안에 props를 담아서 라우팅을 할 수 있다. const {state} = useLocation() 이후 해당 페이지에서 useLocation을 ..