프론트 엔드 1주 3일차 데이터 통신과 API, try ~ catch

1.  데이터 통신

데이터 통신의 종류

파일 전송 경로 : FTP
메일 전송 결로 : SMTP
텍스트/하이퍼텍스트 전송 경로 : HTTP

 

HTTP

HTTP는 요청(request)와 응답(response) 2가지를 서로 주고 받을 수 있습니다.

HTTP 요청과 응답

요청은 Front-end에서 작성한 텍스트 테이터를 HTTP를 통해서 Back-end 컴퓨터로 저장을 위해 보내는 것을 말한다.

 

응답은 요청을 받은 Back-end 컴퓨터가 성공 실패 등의 처리 결과를 Front-end로 전송하며 전송 될 때 상태코드가 함께 전송되는데 상태코드는 저장의 성공 유무를 담고 있다. ex) 404 error

 

JSON(JavaScript Obect Notation(표기법))

HTTP는 위에서도 나왔 듯이 텍스트가 전송되는 경로로 객체는 전송할 수 없다. 이를 해결하기 위해서 JSON은 객체형태의 데이터를 string 형태로 변경해주게 된다.

 

 

2. API

API는 HTTP 요청을 Back-end 컴퓨터에 보냈을 때 실행되는 Back-end의 기능. (Back-end 쪽에서의 함수라고 생각하면 편하다)

 

API의 종류

1. REST
2. GRAPHQL(REST 개발 후에 개발)

 

GRAPHQL의 장점(REST와 비교시)

1. 원하는 데이터만 골라서 받는 것이 가능
2. 모두 받는 것보다 용량이 작아지므로 빨라짐
3. 페이스북, 깃허브 등 글로벌 서비스에서 사용

 

"위의 장점에도 불구하고 우리가 REST를 배워야 하는 이유는 아직 많은 회사들이 REST API를 사용하고 있고 OPEN-API(구글 맵 등)에서 일반적으로 REST를 제공하고 있기 때문이다."

 

REST와 GRAPHQL의 차이점

1. 함수 이름의 차이

	REST-API	GRAPHQL-API
API 함수 이름	주소 형태의 이름 https://address.net/board/1	함수 형태의 이름 board(1)

 

2. 응답 결과물의 차이

	REST-API	GRAPHQL-API
응답 결과물	결과 전체가 응답으로 오게 된다.	결과의 일부를 선택해서 오게 할 수 있다.

3. 설치해야 할 프로그램의 차이

	REST-API	GRAPHQL-API
설치 프로그램	axios	apollo-client

 

API와 CRUD(create(등록) read(조회) update(수정) delete(삭제))

명령어

	axios	apollo-clinet
Create	POST	MUTATION
Update	PUT
Delete	DELETE
Read	GET	QUERY

 

3. try ~catch문

try ~catch문은 실행할 코드블럭을 표시하고 예외(exception)가 발생할 경우의 응답을 결정합니다.

아래의 예시를 보면

try {

normalFunction();

} catch (error) {

existentFunction(error);

}

정상적으로 동작했다면 normalFunction이 동작하고 try문을 진행하는 도중 error가 발생하면 existentFunction이 실행됩니다.

 

예를 들어

try {

console.log("코드 실행")

a;

console.log("코드 종료")

} catch(err) {

console.log("에러 발생")

}

위 코드를 보게 되면 try문이 진행되던 도중 정의되지 않은 변수 a에 의해 error가 발생하고 이로 인해 try 쪽을 건너 뛰고 에러 발생이라는 console.log()가 실행된다.

 

 

try ~catch문의 특징

1. try ~catch문은 오직 런타임 에러에만 동작한다. 문법적 오류로 인한 에러의 경우 try ~catch문은 정상적으로 동작하지 않는다.

 

2. try ~catch문은 동기적으로 동작합니다. 즉, setTimeout처럼 스케줄된 코드에서 발생한 예외는 try ~catch문으로 잡아낼 수 없다. 이것이 무슨 뜻이냐면 setTimeout으로 시간이 지나간 후에 실행되는 코드에서 발생하는 에러는 try ~catch문으로 잡을 수 없다는 것이다.

 

에러 객체

try ~catch문에서 에러가 발생하면 그 에러에 대한 상세한 내용이 담긴 객체(catch()의 괄호 안의 인수)를 생성합니다. 

이 에러 객체의 요소들은 대략적으로 아래와 같다.

 

1. name : 에러의 이름으로 예를 들어 정의되지 않은 변수에 의한 에러는 "ReferentceError"가 저장된다.

 

2. message : 에러의 상세 내용을 담고 있는 key

 

3. stack : 현재 호출 스택. 에러를 유발하는 중첩 호출들의 순서 정보를 가진 문자열로 디버깅에 사용됩니다.

 

throw 연산자

throw 연산자는 에러를 생성하는 연산자로 문법은

throw <errorObject>

위와 같다.

 

에러 객체를 생성해주는 방법은 아래와 같다.

let error = new SyntaxError("error message");

위코드가 실행되면 error 객체에는 name이 SyntaxError이고 massage가 "error message"라는 에러 객체가 저장된다. 

 

try ~catch ~finally

finally를 쓰게 되면 try ~catch문 실행 이후에 에러의 발생 유무와 관계없이 finally문 안의 코드는 실행됩니다.

 

문법은 아래와 같습니다.

try {

console.log("코드 실행");

a;

console.log("코드 종료");

} catch (err) {

console.log("에러 발생");

} finally {

console.log("finally 실행");

}

finally를 쓰는 경우 try ~catch문이 실행되어 그 코드를 빠져나가는 경우(ex. return으로 인한 종료)에도 동작하는 것이 특징입니다.

 

 

오늘의 코딩 - API 사용해 보기