인과 학습을 이야기하기 전에 인과관계는 무엇인지 간단히 생각해보자. 인과관계 어떠한 일어난 일 A가 원인 B에 의하여 발생한다고 해보자. 예를 들어, 달의 인력 B에 의하여 조수 간만의 차 A가 발생할 수 있다. 이때, 조수 간만의 차 A와 달의 인력 B는 상관관계(correlation)에 있다고 할 수 있다. 하지만, 달의 인력 B가 조수 간만의 차 A가 발생하도록 하는 모든 원인은 아니다. 지형이나 달의 위치 등도 조수 간만의 차 A의 원인이 될 수 있다. 이러한 알려진(명시된) 원인 B 외에 관측된 A가 일어나도록 하는 나머지 원인을 설명 C이라고 할 수 있다. 원인에 대한 설명 C는 명시된 어떠한 원인 B로부터 발생되는 일 A를 설명한다. 이러한 설명 C는 일의 발생에 잠재된 원인 또는 인과 설명..
- Material UI란? 리액트에서 바로 사용할 수 있는 기능과 디자인을 컴포넌트로 제공해주는 UI 프레임워크이다. 가이드라인을 따라 사용할 수도 있고, 사용자가 커스터마이징도 가능하다. - 깃허브 GitHub - mui/material-ui: MUI Core (formerly Material-UI) is the React UI library you always wanted. Follow your own design syst MUI Core (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design. - GitHub - mui/mate..
- 간단한 상황 설명.. ssh로 학교 서버(윈도우)에 있는 리액트를 실행하려 했다. 하지만 sudo 명령어도 안되고, choco도 안되길래 scoop으로 nodejs와 yarn을 설치하였다! - Powershell 관리자 모드 실행 Start-Process -FilePath "powershell" -Verb RunAs - (Scoop 설치를 위한) 보안 정책 설정 ‼️주의 사항: PowerShell execution policy is required to be one of: Unrestricted, RemoteSigned or ByPass Scoop를 설치하려면 PowerShell이 Unrestricted/RemoteSigned/ByPass 상태여야 한다. PowerShell에 적용된 보안정책 알아보는..
- SSL 구매 백엔드(장고)를 학교 서버에 넣고 SSH를 이용해 집에서 원격으로 실행하고 있다. 프론트(리액트)를 실행해보면, SSL 인증서 오류가 발생하였고, 해결 방법으로는 SSL 인증서를 생성 / 구매하는 방법이 있다. 시간이 없어서 SecureSign에서 구매하는 방법을 택했다. 설명이 잘 되어있는 블로그를 참고하였다. [HTTPS] Route53 + Nginx + SecureSign HTTPS 설정 1\. SSL 인증서 구매접속 - https://www.sslcert.co.kr/1) 적당한 서비스 선택 > 신청2).상품 및 기간 선택3). 도메인 및 CSR 생성 또는 등록CSR이 없다면 CSR 자동생성 선택을 통해 직접 등록이 가능 하지만 필 velog.io 큰 프로젝트가 아니기에 가장 저렴..
자동완성 익스텐션 글에 이어 또 다른 유용한 익스텐션을 들고 왔습니다! 리액트 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 하려는 모듈의 크기를 알아볼 수 있는 익스텐션이다. - 사용법 사용법은 아주 간단하다. 익스텐션 설치 후 다시 코드 파일로 돌아가 ..
일반적으로 로그인에서 사용하는 토큰은 단순한 문자열이다. 따라서 발급된 토큰에 대해 만료를 시킬 수단이 없고, 관리할 수 있는 방법이 없다는 단점이 있다. 이를 보완하기 위해 JWT(Javascript Web Token)을 사용한다!! 참고) 여기서 클라이언트단은 리액트, 서버는 장고를 이용하였다. - 로그인 절차 (JWT) 이용 JWT 절차를 간단하게 설명하자면, - JWT에는 accessToken과 refreshToken이 존재하며, 유저 인증에 사용된다. 실질적인 인증 정보는 accessToken에 있지만, 일정 시간이 지나면 만료하는 구조를 갖는다. - refreshToken, accessToken을 클라이언트에 저장해둔다. 이때, refreshToken을 이용하면 로그인은 지속적으로 유지할 수 ..
장고 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년 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 라이브러리 설치 //..
프론트는 리액트, 백은 장고 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..
[오류] 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()