1. SSR의 특징 SSR은 조금만 바뀌어도 아예 새로운 페이지를 만들어서 준다. (서버가 전체를 다 담당) (EX) 검색버튼을 눌렀을 때 전체 페이지가 아예 새로 로드된다.
2. CSR의 특징 CSR은 페이지를 새로 요청하지 않고 데이터만 요청하는 것이다. (EX) 검색버튼을 눌렀을 때 페이지 전체를 다 만들어오는 것이 아니라 검색된 데이터만 준다.
사실 모든 것을 SSR로 구현할 수는 있다.
하지만, 페이지에 필요한 부분에 CSR을 추가하면
SQL문이 훨씬 간단해 질 수도 있고,
아울러 서버로 보낼 필요가 없는
불필요한 정보들이
다시 submit될 필요도 없다.
출처: 뉴렉처(https://www.youtube.com/@newlec1)
CSR로 구현하는 방식은 간단하다.
서버에서 데이터를 받으면
자바스크립트와 DOM으로
화면을 바꿔주면 된다.
그렇기 때문에 페이지를 하나 만들어놓으면 (SSR)
페이지에 추가로 요청되는 데이터와 관련된 것들은
자바 스크립트로 해결한다. (CSR)
#새로운 컨트롤러 등장: API Controller
완전한 CSR로 가는 경우는 흔하지 않다. (완전한 앱)
SSR을 기반으로 해서 CSR을 얹는 정도로 간다. (웹)
★그러면 서버 사이드에서
데이터를 요청하기 위한 (기존의) Controller와
★ 클라이언트 사이드에서
데이터 API를 요청하기 위한 (새로운) Controller
★★ 총 2개의 Controller가 필요하게 된다.
출처: 뉴렉처(https://www.youtube.com/@newlec1)
두 개의 Controller는 별개이다.
하나의 Controller에서 짬뽕해서 사용하면 안된다.
MVC용 컨트롤러는 페이지(View)를 반환한다.
데이터API용 컨트롤러는 데이터(보통 JSON 형태)를 반환한다.
출처: 뉴렉처(https://www.youtube.com/@newlec1)
#특화된 어노테이션 등장: @GetMapping, @PostMapping 등
만약 한 페이지 안에서
GET, POST, PUT, DELETE가
동시에 일어나고 있다면,
@RequestMapping
어노테이션만으로는
구분이 되지 않아서
추가 처리가 필요하다.
💡 @RequestMapping으로 처리한다면?
RequestMethod가 무엇인지 밝혀주어야 한다. 출처: 챗지피티(https://chat.openai.com/)
💡 만약 @WebServlet이었다면? (더 복잡..)
request.getMethod().equals("POST")로 보낸 요청이 해당되는 메소드와 동일한 것인지를 확인해주거나 출처: 챗지피티(https://chat.openai.com/) 직접 doGet, doPost라는 이름의 메소드를 정의해주었어야 한다. 출처: 챗지피티(https://chat.openai.com/)
MVC 컨트롤러는
링크별로 각각 다른 페이지를 가지고 있으니
GET, POST가 한 페이지에서
일어나는 경우를 제외하면
거의 링크가 충돌날 일이 없으나
API 컨트롤러는
기본적으로 하나의 페이지 안에서
데이터를 GET, POST, PUT, DELETE와
같은 방식으로 요청하고 처리한다.
따라서 각각의 데이터 작업을 처리하는 메소드를
@RequestMapping.equals("GET")과 같이 하지 않고
@GetMapping, @PostMapping과 같이
특화된 어노테이션을 사용한다.
당연히 MVC 컨트롤러에서 사용해도 된다!
출처: 뉴렉처(https://www.youtube.com/@newlec1)
#데이터를 반환한다: @RestController
API Controller는 페이지를 반환하지 않고
데이터를 생성하여 그대로 반환한다.
때문에 추가로 @Responsebody를 붙여서
View가 아니라는 것을 밝혀준다.
(return이 데이터 자체가 되어서
데이터값이 그대로 다 출력될 수 있게!)
출처: 뉴렉처(https://www.youtube.com/@newlec1)
다시 한 번 강조!
Api Controller는
페이지를 만들어주는 것이 아니다.
무조건 데이터만 반환한다.
💡 API Controller를 만들자(CSR을 위한 데이터 API)
@Controller("apiMenuController")
@RequestMapping("/api/menus")
public class MenuController {
@Autowired
private MenuService service;
@ResponseBody
@GetMapping
public List<Menu> list(){
List<Menu> list = service.getList();
return list;
}
}//class ends
💡 RestController라고 어노테이션을 변경하자.
@RestController("apiMenuController") //RestController라고 설정하기(View 아님 의미)
//@Controller("apiMenuController")
@RequestMapping("/api/menus")
public class MenuController {
@Autowired
private MenuService service;
// @ResponseBody //위에 RestController하면 메소드마다 일일이 안붙여도 됨
@GetMapping
public List<Menu> list(){
List<Menu> list = service.getList();
return list;
}
}//class ends
#HTTP 메소드
💡 5가지만 잘 기억하자
Creat(등록): POST Read(조회): GET Update(수정): PUT(전체)/PATCH(일부) Delete(삭제): DELETE
POST와 PUT 은
둘 다 INSERT 기능을 하지만,
잘 구분해서 사용하자.
POST는 새로운 것을 추가하는 느낌 (추가)
PUT은 원래 자리로 되돌리는 느낌 (수정)
(일반적으로 수정할 때 PUT을 사용한다.)
PUT과 PATCH도 구분하자.
PUT은 전체 내용을 다 수정할 때,
PATCH는 위에 덧붙일 때 사용하는 느낌이다.
(일부분에 영향을 주고자 할 때)
#REST(Representational State Transfer)
💡 REST란?
웹 서비스 아키텍처 스타일의 하나로, 네트워크 기반 응용 프로그램을 구축하기 위한 설계 원칙과 규칙의 집합이다.
REST는 리소스를 표현하고 상태를 전송하는 데 사용되며, HTTP 프로토콜을 기반으로 하므로 웹에서 주로 사용된다.
REST의 핵심 개념은 서버와 클라이언트를 분리하여 독립적으로 발전할 수 있는 확장성을 제공하는 것이다.
💡 RESTful하다란? REST를 충족한다는 말이다. 실제 자원을 달라는 것이 아니라, 웹에 기반한 자원을 달라고 하는 것이기 때문에 그냥 REST가 아니라 RESTful API라고 부르기 시작했다.
💡 REST의 주요 개념
1. 리소스(Resource): 모든 것을 리소스로 간주한다. 예를 들어, 웹 페이지, 이미지, 사용자 데이터, API 엔드포인트 등은 모두 리소스다.
2. 상태 전달(State Transfer): 리소스의 상태를 전달하는 것이 핵심이다. 클라이언트는 리소스의 상태를 요청하고, 서버는 해당 상태를 클라이언트에게 제공한다. 이를 통해 클라이언트와 서버 간의 통신이 이루어진다.
3. HTTP 메서드: 다양한 HTTP 메서드를 사용하여 리소스를 조작한다.
★ 주요 HTTP 메서드 ★ * GET: 리소스를 읽을 때 사용하며, 주로 데이터를 검색하는 데 사용된다. * POST: 새로운 리소스를 생성할 때 사용되며, 데이터를 서버로 제출한다. * PUT: 리소스를 업데이트 또는 대체할 때 사용하며, 주어진 리소스를 요청 본문의 데이터로 교체한다. * DELETE: 리소스를 삭제할 때 사용한다.
앞으로 이렇게 CSR방법으로
클라이언트단과 데이터를 주고받기 위해
REST 형태의 API를 만들것이다.
REST를 준수하는 것은
API를 만들 때의 기준이 된다.
때문에 url을 짤 때 많이 고려해야 한다.
현재까지는 페이지와 관련된 방식으로 url을 설계했지만
이제부터는 전달하려는 리소스 중심으로 url을 작성한다.
💡 url의 계층구조
목록>객체>속성>값 특정 메뉴에서 속성까지 가는 방식으로 url을 짠다. 이제는 더 이상 페이지와 관련된 url이 아니다.
출처: 뉴렉처(https://www.youtube.com/@newlec1)
목록은 복수형태로 쓰는 것이 일반적이다.
menu라고 하지 않고 menus라고 해서
그 뒤에 속성의 값이 나타나는 형태로
url을 적성한다.
💡 SSR방식의 url과 CSR방식의 url
1. SSR방식(View 경로 중심): menu/list?id=3
2. REST방식(리소스 중심): menus/3 → menus안의 3번 메뉴
※ 쿼리스트링이 아예 안들어간다는 것이 아니다. 상세하게 요청할 때는 쿼리스트링이 들어갈 수도 있다.
HTML은 SSR 방식으로 이미 만들어졌고, 수정되는 것이 아니다. 위의 요청들은 요청될 때마다 브라우저에 동적으로 만들어지는 것이다.
다행히 별도로 테스트 할 수 있는 곳이 있다.
이름은 Postman!
테스트용 데이터 API를 만들어서
테스트 할 수 있다.
Postman 웹에서 만들어서 하면
서버 문제가 있기 때문에
(Postman의 서버가 local이 되어버린다.)
별도로 desktop 버전 파일을
다운로드 받을 것 잊지 말기!
출처: 뉴렉처(https://www.youtube.com/@newlec1)
별도로 데스크탑 버전의 postman을 설치하면
우리가 띄운 로컬서버를 인식시킬 수 있다.
출처: 뉴렉처(https://www.youtube.com/@newlec1)
#POST: JSON형식으로 보내기
자바스크립트는 데이터를 JSON 형식으로 보낸다.
어떠한 객체도 JSON으로 만들 수 있고
어떤 JSON도 자바스크립트 객체로 바꿀 수 있다.
Body 부분에 raw에 체크한 뒤에
표기방법을 JSON이라고 해준다.
이때 전달하려는 JSON 형식은
key값을 더블쿼터("" )로 감싼
완전한 형식의 JSON이어야 한다.
출처: 뉴렉처(https://www.youtube.com/@newlec1)
Body에서 JSON으로 체크하면
Header에서 Content-Type을 확인할 수 있다.
이때 Accept하는 양식 ( */* )의 뜻은
모든 파일 형식을 다 받을 수 있다는 뜻이다.
출처: 뉴렉처(https://www.youtube.com/@newlec1)
#JSON으로 요청처리: @RequestBody
JSON 형식으로 데이터를
POST/PUT/DELETE하면
스프링에서도 별도로 처리가 필요하다.
안그러면 통째로 문자열로 인식해서
아래와 같은 오류가 난다.
출처: 뉴렉처(https://www.youtube.com/@newlec1)
스프링에서 JSON을 객체로 받을
파라미터 앞에
@RequestBody라는
어노테이션을 붙여준다.
/* -------------- 메뉴를 등록하는 API -------------- */
/*
* PostMapping에서 소괄호 안들어가면 위에있는 url 그대로 쓴다는 뜻!
* 그래서 안 적어줘도 됨
*
*/
@PostMapping
public Menu reg(
@RequestBody Menu menu,
@PathVariable long id) {
/*
* 등록한 데이터를 바로 반환해야 한다.
*
*/
//얘한테 등록이 잘 되었는지만 알려주면 되는거라서 boolean으로 처리하거나 간단한 숫자로 처리한다.
//등록된 데이터를 바로 받기를 원할 수 있다. (등록일자, 아이디, 조회수 등과 같은 DB가 만들어내는 데이터)
//그래서 내가 만든 데이터를 추가한 DB를 넘긴다.
System.out.println(menu);
Menu newOne = service.add(menu); //반환타입(void 아님): 방금 DB에 추가한 Menu를 반환하게 한다.
System.out.println("==========");
System.out.println(newOne);
return newOne;
}
/* -------------- 메뉴를 수정하는 API -------------- */
/* ====================================
* url: /api/menus/16 (단, 여기서 16)은 변수화 되어야 한다.)
* @PutMapping
* id값은 전달되는 매개변수 Menu menu에서 받을 수 있기 때문에
* 따로 url에 적어주지 않는다.
* ====================================
*/
@PutMapping /*("{id}")*/ //POST처럼 url에 id를 적어주지 않고 바로 PUT한다.
public Menu edit(
@RequestBody Menu menu) {
System.out.println(menu);
Menu mMenu = service.modify(menu);
System.out.println("==========");
System.out.println(mMenu);
return mMenu;
}
