본문 바로가기

react

IT관련/Python 2023. 1. 28.
Django와 React를 이용해서 카카오(kakao) 로그인을 해봅시다 !(OAuth) 2편 1편은 아래에 있습니다 !! https://heokknkn.tistory.com/57 그럼 바로 시작하겠습니다 ! 자 전부 동의 해주시구요 ! 자 ! 그러면 카카오에서의 설정과 프론트쪽은 거의 다 진행했습니다 !! 저번에 여기까지 했습니다 ! 그럼 바로 백엔드로 가기전에 리액트 부분에서 조금만 손 좀 봅시다 ! 딱 필요한 부분만 가져와서 설명하겠습니다 ! 깃허브 로그인 했을 때와 비슷할겁니다 ! 먼저 저희는 code가 필요합니다 ! 어떻게 가지고 올까요? useLocation()와 URLSearchParams, code를 이용해서 손쉽게 code를 빼올 수 있습니다. code를 가져오는 방법은 다양하지만 저는 이 방법으로 가져왔어요 !! import { useLocation, useNavigate } f..
IT관련/Python 2023. 1. 23.
Django와 React를 이용해서 카카오(kakao) 로그인을 해봅시다 !(OAuth) 1편 안녕하세요 !! 저번에는 github를 이용해서 로그인을 구현했는데요 !! 이번에는 사실상 모두가 이용하는 카카오를 이용해서 로그인 기능을 구현해보겠습니다 !!! 깃 허브 로그인이 궁금하시면 https://heokknkn.tistory.com/54 여기를 참고해주세요 !! 자 ! 먼저 저런식으로 버튼을 만들어주시면 편합니다 ~~ 자 ! 그러면 저 버튼을 눌렀을 때부터 시작됩니다 !!! 코드를 봐봅시다 ! https://developers.kakao.com/console/app 우선 위에 URL로 들어가서 어플리케이션을 만듭시다 ! 로그인 하시구요 ! 저는 만들어 놓은게 있어서요 ^^ 「+」눌러주시구 ! 앱이름이랑 사업자명은 원하는데로 적어주세요 !! 그리고 당연히 「V」표 체크해주시구 저장 ! 자 ! 다..
IT관련/Python 2023. 1. 14.
Django와 React를 이용해서 github 로그인을 해봅시다 !(OAuth) 2편 https://heokknkn.tistory.com/54 지난편은 여기서 확인해주세요 !!!! 자 ! 저번에 밑에와 같은 화면에서 끝났는데요 !! 바로 이어서 시작해보겠습니다 ! 아래에서는 리액트 쿼리에 대한것들도 있는데 이 부분끝나고 바로 다뤄볼게요 !!!! 딱 필요한 부분만 가져와서 설명하겠습니다 ! 먼저 저희는 code가 필요합니다 ! 어떻게 가지고 올까요? useLocation()와 URLSearchParams, code를 이용해서 손쉽게 code를 빼올 수 있습니다. code를 가져오는 방법은 다양하지만 저는 이 방법으로 가져왔어요 !! import { useLocation, useNavigate } from "react-router"; export default function GithubCo..
IT관련/Python 2023. 1. 7.
Django와 React를 이용해서 github 로그인을 해봅시다 !(OAuth) 1편 안녕하세요 !!! 이번편에서는 Django와 리액트를 이용해서 github로그인을 구현해보려고 합니다 !!! 참고로 프론트는 리액트입니당 ^^ 그럼 바로 시작해봅시다 ! 저는 sign up을 해서 아이디가 없으면 아이디를 생성해서 로그인 시키고 아이디가 있으면 그냥 바로 로그인을 시키는 로직입니당 ! 전 우선 저번에 배운 차크라 UI를 이용해서 아래처럼 Sign up UI를 구현해봤습니다 ! 자 ! 그러면 저 버튼을 눌렀을 때부터 시작됩니다 !!! 코드를 봐봅시다 ! 자 !! 저걸 누르면 저런식으로 github 관련 URL을 입력해주셔야하는데요 !! 그럼 밑에서 href줄에서 「parameter」는 어떤식으로 만드는지 알아봅시다 !!! 왜냐하면 github에게 권한을 받아서 로그인을 해야하니까요 !! h..
IT관련/React 2022. 9. 7.
React와 TypeScript를 이용해서 카운트다운을 해봅시다 !! 안녕하세요 ! 오늘은 리액트와 타입스크립트를 활용해서 카운트 다운을 구현해보겠습니다 !!! 어렵지 않습니다 !! 잘 따라와주세요 !! ㅎㅎ 바로 코드를 봐봅시다 ! CountDown.tsx const Countdown = (targetDate: Date): Number[] => { const countDownDate = new Date(targetDate).getTime() const [countDown, setCountDown] = useState( countDownDate - new Date().getTime() ) useEffect(() => { setInterval(() => { setCountDown(countDownDate - new Date().getTime()) }, 1000) }, [co..
IT관련/Redux 관련 2022. 6. 29.
한눈에 ! 누구나 쉽게 ! useDispatch와useSelector에 대해서 알아보자 ! (react toolkit를 활용한 state관리 ! ) 안녕하세요 ! 전체적인 흐름 : https://heokknkn.tistory.com/21 저번에 ~ Redux의 관해서 대해서 공부를 해봤는데요 ! 이번엔 여기서 react-redux에 기능중 ! useSelector과 useDispatch에 대해서 집중적으로 알아보려고 합니다 !!! 쉽게쉽게 풀어나가겠습니다 ! 아 ! 저는 Next JS에서 진행합니다 !! ( 리액트 환경에서 무난하게 돌아가니 너무 걱정마세요 ! ) useSelector이란? https://react-redux.js.org/api/hooks 공식문서를 보면 ! useSelector를 사용하면 Redux의 store state에 데이터를 등록할 수 있습니다. 즉 ! 등록 한 데이터를 가져와서 쓸 수 있다로 생각해주시면 편합니다 !!! 그..
IT관련/React 2022. 5. 25.
react hook form의 대해서 깊게 알아보자 ! (feat. register, errors, resetfield, handleSubmit) 안녕하세요 ! 저번 글에 이어서 이번엔 react-hook-form를 좀 더 깊게 알아보는 시간을 가지려고 합니다 !! 먼저 useForm에 대해서 더 알아보겠습니다 ! const { register, handleSubmit, formState: { errors }, reset, resetField, } = useForm(); useForm에는 위에 말고도 더 많은 함수들이 존재합니다 !!! ( 공식홈페이지 : https://react-hook-form.com/api/useform ) register 사용법 register을 사용하면 입력하거나 요소를 선택하고 react hook form에 validation을 적용할 수 있습니다. validation은 모두 HTML 표준을 기반으로 하며 사용자 지정 v..
IT관련/React 2022. 5. 24.
form을 그대로 이용하기보다는 react hook form을 사용하자 ! 안녕하세요 !! 오늘은 react-hook-form에 대해서 알아보면서 쓰면 얼마나 행복한지 느끼실 수 있을겁니다 !! 이 편에서는 코드의 비교만 하겠습니다 !! 걱정하지마세요 ! react-hook-form에서 쓰이는 함수에 대해서는 따로 쓸 예정입니다 ! 이번 편에서는 간단하게 코드만 비교해주세요 !! ( 너무 길어질거같아서요 ㅜㅜ ) react-hook-form이란? 지금까지 form에서 validation검사 및 에러메세지를 표시하려면 useState도 써야하며 maxLength, minLength등등 많은 것들을 고려하면서 써야했습니다 ! 또한 코드도 엄청나게 길어지고 고단합니다 ㅜㅜ 아마 다들 느껴보셨을겁니다 여기서 ! form의 validation을 더 수월하게 검사 할 수 있으며 error..
728x90

티스토리툴바