Foundation 2- Http, Js, Node.js, Server, endpoint(api) 호출까지

소헌 멘토님께서 http의 시초부터, api 호출까지 모든 흐름을 한번에 훑어주셔서  복습 겸, 이해가 잘 되었다 .

 

1. Javascript

태생부터가 자바스크립트는 웹사이트를 위해 만들어진 것
--> 동적으로 만들기 위해 생겨난거니까

html을 동적으로 표현하기 위해 --> javascript 탄생

 
자바스크립트가 원래 엄청 느렸고 (C,C#에 비해), 이상한 언어인데

보편화돼서 쓰는거라

 

이후,

속도 빨라졌는데, 아까우니

이걸 우리가 브라우저 없을때도 쓰자  = node.js 

(node.js 나온지 얼마 안 됨, 2009년) 

2. Node.js

언어가 js이기만 하면 node는 실행 됨 (이름 붙이기만 한 거)

'이걸 우리가 브라우저 없을때도 쓰자  = node.js '

브라우저 없이도 쓰기 위해 탄생한 것이니, 

브라우저 없이 ‘터미널’ 환경에서 실행  (웹브라우저 안 들어가고 우리는 터미널에서 다 하고 있다) 
 
* 이전에는 실행이라는게 ‘클릭'해서 브라우저에서만 가능했다. 

 

 

 node.js 를 terminal에서 하면, vscode는 뭔데?

* vscode는 메모장 같은 거, 엑셀 파일을 만드는 과정, editor
(다른 editor: 한글 2002써도 됨)  

(node.js 나온지 얼마 안 됨, 2009년 ) 

 

 

3. 프론트와 백엔드의 구분 시작점

프론트는 html로
ex.<img>
빈칸 뚫어놓고 백엔드한테 data가 오면 채워넣음

 

백엔드 일을 '백앤드, 프론트'로 분리하면서=  프론트가 생기면서,
백엔드는 html, css 하지 않게 되고
프론트도 더욱 개발되면서 react 생기고 한 것 


프론트의 Html 태그를 대체해줄 데이터를
백엔드가 보내는 것  : “데이터 써”
→ 이 모든 게 ‘인터넷(네트워크)’을 통해서 이루어짐.   

---

백엔드는 인터넷에서 뭘 해야 하냐면, 

1. 프론트는 뭐가 필요할까? 무슨 데이터를 원할까? what 
2. 무슨 데이터를 어떻게 해야할까? how (프론트에게 줄 수 있는 함수를 짜는 것)  → 왜 ‘함수'로하냐면, 함수는 선언할 때 실행이 안 되죠,  
3. 함수를 만드는 것 (백엔드는 미리 만들어 놓기만 하는 것, 그게 필요할 시점을 모르니까) → 프론트는 실행시켜서 그 결과만 가져가는 것

 
Node app.js 는 한줄한줄 코드 실행 시키는 → 프론트는 우리 컴퓨터에 없으니, http로 호출 


즉, 프론트가 필요할 거 같은 데이터를

사전에 함수를 만들어놓는 것. 그걸 우리는 'Javascript'로 만든다. 

---

어떤 함수를 만들어 놓으면, 
 
const showCoffee=(  ) => {                                   // 함수이름: showCoffee
console.log(
{name:”콜드브루", img:”http:~”}, 
{name:”에스프레소", img:”http:~”}, 
{name:”만다린 버베나", img:”http:~”}, 
)
 } 
showCoffee( )                                                    #함수 실행  → 백엔드의 함수 실행

 

4. Server 의 역할 

백엔드가 실행하는 거 말고, 프론트가 함수를 실행하게 만들어줘야 함 = 서버의 역할

(백엔드의 컴퓨터에 와서 가져갈 수 있게) 
 
- 백엔드:  보내고 싶은 데이터 보낼 수 있도록,  미리 함수 다 만들어놓고
- 서버: 프론트에게 보낼 수 있게 
 
백엔드는 미리 함수를 다 만들어놓아야 함, 데이터 보내고 싶을 때 보낼 수 있게 
 
비슷하게, 
백엔드가 회원가입하는 함수를 미리 만들어놓고 
프론트가 호출해서 (= 함수 실행시켜서)  
프론트가 회원가입 시킬 수 있게 고민


이게 바로 서버가 하는 일 = 프론트에게 줄 함수를 미리 만들어놓고, 인터넷 통해서 프론트가 함수 실행시킬 수 있도록 
 
프론트가 뭘 원할까? 
그 데이터를 어떻게 해야할까? = 백엔드가 해주는 역할 (프론트에게 계속 주는 입장) 

 

(백엔드가 주는 데이터는, 고객에게 직접 바로 가지 않고, 프론트가 다시 가공해서 감)

5. 엔드포인트 (API) 

엔드포인트 End point (프론트의 끝, 백엔드의 끝, 만나는 지점)

= API

= application programming interface

= interface

= 접점
 
우리가 만든 스타벅스 함수를 누가 써? 프론트
백엔드가 만든 건 프론트가 써서, 고객에게 화면에 보여주는
(백엔드)우리가 만들어놓은 함수 = 프로그래밍 
 
showCoffee 함수를 프론트가 써서 = 호출해서 
쓸 수 있도록 
‘(백엔드)우리가 만든 showCoffee함수’와 ‘프론트’를 연결하는데 api! 
 
프론트가 함수 쓸 수 있게 백엔드 우리가 뚫어주는 것 
그 방법: 프론트와 백엔드의 서로 끝점 = endpoint = api = 접접(한국어는 기능) … 굉장히 넓음

 

6. API 호출 방법

같은 컴퓨터 안에 서로 다른 함수 있죠
프론트가 들어와서 어떤 걸 호출할지 
우리가 정해줘야 함 → 프론트가 물어볼 것 —> IP + API + url 로 경로 알려주는 것  (“프론트 너 이거 치고 들어와")


우리가 늘 직접 desktop> > > 알려줄 수 없으니, 
약속  번지수 처럼 대단한 의미없는 주소일뿐
 
http://ip:8000/coffee
백엔드: “프론트 너 브라우저에 http://ip:8000/coffee 입력해, 그럼 내가 내 컴퓨터 뚫어서 함수 실행 시킬게"  
이 문자열은, 프론트와 함수 연결시켜주기로 약속한 url 
 
즉, 
프론트가 
백엔드 컴퓨터 안에 들어가 있는 함수에 접근할 수 있는 매개체, 방법 = endpoint 
 
다시 정리하면, 
백엔드 컴퓨터에, 동작시킬 수 있는 함수가 들어가 있고, 
그 함수는 프론트가 써야 함.
백엔드에게는 그 함수는 의미가 없음
프론트가 실행시켜야만 화면에 띄울 수 있음. 그러려면 인터넷 상에서 매개할 수 있는 매개 장치가 필요함 (인터넷 통해서) 


그 매개체가 프론트에게 뭘 가능하게 해줘?
백엔드가 만든 함수 실행, 그리고 화면에 띄우기. 
(함수를 가져다 쓰는 거 = 실행)

• 우리는 백엔드는 함수를 서버에 저장하는 것. (서버 안에 함수들이 들어가 있는 것) 

함수 하나하나가 api, 
이 함수를 호출 할 수 있는게 api 주소 
이걸 다 통칭해서 써서 애매한 것. 


회원가입 엔드포인트 주세요" = 주소를 달라는 것

7. 서버와 데이터베이스?

Cf. 우리가 첫날 했던, ‘나만의 api 그리기'는
User → Frontend 서버 → Backend 서버 → Database 서버 
다 각자 서버 있는데, Backend 서버 중요해서, 
우리가 허용한 특정 프론트엔드 서버만 들어올 수 있게 해놓는것 (경계를 쳐놓는 것) 
ex. 마켓컬리 접속했는데, 오늘의집 데이터 나오면 안되니. 

 

*백엔드 서버에
다른 프론트엔드 서버는, 접속 불가능하게 경계 쳐 놓는
아무리 port 3000쳐도 못 들어옴. 

 

회사에서, vpm으로 우회해서 접속하는 이유도 위와 같은 이유. 

- ip주소 속이거나
- 다른 주소 뚫거나 할 때 특정 data 들어오게 

 

*Database도 결계 쳐놓음 = private network = 서버 막아놓음 
cf. user > frontend > backend > Database ( 다 되면, 서버를 DB에 붙이는)

8. http, express

통신을 할 수 잇게 - 양쪽으로 뚫을 수 있게 - F와 B 의사소통 
통신 = http 

 

http 약속 

1. 프론트가 req 보내면 백엔드는 무조건 res해야해
2. req보낼때는 start line, header, body 3개는 무조건 보내야 함 

 

1)Start line:

•  프론트가 http로 적은 거로 준비했으니 백엔드도 http로 받아 http1.0 //
•  post, get method 중 어떤 걸 할 건지(백엔드는 2개 밖에 안함, 데이터를 받을 건지 줄건지) // 
• 어떤 함수 호출할 건지 = url를 적음 (url은 api 만드는 주소 ex. /, /user) 

 
2) body:

프론트가 백엔드에게 request줄때만 사용한다. (스타벅스 사이렌오버에서 주문할때 주문 정보만 넣는거처럼- 결제하면- 스타벅스 서버로 감)
모든 요청에서 프론트가 백엔드에 주는 정보 모두 request.body로 들어감
 
Ex. 주문정보 
     회원정보 
     이미지 파일 다 request.body에 들어가서, 백엔드에게 보내짐 -> 백엔드가 저장함 -> 어디에? 데이터베이스에. 
 
Ex. 주문을 관리하는 데이터베이스에 주문정보 저장, 백엔드가. (다른 컴퓨터에서도 살 수 있게)
 ‘이소헌님이 콜드브루 3개 샀습니다’ 하고 저장됨
 
그래서 백엔드가 데이터베이스에서 커피 정보를 가져가서 (거꾸로) 
프론트에게 보내줌 
 

 

 

3) header: 

 

9. Npm install http 

http모듈은 웹 서버와 관련된 모든 기능들을 담은 모듈이다.

http모듈은 node.js에서 가장 기본적이고 중요한 웹 모듈이라고 할 수 있다.

 

웹서버와 클라이언트 생성 등 관련된

모든 기능을 담당하는 모듈



근데 매번 http 모듈을 버전별로 하기 귀찮으니
귀찮은 개발자가 npm 안에 다 넣어둠
 
Require에 http 있는 이유도 ㅇㅇ 

모듈이란,

 

개발하는데 필요하고 다양한 기능들을 함축시켜놓은 소스

(공식적으로 개발자들에게 제공하는 기능, 개발자가 직접 코드를 만들어서 사용할 필요없음) 
 
* 원래 http 모듈만 쓰면 써야했던 코드:
if(req.method === ‘GET’){
if(req.url=== “/users”){
return createUser 
} else if (req.url === “posting”){
return createPosting} 
}
 
* [Express 쓰면 간단해지는 코드] —> 개발자들 쓰기 편하라고 
const app = express()
 
app.get(‘/users’, createUser)
app.get(‘/posting’, createPosting)
 
(app 첫 인자는 /users 하던가 users/ 하던가, 긴 url에서 자른 거니까. 앞에서 자른건지 뒤에서 자른건지 차이) 



Cf. require란 다 가져오는데, 너무 많으니 datasource만 가져오는= {datasource} 



통신하는 데 http 필요하다
우리는 다른 사람이 만들어놓은 http를 갖다가 써야 하니 require가져와라 —>  const http =require(‘http’) 
근데 너무 저건 복잡하니, const express =require(‘express’)



원래는 import문법인데, node.js에서는 요구안하니 require문법으로 (검색하면 import 나오면 react니까 require로 알면 됨) 



다시 정리하면,
1.통신을 하려면 http필요하고, 
2.근데 우리가 직접 구축하는게 아니고 다른 사람이 한 거 다운 받는 거고 —>  그래서 우리가 npm install을 다 하는거고
3. 근데 그거 너무 복잡하니 저거로 한 줄 쓰는 거고 





<app.js>
 
프로젝트 폴더 안에 필요한 여러 파일들 중 하나가 app.js — > 이 파일 안에, const http=require (‘http’) 가 있을 거고 
 
큰 ‘project’ 폴더 안에 ‘app.js’라는 main 라는 파일 있고
‘Node-moduels’ (모든 게 다 여기 깔림) (http에서 설치하라는 저장된 덩어리가 다 여기 있음). (Npm install http하면 컴퓨터에 깔리는게 아니라, project 폴더 안에 깔리는거라, project 폴더 만들때마다 설치해줘야 함//// http module을 프로젝트 하나에 쫙 까는 거고 (개발자가 미리 만들어놓은 코드 = 결국 함수 = 모든 건 함수) )
‘package.json’ (다 깔린 것들 이름만 보임, 어떤게=어떤 library 설치됐는지 list 만)



미리 node-modules에 저장해놓고 app.js에서 require로 부를때(const http=require(‘http’), node-modules에서 가져와라는 뜻
Node-modules not found : 설치가 안 된 거 “다른데에서 가져오라매 없어” = 설치해라



npm init-y하면 프로젝트 폴더를 이제 쓴다는 뜻
 
파일= 모듈
폴더 = 패키지 = 서버를 모여있는 폴더 (폴더가 모여있으면 패키지) 




app.get([url], [함수]) 
 
app.get( “/”, async(req, res) => { try{ 
근데 함수가 너무 기니까 
const 함수 = 로 빼내는 
 
For example, 
app.get(url, welcome)
const welcome=() => {  try {   } 
catch(err){
console.log(err)
}  
}