✨ API 설계

src
main
ㄴ resources 
		ㄴ static
        	ㄴ images
            ㄴ basic.js
            ㄴ style.css
            ㄴ index.html
		ㄴ templates
        ㄴ application.properties
ㄴ java 
	ㄴ com.sparta.week04
                ㄴ controller
                        ㄴ ProductController
                ㄴ models 
                        ㄴ Product
                        ㄴ ProductRepository (i)
                        ㄴ ProductRequestDto
                        ㄴ ItemDto
                        ㄴ Timestamped
                ㄴ sevice
                        ㄴ ProductService
                ㄴ utils
                		ㄴ NaverShopSearch
                ㄴ Week04Application

CRUD

타임라인 API

기능	Method	URL	Return
관심 상품 검색,목록 보여주기	GET	/api/search?query=검색어	List<'ItemDto'>
관심 상품 조회	GET	/api/products/	List<'Product'>
관심 상품 등록	POST	/api/products/	Memo
관심 상품 가격 등록	PUT	/api/products/{id}	Long
키워드로 검색한 상품 목록	GET	/api/search?query=검색어

요구기능

- 상품명에 따른 검색, 그 결과를 목록으로 보여주기
- 관심 상품 등록 & 조회
- 관심 상품에 대한 최저가 등록하기

✨ Repository

models 
	ㄴ Product
	ㄴ ProducutRepository (i)
	ㄴ ProductRequestDto
    ㄴ ItemDto
	ㄴ Timestamped

1. Timestamped.java

# Timestamped.java
@Getter 
@MappedSuperclass // 멤버 변수가 컬럼이 되도록 합니다.
@EntityListeners(AuditingEntityListener.class) // 변경되었을 때 자동으로 기록
public abstract class Timestamped {
    @CreatedDate // 최초 생성 시점
    private LocalDateTime createdAt;

    @LastModifiedDate // 마지막 변경 시점
    private LocalDateTime modifiedAt;
}

# Week04Application
@EnableJpaAuditing 추가

2. Product.java

3. ProductRepository (i)

public interface ProductRepository extends JpaRepository<Product, Long> {
}

4. ProductRequestDto

5. ProductMypriceRequestDto

✨ Controller

controller 
	ㄴ ProductController

1. ProductController.java

@RequiredArgsConstructor
@RestController
public class ProductRestController {

    private final ProductRepository productRepository;

    @GetMapping("/api/products")
    public List<Product> readProduct() {
        return productRepository.findAll();
    }

✨ 관심상품 조회

@GetMapping
"모아보기" 탭을 눌렀을 때 아래와 같이 등록된 관심 상품을 조회할 수 있음

✨ 관심상품 등록

상품을 검색한 후, 등록 버튼을 눌렀을 때 관심 상품이 생성됨.
검색 결과에서 제목, 이미지, 링크, 최저가를 가져오기

✨ 키워드로 상품 검색

검색어를 요구에따라 바꾸기
검색 결과를 문자열에서 DTO로 바꾸기

1. org.json 패키지 설치

   (build.gradle > dependencies에 붙이기, 새로고침까지)
    // https://mvnrepository.com/artifact/org.json/json
    implementation group: 'org.json', name: 'json', version: '20160810'

2. JSONObject, JSONArray

# 문자열 정보를 JSONOBject로 
JSONObject rjson = new JSONObject(result);

#items 배열 꺼내기
JSONArray items = rjson.getJSONArray("items");

# JSONArray로 for문 돌기
for (int i=0; i<items.length(); i++) {
	JSONObject itemJson = (JSONObject) items.get(i);
	System.out.println(itemJson);
}

# String, int 데이터 뽑기
String title = itemJson.getString("title");
int lprice = itemJson.getInt("lprice");

3. ItemDto 생성

@Getter
public class ItemDto {
    private String title;
    private String link;
    private String image;
    private int lprice;

    public ItemDto(JSONObject itemJson) {
        this.title = itemJson.getString("title");
        this.link = itemJson.getString("link");
        this.image = itemJson.getString("image");
        this.lprice = itemJson.getInt("lprice");
    }
}

4. fromJSONtoItems 메소드

# NaverShopSerach.java
public List<ItemDto> fromJSONtoItems(String result) {
        JSONObject rjson = new JSONObject(result);
        JSONArray items  = rjson.getJSONArray("items");
        List<ItemDto> itemDtoList new ArrayList<>();
        
        for (int i=0; i<items.length(); i++) {
            JSONObject itemJson = items.getJSONObject(i);
            ItemDto itemDto = new ItemDto(itemJson);
            itemDtoList.add(itemDto);
        }
        return itemDtoList;
    }

✨ 키워드로 상품 검색

네이버 API와 서비스 연결하기
검색어를 입력하면, 컨트롤러가 그것을 전달받음
전달받은 검색어로 API에 요쳥하고, 결과를 사용자에게 응답

Component

스프링에게 권한 주기 
(스프링이 자동으로 생성하거나 할 수 있는지 권한 판단할 때 
그 권한이 있다고 여기도록 )

1. NaverShopSearch 컴포넌트 등록

# NaverShopSearch.java

@Component   <-  등록
public class NaverShopSearch {
    public String search(String query) {
.
.


# SearchRequestController.java

private final NaverShopSearch naverShopSearch; 
// 컴포넌트 등록이 되어있어서 final 사용 가능

2. SearchRequestController 만들기

기능	Method	Url
키워드로 검색한 상품 목록	GET	/api/search?query=검색어

✨ 상품 검색 기능

상품을 검색하면 API 정보 가져오기(execSearch)
가져온 데이터를 html로 만들어 보여주기(addHTML)

# addHTML()
<div class="search-itemDto-right">
	<img src="images/icon-save.png" alt="" onclick='addProduct(${JSON.stringify(itemDto)})'>
</div>												addProduct(${itemDto}) (x)
							  		//  JSON 데이터 형식을 문자열로 바꿔서 넣어서 파라미터값 전달

✨ 관심상품 등록

저장하기 버튼을 누르면 POST /api/products 에 관심 상품 생성 요청
addProduct 함수에서 modal을 뜨게 하고, targetId 를 reponse.id 로 설정

function addProduct(itemDto) {
	@.ajax({
    	type: 'POST',
        url: `/api/products`,
        data: 'JSON.stirngify(itemDto)', // json 데이터인 itemDto를 문자열로 바꿈
        contentType: "application/json",
        success: function (response) {
        	$('#container').addClass('active');   // 모달로 뜨게하기
            targetId = response.id;
        }
    })
}

✨ 관심상품 보여주기

GET /api/products/ 로 요청
showProduct, addProductitem 만들기

✨ 스케줄러 만들기

정해진 시간에 관심 상품 목록 제목으로 검색해서, 최저가 정보 업데이트하는 스케줄러 만들기

utils 에 Scheduler.java 파일 만들기

Scheduler 클래스 만들기
ProductService에 updateBySearch() 메소드 만들기
Week04Application에 @EnableScheduling 삽입