⭐ SpringBoot/SpringBoot + CRUD (5) 썸네일형 리스트형 [SELECT] Back-end 데이터를 Front-end에서 가져오는 방법 # 아래와 같은 게시판 사이트에 Comment를 입력하고 불러오는 프로세스 # 주의할 개념: Controller 모델에 등록된 값은 Front-end에서 언제든지 불러올 수 있다. 아래의 프로세스를 보면서 프론트엔드에서 백엔드 데이터를 어떤식으로 받아 오는지 확인 할 수 있다. 프론트엔드에서 백엔드 데이터를 가져오는 프로세스를 살펴보면 controller는 Model에 데이터를 담아 둔다. 프론트 엔드에서는 api 구분없이 모델에 정의된 name만을 기준으로 데이터를 가져온다. # 아래의 코드를 예로들어 살펴보면 commentDtos는 api controller에 등록된 모델 객체중 하나이다. 아래의 접근글을 참조하면 commentDtos를 정의한 api를 확인 할 수 있다. 더보기 @GetMapping.. [DELETE] 특정 폼의 데이터를 삭제하는 프로세스 # 아래와 같이 특정 폼의 데이터를 삭제하는 프로세스에 대해서 정리한다. # 추가로 메인 리스트 화면에서 세부 페이지로 어떻게 이동하는지 보면 아래와 같다. index.mustache 파일은 아래의 왼쪽 화면과 같이 페이지의 리스트를 보여주고 있으며, 해당 리스트의 세부 페이지로 이동하기 위해서는 오른쪽에 java 코드를 보면 알수 있다. href="/articles/{{id}}">{{title}} 로 이동한다. 그리고 href="/articles/{{id}}" 이 바라보는 대상은 Controller이다. 모든 href는 Controller의 API 주소를 바라본다고 볼 수 있다. 해당 컨트롤러를 살펴보면 아래와 같다. 위에서 href로 연결된 맵핑정보가 컨트롤러 객체 /articles/{{id}}를 호.. [UPDATE] 특정 폼에서 데이터를 업데이트 하는 프로세스 1. 리스트 화면에서 리스트 내용을 클릭하고 들어가면 아래와 같은 화면이 나온다. 2. 여기서 Edit를 클릭했을때의 흐름을 살펴보면 아래와 같다. 3. 코드의 흐름을 보면 아래와 같다. // 화면에서 Edit 버튼을 눌렀을때 나오는 값이 입력된 화면이다. @GetMapping("/articles/{id}/edit") public String edit(@PathVariable Long id, Model model) { // 수정할 데이터를 가져오기 Article articleEntity = articleRepository.findById(id).orElse(null); // 모델에 데이터를 등록하기 model.addAttribute("article", articleEntity); // 뷰페이지 edit... [INSERT] 특정 폼으로 정의된 데이터를 INSERT하는 프로세스 # 전체적인 흐름에 대한 설명은 아래와 같다. (1. form저장 2. dto를 entity로 변환 3. Repository 저장 4. return 신규 URL) ☝ Form 데이터의 값 ⏩ action api 로 넘긴다 ⏩ api가 받아 dto에 담아둔다 ⏩ dto에 담긴 데이터를 entity로 변환한다 ⏩ 변환된 데이터는 Repository Interface CrudRepository를 호출 및 저장한다 ⏩ redirect: 리턴으로 신규로 생성된 id 값으로 리턴을 수행한다. 흐름정리 뷰템플릿 Form으로 데이터의 값을 받는다. → 받은값을 action 태그를 통해 api로 넘긴다. → 해당 api는 넘어온 값을 dto에 담아두기 위해 dto를 생성하고 값의 자바 타입들을 정의한 후 변수로 설정한다.. [SELECT] Select 활용해 Model에 데이터 저장 후 Front-End 에서 사용하는 프로세스 # 전체 데이터를 Select 하여 Model에 저장 후 ViewTemplate에서 활용하는 방법에 대해서 알아보자. 1. 전체 코드는 아래와 같다. 흐름은 간단하다. 데이터를 조회하고, 조회한 데잍를 저장하고, 저장한 데이터를 화면으로 전달하는게 끝이다. // 데이터를 SELECT하여 모델이 담아두는 역할을 한다. @GetMapping("/articles/yakuza") public String yakuza(Model model) { // 여기서 조회하는 값이 최종 쿼리값이라고 볼 수 있다. List articleEntityByyakuza = articleRepository.findAll(); // 위에서 조회한 값을 model에 담아 저장한다. model.addAttribute("yakuzalist".. 이전 1 다음
