2023. 3. 6 TIL

Junghan Lee·2023년 3월 12일

TIL Diary

목록 보기

12/52

20230306 TIL

geolocation ; 현재 사용자의 위치값을 얻어올 수 있는 API

getcurrentposition()

메서드 안의 변수 함수 = 콜백함수

Openweather map → openAPI

JSON.parse() 응답 바디만 존재할때

res.json(); 헤더 바디 다 존재해도 됨\

비동기 함수는 then 통해 기다려줘야 한다.

str.trim() 공백 없앰

shorthand property

API

프로그램에서 제공하는 기능을 사용자가 활용할 수 있도록 만들어 둔 인터페이스

ex. 식당 메뉴판 : API 명세서

   메뉴 주문 : 요청(리퀘스트)

   주문하는 사람 : 클라이언트

    주문받아서 요리사에게 전달하는 직원 : API

    받는 음식(데이터) : 리스폰스 response

HTTP

request message

맨윗줄 GET~1.1 : start line (HTTP method, 요청 uri, http 버전 등)

request Header

Host~ : 요청 헤더 ;

다양한 정보(요청받는 서버 이름, 서버 버전, 전달하는 컨텐츠의 타입, 요청 날짜, 요청 보낸 컴퓨터 정보 등)

하나의 빈 줄로 바디와 구분

request Body

서버로 혹은 다른 유저가 우리 서버로 전달하려는 컨텐츠

메서드에 따라 리퀘스트바디 담을 수 있을지 없을지 결정

response message

HTTP/1.1 200 OK : status-line

HTTP 버전, 상태 코드 , 응답 메시지

response Header

응답 날짜, 응답한 서버 이름, 버전, 컨텐츠 타입 등

빈줄로 바디와 구분

response Body

실제 응답 리소스 데이터

HTTP Request Method

각 요청마다 메서드 사용

GET : 데이터 조회
POST : 데이터 등록
PUT : 데이터 수정(서버의 리소스를 req.body내용으로 변경)
PATCH : 서버 내 리소스의 일부 수정
DELETE : 데이터 삭제
OPTION : 서버 허용 메소드 목록 확인

HTTP Status Code

요청에 대한 응답의 결과를 세 자리의 번호로 나타냄

1XX : information

100번대 코드 : 정상 수신, 작업 지속해

100 : continue ; 문제없이 진행 중. 클라이언트가 요청 계속하거나 완료한 경우 무시해도 좋음

101 : Switching Protocol 클라이언트가 보낸 업그레이드 요청 헤더에 응답. 서버에서 프로토콜 변경 예정

102 : Processing(WebDAV) 요청 정상 수신. 처리중이나 응답이 아직 준비되지 않음

2XX : Success

200번대 코드 : 정상수신, 수용완료

200 OK 요청 정상 처리. 요청한 정보 응답으로 반환

201 Created 리소스 생성 성공(일반적으로 POST와 일부 PUT요청 시 이용)

202 Accepted 요청 수용됨(요청 정상 수신했으나 작업 진행은 불가)

203 Non-Authoritative Information 메타 정보가 원본과 다르나 정상으로 간주해 처리

204 No Contents 요청은 정상 처리되었으나 보낼 컨텐츠가 없음

205 Reset Contents 요청 종료 후 열려 있는 문서 뷰 리셋해야 함

206 Partial Content 클라이언트의 스트림 분할 다운로드 요청에 이어 진행

207 Multi-Status(WebDAV) 여러 리소스가 각각의 상태 코드드 받음

208 Already Reported(WebDAV) 이전 응답으로 이미 보냄

226 IM Used 서버가 GET 요청을 모두 처리하였고, 인스턴스 조작을 완료함

3XX : Redirection

300번대 코드 : 요청 처리하려면 클라이언트가 추가 작업을 해야 하는 경우

300 Multiple Choice 요청에 대한 복수의 응답 중 선택 필요

301 Moved Permanently 요청한 리소스가 영구적으로 이동. 새 위치 제공 가능

302 Found 요청한 리소스 주소가 일시적 변경됨

303 See Other 요청한 리소스 주소가 영구 변경됨

304 Not Modified 조건부 GET 요청을 수행했으나 문서가 수정되지 않음

305 Use Proxy 반드시 프록시를 이용해 접속해야 함

306 (삭제됨)

307 Temporary Redirect 요청한 리소스 주소가 일시적으로 변경되었고 재요청시 동일한 메소드 필요함

308 Permanent Redirect 요청한 리소스 주소가 영구 이동했고 재요청시 동일한 메소드 필요

4XX : Client error

400번대 코드 : 요청에 문제 있어서 서버가 처리 불가

400 Bad Req 잘못된. 요청이라 서버가 이해해 불가

401 Unauthorized 승인되지 않았거나 인증되지 않아 서버가 클라이언트 식별 불가

403 Forbidden 액세스 권한 없음

404 Not Found 요청받은 리소스 못찾음

408 Req Timeout 클라이언트가가 서버의 요청 대기 시간을 초과하여 처리할 수 없음

409 Conflict 요청이 서버와 충돌

413 Payload Too Large 클라이언트가 보낸 요청 범위가 한계를 초과함

414 URI Too Long 보낸 주소 길이가 한계 초과

415 Unsupported Media type 요청한 미디어 타입 지원하지 않음(거절)

418 I’m a teapot 커피를 찻주전자에 끓이는 걸 겆러

426 Upgrade Required 현재 프로토콜은 거절, 클라이언트가 프로토콜 업그레이드시 처리 가능

429 Too Many Req 지정된 시간 안에 너무 많은 요청

431 Req header Fields Too Large 요청한 헤더가 너무 커서 거절

451 Unavailable For Legal Reasons 검열 또는 정부에서 액세스 차단을 요구한 리소스라 요청 거절

5XX : Server error

500번대 코드 : 서버나 통신의 문제로 요청 처리 불가

500 Internal Serval Error 내부 서버 오류

501 Not Implemented 서버가 기능 지원 안함

502 Bad Gateway 게이트웨이로부터 잘못된 응답 받음(유효하지 않은 응답 받음)

503 Service Unavailable 서버가 준비되지 않음(일반적으로 작동이 중단됐거나 과부하일 경우 발생)

504 Gateway Timeout 게이트웨이에서 응답받지 못함(서버간 통신에서 응답이 없거나 네트워크 연결 끊김)

멀티 스레드 & 싱글 스레드

운영체제에게 프로세스라고 하는 작업 영역 할당 받아 동작 수행 - 코드 실행, 프로그램 실행, 파일 다운로드 등이 모두 프로세스별로 할당, 각 프로세스 내부엔 업무를 처리할 스레드가 있다.

멀티 스레드

멀티 작업 수행(↔ 싱글 스레드)

자바스크립트 - 싱글스레드 기반

동기, 비동기

동기

하나의 작업이 종료될 때까지 다음 동작은 대기하는 실행 방식

ex. 카페 주문

손님 주문 - 앞 손님 주문 응답 완료까지 다음 손님 아무것도 못함 -

응답 받으면 그 다음 손님 주문(동기)

JAVAS 방식

console.log("1")

setTimeout(() => {
    console.log("2")
}, 2000)

console.log("3")

1 3 먼저저 출력 2초 뒤 2 출력 ? 싱글 스레든데?

JS 실행 환경 내부 : call stack , callback queue 라는 영역 존재

각각 자료구조 스택, 큐 형태를 띈다.
스택 - 처리 방식 : LIFO (Last In First Out) 먼저 들어온 함수나 데이터가 가장 마지막에 처리
큐 - FIFO 먼저 들어온거 먼저 처리

JS 에서는…

기본적인 함수들은 모두 콜스택에 쌓임
비동기 함수(Web APIs 포함) 모두 콜백 큐에 쌓임
콜스택에 쌓인 기본 함수 - 먼저 담긴 함수들이 위에 쌓인 함수들의 종료 기다림
콜백 큐에 쌓인 비동기 함수는 콜스택이 비워져 있다면 그 때 콜스택으로 하나씩 옮겨짐

setTimeout(() => {
	console.log("setTimeout call") // 콜백(비동기)
})

const func3 = function() {
	console.log("func3 call") // 콜스택
}

const func2 = function() {
	func3()
	console.log("func2 call") // 콜스택
}

const func1 = function() {
	func2()
	console.log("func1 call") // 콜스택
}

func1()

코드 실행시 setTimeout() 지연시간 미정이나 비동기 함수이기 때문에 콜백 큐 영역으로

콜스택 영역에 쌓인 함수 LIFO 방식

해당 함수들 완료시 콜백큐에 담긴 setTimeout() 이 콜스택으로 옮겨져 실행

마지막에 setTimeout call 출력

비동기

하나의 작업이 진행됨과 동시에 다른 작업도 함께 진행

손님 주문- 앞손님 주문 완료되는 동안 해당 손님은 옆 대기줄에서 본인의 주문이 완료될 때까지 기다림 - 그와 동시에 다음 손님 주문

비동기 처리

JS - 싱글 스레드 → 동기적 동작

해결책 1. callback 함수 - 여러번 중첩시 가독성 떨어짐

2. Promise

현재는 얻을 수 없으나 추후 작업 완료시 받아올 수 있는 데이터에 대한 접근 수단. new Promise() 같은 코드를 입력해 직접 생성 가능

Promise 객체 상태 fulfilled, pending, rejected

대기 : 비동기 처리가 아직 완료되지 않은 상태
이행 : 처리 완료되어 결과를 반환한 상태
실패 : 비동기 처리 실패했거나 오류 발생한 상태

promiseTest실행 → Promise 객체 돌려받는 코드

내부 함수 인자 - resol, rej

완료시 resolver, 실패시 rej 호출

resolver 실행 2초 지연(2초 이전 참조시 Pending상태)

then(),catch()

통신 - 응답 받아오는 과정 ; 코드실행과정보다 느림

→ 통신도 비동기 처리 필요

const communicationResult = fetch(HTTP Request)
console.log(communicationResult)

어떤 서버로 통신 요청했을 시, 결과 바로 받아 콘솔 출력시 Promise 객체가 담겨있음(비동기 동작의 결과)

Promise 객체 반환 - 코드 실행이 통신 결과 받는 것보다 느려서

통신결과 특정 로직에 적용시키고 싶을 때, 결과 받아올 때까지 기다려야 함

비동기 통신 처리 방법

then()

JS ES6문법인 fetch() 사용해주면 JS에서 바로 통신 수행 가능

const communicationResult = fetch(HTTP Request)
console.log(communicationResul

위같이 작성 시 정상 응답 받지 못함

기다려줘야함 - then()

fetch(HTTP Req).then()

then()은 Promise 객체를 돌려주는 함수라면 언제든 사용 가능

요청에 의한 통신 완료시 then() 메서드 내부로 코드의 실행 옮겨짐

fetch(HTTP Request)
	.then((res) => {
		console.log(res)
	})

then()메서드 내부에 익명 함수 , 그 안에서 매개변수로 데이터 받아올 수 있음 - 이 때 받아오는 데이터 : 통신의 결과로 우리에게 돌려준 데이터

응답 받아올 때까지 기다려서 정상적인 값 받아옴

catch()

통신 문제, then() 메서드 내 로직 수행중 에러 만날 시

catch() 메서드로 그 분기 나눠줌

fetch(HTTP Request)
	.then((res) => {
		console.log(res)
	})
	.catch((err) => {
		console.error(err)
	})

then()뒤에에 붙여 작성

catch() 내부 익명 함수 가능(매개변수로 에러 내용 받기 가능)

구조 분해 할당

구조화 되어 있는 배열, 객체 등을 분해해 각각의 변수에 다시 할당; 값을 복사해주고 싶을 때

const arr = [ 1, 2, 3, 4, 5 ];

let one = arr[0];
let two = arr[1];

---------------------------------------------

const obj = {
	name: "otter",
	gender: "male"
}

let userName = obj.name;
let userGender = obj.gender;

각각의 값 따로 담아 관리
데이터가 여러개인 경우 각각 데이터 모두 변수 선언(힘듦)

배열 구조 분해할당

선언 키워드 - 변수명 자리(변수명을 모아 둔 배열) - 데이터가 담긴 배열 할당 // 배열을 한번 분해해 one, two 라는 변수에 담아줌 참조해 보면 one ; 1, two ; 2

객체 구조분해할당

선언 키워드 - 중괄호 입력해 구조분해 할당 수행 - 배열과 같이 중괄호 안에 담기는 명칭:변수명(객체의 경우 실제로 obj 객체 안에 존재하는 property의 키를 적어 주어야 그에 대응하는 밸류들을 해당 변수에 담을 수 있음) - 뒤에는 할당 연산자(=) 적고 구조분해 할당 해주려는 객체 적기

별도의 변수명으로 관리

let {name :a ,gender: b} = obj

키에 대응하는 밸류들이 변수 a, b 에 담김

값의 복사

배열 요소 복사 말고 배열 자체 복사하고 싶을 때

같은 주소값 공유 ⇒ 복사 X

스프레드 연산자

하나로 뭉쳐있는 값의 집합을 전개

const arr = [ 1, 2, 3, 4, 5];

console.log(…arr) // 1,2,3,4,5

얕은 복사(shallow copy)

const arr = [ 1, 2, 3, 4, 5 ];

const newArr = [ …arr ] ;

const obj = {

name: “otter”,

gender : “male”

}

const newObj = {…obj}

중첩 객체 복사 한계

const obj = {
name: "otter",
gender: "male",
favoriteFood: {
first: "sushi",
second: "hamburger"
}
}

const newObj = { ...obj }

obj 객체의 name, gender, 내부 객체 favorFood의 프로퍼티 변경 후 복사본 newObj

obj.name=’rabbit’ obj.gender=’female’

obj.favfood.first = ‘cold noodle’

→ name, gender 영향 X / 내부는 바뀜

⇒

깊은 복사

heap(실행 환경의 영역) ; 임시 저장 메모리

참조 타입 데이터와 같이 데이터의 크기가 유동적으로 변함

중첩된 객체는 펼쳐지지 못하고 원본, 복제 주소값 공유

→ JSON.stringify(), JSON.parse() 사용

JSON데이터포맷으로 변경, JSON포맷 다시객체형태로바꿈

const obj = {
	name: "otter",
	gender: "male",
  favoriteFood: {
		first: "sushi",
		second: "hamburger"
  }
}

const copy = JSON.stringify(obj)

console.log(copy)
// {"name":"otter","gender":"male","favoriteFood":{"first":"sushi","second":"hamburger"}}

문자열로 변환되면 copy 에 담긴 값은 객체가 아닌 JSON

→ 완전히 새로운 주소

이후 JSON.parse(copy)

const deepCopy = JSON.parse(copy)

console.log(deepCopy)

/*
	{
		name: "otter",
		gender: "male",
	  favoriteFood: {
			first: "sushi",
			second: "hamburger"
	  }
	}
*/

완전히 새로운 객체 생성, deepCopy 에 담기게 됨
원본 객체와는 전혀 다른 주소 가진 객체

rest parameter

매개변수를 배열로 전달받는 방식

const foo = function(one, two, ...rest) {
	console.log(rest)
}

foo(1, 2, 3, 4, 5) // [ 3, 4, 5 ]

…rest 함수 호출과정- 다수 전달인자 건네졌을 때 변화

one , two 주어진 전달인자 첫번째, 두번쨰 데이터

…rest 나머지 데이터가 배열로

const foo = function(one, two, ...arr) {
	console.log(arr)
  // rest 파라미터 또한, 매개변수이기 때문에 임의의 변수명 지정 가능
}

foo(1, 2, 3, 4, 5) // [ 3, 4, 5

const foo = function(...rest) {
	console.log(rest)
}

foo(1, 2, 3, 4, 5) // [ 1, 2, 3, 4, 5 ]
전부 받아올 수도 있음!!

주의사항

rest parameter를 작성할 때는 반드시 마지막에 위치해야 합니다.

// 잘못된 예시
const foo = function(one, ...rest, two) {
	     console.log(rest)
             }

위와 같이 마지막이 아닌 위치에 사용할 수 없습니다

Junghan Lee

Strive for greatness

이전 포스트

2023. 3. 2 TIL

다음 포스트