[ICT 학점연계 프로젝트] Open API 활용한 웹 _ Node.js

Five-Sun/ICT_Intern_API_Exercise: ICT 학점 연계 프로젝트 인턴십_Open API 활용 과제 (github.com)

GitHub - Five-Sun/ICT_Intern_API_Exercise: ICT 학점 연계 프로젝트 인턴십_Open API 활용 과제

1. 주제 정하기

 

API에 대해 알아보고 Open API를 활용해 보는 프로젝트.

내가 이해한 Open API의 특징은 요청을 통해 제공처의 데이터를 가져와 개발에 사용할 수 있게 해준다는 점이었다. Kakao 와 Naver 같은 기업의 경우엔 단순 데이터의 제공을 넘어서 다양한 기능들도 편리하게 사용할 수 있도록 제공하고 있었다.

특정한 주제를 정하기 보단 원하는 기능 구현을 우선으로 두었다.

1. 거창한 기능을 구현하는 것보다 기본을 활용하여 구성하기.
2. 요청에 따라 제공처의 데이터를 Json 객체의 형태로 받아오기.
3. 데이터를 원하는 부분만 가공하여 사용하여 UI에 출력하기.
4. API를 통해 받아온 데이터를 파라미터로 또 다른 API의 쿼리로 사용하고 연동하여 특정 기능 구현하기.

 

2. 일정 계획

 

3월 9일 : API에 대해 조사, 공부하기.

3월 10일: Kakao 검색 Open API 활용.

3월 11일: 공공데이터 Open API 활용.

3월 13일: Kakao 공유하기 Open API 활용.

3월 14일: Kakao 공유하기 Open API 활용.

3월 15일: Youtube Open API 활용.

3월 16일: Youtube Open API 활용.

3월 17일: 테스트와 각종 예외 처리

3월 18일: 테스트와 각종 예외 처리

3월 21일: AWS EC2와 연동.

3월 22일: 결과물 정리.

 

3. 개발 환경

 

Front-end : Html, CSS, Javascript

Back-end: Node.js

Editor: VS code

 

4. 프로젝트 주요 파일 정리표

 

app.js	프로젝트의 기본이 되는 Js 파일
main.html	메인 화면 Html 파일
kakao.html	카카오 Open API 구현 Html 파일
data.html	공공데이터 + Youtube Open API 구현 Html 파일
share.js	카카오톡 공유하기 API 기능 Js파일
listup.js	공공데이터 저작물 목록 테이블 출력 기능 Js파일
search.js	Youtube 동영상 검색 기능 Js 파일
style.css	공통 CSS 파일

 

5. 간단한 코드 설명과 해결 과정.

 

페이지 내 기능: 

• Kakao Open API로 이동
• 데이터 Open API + Youtube Open API로 이동
• 참고 자료 이동

해결 과정:

• 전체적인 CSS를 깔끔하고 간단하게 구성해보고 싶은 마음에 처음으로 grid 형식을 사용
• 컴포넌트들을 적절한 크기로 배치시키는데 어려움이 있었지만 필요한 컴포넌트만 적절하게 잘 사용
• 페이지 이동의 기능을 구현하는데에는 어려움 없이 해결

 

 

Kakao 검색 API

페이지 내 기능: 

• Kakao 도서 검색 기능
• Kakao 공유하기 기능

 

해결 과정:

• OPEN API를 수업 중이나 공모전 프로젝트를 하면서 사용해 본적이 있지만 Youtube 영상을 통해 다시 학습
• Ajax를 통해 요청 전송을 하고 쿼리 데이터로는 도서 이름을 이용
• 가져온 Json 객체에서 첫번째 배열에 저장된 내용을 화면에 출력
• 검색이 될 때 마다 새로운 정보로 화면을 갱신하기 위해 .html()을 사용
• 요청하는 결과가 없을 경우, alert될 수 있도록 예외 처리
• 공유하기 기능은 별도의 Js파일을 작성하여 function으로 연결
• 공유하기 feed에 검색한 도서의 내용을 담고 싶어 Json객체를 매개변수로 주었지만 실패
• Json객체를 stringify()를 사용하여 String객체로 변환하여 전달하니 동작
• 10개의 테스트 케이스 중 8개는 통과 2개는 Syntax에러 발생
• 에러 위치가 뜨지 않아 어려움이 있었지만 매개변수로 사용하는 도서 설명 데이터의 따옴표(')가 원인임을 파악
• replace()를 사용하여 따옴표를 공백으로 변환하여 Syntax에러 해결

 

 

공공데이터 음악 저작물 목록

Youtube Data API v3를 활용해 Youtue 페이지 이동

페이지 내 기능:

• 공공 데이터 포털의 한국저작권보호원_음악 저작물 API 목록 출력
• 보고싶은 음원의 Youtube Link로 이동

해결 과정:

• 테이블 형식으로 목록을 받아옴 (listup.js 파일을 작성하여 listup()을 이용)
• Open API 형식 자체가 목록 제공이 목적으로 파악
• 요청 보낼 url에 page 쿼리를 변수로 설정하고 페이지당 출력 데이터의 갯수는 15개로 지정
• Kakao API 데이터는 배열에서 첫번째 요소를 가져오는 것이었지만 이 경우엔 배열의 인덱스를 전부 돌아야 함.
• for문을 이용해 Json 객체의 데이터를 테이블에 저장하여 테이블을 .html()을 이용해 화면에 출력
• list가 15개씩 맞아 떨어지는게 아니니 error 발생 
• for문의 범위를 배열의 크기로 수정하여 문제 해결
• button 또는 input을 이용하여 page를 옮길 수 있도록 설정
• 다음 button 클릭시 page 변수를 1 증가하여 목록을 갱신
• 이전 button 클릭시 page 변수를 1 감소하여 목록을 갱신
• input 값을 page 변수로 변경하여 목록을 갱신
• page 변수를 단순 정수로 설정하였다 보니 저작물 목록 page의 범위를 벗어나는 error가 발생
• page 변수 조작 부분을 if문을 사용하여 범위를 벗어나지 않도록 예외 처리
• Youtube API의 경우 국내에서 제공하는 API의 정보량이 부족해 어려움이 있었음
• 외국 영상이나 자료를 적극 활용, 무작정 따라해보며 코드를 파악하고 적용하여 해결
• Youtube API를 활용하여 테이블의 저작물명 columm에 링크를 연결하는게 목적
• function의 매개변수로 공공데이터 포털에서 받아온 저작물명을 받아와 사용
• 매개변수를 저작물명만 사용하는 경우 목록의 데이터와 일치하지 않는 링크가 연결되는 경우가 발생
• 검색의 정확도를 위해 아티스트명을 매개변수에 추가하여 정확도를 높임

 

그 외에도 input 값에 숫자만 입력되게 하기, 엔터키 입력 시 검색 기능 지원을 처음 사용해보았다.

 

6. 수행하며 느낀점:

• API에 대한 내용을 정보처리기사 공부를 하면서 이론적으로 접해보았는데 사용을 해보니 API가 무엇인지 더
  와닿게 느낄 수 있었다.
• 간단한 웹이지만 Html, CSS 경험을 늘릴 수 있었고, 기능적인 부분을 구현하기 위해 Javascript를 많이
  사용하면서 부족했던 Javascript 에 대한 이해를 많이 높일 수 있었다.
• 아직 떠오른 생각을 기능으로 구현을 하는 데에는 시간이 필요하지만 꾸준히 Javascript를 사용하다 보면
  많은 기능을 구현하고 코딩할 수 있을 것 같다.
• Open API를 사용하니 서버와 데이터베이스에 대한 부담감이 줄어드어 개발을 하는데 매우 편리했다.
• Private API를 사용하는 기업에서도 유용하게 쓰일 거 같은 과제였던 거 같다.