- 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에 적용된 보안정책 알아보는..
자동완성 익스텐션 글에 이어 또 다른 유용한 익스텐션을 들고 왔습니다! 리액트 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..
- React-transition-group: CSSTransition 햄버거 버튼을 클릭했을 때, 메뉴가 부드럽게 뜨고, 메뉴 외부를 누르면 메뉴가 부드럽게 사라진다. 효과가 없다면 이런 느낌일 것이다. 일반 CSS에서 애니메이션을 적용하기 위해선 애니메이션 클래스를 생성해두고 컴포넌트가 업데이트가 될 때 className을 적용하면 된다. 이 로직을 적용시키는 게 까다롭거나 귀찮다면 react-transition-group 라이브러리를 사용하면 된다. react-transition-group에는 한 개의 컴포넌트에게 transition을 적용시키는 CSSTransition, router 혹은 여러 컴포넌트한테 transition을 적용시키는 TransitionGroup 등이 있다. 이번 예제에서는 C..
- 리액트 앱 만들기 간단한 앱을 만들어보자! 이름은 React-Practice로 했다. yarn create react-app React-Practice RestAPI.css와 RestAPI.js를 추가해주었다. css는 앱을 보기 좋게 하기 위해 추가한 거라 필수는 아니다. [App.js] App에 RestAPI 컴포넌트를 추가해준다. import "./App.css"; import RestAPI from "./RestAPI.js"; import React from "react"; function App() { return ( ); } export default App; [RestAPI.js] 하단에 전체 코드있습니다. - 우선 HTTP request를 위해 axios를 설치한다. yarn add a..
- Models 생성 간단하게 제목, 내용, 업데이트된 날짜를 담은 모델을 생성해줬다. 모델을 생성했다면, 마이그레이션으로 DB에 적용시켜준다. -마이그레이션 두 가지 절차가 있다. makemigrations와 migrate!! -관리자(admin) 등록 Review 모델에서 불러와주는 거 잊지 말고, 사진처럼 등록해준다. 그리고 createsuperuser 를 통해 어드민 계정을 생성해준다. - Serializer 생성 Serializer(시리얼라이저)는 DRF가 제공하는 클래스인데, DB 인스턴스를 JSON 데이터로 생성한다. 장고의 form과 유사하다! mainApp에 serializers.py를 생성하고, 모델과 필드를 작성해준다. -views.py 클래스 선언 Review 전체 목록을 보여주는 ..