복습
스프링 부트 스타터
의존성 자동처리(의존성 전이도 자동으로 처리)
- 의존성 상속관계(전이)도 스타터에선 자동으로 정리해줌.!
Model 클래스?(935p)
-
@Controller의 모델클래스 이용
-
@Controller이용 시 페이지로 리턴이 나오기 때문에 값을 전달할 때 Model 클래스가 필요!
-
왜 RestController때는? 이미 json형식으로 화면에 바로 출력을 하니까, 지금 값 전달 시 지원이 필요한 것은 @Controller이다.
-
@Controller 이름 및 호출
- 기본 인스턴스명 controller
- 작명 시 어노테이션 뒤 입력 @Controller("loginCtrl")
- 호출은 주로 컨테이너에서 진행됨. -
모델 클래스 이용 시
-
JSP(UI)로 값을 바로 바인딩하여 전달 가능
-
모델은 유효범위가 forward 방식임! 페이지주소는 유지가 됨!
-
최신방식 : addAttribute() (<- addObject() <- req.setAttribute(key, value))
-
매핑
-
최근은 메소드 앞에 @get or postMapping을 많이 사용
-
따라서 서블릿(상속, 오버라이드-강제사용)을 사용하지 않아도 단독으로 서비스 제공 가능해짐(스프링 특징) -> 결합도 낮아짐.
noticeController.java 소스리뷰
-
@RequestParam?
-
사용자로부터 입력받는 값을 읽어올 때 사용
-
단, Post 방식에서 body로 받아올 때, 리액트를 연동할 때는 @RequestBody를 사용한다.
-
@Controller?
-
페이지를 리턴하는 어노테이션이기 때문에 값을 전달하기 위해 Model클래스 필요
-
jsonNoticeController는 @RestController를 사용하기 때문에 Model클래스 필요 없음.
강의 내용
스프링 MVC패턴 적용하기
-
컨트롤 계층
-
@Controller
- jsp 페이지 처리할 때
- jstl 사용할 때, 사용 지양하는 중
-
@RestController
- json 형식 페이지 처리 가능한 뷰라이브러리
- Front - Back 독립(Back-End 수정 없이 [[UI]] 변경 가능한 프로젝트 설계 및 제품 선택)
- 나의 설계가 유연한지, UI 적용이 코드수정 없이 쉽게 가능한지 등을 고려하며 코드 작성
- @ResponseBody가 있는데도 지원하는 이유는 뭘까? 그만큼 둘의 분리를 원하는 현 상황
-
서비스 계층
-
@Service
-
퍼시스턴스 계층
-
@Service
-
@Repository
reactDemo
화면단 설치
- 모듈이란?![[모듈]]
스프링 Bean 출력
빈 정렬 및 출력
- https://myhappyman.tistory.com/65 - 코드(DemoApplication.java)
package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;
import org.springframework.context.ApplicationContext;
import java.util.Arrays;
@ServletComponentScan
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
ApplicationContext ac = SpringApplication.run(DemoApplication.class, args);
String[] beanNames = ac.getBeanDefinitionNames();//등록된 빈의 목록
Arrays.sort(beanNames); //정렬하기
Arrays.stream(beanNames).forEach(System.out::println);//스트림으로 변환 및 목록 출력
}
}reactDemo 소스리뷰
-
구조
-
Index.js
-
html과 의존관계 있음. jsx와 html의 연결(화면 표시 컴포넌츠 명시)
-
<> </> : 쓸데없는 div태그 대신 나누는 용으로만 사용 가능(Fragment)
-
react는 상태값이 바뀔 때만 Rendering -> Router 사용(화면중계기)
-
App.jsx
-
라우터 매핑별 연결
-
비동기처리 async & await
-
함수 파라미터 앞에 붙여서 비동기적 처리가 가능해진다.
-
스프링 프로젝트와 연계됨.
-
noticeListDB()로 값이 불러와질 때까지 새로고침 x
-
js에서 map
-
map(key,value)
-
notice : 한 건 -> map으로 처리
-
notices : notice가 모인 전체 리스트
-
(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map)
-
리액트 useEffect란?
-
의존성 배열이란 useEffect에 입력하는 두 번째 매개변수를 말한다.
-
그 매개변수만 관찰하여 변할 때 랜더링을 하거나, 매개변수값을 비워서 최초 한 번만 실행되도록 설정할 수 있다.
-
리액트의 경우, state가 변할 경우, 재랜더링이 되는데 매번 바뀔 때마다 실행되기 때문에 최초 한 번만 실행되도록 설정해두는 편이다!
- 예 : 최초 목록, 특정 이벤트 실행될 떄(클릭, 엔터 등) -
왜? 변하지 않은 값들, 외부 api에서 값을 가져오는 큰 파일 등 계속 랜더링하게 되는 경우, 너무 비효율적이기 때문이다.
-
Insert 실습
디자인패턴
리액트는 MVVM?
MVVM 패턴은 Model + View + View Model를 합친 용어입니다. Model과 View은 다른 패턴과 동일합니다. MVVM 패턴의 구조, 동작, 특징, 장점, 단점을 이야기하겠습니다.
1) 구조
MVVM는 Model + View + View Model를 말합니다.
- Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다.
- View : 사용자에서 보여지는 UI 부분입니다.
- View Model : View를 표현하기 위해 만든 View를 위한 Model입니다. View를 나타내 주기 위한 Model이자 View를 나타내기 위한 데이터 처리를 하는 부분입니다.
2) 동작
MVVM 패턴의 동작 순서는 아래와 같습니다.
- 사용자의 Action들은 View를 통해 들어오게 됩니다.
- View에 Action이 들어오면, Command 패턴으로 View Model에 Action을 전달합니다.
- View Model은 Model에게 데이터를 요청합니다.
- Model은 View Model에게 요청받은 데이터를 응답합니다.
- View Model은 응답 받은 데이터를 가공하여 저장합니다.
- View는 View Model과 Data Binding하여 화면을 나타냅니다.
3) 특징
MVVM 패턴은 Command 패턴과 Data Binding 두 가지 패턴을 사용하여 구현되었습니다.
Command 패턴과 Data Binding을 이용하여 View와 View Model 사이의 의존성을 없앴습니다.
View Model과 View는 1:n 관계입니다.
4) 장점
MVVM 패턴은 View와 Model 사이의 의존성이 없습니다. 또한 Command 패턴과 Data Binding을 사용하여 View와 View Model 사이의 의존성 또한 없앤 디자인패턴입니다. 각각의 부분은 독립적이기 때문에 모듈화 하여 개발할 수 있습니다.
5) 단점
MVVM 패턴의 단점은 View Model의 설계가 쉽지 않다는 점입니다.
