항해 3주차 WIL 주특기 입문

이번주 금요일 부터 React 에 대한 주차가 시작되었다 

뭔가를 많이 하기는 한거같은데 뭔가 아직은 부족하다는 생각이 많이 든다 

 

이번주차에는 시간을 알맞게 분배해서 강의 와 과제 개인공부 까지 열심히 할것이다 

 

이번주 키워드 콜백함수, HTTP 

 

 

콜백함수에 대하여

파라미터로 함수를 전달하는 함수이다 

 

콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다.

매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다

 

콜백 함수 사용 목적

비동기 방식으로 작성된 함수를 동기 처리 하기 위해 주로 사용합니다.

비동기 처리를 기본으로 하면서도 일부 구간에서 순차적인 처리가 필요할 수도 있기 때문입니다

 

 

function cry() {
console.log("cry");
}
 

function sing() {
console.log("sing");
}
 

function dance() {
console.log("dance");
}

function checkMoodCallBack(mood, goodCallback, badCallback) {
	if (mood === "good") {
		goodCallback();
	} else {
		badCallback();
	  }
	}
 

checkMoodCallBack("good", dance, cry);
// dance 출력
checkMoodCallBack("Not bad", dance, sing);
// sing 출력

"good"일때 dance를 하도록,  checkMoodCallBack 에서 호출할 함수를 지정할 수 있다. 이렇게 사용할 함수들 마져 선택해서 사용하는 것이 바로 콜백함수이다.

 

 

콜백함수의 규칙 

익명의 함수 사용

let number = [1, 2, 3, 4, 5];

number.forEach(function(x) {
    console.log(x * 2);
});

콜백함수는 이름이 없는 '익명의 함수'를 사용한다.

함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다.

 

함수의 이름(만) 넘기기

function whatYourName(name, callback) {
    console.log('name: ', name);
    callback();
}

function finishFunc() {
    console.log('finish function');
}

whatYourName('miniddo', finishFunc);

// 출력 
name: miniddo
finish function

자바스크립트는 null과 undefined 타입을 제외하고 모든 것을 객체로 다룬다.
함수를 변수 or 다른 함수의 변수처럼 사용할 수 있다. 함수를 콜백함수로 사용할 경우, 함수의 이름만 넘겨주면 된다.
위의 예제에서, 함수를 인자로 사용할 때 callback, finishFunc 처럼 () 를 붙일 필요가 없다는 것이다.

​

 

 

 

콜백지옥 (Callback Hell)

비동기 호출이 자주 일어나는 프로그램의 경우 콜백 지옥 이 발생한다.
함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들어질 정도로 깊어지는 현상이다.

해결을 위해 좀 더 발전된 방법으로 비동기 방식을 처리할 수 있는 Promise를  사용하자 

 

 

 

HTTP 에 대하여 

HTTP는 Hyper Text Transfer Protocol의 두문자어로, 인터넷에서 데이터를 주고받을 수 있는 프로토콜입니다. 프로토콜은 규칙이라고 생각하시면 된다. 이렇게 규칙을 정해두었기 때문에, 모든 프로그램이 이 규칙에 맞춰 개발해서 서로 정보를 교환할 수 있게 된것이다.

 

Request 요청 

HTTP 요청은 사실 프론트엔드(클라이언트) 에서 백엔드(서버)에 일(데이터 처리)을 시작하게 하기 위해 보내는 메세지

 

HTTP 요청 메서드

• Get :  존재하는 자원에 대한 요청
• POST :  새로운 자원을 생성
• PUT:  존재하는 자원에 대한 변경
• DELETE : 존재하는 자원에 대한 삭제

 

Response 응답 

HTTP 상태코드 

• 200: OK
  • 가장 자주 보게되는 Status Code
  • 문제없이 요청에 대한 처리가 백엔드 서버에서 이루어지고 나서 오는 응답코드
  • 우리는 모두 200 OK 를 원한다
• 201: Created
  • 무언가가 잘 생성되었을 때에(Successfully Created) 오는 Status Code
  • 대게 POST 메소드의 요청에 따라 백엔드 서버에 데이터가 잘 생성 또는 수정 되었을 때에 보내는 코드
• 400: Bad Request
  • 해당 요청이 잘못되었을 때 보내는 Status Code
  • 주로 요청의 Body에 보내는 내용이 잘못되었을 때 사용되는 코드
    ex) 전화번호를 보내야 하는데 숫자가 아닌 문자열의 주소가 대신 Body에 담겼을 경우
• 401: Unauthorized
  • 유저가 해당 요청을 진행하려면 먼저 로그인을 하거나 회원가입이 필요하다는 의미
    ex) wish list, 좋아요 기능은 회원이 아니면 요청을 보낼 수 없음
• 403: Forbidden
  • 유저가 해당 요청에 대한 권한이 없다는 뜻
  • 접근 불가능한 정보에 접근했을 경우
    ex) 오직 유료회원만 접근할 수 있는 데이터를 요청 했을 때
• 404: Not Found
  • 요청된 URI 가 존재하지 않는다는 의미
• 500: Internal Server Error
  • 서버에서 에러가 났을 때의 Status Code
  • API 개발을 하는 백엔드 개발자들이 싫어하는 코드

 

사진으로 정리 

 

 

참고 https://velog.io/@simoniful/%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B4%80%EB%A0%A8-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%98%EB%8A%94-HTTP-%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C-1

 

 

HTTP VS HTTPS 

HTTP

는 Hyper Text Transfer Protocol의 두문자어로, 인터넷에서 데이터를 주고받을 수 있는 프로토콜입니다. 프로토콜은 규칙이라고 생각하시면 된다. 이렇게 규칙을 정해두었기 때문에, 모든 프로그램이 이 규칙에 맞춰 개발해서 서로 정보를 교환할 수 있게 된것이다

 

 

HTTPS 

SSL(Secure Socket Layer) 인증서를 사용하는 HTTP(http://)입니다.

브라우저에서 URL을 확인하여 웹사이트에 HTTPS 보호 기능이 있는지를 확인할 수 있습니다. 도메인 이름 앞에 자물쇠 아이콘이 있으면 당신의 사이트는 HTTPS로 인해 안전한 것입니다.

 

즉 HTTPS 는 HTTP 보다 더 안전한 보안용 프로토콜이라 보면 된다