반응형 웹서비스 개발33 이미지 업로드, DB 저장 이미지 업로드 방식은 두가지로 정의할 수 있다. 첫번째. 파일 업로드 버튼을 사용해서 올리게 되는 방법이다. Multi part 프로토콜 방식이며, 이 때는 브라우저가 해당 프로토콜에 맞게 올려주게 된다. 파일을 업로드하는 메소드는 POST를 사용한다. 특이점은 Body에 보내는 데이터의 콘텐트 타입이 form data 이지만, 여러부분으로 나누어서 보낸다. 두번재. json 방식으로 보내는 방식이다. 이미지는 binary로 구성되어있으므로, json으로 보내기 위해 string으로 변경해야 한다. Binary data를 base64로 인코딩에서 전송한다. 이 포스트에서는 첫번째 방식으로 구현해보자 한다. Datagrip 에서 아래의 DDL문을 실행해 image 테이블을 먼저 생성한다. create ta.. 2021. 5. 21. Board 삭제 API Persistence 삭제 API를 위한 Persistence를 구현한다. BoardMapper.interface @Delete({""}) int deleteBoard(int id); Controller @DeleteMapping("/board") public ResultVO removeBoard(@RequestParam int id) { int result = boardMapper.deleteBoard(id); if (result > 0) { return new ResultVO(0, "success"); } else { return new ResultVO(100, "fail"); } } Postman Test DB 반영 확인 2021. 5. 20. Board 수정 API Persistence 수정 수정 API를 위한 Persistence를 구현한다. BoardMapper.interface를 수정한다. @Update({""}) int updateBoard(BoardVO boardVO); Update 되는 property가 있을 가능성과 없을 가능성이 있기 때문에 if구문으로 null 여부를 체크한 구문이다. Controller 구현 @PutMapping("/board") public ResultVO modifyBoard(@RequestBody BoardVO boardVO) { int result = boardMapper.updateBoard(boardVO); if ( result > 0) { return new ResultVO(0, "success"); } else { r.. 2021. 5. 20. Update, Delete 구현 UpdateContend.js import React, { Component } from 'react'; class UpdateContent extends Component { constructor(props) { super(props); this.state = { id: this.props.data.id, title: this.props.data.title, desc: this.props.data.desc } this.inputFormHandler = this.inputFormHandler.bind(this); } inputFormHandler(e) { this.setState({ [e.target.name]: e.target.value }); } render() { console.log(this.pr.. 2021. 5. 19. Create 구현 - 메소드 원본을 바꾸지 않을때 사용하는 기능. 배열의 경우 Array.from 메소드는 기존의 배열을 복제한다. 따라서 a===b는 false가 나온다. 따라서 이전에 사용했던 concat 대신 push를 사용하고 싶다면, 위의 코드를 아래와 같이 변경하면 된다. 객체의 경우 Object.assign 메소드를 사용하면 된다. 아래와 같은 연산이 가능하다. Immutable push는 원본을 바꾸고 concat은 원본을 바꾸지 않는다. 이처럼 자바스크립트의 메소드는 일관성이 떨어지는데, immutablemin.js를 사용하면 일관성있는 메소드를 사용 가능하다. 2021. 5. 19. Create 구현 - contents 변경 constructor에 아래의 코드를 추가한다. this.max_content_id = 3; 또한 this.state.mode의 create 부분을 수정한다. else if (this.state.mode === 'create') { _article = 2021. 5. 18. 이전 1 2 3 4 5 6 다음 반응형
