재밌고 어려운 IT를 이해해보자~!
API 조사 [TEAM PROJECT] 본문
API 란?
API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체이다!
API는 Application Programing Interface라는 용어로써, 어떠한 응용프로그램에서 데이터를 주고 받기 위한 방법을 의미한다. 어떤 특정 사이트에서 특정 데이터를 공유할 경우 어떠한 방식으로 정보를 요청해야 하는지, 그리고 어떠한 데이터를 제공 받을 수 있을지에 대한 규격들을 API라고 하는것이다.
Application Programming Interface의 약자로 운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식을 말한다. 즉, 어플리캐이션의 프로그래밍을 위한 인터페이스라 할 수 있다. 여기에서 API는 사람을 위한 인터페이스가 아닌 프로그래밍을 위한 인터페이스라는 점이 중요하다.
API는 내부 API와 외부 API로 나눌 수 있다. 내부 API는 진동이나 플래시같은 디바이스 제어 기능들을 의미하며, 외부 API는 구글 번역을 이용하여 번역기능을 사용하거나, 네이버 지도 API를 이용하여 위치기반 기능을 사용하는 것을 말한다. 어플리케이션에서 사용되는 기능들을 다 구현하는 것이 아닌, 서비스하는 회사의 API를 통해 사용하게 되는 것이다.
API는 사용하는 방법과, 용도에 따라 오픈 API와, 비공개 API 정보가 있다. 오픈 API는 말 그대로 누구나 쉽게 접근하여 정보를 공유하기 위해 만들어진 규격이며, 비공개 API는 권한이 있는 일부 사용자들에게만 정보를 제공하기 위해 만들어진 규격이라고 생각하시면 된다.
필터검색
교보문고 키워드를 통해 검색을 하여 '상품 목록' 페이지로 이동을 하게 되면, 상품 목록 페이지 상단에 검색된 결과물들을 다시 필터링할 수 있는 인터페이스를 볼 수 있다. 인터페이스에는 검색 키워드를 포함하는 상품이 속한 '카테고리'가 출력되고 그 카테고리에 속하면서 검색 키워드를 가진 '상품의 개수'가 표시된다.
카테고리 이름을 클릭하면 키워드 검색 결과물 중에서 클릭한 카테고리로 필터링된 상품 목록 페이지로 이동을 한다.
검색 필터링 구현에서 크게 두 가지가 측면에서 작업이 이루어져야 한다. 하나는 사용자가 어떠한 필터링을 할수 있는지에 대한 정보를 뷰에서 만들어서 뷰에 전달하여 사용자가 보기 편하도록 인터페이스를 추가해주는 일이고, 다른 하나는 사용자가 그 인터페이스를 눌렀을 때 필터링된 검색을 수행할 수 있는 서버 측 메서드를 추가해주는 일이다.
이미지 업로드
cos.jar을 사용한 이미지 업로드
UploadAction.java
package controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;
import model.dao.MemberDAO;
import model.dto.MemberDTO;
public class UploadAction implements Action{
@Override
public ActionForward execute(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
ActionForward forward=new ActionForward();
forward.setPath("main.do");
forward.setRedirect(false);
request.setCharacterEncoding("UTF-8");
MemberDAO mDAO=new MemberDAO();
MemberDTO mDTO=new MemberDTO();
// 해당 폴더에 이미지를 저장시킨다
String uploadDir =this.getClass().getResource("").getPath();
System.out.println("uploadDir : " + uploadDir);
uploadDir = uploadDir.substring(1,uploadDir.indexOf(".metadata"))+"uploadFolder";
System.out.println("절대경로 : " + uploadDir + "<br/>");
request.setAttribute("uploadDir", uploadDir);
// 총 100M 까지 저장 가능하게 함
int maxSize = 1024 * 1024 * 100;
String encoding = "UTF-8";
// 사용자가 전송한 파일정보 토대로 업로드 장소에 파일 업로드 수행할 수 있게 함
MultipartRequest multipartRequest
= new MultipartRequest(request, uploadDir, maxSize, encoding,
new DefaultFileRenamePolicy());
// 중복된 파일이름이 있기에 fileRealName이 실제로 서버에 저장된 경로이자 파일
// fineName은 사용자가 올린 파일의 이름이다
// 이전 클래스 name = "file" 실제 사용자가 저장한 실제 네임
String fileName = multipartRequest.getOriginalFileName("file");
// 실제 서버에 업로드 된 파일시스템 네임
String fileRealName = multipartRequest.getFilesystemName("file");
mDTO.setFileName(fileName);
mDTO.setFileRealName(fileRealName);
// 디비에 업로드 메소
//new fileDAO().upload(fileName, fileRealName);
boolean flag = mDAO.insert(mDTO);
if (flag) {
request.setAttribute("mDTO", mDTO);
} else {
}
System.out.println("파일명 : " + fileName + "<br>");
System.out.println("실제파일명 : " + fileRealName + "<br>");
return forward;
}
}사용자가 업로드를 하면 관리자의 별도 저장 폴더에 사용자가 업로드한 사진이 저장된다.
SNS 회원가입 및 로그인 API
1) 회원가입
2) 소셜 로그인 인증 API 호출 -> 인증 코드 받음
3) 접근 토큰(access_token) 요청 with 인증코드 -> 접근 토큰(access_token) 받음
4) 회원정보 API 호출 with access_token -> 회원 정보 받음
5) 로그인 with 회원정보
문자 API
나의 서비스 관리(카카오 알림톡/SMS 비즈니스형의 경우) - SMS 관리 - 소스 예제 - JSP 소스 예제를 보면
소스 예제가 여러 개 있긴한데 SMS 보내려면 아래 세 예제 코드만 보면 된다.
문자전송 - 발송 폼 소스 예제
문자전송 - 발송요청 처리 소스예제1
문자전송 - 발송요청 처리(발신번호 목록 조회) 소스예제2
sms 폴더를 하나 만들어서 차례대로 복사 붙여넣기 해보자!
/sms/sms_test.do
/sms/calljson.do
/sms/sms_sender.do
CKEditor
자주 보던애다!
콘텐츠를 웹 페이지나 온라인 애플리케이션에 직접 작성할 수 있게 하는 위지위그 리치 텍스트 에디터이다. CKEditor는 오픈 소스와 상용 라이선스로 이용할 수 있다.
*위지위그(WYSIWYG) : What You See Is What You Get, “보는 대로 얻는다”
→ 말 그대로 웹사이트 게시판의 글쓰기 기능에서 흔히 볼 수 있는 텍스트 편집기이다. 텍스트 에디터 중에서는 상당히 유명한 편인 것 같고 공식 문서도 잘 정리되어있다.
사용방법
1. 다운로드
2. 적용
적용할 프로젝트에 폴더를 만들어 저장하고,
적용시킬 페이지에 script를 만들어 추가한다.
JSP에 해당 경로의 소스 추가
모달창 & 드롭 다운 메뉴, 아코디언 플러그인
모달창
모달(Modal)이란, 사용자의 이목을 집중시키기 위한 그래픽 인터페이스 창이다. (ex. Sweetalert)
좀 더 자세히 이야기하자면 하나의 페이지에서 하나의 작은 다른 페이지를 띄워 이 페이지에 대한 조작이 종료되기 전까지 부모 페이지로 돌아가지 못하도록 만든 창이다. 그래서 모달 창을 이용하면 사용자의 상호작용을 요구로 하고, 사용자가 상호작용을 할 때까지 부모 페이지에 대한 어떠한 조작도 못하도록 되어있다. 따라서 사용자로부터 특정 동작/메세지에 대한 주목이 필요할 때 모달을 사용하게 된다.
팝업과의 차이점
비슷한 기능으로 팝업(Pop Up)창이 있는데, 팝업은 단어 그대로 새 브라우저 페이지를 띄우는 것
팝업과 모달은 사용자의 이목을 끌기위한 기능을 위해 사용한다는 공통점이 있지만 팝업은 모달과는 다르게 다른 브라우저 페이지를 열기 때문에 부모 페이지에 대한 조작을 할 수 있다.
사용방법
SweetAlert2 설치
링크에 들어가서, 빨간 박스 쳐진 부분만 2개의 자바스크립트와 CSS파일을 각각 다운받고,
기존에 alert로 호출하던 방식을 swal로 변경하여 사용하면 된다.
ex)
Swal.fire({
'Alert가 실행되었습니다.', // Alert 제목
'이곳은 내용이 나타나는 곳입니다.', // Alert 내용
'success', // Alert 타입
});
출처: https://inpa.tistory.com/entry/SweetAlert2-📚-설치-사용 [Inpa Dev 👨💻:티스토리]드롭다운메뉴
직접구현가능할듯?!
HTML 드롭다운 API 문서를 확인해보자~
https://www.w3schools.com/tags/att_select_multiple.asp
아코디언 플러그인
웹사이트에서 클릭 후 확장되는 멋진 축소 가능한 섹션을 보았고 텍스트/이미지가 즉시 나타나고 마술처럼 보이는 것을 보셨나용 ?
이것을 아코디언 이라 부르며 게시물/페이지에 전문성을 더한다.
제목을 클릭하면 내용이 펼쳐지고 다시 클릭하면 축소되는 기능을 아코디언(혹은 토글)이라고 한다.
이러한 기능은 사이드바 메뉴, FAQ 등 다양하게 응용이 가능하다.
참고로 아바다 테마에서는 "토글은 한 번에 여러 개 항목을 펼칠 수 있지만 아코디언은 한 번에 하나만 펼쳐지는 것"을 지칭
플러그인이란? What is Plugin?
일반적인 소프트웨어의 일부
웹 브라우저의 일부 기능들을 쉽게 설치하여 사용하게 할 수 있는 프로그램을 말한다.
주요 플러그인
- Adobe Flash
- Window Media Player
- Java
- Silverlight
- Adobe Reader
얘도그냥 직접구현가능할듯?!
Collapse(콜랩스) JavaScript 플러그인과 조합하여, 수직으로 접는 아코디언을 만든다! 아래웹페이지 참조~
https://getbootstrap.kr/docs/5.1/components/accordion/
*참조
https://kimvampa.tistory.com/253
https://getbootstrap.kr/docs/5.1/components/accordion/
'코리아IT핀테크과정' 카테고리의 다른 글
| Jquery practice (0) | 2024.01.16 |
|---|---|
| 비동기(asynchronous) 처리 , ajax, jquery (0) | 2024.01.15 |
| Image Upload [TEAM PROJECT] (0) | 2024.01.13 |
| MVC pattern2에서 alert 구현하기 (1) | 2024.01.11 |
| JSP, Servlet Mapping (2) | 2024.01.10 |
