✔ Done
- 호눅스 마스터 수업
- 미션4 수정 후 머지
- 미션5진행
- 정리한 내용은 여기
- AJAX(기술), XHR(API, 우린 XHR객체를 보낸다), JSON(데이터형태)의 개념에 대해 알게 되었다.
- AJAX로 답변을 추가고 삭제하는 것을 구현해보았다.
- json으로 소통하려면 별도의 컨트롤러가 필요하며 스프링부트에서는 @RestController를 붙인 다는 것을 알게되었다.
- json으로 응답시 오류 발생시 alert(별도의 창 떠서 에러메시지 알려줌)를 사용해보았다.
- 매번 쿼리를 날려 데이터를 조회하면 성능이 저하된다. 자주 조회하는 부분에 대해서는 필드에 선언하는 것도 좋은 방법!
📂 Feeling
Good
Bad
- 주말동안 계획한 일들을 하지못했다. 미션과 다른 일들과의 밸런스를 다시 유지하도록 해야겠다.
✔ TODO
- 마스터 수업 복습, 데이터베이스 공부, 스프링공부, 자바공부
🗒 Learned
1) 예외는 언제 발생시킬까
- 히로와 함께 질문해서 예외를 만들어야 할 때에 대해 학습했다.
1-1) 궁금했던 점
- 한 가지 기능을 구현할 때 entity - repository - service - controller 로 이어진다. 어느 단에서 예외를 발생시켜야 할까?
- @ControllerAdvcie를 사용하면 예외의 종류가 같으면 같은 값이 return되므로 다른 예외처리를 위해서 Custom Exception을 계속 만들어야 한다. Custom Exception을 만드는 기준은 무엇일까
- Exception을 발생시키는 것과 로직으로 처리 (if~ {return })하는 것의 차이는 무엇이고 언제 Exception을 발생시켜야 할까
1-2) 브라이언 리뷰어님의 답
- 예외 발생 기준을 몰라 생기는 문제다.
프로그램을 작성한다는 건 한편의 플로우 차트를 짜는 것과 같습니다.
제 생각입니다만 내가 머릿속에 그린 플로우 차트의 가지에 담긴 상황이라면, 예외는 아닙니다.
1-3) 더 공부해볼 키워드
- HTTP Status Code의 개념과 매칭되게 설계
2. AJAX(Asynchronous JavaScript and XML, 에이잭스)는 왜 필요한가?
- 화면을 전체 새로고침 하는 것이 아니라 부분만 업데이트해서 가져오기 위해
2-1) XHR이란?
-
AJAX를 하기 위해서 XHR API를 활용하는 것
- 우리가 보내면 XHR객체로 간다. 그러면 거기에 나한테 데이터 보내줄 때 어떤 형식으로 보내줘. 하는 요청사항을 담고 있어서 서버가 JSON으로 응답해 준다.
-
XML HTTP Request
-
XMLHttpRequest (XHR) is an API in the form of an object whose methods transfer data between a web browser and a web server. The object is provided by the browser's JavaScript environment. Particularly, retrieval of data from XHR for the purpose of continually modifying a loaded web page is the underlying concept of Ajax design. Despite the name, XHR can be used with protocols other than HTTP and data can be in the form of not only XML,[1] but also JSON,[2] HTML or plain text.[3]
-
어쨌든 (객체형태?)의 API이고 (API 아래)
-
웹 브라우저와 웹서버 사이에서 데이터를 전송하고
-
자바스크립트 환경의 브라우저에서 제공되고
-
로드된 웹페이지의 지속적인 수정을 위해 데이터를 XHR로부터 계속 검색하기 위해서
- 게시글의 댓글 부분의 데이터만 가져와서 업데이트 시키는 것. 웹페이지 전체를 새로 가져오는 것이 아니라
-
서버가 전달하는 데이터 형식이 xml, json
-
XML, JSON 다 가능 (요즘 인기는 JSON)
2-2) API란?
- API란? Application Programming Interface
- 두 어플리케이션의 다리 역할
- 카카오 로그인을 다른 웹 프로그램에서 사용할 때
In computing, an application programming interface (API) is an interface that defines interactions between multiple software applications or mixed hardware-software intermediaries.[1] It defines the kinds of calls or requests that can be made, how to make them, the data formats that should be used, the conventions to follow, etc. - 위키
- 우리 웹 프로그램의 기능을 사용하고 싶다면 API Interface에 적힌대로 요청을 날려라 하는 것
2-3) AJAX란?
- https://coding-factory.tistory.com/143
- Asynchronous Javascript And Xml
- JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술
3) @RestController
- 출처 https://mangkyu.tistory.com/49
- JSON 처리를 하기 위해서
- @RestController는 Spring MVC Controller에 @ResponseBody가 추가된 것
- 원래 url이 들어가면 톰캣?에서 매핑된 url을 찾아주기 위해 @Controller를 뒤진다. (Controller에서 view를 리턴) 그런데, @RestController가 들어가면 view를 리턴하지 않고 바로 그 데이터로 변환해준다.
- @RestController는 컨트롤러의 viewResolver 대신에 HttpMessageConverter가 동작.
- http 메세지 컨버터가 객체를 -> 텍스트 형태로
- http 메세지 컨버터는 들어올 때도 적용이 되지만 나갈 때도 적용이 된다. 텍스트를 -> 다시 객체로
때도 적용이 되지만 나갈 때도 적용이 된다. 텍스트를 -> 다시 객체로
4) AJAX로 답변을 추가, 삭제하는 과정
답변 버튼 클릭 -> script.js에서 이벤트 캐치?해서 (디폴트로 실행되는 이벤트를 막고) json으로 만들어 해당 url로 전송 -> @RestController에서 검증 및 수행 후 데이터 저장 -> 결과를 json으로 응답 -> script.js에서 html에 해당 데이터 or 응답 결과 뿌려주기
- 여기서 전체 page 재로드 하지 않고 범위를 지정하여 새로 응답이 온 부분만 재로드한다.
- ajax로는 delete도 가능
- .click 으로는 맨처음 페이지에 로드된 부분의 이벤트에 대해서만 캐치할 수 있어서
- 상위.on("click", "이벤트 탐지할 곳", 수행할 연산) 으로 작성해 줄 수 있다.
- 자바스크립트의 this는 호출되는 곳에 따라 의미가 변한다. 더 공부해야 한다 (#todo)
- json으로 데이터 요청-응답하는 과정에서 발생한 에러는 json을 처리해 줄 수 있는 곳에서 처리해줘야 한다.
- 에러 발생된 컨트롤러에서 @ExceptionHandler로 처리하거나
- 별도의 @RestControllerAdvice 가 붙은 클래스를 만들어 예외를 처리해준다.
- 이 에러처리의 결과로 String을 return하면 에러메시지를
- 응답실패처리 연산에서 xhr.responseText로 읽어올 수 있다.
$.ajax({ type: 'post', url: url, data: queryString, dataType: 'json', error: function (xhr, status) { alert(xhr.responseText); },
기타
-
명령어 mv
- 파일이동 (상위 디렉토리로도 이동 가능 ../ 활용)
- mv 파일이름 경로
https://m.blog.naver.com/PostView.nhn?blogId=diceworld&logNo=220190468271&proxyReferer=https:%2F%2Fwww.google.com%2F
