본문 바로가기

IT85

[리액트] VSCode 익스텐션 추천 - 모듈 크기 알아보기(Import Cost) 자동완성 익스텐션 글에 이어 또 다른 유용한 익스텐션을 들고 왔습니다! 리액트 VSCode 자동완성 익스텐션 추천 (Auto Import, Code snippets 등) 리액트를 공부하며 필요한 익스텐션을 정리해보았다. - Auto Import - ES6, TS, JSX, TSX Auto Import - ES6, TS, JSX, TSX - Visual Studio Marketplace Extension for Visual Studio Code - Automatically finds.. breathtaking-life.tistory.com - Import Cost import 하려는 모듈의 크기를 알아볼 수 있는 익스텐션이다. - 사용법 사용법은 아주 간단하다. 익스텐션 설치 후 다시 코드 파일로 돌아가 .. 2022. 3. 20.
[리액트] 프론트 로그인 구현- JWT 이용 일반적으로 로그인에서 사용하는 토큰은 단순한 문자열이다. 따라서 발급된 토큰에 대해 만료를 시킬 수단이 없고, 관리할 수 있는 방법이 없다는 단점이 있다. 이를 보완하기 위해 JWT(Javascript Web Token)을 사용한다!! 참고) 여기서 클라이언트단은 리액트, 서버는 장고를 이용하였다. - 로그인 절차 (JWT) 이용 JWT 절차를 간단하게 설명하자면, - JWT에는 accessToken과 refreshToken이 존재하며, 유저 인증에 사용된다. 실질적인 인증 정보는 accessToken에 있지만, 일정 시간이 지나면 만료하는 구조를 갖는다. - refreshToken, accessToken을 클라이언트에 저장해둔다. 이때, refreshToken을 이용하면 로그인은 지속적으로 유지할 수 .. 2022. 3. 4.
[리액트] axios 반환 값이 undefined일 때 해결법 장고 rest framework와 리액트를 이용하여 로그인 기능을 구현 중이다. 클라이언트에서 axios로 email과 password를 api 주소로 post하면 서버에서 회원 정보가 유효한지 아닌지 확인한다. services/AuthService.js에 로그인 로직을 생성하고, pages/Login.jsx에서 로그인 폼 제출 시 AuthService에 로직이 실행된다. - 문제점 (틀린 코드) [Login.jsx 실행 화면] [pages/Login.jsx] 이메일 형식이 맞다면(else문), requestLogin을 실행하고 반환값을 출력한다. [services/AuthService.js] email과 password가 post에 성공하였다면, 사용자 정보를 출력하고 리턴한다. [출력 결과] 하지만.. 2022. 2. 4.
[리액트] react-calendar로 캘린더 제작: 하이라이트 기능 - 결과 현재 제작하고 있는 건 다이어리 웹이다. 언제 일기를 작성했는지 보여준다. 위 사진은 2022년 1월 3, 7, 12, 13, 15일에 작성하였다고 보여주는 예시이다. 작성 날짜들을 표시할 수 있게 하이라이트 기능을 추가해보자! 😀 - 초기 설정 공식 깃헙 레파지토리를 참고하였다. GitHub - wojtekmaj/react-calendar: Ultimate calendar for your React app. Ultimate calendar for your React app. Contribute to wojtekmaj/react-calendar development by creating an account on GitHub. github.com - react-calendar 라이브러리 설치 //.. 2022. 1. 9.
[리액트] (해결) REST API 이용한 카카오 소셜 로그인 구현 프론트는 리액트, 백은 장고 REST API로 카카오 소셜 로그인을 구현하는 중인데, 인가 코드를 받고 백에 넘겨서 토큰을 받아야 하는 상황이다. axios .get(`http://localhost:8000/main/login/kakao?code=${code}`, { //code는 인가코드 ~~~~ }.then((res) => { console.log(res); //사용자 정보가 들어있는 json이 출력되어야 함 인가 코드를 받아서 백엔드에 넘기는 건 잘 되지만, 토큰을 받는데서 오류가 발생한다. 토큰은 JSON 형식으로 {'access_token':~~~, 'token_type':~~}과 같이 출력되어야 하는데, 사진과 같이 html이 출력된다... 하지만 더 이상한 건, 다른 컴퓨터로 실행했을 땐 j.. 2022. 1. 2.
[코랩/파이토치] 오류 : cuda out of memory [오류] RuntimeError: CUDA out of memory. Tried to allocate 60.00 MiB (GPU 0; 11.17 GiB total capacity; 10.15 GiB already allocated; 7.81 MiB free; 10.56 GiB reserved in total by PyTorch) 이 오류에 대한 해결방법은 다양하다. 하지만 대부분의 경우는 두가지 방법 안에서 해결된다. [해결방법] 1) 배치 사이즈 줄이기 보통 배치사이즈가 큰 경우 오류가 발생한다. 나는 원래 사이즈인 64에서 16까지 줄여 해결했다.. 2) GPU 캐시 비워주기 import gc gc.collect() torch.cuda.empty_cache() 2021. 12. 2.

티스토리툴바