Django & React Tutorial
2강
이 예제 프로젝트에서 사용한 라이브러리들
django rest framework를 사용했다. 쉽게 api 를 만들수 있음
.
.
npm init -y
npm i webpack webpack-cli --save-dev
npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react
npm i react react-dom --save-dev
npm install @material-ui/core
npm install @babel/plugin-proposal-class-properties
npm install react-router-dom
npm install @material-ui/icons
udemy ethereum solidity 프로젝트의 경우 material-ui 대신 semantic-ui를 사용했다.
그리고 udemy에서는 react-router-dom대신 next-route를 사용했다.
.
.
webpack : Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
.
babel : Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
react를 사용할때 react 부분을 django의 app으로 따로 하나 만든다.
그리고 그 내부 구조는 아래와 같다.
https://github.com/techwithtim/Music-Controller-Web-App-Tutorial/tree/main/Tutorial%201%20-%204
위그림을 보면 frontend는 react를 위해 만든 django app folder이다
위를 보면 django app 관련 파일과 react 관련 폴더가 같이 있는 것을 알수 있다.
src 안에 기본적으로 react 관련 컴포넌트와 소스 파일들이 있다.
아래를 보면 웹관련 static화일들이 들어 있는 것을 알수 있다.
아래그림을 보면 django app templates폴더안에 시작 웹페이지를 넣는다.
.
.
6강
https://youtu.be/bQXhG1eZGLM
handleVotesChange 안에서 this를 사용하는 경우에는
this.handleVotesChange = this.handleVotesChange.bind(this) 해주어야 함수 안에서 this를 참조 할수 있다
https://youtu.be/bQXhG1eZGLM?t=1262 참조
버튼 클릭시 서버에 폼 보내는 작업 request options들을 만들고 fetch에 같이 넣어서 서버에 접근한다. fetch는 기본으로 제공된 함수가 아니고 특정 라이브러리를 사용한것. 다른 라이브러리를 사용하는 경우 같은 역할을 하는 다른 함수를 찾을 것