'API' 태그의 글 목록

API

리소스 2021.07.07
Open API 활용 2021.05.02

리소스

RIMIIT 2021. 7. 7. 01:32

2021. 7. 7. 01:32

리소스

:: 메뉴, 다이얼로그, 비트맵, 커서, 아이콘, 엑셀레이터(단축키), 문자열

→ 리소스는 아이디(중복되지 않는 양의 정수 값)로 다룬다.

① 아이콘 리소스

:: 왼쪽 상단과 최소화 때 하단 제목 표시줄에 나타나는 작은 이미지

→ *.ico 파일 확장자

크기 : 16x16, 32x32, 48 x48, 색상비트 : 4/8/32비트

※ 기본 : 4비트(16색), 32x32

→ 아이콘 아이디

접두사 IDI_

파일 - 새로 만들기 - 파일 - 아이콘 파일 - 기본이 32x32, 4비트 아이콘이므로 이곳을 편집

- 청록색 부분은 '투명색'으로 출력에서 제외되는 색상

- 저장하면 아이콘에 대한 아이디가 다르게 설정되어 별도로 사용할 수 있다.

실제 Resource.h 파일에 가보면 다른 아이디가 설정되어 있음을 알 수 있다

- 아이콘 로딩 함수는 아래와 같다.

HICON LoadIcon(
	__in HINSTANCE hInstance,
	__in LPCTSTR IpIconName
);

이때 IpIconName에는 아이콘 아이디 정수값을 문자열 형식으로 지정할 수 있는데, 여기에 사용되는 함수가 MAKEINTRESOURCE() 이다.

LPTSTR MAKEINTRESOURCE(
	WORD wInteger
);

- 좌측 상단에 ICON2의 내용이, 화면 표시 줄에는 ICON1의 내용이 출력됨을 확인할 수 있다.

② 커서 리소스

:: 커서 설정은 아이콘과 유사하며, 접두사는 IDC_ 이고 *.cur로 표현된다.

1) 커서 로딩 방법

※ 운영체제에서 제공하는 기본 커서 아이디

IDC_APPSTARTING, IDC_ARROW, IDC_CROSS, IDC_HAND, IDC_IBEAM, IDC_ICON, IDC_NO, IDC_SIZE, IDC_WAIT 등,,

- 기본 커서 로딩 함수는 아래와 같다.

HCURSOR LoadCursor(
	__in HINSTANCE hInstance,
	__in LPCTSTR IpCursorName
);

운영체제의 기본 커서 사용시 hInstance는 NULL 값, IpCursorName은 커서 기본 아이디를 넣으면 된다.

임의의 커서를 적용하기 위해선 인스턴스를 지정해줘야 한다.

(핫 스폿 설정이란 이 커서가 화면 내에 위치한다는 기준이 되는 지점)

2) 메세지를 통한 커서 설정 방법 --> 전체 윈도우 영역 안에서의 커서를 통제

- 마우스 이동 시 발생하는 메세지

WM_MOUSEMOVE, WM_SETCURSOR

HCURSOR SetCursor(
	__in HCURSOR hCursor
);

메세지를 로딩한 후 핸들을 통해 커서를 지정해준다

③ 메뉴 리소스

:: 응용 프로그램의 부가적인 기능을 선택하여 실행

:: 사용자에 의해 선택되는 사용자 인터페이스

그러나 이를 클릭하면 아무 일도 일어나지 않는다.

따라서 메뉴를 실행시키려면 WndProc에 이와 관련된 메세지와 정보를 전달하는 코드가 필요하다.

※ 메뉴 관련 메시지

WM_COMMAND : 메뉴 선택

※ 메뉴 항목 구분

- 메뉴 아이디

메뉴 아이디는 wParam에 LOWORD를 통해 그 값이 들어오게 된다.

LOWORD(wParam)

wParam은 unsigned int로 4 Byte 크기를 가진다.

※ 메뉴 항목 호출 확인

메뉴 항목 호출을 확인하기 위해 '메시지 박스'를 이용할 것이다.

int WINAPI MessageBox(
	_In_opt_ HWND hWnd, //핸들
	_In_opt_ LPCTSTR IpText, //출력하고자 하는 문자열
	_In_opt_ LPCTSTR IpCaption, //타이틀 바
	_In_ UINT uType //메세지 형태
);

→ uType에 해당하는 아이디

MB_OK, MB_OKCANCEL, MB_RETRYCANCEL, MB_YESNO, MB_YESNOCANCEL 등

④ 문자열 리소스

캡션이 실제로 출력되는 내용이다.

※ 타이틀 명 수정해보기

하지만 이런 과정이 굉장히 번거롭다.

따라서 문자열은 이런 방법보단 코드에 바로 넣어주는 경우가 많다.

☆ 정리

- 리소스 편집기를 활용하여 리소스를 설정할 수 있다.

- 리소스 아이디는 중복되지 않게 알아서 저장된다.

- 기본 설정일 때 인스턴스는 NULL로 설정된다.

'Project > WIN32 API' 카테고리의 다른 글

그래픽 오브젝트 (0)	2021.07.12
그래픽 (0)	2021.07.08
WndProc (0)	2021.06.26
윈도우 창 생성 과정 (0)	2021.06.25
윈도우즈 프로그래밍 (0)	2021.06.25

Open API 활용

RIMIIT 2021. 5. 2. 05:03

2021. 5. 2. 05:03

Front-end : 우리가 보는 화면

Back-end : 화면에 보여줄 정보를 처리하는 곳

Front-end가 Back-end에 요청을 할 때 특정 규칙에 맞게 요청을 해야함

API(Application Programming Interface) = 사용 규칙을 제공하는 것

Open API : 누군가 Back-end를 만들어놓고 주소와 사용 규칙을 공개한 것을 의미

= "Back-end의 주소와 사용 규칙을 알고 있다면 Front-end만 만들어도 얼마든지 요청하고 데이터를 가져와서 쓸 수 있다는 것"

+) Front-end만 만들어 쓰는 것을 'serverless' 라고 부르기도 함

Front-end 의 요청(Request)과 Back-end의 응답(Response)은 API 마다 정해진 형식에 맞춰서 전달되고 이런 형식이 적혀진 문서를 API 가이드라고 한다.

공통적으로 요청과 응답에 대한 정보가 나와 있다.

<요청>

1. 주소 : 어디로 전달해야 할지

2. 전송방식 : GET/POST

3. 보낼 데이터 (API 요청에서 필요한 정보들)

<응답>

1. 형식 : JSON // 어떤 형식으로 날아오는지(요즘은 거의 대부분이 JSON 형태)

2. 응답 의미 설명 : JSON으로 날아온 응답에 어떤 것들이 포함되어 있는지

1. jQuery CDN 이용

jQuery CDN 사이트에서 가져온다.

CDN (Content Delivery Network)

::특정 서버에 트래픽이 집중되지 않고 컨텐츠를 자동으로 가장 가까운 서버에서 다운받도록 하는 기술

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>

2. jQuery AJAX 이용

Examples에서 예시 하나를 복사해온다. (나중에 사용할 API 가이드에 맞춰서 수정할 예정)

Ajax

:: JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자.

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 (기본적으로 HTTP프로토콜은 클라이언트쪽에서 Request를 보내고 Server쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있음)

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });

<카카오 API 사용>

홈페이지(developers.kakao.com/)에 들어가서 로그인 -> 내 애플리케이션 만들기 -> 키 확인 가능

[도구] - [REST API 테스트] - 자신이 사용하고자 하는 API의 [개발 가이드 보러가기]

<전체 코드>

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 연습</title>
</head>

<body>
    <h1>내 사이트임</h1>
    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <script>
        $.ajax({ //코드 상단 : 요청에 대한 정보
            method: "GET", // 전송 방식
            url: "https://dapi.kakao.com/v3/search/book?target=title", // 전송 URL
            data: { query: "미움받을 용기" }, //전송 정보 JSON 형식
            headers : { Authorization: "KakaoAK 'REST API 키'"}
        })
            .done(function (msg) {//요청에 대한 응답이 올 때 처리하는 코드
                console.log(msg);
            });
    </script>
</body>

</html>

요청에 대한 응답(Response) 정보 - [F12] 키를 이용해 확인(console.log 사용했으므로)

=> API 가이드를 참고해 비교해보면 필수 정보들이 잘 담겨져 있는 것을 확인할 수 있다

<JSON 데이터 JavaScript 접근 방법>

dog = {
    "name": "식빵",
    "family": "웰시코기",
    "age": 1,
    "weight": 2.14,
    "specialty" : ["솜사탕","부리부리"],
    "friend" : {"name": "젤리", "family": "푸들", "age": 7, "weight": 3.1}
}

"식빵"을 가져오려면? dog.name 혹은 .name

"솜사탕"을 가져오려면? dog.specialty[0]

"젤리"를 가져오려면? dog.friend.name

<실습>

아까 봐뒀던 개발자 도구 탭을 활용한다.

※ 'Object' -[마우스 오른쪽] - [Store object as global variable]

(응답 받은 JSON을 console 창에서 다루기 위해 따로 저장해두는 것)

그러면 temp1이라는 곳에 Object가 잘 저장이 된 것이 확인가능하다.

"미움받을 용기"라는 책 제목과 썸네일을 불러올 것이기 때문에

temp1.documents[0].title

temp1.documents[0].thumbnail

를 사용할 것이다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 연습</title>
</head>

<body>
    <h1>내 사이트임</h1>
    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <script>
        $.ajax({ //코드 상단 : 요청에 대한 정보
            method: "GET", // 전송 방식
            url: "https://dapi.kakao.com/v3/search/book?target=title", // 전송 URL
            data: { query: "미움받을 용기" }, //전송 정보 JSON 형식
            headers : { Authorization: "KakaoAK 'REST API 키'"}
        })
            .done(function (msg) {//요청에 대한 응답이 올 때 처리하는 코드
                console.log(msg.documents[0].title);
                console.log(msg.documents[0].thumbnail);
            });
    </script>
</body>

</html>

위의 코드와 똑같지만, console.log 함수를 통해서 console 창을 통해 데이터 확인이 가능하다.

console 창에서 올바르게 값을 불러왔다는 것을 확인할 수 있다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 연습</title>
</head>

<body>
    <h1>내 사이트임</h1>
    <p></p>
    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <script>
        $.ajax({ //코드 상단 : 요청에 대한 정보
            method: "GET", // 전송 방식
            url: "https://dapi.kakao.com/v3/search/book?target=title", // 전송 URL
            data: { query: "미움받을 용기" }, //전송 정보 JSON 형식
            headers: { Authorization: "KakaoAK 'REST API 키'" }
        })
            .done(function (msg) {//요청에 대한 응답이 올 때 처리하는 코드
                console.log(msg.documents[0].title);
                console.log(msg.documents[0].thumbnail);
                $("p").append("<strong>" + msg.documents[0].title + "</strong><br>");
                $("p").append("<img src='"+ msg.documents[0].thumbnail + "'/>");
            });
    </script>
    </script>
</body>

</html>

<p>태그를 추가한 후

append를 통해 (jQuery add html 검색하면 쉽게 방법을 알 수 있음)

<p>태그에 들어갈 내용을 추가해주었다.