리액트21 [리액트] 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. [리액트] 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. [리액트/SCSS module] 리액트에서 CSS 애니메이션 쉽게 사용하기 - React-transition-group: CSSTransition 햄버거 버튼을 클릭했을 때, 메뉴가 부드럽게 뜨고, 메뉴 외부를 누르면 메뉴가 부드럽게 사라진다. 효과가 없다면 이런 느낌일 것이다. 일반 CSS에서 애니메이션을 적용하기 위해선 애니메이션 클래스를 생성해두고 컴포넌트가 업데이트가 될 때 className을 적용하면 된다. 이 로직을 적용시키는 게 까다롭거나 귀찮다면 react-transition-group 라이브러리를 사용하면 된다. react-transition-group에는 한 개의 컴포넌트에게 transition을 적용시키는 CSSTransition, router 혹은 여러 컴포넌트한테 transition을 적용시키는 TransitionGroup 등이 있다. 이번 예제에서는 C.. 2021. 11. 13. [장고/리액트] 리액트와 장고(DRF) 연동하기- (3) CORS 해결, 리액트, 장고 연동 - 리액트 앱 만들기 간단한 앱을 만들어보자! 이름은 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.. 2021. 8. 27. [장고/리액트] 리액트와 장고(DRF) 연동하기- (1) 장고 세팅 REST API Django REST Framework DRF와 리액트 연동 방법을 바로 알고싶다면 이 글을 참고해주세요!!! [장고/리액트] 리액트와 장고(DRF) 연동하기- (3) CORS 해결, 리액트, 장고 연동 - 리액트 앱 만들기 간단한 앱을 만들어보자! 이름은 React-Practice로 했다. yarn create react-app React-Practice RestAPI.css와 RestAPI.js를 추가해주었다. css는 앱을 보기 좋게 하기 위해 추가한 거라 필.. breathtaking-life.tistory.com 보통 프로젝트는 프론트엔드와 백엔드가 협업하여 진행하는데, 작업이 분리가 되지 않는다면 동시에 작업해야 해서 번거로워질 수 있다. 해결책은 백엔드는 API로 프론트엔드에.. 2021. 8. 25. 이전 1 2 3 4 다음
