고객 추가 양식(FORM) 구현 및 이벤트 핸들링
1. client -> server로 고객데이터 전송하기
client folder에 CustomerAdd.jsx파일 추가
//client folder에 install
npm install --save axios
2. 파일 업로드 요청처리 및 DB에 데이터 삽입
고객 추가를 서버에 전송한 이후에 고객 데이터를 다시 서버로부터 받아와서 화면에 출력할 수 있도록 해야한다.
따라서 CustomerAdd 태그 handleFormSubmit이 실행될때 파일 입력값이 초기화 되도록 해준후,
node.js의 server.js 파일이 고객 데이터 삽입 요청을 받을 수 있도록 태그를 추가해준다.
고객의 이미지파일을 파일 처리 해주기 위해 multer 라이브러리 추가하기
npm install --save multer
3. 부모 컴포넌트의 상태(State) 변경을 통한 고객 정보 갱신
1) app.js에 props를 이용하여 state를 refresh시켜주는 함수 만들기
2) CustomerAdd 컴포넌트에 리프레쉬기능 추가
<CustomerAdd stateRefresh= {this.stateRefresh} />위의 방법보다 범용성을 위해 최근 10개만 refresh로 불러오고 나머지 데이터들은 스크롤을 통해 갱신한다.
4. 고객(Customer) 정보 삭제 기능 구현하기
데이터 삭제는 크게 두가지 방법이 있다.
1. 고객의 데이터를 데이터베이스 테이블에서 완전히 제거하기
2. 데이터베이스 테이블에서 완전히 삭제하진 않고 삭제되었다고 체크만하고 데이터는 남겨두기.
두번째 방법을 사용하는 것이 고객 데이터가 언제 삭제되었는지의 정보 또한 추가적으로 기록할 수 있어서 좋다.
sql에서 저장소 업데이트시 입력방법
=====================================
error 대응방법
events.js:292
[0] throw er; // Unhandled 'error' event
[0] ^
[0]
[0] Error: listen EADDRINUSE: address already in use :::5000
Frontend Developer