Switch - case 조건문
: 많이 사용되는 조건문은 아니지만 알아두면 좋음!
const day = "목요일";
switch(day){
case "월요일": "월요일입니다."
break;
case "화요일": "화요일입니다."
break
case "수요일": "수요일입니다."
default: day + "입니다." // 목요일 입니다
}: 각 case에 실행할 로직 등록
: default는 해당하는 case가 없을 경우 해당 함수 실행
: default는 제일 마지막에 위치해야 함
프로그램상에서의 데이터통신
: 두 컴퓨터간 연결하기 위한 프로그램을 설치하고 그것을 작동시켜주기만 하면 됨
: 두 컴퓨터간 데이터를 어떻게 전송할 것인가?
- 파일을 전송하는 길 = FTP
- 메일을 주고받는 길 = SMTP
- 텍스트 데이터나 하이퍼텍스트(HTML) 파일을 주고 받는 길 = HTTP(protocol = 일종의 길이라 생각하면 이해 쉬움)
HTTP
: HTTP란 HyperText Transfer Protocol의 약자로 두 컴퓨터간에 텍스트 데이터를 주고 받는 길
: 크게 요청(Req:Request)과 응답(Res:Respone)으로 이루어짐
: HTTP 길 내에서 요청과 응답이 이루어진다는 의미
: 한 컴퓨터가 요청을 보내고 다른 컴퓨터가 작업 처리 후 응답 결과를 보내줌
: 주고받는 데이터를 담는 편지 봉투와 같은 것이 존재한다고 생각하면 이해 쉬움
: 편지지 안에는 header / body 두 부분으로 나뉨
HTTP 요청(Request)과 응답(Response)
HTTP 요청(Request)
: 웹브라우저에서 홈페이지(Front-end 컴퓨터)가 실행중이라면
작성한 게시물 텍스트 데이터를 HTTP를 통해 Back-end 컴퓨터로 보내고 , Back-end 컴퓨터에게 이 데이터를 데이터베이스에 저장 해달라고 요청함
- 요청헤더 (Resquest Header)
: 보내는 이- 브라우저 / 보내는 형태 - 객체객체 = 자바스크립트에서 사용하는 {} 이러한 형태
- 객체는 통신으로 주고 받을 수 없음
- 위에서 의미하는 객체는 JSON 데이터를 의미
🤔 JSON(JavaScript Object Notation)?
: 자바스크립트 객체 표기법
: 객체처럼 생긴 문자열, 실제론 객체가 아님 - 요청바디(Request Body)
: 요청하는 정보 담김
HTTP 응답(Response)
: 요청을 받은 Back-end 컴퓨터가 성공, 실패 등 처리 결과를 응답합니다.
💁🏻♂️ 데이터베이스에 바로 요청하면 안되나요?
보안 및 데이터 정제 등의 이유로 Back-end에서 검증 과정을 거쳐야 하기 때문에,
아무나 함부로 데이터베이스에 요청할 수 없습니다.
-
응답헤더(Response Header)
: 보내는 이 - 백엔드 컴퓨터, 보내는 내용 형태 - 객체, 상태코드 등상태코드
: 성공, 실패 등 메세지 내용 상관없이 응답결과를 직관적, 객관적으로 알 수 있음
: 상태코드 오류 다 외울 필요 없음
: 400번대 - 클라이언트 즉 유저 오류(401 403 404:존재하지 않는 페이지)
: 500번대 - 백엔드 개발자가 만든 프로그램 서버 오류 -
응답바디(Response Body)
: 응답 결과 정보 담김
API
: HTTP 요청을 Back-end 컴퓨터에 보냈을 때 실행되는 Back-end 기능
: Back-end 개발자가 만든 함수
: API에 요청할 때 보내는 데이터는 API 함수로 들어갈 인자이고, 응답으로 받게되는 데이터가 API 함수의 return 데이터
: 해당 기능(요청-응답)을 처리해주는 담당자(= 함수 유사)
: 기본적으로 하나의 API는 하나의 요청만 받을 수 있음
: 기능마다 각각 API가 존재해야 함
: 같은 이름에 메서드만 체인지하는것 = rest-ful 하다 표현
-
Rest-API
: 주소처럼 생긴 이름(end point) 보유
ex) https://naver.com/board/1
: 요청 -> 응답으로 데이터를 선택적으로 받아올 수 없음 -> 불필요한 내용이 많아서 용량이 너무 커서 무거움
: 요청 담당자(프론트 엔드에서 설치하는 라이브러리) - axios
: 포스트맨postman(실습도구 = API연습) + 스웨거swagger(API설명서 - 백엔드개발자가 만들어서 제공) -
Graphql-API
: 페이스북에서 rest-API 문제점 해결하기 위해 자체 제작
: 일반 함수와 같은 이름(end point) 보유
ex) borad(1) , profile(“철수”)
: 요청 -> 응답으로 원하는 데이터만 선택적으로 필터링해서 받아올 수 있음 -> 필요한 것만 받기 때문에 용량이 적고 빠름 / 비용절감
: 글로벌 서비스 사용
: 요청담당자(프론트 엔드에서 설치하는 라이브러리) - apollo-client
: 플레이그라운드(playground)에서 API 설명서 + 실습도구 둘다 가능 -> 마찬가지로 백엔드 개발자가 만들어서 제공)API 설명서 : API 독스
API 연습도구 : 문서보고 제대로 쳤을 때 제대로 실행되는지 체크용
playground
: 줄단위로 내렸을 때 객체내 콤마 생략가능
: shift + spacebar => graphql-API 매서드 검색
: ! 는 필수사항
: [] 는 객체들이 모아져있는 배열이라는 의미
Graphql-API 가 더 좋지만 Rest-API 알아야하는 이유?
- 아직 많은 회사들이 사용하고 있음
- 취업한 회사에서 사용 가능성 높음
- open-API or public API에서 일반적으로 rest-API를 제공 => 무료로 사용할 수 있게 공개해주는 정보 / 많은 사람들이 접근할 수 있게 rest로 제공되는 경우 많음
API 와 CRUD(create read update delete)
- 하나의 기능을 완벽하게 만들었다는 건 등록 /조회 (+상세보기=목록보기) /수정 / 삭제 가능해야함
Rest-API는 CRUD 마다 사용하는 방식(method)이 존재
GraphQL-API는 데이터를 조작하지 않고 조회만 할때는 QUERY, 그 외의 데이터를 조작할 때는 MUTATION을 사용
실제 프론트엔드에서 사용할 때, 즉 요청을 보내는 방법은 아래와 같음
⭐️ API 한장에 정리
Mutation은 돌연변이라는 뜻을 가지고 있음
즉, 변했다는 의미! 위험한 요청이니 조심히 사용해야 함
query는 조회기능이기에 안심하고 사용 가능
Rest-API 실습
: Rest-api 만들기위해 express라는 도구 필요
: express는 관점에 따라 프레임워크로 볼 수도 있고 라이브러리로 볼 수도 있음
프레임워크 ?
: 도구들이 모여있는 도구 모음을 의미
라이브러리 ?
: 도구를 의미express ?
: Node에서 쉽게 웹 서버 개발할 수 있도록 도와주는 프레임워크
: 간단히 말해 프론트엔드에서 백엔드로 API로 요청할 때 그 요청을 잘 받을 수 있고 잘 응답해줄 수 있게 도와주는 역할을 함🌟설치 방법
: yarn을 이용해 설치 - 터미널 해당 폴더 이동 후 yarn add express 입력🌟 설치 완료 후
- node_modules 폴더 생성
: 폴더 내부엔 실제 설치가 완료된 파일들이 존재
: express 코드도 존재- package.json
: 설치된 목록들이 적혀진 파일
: express 버전 확인 가능
: 파일에서 관리하고 있는 파일의 버전 정보로 언제든지 패키지 재설치 가능
➡ 용량이 큰 실제 패키지 파일들이 위치한 node_modules을 github에 공유하는 것은 매우 비효율적 ➡ 이를 방지하기 위해 폴더 최상단에 .gitignore 파일 생성 후 내부에 node_modules 추가관리 ➡ gitgub에 공유되지 않음- yarn.lock 파일
: 설치된 목록들과 의존되어 있는 다른 모듈들의 버전 정보 담겨있어 버전관리를 함
: 신경 쓸 필요는 없지만 매우 중요한 파일
- express 를 통해 API 생성
1. https://expressjs.com/en/starter/hello-world.html에서 코드 복사
2. 불러온 express를 실행해, 새로운 변수 app에 담고 GET 요청이 들어왔을 때 Hello World! 라고 응답을 전송
3. 마지막으로 app.listen(3000)을 작성하여 3000번 port에서 서버가 24시간 동안 실행하도록 코드를 수정
💁🏻 포트번호? 이를 지정하는 이유?
위에서app.listen이라는 명령어로 접속을 기다리는 프로그램을 실행시켜 보았고 이러한 프로그램을서버 프로그램이라고 칭함.
이 서버 프로그램들은 하나의 컴퓨터 상에서는 동일한 포트로 실행될 수 없음.
따라서 이들을 각각 구분 지어 주어야 하는데, 이를 위해서 사용하는 것이포트 번호!!
즉 포트번호는 동일한 컴퓨터에서 여러 서버 프로그램 실행을 위해 구분을 짓는 숫자라고 생각하면 이해 쉬움 !!
이러한 포트 번호는 0-65535까지의 범위를 가지고 있습니다.
- node index.js 명령어를 통해 서버를 실행시키면 3000번 port에서 24시간 내내 실행되면 접속을 기다리는 상태가 됨
- 서버를 종료하기위해 컨트롤 + C 입력하면 됨 ( 종료하기 전까지는 서버가 계속 켜져있는 상태로, 터미널에 다른 입력 불가)
- postman에서 요청보내보기
