본문 바로가기
JavaScript

URL, API

by amoomar 2022. 2. 22.
반응형

 

해당 포스팅의 목차는 다음과 같다.

1. URL
  1) 프로토콜
  2) 쿠키 플러그인 활용

2. API
  1) API란?
  2) API의 사용

 

 

 

 

1. URL

인터넷상에서 사용자가 이용하는 웹페이지, 컨텐츠(자원:리소스)의 위치를 나타내는 말이다. 이때 URL은 프로토콜과 자원이름으로 구성되어있다.

 

프로토콜://호스트주소(:포트번호)/파일경로?전달되는 내용(섹션)

https://comic.naver.com/webtoon/list?titleId=616239

 

1) 프로토콜

서로 다른 컴퓨터간에 통신(인터넷의 웹 페이지 등을 전송)을 하기 위해 지켜야하는 규약이며, 대표적 특징으로는 비연결성(Connectionless)&무상태성(Stateless)이 있다.

 

이때, 비연결성이기에 무상태성이라는 특징을 지니는 것을 알 필요가 있다.

 

비연결성에 대해 설명해볼 예정이다. 비연결성은 사용자(브라우저 혹은 클라이언트)가 페이지를 서버에게 요청하고, 서버는 페이지를 응답(리소스제공)한다. 이때 응답 후 즉시 연결을 끊어버린다. 이렇게 되면 연결을 유지하기 위한 리소스가 축소되고 더 많은 연결을 지원해줄 수 있으며, 서버에 요청하는 일(오버헤드)이 증가한다. 이는 프론트엔드의 역할이 중요해지는 이유가 된다.(SPA의 내용 강조)


무상태성은 로그인 혹은 장바구니 담기를 했는데 서버가 모르는 내용과 같다. 비연결성의 특징으로 응답 즉시 서버가 연결을 끊기 때문에 사용자의 상태를 식별 불가능하다. 이 부분을 해결 하기 위한 것이 바로 서버프로그래밍(쿠키, 세션)이다. 서버개발을 한다는 것은 어떠한 요청을 처리하고 응답하는 로직을 가진 무엇인가를 개발하는 것이라고 정리 가능하다. 보편적으로 쿠키는 프론트측에서, 세션은 백측에서 다루게 된다.

 

*페이지 관련 에러*

400대의 에러는 클라이언트측의 문제로 발생한다. 대표적으로 404에러가 있다.
404에러는 자원은 존재하지만 경로가 이용불가능한 경로인 경우, 자원이 존재하지 않는 경우에 발생한다. 이용할 수 없는 페이지입니다. 존재하지 않는 페이지 입니다. 등의 경우도 404에러를 예외처리 한 것이다.


500대의 에러는 서버측의 문제로 발생한다. 대표적으로 503에러가 있다.
503에러는 알고리즘 문제, 없거나 null인 데이터, 예외발생 등의 이유로 발생한다.


503에러가 발생하게 되면 서버측에서 알고리즘 로직등을 확인해보아야한다.

 

 

2) 쿠키 플러그인 활용

쿠키 플러그인을 활용하여 다음과 같은 내용을 구현할 수 있다. "오늘 하루 보지 않기, 일주일 보지 않기"

해당내용을 구현한 코드를 첨부하였다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>쿠키 플러그인</title>

<!-- =====================================스타일 설정===================================== -->

<style type="text/css">
	#wrap{
		margin: 50px;
		width: 700px;
		border: 2px solid black;
		overflow: hidden;
		background-color: black;
	}
	p{
		margin: 5px;
		text-align: right;
		color: white;
	}
</style>

<!-- =====================================제이쿼리, 플러그인, 스크립트===================================== -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js" integrity="sha512-3j3VU6WC5rPQB4Ld1jnLV7Kd5xr+cq9avvhwqzbH/taCRNURoeEpoPBK9pDyeukwSxwRPJ8fDgvYXd6SkaZ2TA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$(document).ready(function (){
	//쿠키명"popup"이 "none"이라는 값을 갖고있다면 hide()메서드 사용하여 #wrap숨기기
	if($.cookie("popup")== "none"){
		$('#wrap').hide();
	}
	
	//버튼 클릭하면 closePop함수 실행할 수 있도록
	$('button').on('click', closePop);
	
	function closePop(){
		if($('#check').is(":checked")){//체크박스가 체크되면
			//쿠키명"popup"이 "none"이라는 값을 가진다. 1일후 해당 설정은 자동 소멸된다.
			$.cookie("popup", "none", {expires:1, path : "/"});
		}
		$("#wrap").fadeOut("fast"); //요소를 fast하게 사라지게 한다.
	}
});
</script>
</head>
<body>

<!-- ===================================== 공지창 ===================================== -->
<div id="wrap">
	<img src="https://img.insight.co.kr/static/2021/01/10/700/img_20210110130830_kue82l80.webp" alt="이미지">
	<p>
		<input type="checkbox" id="check" name="check">
		<label for="check">하루동안 이 창 열지 않기 &nbsp;</label>
		<button>닫기</button>
	</p>
</div>

</body>
</html>

 

아래 링크의 블로그 내용을 참고하였다.

 

https://m.blog.naver.com/jjjhygo91/221466285767

 

자바스크립트 :: jquery-cookie 플러그인 활용하기

jquery-cookie 플러그인 jquery-cookie 플러그인을 사용하면 간편하게 쿠키(cookie)를 생성하고 쿠키 만료...

blog.naver.com

 

 

 

2. API

 

1) API란?

사용자(개발자)가 다른 시스템, 어플리케이션, 프로그램에게 정보를 요청해서 기능을 사용하는 것으로 다양한 API가 존재한다. API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있으며, 그중 대표적 예시는 아래와 같다.


ex) 지도, 이메일, 주소, 별점,GPS+날씨,MPK(랜덤값 생성),sns로그인, MMS(문자), ...

 

* API vs 라이브러리 vs 프레임워크 *

api와 라이브러리, 프레임 워크의 차이를 분명하게 알아야할 필요가 있다. 이해를 돕기위한 링크를 하단에 첨부해보았다.

 

https://rlakuku-program.tistory.com/19

 

API vs 라이브러리 vs 프레임워크

API, 라이브러리, 프레임워크는 공부하다 보면 정말 수도 없이 보고 듣게 되는 말이다. 하지만 이들의 차이점과 역할을 말해보라 한다면 뭐라고 말을 할 수가 없어 정리를 하려고 한다. 라이브러

rlakuku-program.tistory.com

 

 

 

2) API의 사용

카카오, google, 네이버 등 다양한 기업에서 API를 제공하고 있다. API는 다양한 제한이 걸린채 공유되기 때문에 api를 사용하기 위해서는 api인증키를 사전에 발급받아야 한다.

 

인터넷에 사용할 기업의 API키 발급방법을 검색하여 순차적으로 진행하게 되면 간단하게 인증키를 발급 받을 수 있다. 발급 후 사용할 API를 검색하고 다양한 데모파일을 확인하며 응용 가능하다. 적용하는 방법또한 상세하게 기재되어있으니 해당 내용들은 기업의 API사용 튜토리얼을 참고하면 되겠다.

 

그 중 google 맵 API를 활용한 예제 코드를 첨부해보았다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>구글맵API</title>
<style type="text/css">
	*{
		margin: 5px;
		padding: 5px;
	}
	#map{
		width: 500px;
		height: 300px;
		border: 2px solid blue;
	}
</style>
<script src="http://maps.google.com/maps/api/js?key=발급받은 API 키&region=ko"></script>
</head>
<body>

<div id="map"></div>
<button id="btn1">지도 중심 이동하기 1</button>
<button id="btn2">지도 중심 이동하기 2</button>

<script type="text/javascript">
	var btn1=document.getElementById('btn1');
	var btn2=document.getElementById('btn2');
	var map;//전역변수처리
	
	function initMap(){
		var ll={lat:37.500600, lng:127.036268};
		map=new google.maps.Map(
			document.getElementById('map'),
			{zoom:17,center:ll}
		);
		new google.maps.Marker(
			{position:ll, map:map, label:"마커-현재위치"}
		);
	}
	initMap();//구글맵 생성
	
	btn1.addEventListener('click', cc1);
	btn2.addEventListener('click', cc2);
	
	function cc1(){
		var ll={lat:33.369515, lng:126.564646};
		map.panTo(ll);//맵 중심 이동
		map.setZoom(9);//지도 확대 레벨
	}
	function cc2(){
	      var ll={lat:-40.339098, lng:175.609729};
	      map = new google.maps.Map(
	         document.getElementById('map'),
	         {zoom:13,center:ll}
	      );
	}

</script>

</body>
</html>

 

 

 

반응형

'JavaScript' 카테고리의 다른 글

[그래프 API] HighCharts  (0) 2022.07.07
[지도 API] OpenLayers_1  (0) 2022.07.06
타이밍 이벤트 & 단원 총정리  (0) 2022.02.18
BOM & Form  (0) 2022.02.17
이벤트 & DOM  (0) 2022.02.16

관련글

티스토리툴바