[패스트캠퍼스 수강 후기] 자바 인강 100% 환급 챌린지 49회차 미션

17. 17. 프론트엔드 ~18. 18. 가게 수정

html,

css,

javascript

nodejs -> serverside javascript, 범용 자바스크립트 런타임 활용 예정

특히 webpack 이라는 강력한 도구를 사용할 예정이다.

주의할점: CORS(Cross- origin resource sharing)

-> 스프링에서 @CrossOrigin 이라는 어노테이션을 활용한다.

node js 깔기
eatgo-web 디렉토리 생성
디렉토리로 들어가 npm init

{
  "name": "eatgo-web",
  "version": "1.0.0",
  "description": "eat-go web project",
  "main": "src/index.js",
  "scripts": {
    "test": "jest"
  },
  "author": "KJin",
  "license": "ISC"
}

webpack dev server 사용 예정 -> 아주 빠르게 개발용 서버를 띄울 수 있다.
- 설치 --save-dev( 개발용에만 저장)
  - npm install --save-dev webpack webpack-cli webpack-dev-server

{
  "name": "eatgo-web",
  "version": "1.0.0",
  "description": "eat-go web project",
  "main": "src/index.js",
  "scripts": {
    "start": "webpack-dev-server  --port 3000",
    "test": "jest"
  },
  "author": "KJin",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

npm start

주의해서 봐야하는 부분, start 부분을 반금 만든 것이다. 포트번호를 지정하고 , src/index.js 를 만들어야 서버가 구동한다.

fetch 를 이용해서 request 요청을 할 수 있다.

fetch("http://localhost:8080/restaurants")

-> error :: cors 위협을 해소하자.


//urls.py
@CrossOrigin // cors 응답을 막지 않는다.
@RestController
public class RestaurantController {

//자바스크립트에서 비동기 처리할때 promise 를 처리한다. 그 내용물을 보고 싶으면
fetch('http:127.0.0.1:8000/restaurants').then(console.log)
fetch('http:127.0.0.1:8000/restaurants').then(r=>r.json()).then(console.log) //json으로 파싱해 보겠다.

dev server 는 내가 main 이라고 지정한 경로의 파일을 main.js 로 인식하게 도와준다.

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>EatGo</title>
</head>
<body>
<p>Hello World</p>
<script src="./main.js"></script>
</body>
</html>

//src/index.js
console.log('샛별을 쫒는 헤파이토스')

//src/index.js
//console.log('샛별을 쫒는 헤파이토스')
(async () => {
    const url = "http:localhost:8080/restaurants"
    const response = await fetch(url);
    const restaurants= await response.json();
    
    const element  = document.getElementById('app');
    element.innerHTML= `//여러개 다 잘 들어가게
    
    ${restaurants.map(restaurant =>`
    
    <p>
      ${restaurants[0].id}
      ${restaurants[0].name}
     ${restaurants[0].address}
     </p>
    `).join('')}
    `;
   // JSON.stringfy(restaurants)// 화면에 출력해라.

})();

이러면 되는 것으로 나온다.

update(patch) -> 성공시 200

데이터를 고치기만해도 디비에 반영되는 어노테이션 -> @Transactional

* controller test

@Test
public void update() throw Exception{
	mvc.perform(patch("/restaurants/1004")
    .contentType(MediaType.APPLICATION_JSON)
    .content("{\"name\":\"JOKER BAR\",\"address\":\"Busan\"}"))
    .andExpect(status().isOk());
    
    
    
    
    verify(restaurantService).updateRestaurant(1004L, "JOCKER BAR","BUSAN");
}

* controller

@PatchMapping("/restaurants/{id}")
public String update(@PathVariable("id") Long id, @RequestBody Restaurant  resource){

    String name = resource.getName();
    String address = resource.getAddress();
    restaurantService.updateRestaurant(id, name, address);

	return "{}";
}

* Service Test

@Test
public void updateRestaurant(){

	Restaurant restaurant = new Restaurant(1004L,"밥집","서울");
	Restaurant updated= restaurantService.updateRestaurant(1004L,"술집","부산");

	assserThat(update.getName(),is("술집"));


}

-> 찾아서 얻어졌고, 바뀌었다.

// Service
@Transactional // save 안써도 여기서 일어난  데이터의 변경이 디비에 반영되게 돕는다.
public Restaurant updateRestaurant(Long id, String name, String address){

	Restaurant restaurant = restaurantRepository.findById(id).orElse(null);
    restaurant.updateInformation(name, address);
    return restaurant;

}

자바 인강이 듣고 싶다면 =>https://bit.ly/3ilMbIO

저작자표시

'스프링, 자바' 카테고리의 다른 글

BaseEntity.java (0)	2020.10.03
[패스트캠퍼스 수강 후기] 자바 인강 100% 환급 챌린지 50회차 미션 (0)	2020.09.28
[패스트캠퍼스 수강 후기] 자바 인강 100% 환급 챌린지 48회차 미션 (0)	2020.09.26
[패스트캠퍼스 수강 후기] 자바 인강 100% 환급 챌린지 47회차 미션 (0)	2020.09.25
[패스트캠퍼스 수강 후기] 자바 인강 100% 환급 챌린지 46회차 미션 (0)	2020.09.24

killog

티스토리 뷰