• 개발/React

[React] 리액트 장고 연동#3, GET,DELETE,POST 요청 장고로 보내기, POST,DELETE후 자동으로 GET하기, 리액트 함수 자손으로 내려보내기

[React] 리액트 장고 연동#2, 리액트 한 파일에서 두개 컴포넌트 만들기, 구조분해를 사용하여 props [React] 리액트 장고 연동#1 , input태그 여러개한번에 관리하기, React에서 form사용하기 앞전에 node.js를 한참 공부했었는데, 공부해보면서 나한테는 사실 뭔가 잘 맞는거 같지가 않았다. 조금 체계 devforyou.tistory.com 두근두근 이제 만들 틀은 다 만들었다. axios를 사용하여 데이터를 주고, 또 받아오도록하자. #api명세 [Back-end 구현사항] 1. 먼저 추가를 누르면 제품이 추가되야한다! 2. 삭제를 누르면 제품이 삭제되어야한다! 3. DB에서 제품의 정보를 받아올 수 있어야한다! 난 그렇기 때문에 장고 백엔드를 다음과 같이 설계할 것이다. M..

[React] 리액트 장고 연동#2, 리액트 한 파일에서 두개 컴포넌트 만들기, 구조분해를 사용하여 props쉽게 받기

[React] 리액트 장고 연동#1 , input태그 여러개한번에 관리하기, React에서 form사용하기 앞전에 node.js를 한참 공부했었는데, 공부해보면서 나한테는 사실 뭔가 잘 맞는거 같지가 않았다. 조금 체계적이지 않다할까? 너무 선택적지도 많고.. 대신 장고공부를 계속 했었다. 장고내에서 devforyou.tistory.com 리액트장고 연동#1 에서는 Post를 입력하는 Form태그를 만들었다. 추가 버튼을 누르면 아이템들이 촤르륵~ 떠야한다. 그러기 위해서 ItemList와 그속에 존재하는 Item을 만들어보자! //Post.js const result = [ { id : 1, name : "감자", price : 3000, }, { id : 2, name : "피자", price : 1..

[React] 리액트 장고 연동#1 , input태그 여러개한번에 관리하기, React에서 form사용하기

앞전에 node.js를 한참 공부했었는데, 공부해보면서 나한테는 사실 뭔가 잘 맞는거 같지가 않았다. 조금 체계적이지 않다할까? 너무 선택적지도 많고.. 대신 장고공부를 계속 했었다. 장고내에서 CRUD가 되는 게시판을 만들었는데, SSR 즉, 장고내에서 MVT를 이용하여 구성했고 프론트는 기본 HTML에 장고템플릿 엔진을 사용했다. 그렇게 게시판을 끝마치고 든 생각은, 이걸 리액트 즉 CSR에서는 어떻게 사용해야 할까? 이었다. 그래서 일단 머리박치기느낌으로 해보기로 했다. 이 프로젝트에 끝은 나만의 토이 프로젝트를 만들어 보는 것이다. 일단 이것은 1단계 어떻게 리액트를 꾸려야 백엔드API로 장고를 활용할 수 있는지 알기 위해서이다. 간단한 제품 등록 및 삭제를 만들어 보도록 하겠다. 리액트 정말 오..