본문 바로가기
반응형

웹서비스 개발33

Create 구현 - form, onSubmit Form 폼 기능을 추가하기 위해 CreateContent의 form을 추가시켰다. import React, { Component } from 'react'; class CreateContent extends Component { render() { console.log('Content render'); return ( Create ); } } export default CreateContent; action : 데이터를 전송할 장소 method = "post" : URL의 노출을 막음. post를 사용하는것이 좋음. onSubmit = submit 버튼을 누른다면 그 해당 이벤트를 실행되도록 약속되어 있다. onSubmit 기능추가 기능 추가를 위해 App.js에 onSubmit 코드를 추가시켰다. /.. 2021. 5. 17.
Board 목록 보기, 상세보기 API Select문을 작성한다. - id를 입력으로 해서 하나의 board를 가져오는 api - 모든 board를 가져오는 쿼리 @Select({""}) List findBoard(); @Select({""}) BoardVO findOneBoard(int id); Controller을 구현한다. @GetMapping("/board/{id}") public BoardVO findOne(@PathVariable int id) { return boardMapper.findOneBoard(id); } @GetMapping("/boards") public List findAllBoard() { return boardMapper.findBoard(); } Postman을 통해 Test한다. 2021. 5. 13.
DB의 Board 생성 API 작성 Request와 Response 시 json으로 데이터를 주고받게 되는데 자바에는 json 데이터 타입을 지원하지 않는다. 따라서 json과 매핑할 수 있는 객체를 생성해야 하는데 그것을 DTO, VO라고 한다. DTO : Data Transfer Object VO : Virtual Object json과 java의 객체간의 매핑을 위한 jackson mapper 라는 써드파티 라이브러리가 필요하다. 따라서 보드 테이블의 데이터를 저장할 VO객체를 생성해야 한다. BoardVO Domain 디렉토리와 BoardVO 객체를 생성한다. import com.fasterxml.jackson.annotation.JsonInclude; import lombok.Data; @JsonInclude(JsonInclude.. 2021. 5. 12.
Spring과 DB연동 이곳에서는 Docker을 통한 MariaDB를 선행적으로 구현하였다. Mybatis를 통해 연동하는 방법이다. build.grandle에 dependencies를 수정해준다. dependencies { implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' compile("org.springframework.boot:spring-boot-starter-jdbc") compile("org.mybatis.spring.boot:mybatis-spring-boot-starter:1.3.1") runtime("mysql:mysql-connector-java") annotationPr.. 2021. 5. 11.
Create 구현 - Mode 전환 Link 사용시 주의할점 사용자들이 페이지에 방문하기 위해 미리 방문을 해두는 소프트웨어를 가지고 있다면, delete 부분도 미리 로드되어 삭제가 될 수 있다. 따라서 delete는 Link보다는 button을 사용하여 Operation 개념으로 사용하여야 한다. 새로운 Control.js 생성 App.js의 EventHandler 생성 따라서 Control.js를 적절히 수정해주었다. 중간결과 이제는 mode의 실제 기능을 추가해 보겠다. 기존의 content.js를 ReadContent.js로 변경하였다. 또한 Create 기능을 구현하기 위한 CreateContent.js를 생성하였다. 추가적으로 App.js를 수정하였다. 2021. 5. 10.
Props & State 의 차이 Props : 상위 컴포넌트 > props > 하위 컴포넌트 상위 컴포넌트는 하위 컴포넌트에게 props를 통해 값을 전달해 내부의 state를 바꾸기 때문에 컴포넌트 스스로 외부에서 전달되는 props를 변경하는 것은 금지되어 있다. State : 하위 컴포넌트 > 이벤트 실행 > 상위 컴포넌트의 state 호출 > state 값 수정 하위 컴포넌트가 상위 컴포넌트를 동작시키려면 props를 전달하는 것이 아니라 상위 컴포넌트 안에 이벤트를 심고 그 안에 setState로 값을 바꿔야 한다. 2021. 5. 4.
반응형