[Django/React] 장고와 리액트 연동 (3) React App 생성 yarn create react-app React-project +) yarn 이 없다면 다음과 같이 설치한다. npm -g install yarn react 프로젝트 src 폴더 내에 RestAPI.js 파일을 생성해준다. App.js 파일에 다음과 같이 추가한다. import logo from './logo.svg'; import './App.css'; import RestAPI from "./RestAPI.js" import React from "react"; function App() { return ( ); } export default App; Axios Axios는 브라우저, Node.js를 위한 HTTP 비동기 통..
[Django/React] 장고와 리액트 연동 (2) Serializer 생성 frontend로 데이터를 보내기 위해 장고 내부의 복잡한 테이터들을 json/xml 등의 형태로 데이터를 변환해준다고 생각하면 된다. Serializer는 DRF가 제공하는 클래스로, DB 인스턴스를 JSON 형식으로 생성한다. 반대로 JSON을 DB로 변경하기 위해선 deserializer가 사용된다. serializer시엔 각각 DB 칼럼들로 정의를 해야한다. App 디렉토리에 serializers.py를 생성하고, 모델과 필드를 작성해준다. from rest_framework import serializers from .models import Review class ReviewSerializer(serializers...
[Django/React] 장고와 리액트 연동 (1) 장고와 리액트의 연동은 장고의 REST 프레임워크(DRF, Django Rest Framework)를 사용하여 연동한다. 프론트엔드(React)가 Django 백엔드로 API 요청을 보내면, 장고는 요청을 서버 사이드 로직에 따라 처리하여 HTTP 응답으로 포장하여 프론트엔드로 보낸다. 데이터를 변경해야하는 경우엔 장고는 데이터베이스에서 필요한 작업을 수행한 다음, 프론트엔드로 성공/실패 여부를 확인하는 응답을 보낸다. Django 백엔드에서 응답을 받으면, 프론트엔드는 UI를 업데이트한다. 위와 같이 프론트 엔드와 백엔드가 상호 작용을 하기위한 연동을 진행해보자. DRF 설치 API 서버로 사용할 Django Rest Framework를 먼저 설치해..
[React] 윈도우에 리액트(React.js) 설치 reactjs 의 공식 문서를 참고하여 설치 설치 - React A JavaScript library for building user interfaces reactjs-kr.firebaseapp.com react 설치에 필요한 npm을 사용하기 위해선 node.js 설치가 선행이 되어야한다. 아래 링크에서 os에 맞는 버전을 다운받는다. 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js를 설치하면 npm이 자동으로 설치가 된다. Create React App을 사용하면 최신 자바스크립트 기능을 사용할 수 있게 개..
