algorithm
if(조건문, 분기문)
조건이 일치할 때만 로직을 실행하는 문법
if()로 시작하며, 소괄호 안에 조건식이 들어간다.
조건식이 일치하는 경우(=true)에 로직이 실행
if(조건){
실행할 로직
}조건식이 일치하지 않는 경우 else문법의 로직이 실행
else{
실행할 로직
}else문에 if를 추가로 적용할 수 있다. 조건도 적어야함.
else if(조건){
실행할 로직
}조건에는 Truthy한 값과 Falsy한 값이 들어간다.
Truthy
true, 0이 아닌 숫자, 빈 문자열이 아닌 문자열, 객체, 배열
Falsy
false, 숫자 0, 빈 문자열, null, NaN, undefined
switch(조건문, 분기문)
if문과 매우 비슷하지만 실무적으로 거의 사용하지 않는다.
const day = '월요일';
let result = '';
switch(day){
case '월요일':
result = '오늘은 월요일입니다.';
case '화요일':
result = '오늘은 화요일입니다.';
}
console.log(result);'오늘은 월요일입니다.'
'오늘은 월요일입니다.'switch는 case문을 발견하더라도 break해주지 않으면 계속 작동한다.
const day = '월요일';
let result = '';
switch(day){
case '월요일':
result = '오늘은 월요일입니다.';
break;
case '화요일':
result = '오늘은 화요일입니다.';
break;
case '수요일':
result = '오늘은 수요일입니다.';
break;
default :
result = `오늘은 ${day} 입니다.';
}
console.log(result);'오늘은 월요일입니다.'
'오늘은 화요일입니다.'
'오늘은 수요일입니다.'Switch default를 사용한 예외 정의(항상 아래에 있어야함!)
const day = '목요일';
let result = '';
switch(day){
case '월요일':
result = '오늘은 월요일입니다.';
case '화요일':
result = '오늘은 화요일입니다.';
case '수요일':
result = '오늘은 수요일입니다.';
default :
result = `오늘은 ${day} 입니다.`;
}
console.log(result);논리연산자
and(&&)
둘 다 같으면
or(||)
둘 중에 하나라도 같으면 true
not(!)
true === !falseNode
구조분해할당 심화
복사?
원본과 복사본
let aaa = '철수'
let bbb = aaa
console.log(bbb) //철수복사본에 재할당
let aaa = '철수' -> 원본
let bbb = aaa -> 복사본
console.log(bbb) //철수
bbb = "영희"
console.log(bbb) //영희객체와 배열을 제외하면 다른 타입은 원본은 변하지 않고, 복사본만 값이 변한다.
그렇다면 왜 객체와 배열은 왜 복사본의 값을 변경해도 값이 변경될까?
특정한 주소로 값을 저장하고, 변수에는 주소만 저장된다.
let profile1 = {
name : "철수",
age : 8,
school: "다람쥐초등학교"
}
let profile2 = profile1
profile2.age = 10;
profile2.name = "영희"
//profile1
//{name: '영희', age: 10, school: '다람쥐초등학교'}
//profile2
//{name: '영희', age: 10, school: '다람쥐초등학교'}그렇다면 객체나 배열의 복사는 어떻게 할까?
SpreadOperator
SpreadOperator(스프레드 연산자)를 사용하자!
복사를 위해 타이밍하는 시간을 줄여준다.
let profile2 = {...profile1}근데 객체 안의 객체는 또 복사본의 값을 변경하면 똑같이 변경된다. 그 이유는
SpreadOperator는 얕은 복사(Shallow Copy)로 객체 안의 객체는 똑같이 주소가 복사되기 때문이다.
해결책 1
깊은 복사(deepCopy)를 하려면 객체를 문자열로 바꿔서 복사를 한다.
const child1 = {
name : "철수",
age : 13,
school: "다람쥐초등학교"
}
let child2 = {...child1};
child2.name = "영희"
console.log(child1)
let child3 = JSON.parse(JSON.stringify(child1));
child3.name = "이훈이"
console.log(child1)//{ name: '철수', age: 13, school: '다람쥐초등학교' }
console.log(child3)//{ name: '이훈이', age: 13, school: '다람쥐초등학교' }
JSON.stringify() -> 문자열로 바꿔줌.
JSON.parse() -> 객체로 변경
그러나 성능이 그렇게 좋지는 못하다.
해결책 2
lodash 사용
+배열의 복사
spread를 통해 배열을 복사할 수 있다.
const aaa = ["철수","영희","훈이"]
const bbb = [...aaa]두 배열을 합칠 땐?
const aaa = ["철수","영희","훈이"]
const bbb = ["맹구", "짱구"]
const ccc = [...aaa, ...bbb]RestParameter
배열이나 객체를 SpreadOperator를 이용해 특정한 키나 값을 제거하여 복사하는 방법
const child = {
name: '철수',
age: 8,
school:"다람쥐초등학교",
money: 8000,
hobby: '축구'
}
const {money, hobby, ...rest} = child;
rest = {
name: '철수',
age: 8,
school:"다람쥐초등학교",
}HTTP(Hyper Text Transfer Protocol)
두 컴퓨터간 데이터 전송하는 방법
- FTP(파일)
- SMTP(간단한 메일)
- HTTP(텍스트, 하이퍼텍스트)
HTTP 라는 길로 요청(request)과 응답(response) 2가지를 서로 주고 받을 수 있다.
HTTP 요청(Request)
웹브라우저에서 홈페이지(Front-end)가 실행중이라면, HTTP를 통해 **Back-end 컴퓨터로 보내고**
Back-end 컴퓨터에게 이 데이터를 데이터베이스에 요청한다.
HTTP 응답(Response)
요청받은 데이터를 확인하고 성공,실패를 상태코드와 함께 프론트엔드로 응답한다.
상태코드 정보
이는 각각의 기능에 따른 API에서 처리한다.
HTTP 통신에는 요청과 응답이 있고 그 안에 헤더와 바디가 있다.
헤더에는 바디의 요약 내용, 바디에는 자세한 내용이 포함된다.
API의 종류
API의 종류는 크게 두 가지로 rest-API와 graphql-API이다.
모든 정보를 가져오는 rest-API, 필요한 정보만 가져오는 graphql-API 둘은 필요에 따라 사용한다.
이때
**rest-API**에 요청하는 요청담당자는**axios**이고,
**graphql-API**에 요청하는 요청담당자는**apollo-client**이다.
요청담당자는 Front-end 에서 설치하는 라이브러리이다.
아직 rest-api를 사용하는 이유?
- 국내에선 그정도로 큰 트래픽이 일어나는 경우가 적다.
- 개발자들에게 graphql-api교육을 새로 해야하기 때문이다.
- open-API(public-API)에서 일반적으로 rest-API를 사용하기 때문이다.
요청과 응답을 주고받을 때 프론트엔드와 백엔드의 구분이 애매해진다. 백엔드는 다른 백엔드로 요청을 보내기도 하기 때문에 명확한 구별이 어렵다.
JSON(JavaScript Object Notation)
HTTP에서 데이터를 주고 받을 때 사용하는 방식으로 객체처럼 생긴 텍스트로 전송한다.
JSON은 객체는 아니다.
CRUD란
Create, Read, Update, Delete로 API를 만들 때 주로 사용하는 기능을 모아 단축한 것이다.
rest-API와 graphql-API에서 이름이 다르다.
이렇게 만든 API를 테스트 해볼 수 있는 도구와 API설명서를 작성해주는 도구가 있다.
.png)
