About Computer

우체국 우편번호 API 이용방법

기능 구현

1.  우체국 계약고객전용시스템 사이트에서 인증키 발급

2.  system.properties 파일에 인증키 저장 (혹은 application.properties)

### Postcode API App Key ###
postcode.app_key = 발급받은 인증키

3.  Jsoup Java HTML Parser를 pom.xml에 추가

<dependency>
    <groupId>org.jsoup</groupId>
    <artifactId>jsoup</artifactId>
    <version>1.15.3</version>
</dependency>

Jsoup

• 간단히 외부 url에 접근하여 문서를 가져올 수 있게 지원
• Html parse 라이브러리지만 xml도 파싱이 가능

4.  Controller에 코드 작성

    @Autowired
    protected Properties systemProp; // properties에 저장한 인증키 사용하기 위함


    @RequestMapping("/zipCodeList.do")
    public ModelAndView zipCodeList(UiDTO dto, HttpServletRequest request, HttpServletResponse response) throws Exception {
        Map<String, Object> data = new HashMap<String, Object>();

        String ZIPCODE_API_KEY = systemProp.getProperty("postcode.app_key");
        String ZIPCODE_API_URL = "http://biz.epost.go.kr/KpostPortal/openapi2";

        String address = dto.getString("strAddress"); // 프론트에서 입력받은 주소
        String page = dto.getString("strPage"); // 프론트에서 입력받은 이동할 페이지

        StringBuilder queryUrl = new StringBuilder();
        queryUrl.append(ZIPCODE_API_URL);
        queryUrl.append("?regkey=");
        queryUrl.append(ZIPCODE_API_KEY);
        queryUrl.append("&target=postNew");
        queryUrl.append("&query=");
        queryUrl.append(address.replaceAll(" ", ""));
        queryUrl.append("&countPerPage=50"); // 최대 출력 건수인 50으로 설정
        queryUrl.append("&currentPage=");
        queryUrl.append(page);

	// Jsoup을 통해 요청URL에 대한 결과 XML을 파싱
        Document document = Jsoup.connect(queryUrl.toString()).get();
        String errorCode = document.select("error_code").text();

        if(errorCode == null || errorCode.equals("")) {
            Elements elements = document.select("item");
            List<Map<String, Object>> list = new ArrayList<>();
            for(Element element : elements){
                Map<String, Object> param = new HashMap<String, Object>();
                param.put("ZIPCODE", element.select("postcd").text());
                param.put("ADDR", element.select("address").text());
                param.put("ADDR2", element.select("addrjibun").text());
                list.add(param);
            }

            // list 결과 put
            data.put("listMain", list);
            data.put("strTotalCount", document.select("totalCount").text());
            data.put("strTotalPage", document.select("totalPage").text());
            data.put("strCurrentPage", document.select("currentPage").text());
            data.put("strError", "");
        } else{
            String errorMessage = document.select("message").text();
            //data.put("errorCode", errorCode);
            data.put("strError", errorMessage);
        }

        return makeModel(data);
    }

참고 사이트

https://pjsprogram.tistory.com/6

"프록시" 필드는 웹팩 개발 서버가 첫 번째 줄에 있을 때(Hot-Reload 기능을 활성화하기 위해) 개발 환경에서만 사용해야 합니다. 

반응 앱을 호스팅하는 두 가지 주요 방법이 있습니다.

1.

스프링 부트 Jar 내에서 정적 리소스(frontend-maven-plugin을 사용하여 yarn/npm을 다시 실행할 수 있음), 이 방법의 장점은 보안이며 페이지를 제공하기 위해 CORS를 활성화할 필요가 없습니다.

단점은 이 솔루션이 더 많은 코드를 필요로 하고 스프링 부트 서버가 서버에 대한 추가 호출이 필요한 클라이언트에 제공되는 UI를 처리한다는 점입니다. (스프링 우선 접근 방식)

2.

다른 옵션은 amazon S3와 같은 호스팅 서비스에서 호스팅하는 것입니다. 

그런 다음 봄이 아닌 s3에서 호스팅되고 라인의 첫 번째(UI 우선 접근 방식)가 됩니다. 

스프링 부트 앱에서 CORS를 활성화해야 합니다. 그러나 이것은 더 많은 대륙 솔루션입니다.

참고 사이트

https://stackoverflow.com/questions/66179922/reactjs-proxy-url-for-localhost-api-in-prod-when-bundling-with-spring-boot

Tooltip Callbacks

작성 예시

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        let label = context.dataset.label || '';

                        if (label) {
                            label += ': ';
                        }
                        if (context.parsed.y !== null) {
                            label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                        }
                        return label;
                    }
                }
            }
        }
    }
});

참고 사이트

https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks