Express Server에서 처리하기

 

React는 폼 데이터를 전송해 서버에서 데이터를 받아왔을 때 페이지 전체가 새로고침이 되는 것이라니라.

특정 부분만 렌더링 하는 것이 가능하다.  

다만 빠른 테스트를 위해 전체 새 로고 침하는 방향으로 간다.

 

window.loaction.reload();함수를 실행해 고객 데이터를 받아올 수 있도록 한다.

 

파일 처리를 위해 multer라는 라이브러리를 설치합니다.

 

npm install --save multer

 

const multer = require('multer');

라이브러리를 의존하고

const upload = multer({dest : './upload'})

업로드될 파일을 지정해줍니다.

 

 

multer 모듈을 사용하여 post로 전송된 파일 처리

• multer 가이드 문서
• 사용자가 post 방식으로 전송한 데이터가 upload라는 디렉터리를 향하고 있다면,
• 그다음 함수를 실행하여 컨트롤러로 연결한다.
• 미들웨어 upload.single('avatar')는 뒤의 function(req, res) 함수가 실행되기 전에 먼저 실행.
• 미들웨어는 사용자가 전송한 데이터 중에서 만약 파일이 포함되어 있다면,
• 그 파일을 가공해서 req객체에 file이라는 프로퍼티를 암시적으로 추가토록 약속되어 있는 함수.
• upload.single('avatar')의 매개변수 'avatar'는 form을 통해 전송되는 파일의 name속성을 가져야 함.

 

image라는 경로로 접근을 해 실제 서버의 upload폴더와 맵핑이 되어서 사용자가 upload폴더를 공유할 수 있도록 한다. 

app.use('/image', express.static('./upload'));

 

 

사용자가 고객 추가 데이터를 전송한 경우 처리하는 로직.

 

app.post('/api/customers' , upload.single('image'), (req, res)req,res =>{

 

    let sql = 'INSERT INTO customer VALUES (null,?,?,?,?,?)';;

이미지는 해당 이미지가 존재하는 경로를 넣어줍니다.

    let image = '/image/' + req.file.filename;

 

})

파일 이름은 multer라이브러리가 겹치지 않는 이름으로 설정해줍니다.

 

사용자가 추가 버튼을 눌렀을 때 state의 속성 값이 초기화되도록 설정합니다.

    handleFormSubmit = (e) =>{
        e.preventDefault();
        this.addCustomer()
            .then( res => console.log)
        
        this.setState ({

            file : null,
            userName : '',
            birthday : '',
            gender : '',
            job : '',
            fileName : ''
            
        })

        window.location.reload();
        
    }

여기서 file은 실제 사용자가 올린 파일의 binary형태이며 fileName은 multer가 설정하는 고윳값입니다.

 

 

 

 

app.post('/api/customers' , upload.single('image'), (req,res) =>{

    let sql = 'INSERT INTO customer VALUES (null, ?, ?, ?, ?, ?)';
    let image = '/image/' + req.file.filename;
    let name = req.body.name;
    let birthday = req.body.birthday;
    let gender = req.body.gender;
    let job = req.body.job;
    let params = [image,name,birthday,gender, job];
    
    con.query(sql,params, 
        (err,rows,fields) => {
            res.send(rows);
        }
        )

})

다음은 jdbc의 prestatement와 비슷합니다.? 의 값에 params를 전달하여 값을 전달하게 됩니다.

 

 

이제 사용자가 고객 추가를 요청한경우에 바로 추가된 고객 목록이 추가되게됩니다.