![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bEuBu1/btrqQd7AWKg/aekkLpLKJfKfIXFc0iATSK/img.png)
세개의 컴포넌트를 하나씩 확인해보자. 첫번째로 Customer(고객) 컴포넌트이다. Customer 컴포넌트는 간단하다. props로 받은 값들을 화면에 띄워주는 역할만 한다. 테이블에 마지막 Cell에는 다른 컴포넌트가 들어가는데 Customer 컴포넌트가 props로 전달받은 stateRefresh()함수와 id속성을 다시 CustomerDelete 컴포넌트에 props로 전달한다. 삭제를 할 경우 id값만 전달받으면 되고 다시 새로 고객을 표시하기 위해 stateRefresh()가 전달된 것이다. 그렇다면 CustomerDelete 컴포넌트에서는 props를 어떻게 처리하는지 확인해보도록 하자. 두번째로 CustomerDelete 컴포넌트이다. 이 컴포넌트 안에는 고객을 삭제하기 위한 deleteC..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/tPCSD/btrqM4wybyJ/QYbDGLj7SOnU7yjBzVjpmk/img.png)
(2)에서 server.js에서 어떻게 DB에 연결하고 POST나 DELETE요청을 처리하는지 확인했고 이번에는 클라이언트 즉 리액트에서는 어떤 코드로 작성되었고 로직과 내부 구조를 확인해보도록 한다. npx create-react-app "프로젝트명" 리액트는 npx create-react-app "프로젝트명"으로 생성할 수 있다. 목표로 개발하는 고객 관리 시스템에는 3개의 컴포넌트(고객 컴포넌트, 고객 추가 컴포넌트, 고객 삭제 컴포넌트)와 App.js를 이용하여 만들 수 있다. App.js에서 중요하게 볼 부분은 리액트 훅을 사용하여 변하는 값을 useState와 useEffect를 사용하여 설정한 부분과 props에 대한 의미를 다룰 것이다. App.js의 78번째 행에서 map()함수를 사용하..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/croQsi/btrqMbXDVW7/G2NwNNyaWig3ZMj4koUgrk/img.png)
본 내용은 React를 활용한 고객 관리 시스템(1) 의 내용과 이어서 설명한다. 우선 server.js는 어떤 역할을 하는지 살펴보자. 크게 세가지를 중심으로 살펴보면 된다. post 요청이 들어왔을때 어떻게 처리하는지, delete 요청이 들어왔을때 어떻게 처리하는지, DB는 어떻게 연결하는지. 부가적으로 cors라는 라이브러리를 설치하여 사용하였는데 cors는 Cross-Origin Resource Sharing의 약자로 웹을 개발하는 초보자의 입장으로서 한번씩 겪을 것이라고 생각된다. 이는 나중에 따로 다루도록 하고 현재는 위에서 언급한 세가지를 중심으로 server.js의 소스코드를 확인해보도록 하자. 원하는 DB에 연동하기 위해 DB에 정보가 담긴 database.json 파일을 하나 생성하여..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/crexZp/btrqOhCjmNH/Fs7MGQGgkqpKnf39UQHcv0/img.png)
리액트와 node.js express, mysql을 이용하여 간단한 프로젝트를 만들었다. (유튜브- 동빈나의 고객 관리 시스템) 클라이언트로 React를 활용하고 서버는 Node.js express, 그리고 DB는 RDS의 mysql을 사용하여 간단한 고객 관리 시스템을 개발한다. 강의 내용을 이해하고 응용하고자 클래스형 컴포넌트들로 작성한 코드들을 함수형 컴포넌트로 수정하였고 Node.js express를 서버단에 다른 포트번호를 이용하여 API 서버를 구축하여 REST API 방식으로 CRUD작업을 진행하였다. 또한 DB는 RDS를 이용하지 않고 기존에 있던 mysql workbench를 이용하여 편리하게 제작해보았다. 폴더의 구조는 다음 그림과 같다. 프로젝트 customer management 폴..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bdxsyh/btrqobhAsNP/eztraxNYUP9ld7oKvFj0Mk/img.png)
처음으로 웹으로 무언가를 만들어보기 위해 리액트, node.js express를 공부하며 유튜브에서 어떤 강의를 듣던 중 클라이언트의 React 부분이 모두 클래스형 컴포넌트로 선언하며 설명하였다. 이것을 함수형 컴포넌트를 사용하여 만들어보면서 리액트를 학습하는 시간을 가져보았다. 클래스형 컴포넌트에서는 다음과 같이 작성된 형태였다. 이것을 함수형 컴포넌트로 만들어 리액트 훅 useState()와 useEffect를 사용하여 변경해보았다. 수정할 때마다 여러 에러 문구가 콘솔창에 출력됐다. 위 문구이외에도 uncaught typeerror: response.json is not a function, uncaught (in promise) syntaxerror: unexpected token < in js..