IT/React30 [리액트] 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. [리액트/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) 연동하기- (2) serializer, APIView로 CRUD 구현 - Models 생성 간단하게 제목, 내용, 업데이트된 날짜를 담은 모델을 생성해줬다. 모델을 생성했다면, 마이그레이션으로 DB에 적용시켜준다. -마이그레이션 두 가지 절차가 있다. makemigrations와 migrate!! -관리자(admin) 등록 Review 모델에서 불러와주는 거 잊지 말고, 사진처럼 등록해준다. 그리고 createsuperuser 를 통해 어드민 계정을 생성해준다. - Serializer 생성 Serializer(시리얼라이저)는 DRF가 제공하는 클래스인데, DB 인스턴스를 JSON 데이터로 생성한다. 장고의 form과 유사하다! mainApp에 serializers.py를 생성하고, 모델과 필드를 작성해준다. -views.py 클래스 선언 Review 전체 목록을 보여주는 .. 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 5 다음
