4주차 네이버 API 이용, 컴포넌트, 모달, 스케줄러

Controller 제일 바깥 쪽에서 요청을 받고, 응답을 되돌려주는 역할

Service는 중간에서 구체적인 작업 순서 결정

Repository는 DB와 직접 소통함으로써 자료를 생성, 조회, 변경, 삭제

각 레이어 간에는 Entity를 직접 사용하지 않고 DTO 라는 택배상자를 만들어 사용

 

네이버 API 사용

https://developers.naver.com/products/intro/plan/

 

ARC로 바로 사용 

 

API 설계

3계층 설계

1.Controller 

-관심 상품 관련 컨트롤러

-검색 관려 컨트롤러

2.Service

-관심 상품 가격 변경

3.Repository

• Product: 관심 상품 테이블
• ProductRepository: 관심 상품 조회, 저장
• ProductRequestDto: 관심 상품 등록하기 title, link, image, lprice
• ProductMypriceRequestDto: 관심 가격 변경하기 myprice 
• ItemDto: 검색 결과 주고받기

-org.json 패키지 설치

JSONObjdect, JSONArray 클래스

 

-컴포넌트 등록(Controller)

 

-HTML, CSS, Javascript 파일 분리

.css, .js

 

-focus()

 

-modal

$('#container').addClass('active');

 

function addProduct(itemDto) {
    /**
     * modal 뜨게 하는 법: $('#container').addClass('active');
     * data를 ajax로 전달할 때는 두 가지가 매우 중요
     * 1. contentType: "application/json",
     * 2. data: JSON.stringify(itemDto),
     */
    // 1. POST /api/products 에 관심 상품 생성 요청
    $.ajax({
        type: "POST",
        url: '/api/products',
        contentType: "application/json",
        data: JSON.stringify(itemDto),
        success: function (response) {
            // 2. 응답 함수에서 modal을 뜨게 하고, targetId 를 reponse.id 로 설정 (숙제로 myprice 설정하기 위함)
            $('#container').addClass('active');
            targetId = response.id;
        }
    })
}

-스케줄러

// 초, 분, 시, 일, 월, 주 순서 @Scheduled(cron = "0 0 1 * * *")

TimeUnit.SECONDS.sleep(1);