차근차근 생활 & 코딩

이번에 알려드릴 것은 클래스(Class) 타입에서 input을 통해 데이터를 전달하는 것을 한번 해보도록 하겠습니다. 제일 처음으로 우리가 흔히 알고 있는 Form이라는 클래스를 만들어보았습니다. 이건 너무 간단하죠? 이건 누구나 아는 html입니다. 우리가 알고 싶은 건 이런 것이 아니겠죠? 리액트 맞추어 코드를 작성해 보도록 하겠습니다. Step 1. state 추가하기 input에 작성된 값을 넘겨주려면 받을 곳이 필요하여, state 추가가 필요합니다. datavalue라는 state를 추가하도록 하겠습니다. constructor(props) { super(props); this.state = {datavalue: ''}; } Step 2. handleChange 함수 추가하기 input 필드에서..

일반적으로 부모에서 자식으로 데이터를 전달합니다. 하지만... 코딩을 하다보면 우리가 원치 않는 자식에서 부모쪽으로 데이터를 전달해야 할 경우가 생깁니다. 그럼 실습을 통해서 데이터 전달하는 방법에 대해서 알아보도록 하겠습니다. 생각보다 간단하지만 처음 하시는 분들께서는 상당히 어려울 수 있습니다. prentFunction이라는 함수를 정의하였고, (data) 저쪽 파라미터로 데이터를 전달받게 됩니다. 부모 코드 import React, { Component } from 'react'; import Child from './Child'; class Parent extends Component { //부모 함수 정의 parentFunction = (data) => { console.log("자식에서 부모로..

Step 1. npm install 첫 번째로는 리액트를 설치하시면 됩니다. 설치 방법은 간단합니다. 이미 설치 되어 있으신 분들 께서는 Step 2 넘어 가시면 됩니다. [REACT] 리엑트 설치하기 리엑트 설치 및 실행 방법에 대해 간략히 설명 드리겠습니다. Part 1: React 설치 npm install -g create-react-app *기기에 Node >= 6 이상이 필요합니다. Part 2: React App 생성 create-react-app my-app Part.. ssilook.tistory.com Step 2. npm install package Npm(create-react-app)이 실행 중이면 가장 먼저 할 일은 패키지를 설치하는 것입니다. 다음 명령어를 입력해 5가지 라이브..

우린 이런 멋진 테이블을 만들기 위해 Material-ui 이란 라이브러리를 사용하여 간편하게 만들 예정이에요. Part 1: React 설치 이건 앞에 설명하여 링크를 통해 참조하시면 돼요. https://ssilook.tistory.com/entry/%EB%A6%AC%EC%97%91%ED%8A%B8React-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0 [REACT] 리엑트 설치하기 리엑트 설치 및 실행 방법에 대해 간략히 설명 드리겠습니다. Part 1: React 설치 npm install -g create-react-app *기기에 Node >= 6 이상이 필요합니다. Part 2: React App 생성 create-react-app my-app Part.. ssilook...

리액트 설치 및 실행 방법에 대해 간략히 설명드리겠습니다. 리액트를 만들기 위해 개발 환경을 직접 구축해야 한다. 개발 환경을 직적 구축할 경우 시간이 오래 걸릴 뿐 아니라 유지 보수도 해야 한다. create-react-app은 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공을 해주는 장점이 있어 추천한다. 쉽게 말하면 어느 정도 사용자의 편의성을 위해 리액트를 필요한 것을 미리 구성해놓은 것이라고 생각하면 된다. Part 1: React 설치 npm install -g create-react-app *기기에 Node >= 6 이상이 필요합니다. Part 2: React App 생성 실행 후 my-app 폴더가 생상 되고 그 안에 몇 개의 폴더와 파일이 들어 있다. create-react-app m..

Part 1 : Django(React) Template 설정 및 사용하기 흑흑... 아쉽게도 장고 템플릿을 더 이상 사용하지 않기 때문에 Django Settings.py 파일 내에 Static 경로를 변경하여야 합니다. 하지만 우리에겐 더 멋진 React 템플릿이 있으니 걱정 안하셔도 되겠죠!? import os # 맨위쪽에 입력하시면 됩니다. TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ os.path.join(BASE_DIR, 'frontend', 'build'), # 경로 변경 ], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'dj..

Part 1 : 장고 앱 생성 Django manage.py 파일이 있는 경로로 이동하신 후 명령어를 입력해 주시면 앱이 생성 됩니다. $ python manage.py startapp api Part 2 : Django와 React 연결에 필요한 PIP 패키지 설치하기 1. DRF 및 Django CORS 설치 및 설정하기 #Django -> React로 데이터 전달을 위한 DRF(Django REST Framework) API 설치하시면 됩니다. $ pip install django-rest-framework #Django로 REST Api 를 만들었는데 React와 연결을 해야할 때 CORS 오류가 발생함으로 설치 및 설정이 꼭 필요합니다. $ pip install django-cors-header..

1. Backend & Frontend Template 분리하기 기존 Django 템플릿에서 React 템플릿으로 작업을 하고자 합니다. 그렇다면 왜 굳이 장고에서 템플릿을 사용하면 편한데?! 그 이유는 ... 예를 들면 한명이 장고를 개발 중에 있는데 서비스 유저수가 늘어나게 되어 다른 개발자를 뽑아야 될 경우가 생깁니다. 개발자 대부분 “협업”을 하는데 Backend와 Frontend 작업 시 서로 분리되지 않으면 Frontend와 Backend를 동시에 작업해야 하는 번거러움이 발생된다고 생각됩니다. 그럼 여러개의 언어를 다 알아야 하는 슬픈 상황이 생기는거죠… “결론”은 Backend는 API로 Frontend 쪽으로 데이터를 전달해 주면되고 Frontend 쪽에서는 데이터 받아서 화면 구성을 해..