express.js와 json ✨
express.js를 배우기 전에는 어떻게 서버를 개발했었나??(node.js로)
http라는 Node.js가 가지고 있는 내장 모듈을 통해 서버를 개발할 수 있었다.
다음과 같이 개발이 가능하다.
http 내장 모듈로 개발이 가능하지만 Express.js 프레임워크를 사용하면 더욱 간편하게 서버개발이 가능하다.
그럼에도 http 공부를 제대로하기 위해서는 http로도 개발을 하는 경험이 필요하다 생각한다.
express가 워낙 편리하게 잘 나와있어서 그 내부 작동원리를 이해하는데 불안함이 있다!
express.js 설치 및 사용 🎯
npm에서 express.js 모듈을 다운로드받을 수 있다.
여기서 모듈이 뭐였지?
모듈: node.js에서 받을 수 있는 소프트웨어 (함수,기능 등)
npm: node package module, node환경에서 소프트웨어 설치관리자
npm i express하면 해당 프레임워크가 다운로드된다.
express.js는 프레임워크 🎯
express를 사용해보면 express라는 모듈의 틀안에서 사용해야함을 느낄 수 있다.
개발자가 주도적으로 해당 모듈을 편집할 수 있는 것이 아닌 이미 정해놓은 틀이있다.
express.js 사용 🎯
require Node의 내장 모듈을 사용해서 Expres라는 프레임워크를 가져왔다.
그리고 express()를 App에 저장해두었는데
바로 이 express()함수를 사용해서 서버가 지금 생성이 된것이다. 그럼 이제 해당 포트넘버만 작성을 하면
나의 로컬에 1234포트에 서버가 생성되었다.
http 내장모듈로 개발을 하는 것 보다 코드의 수가 확연히 차이가 난다.
이는 사용을 하면 할 수 록 그 차이가 벌어진다.
그럼 해당 서버로의 요청은 어떻게 받을 수 있을까?
일단 http요청을 보낼테니 기본적으로 url로 소통을한다.
그럼 Url을 어떻게 짜냐에 따라 요청하는 데이터를 다르게 줄 수 있어야한다
이런식으로 해당 Url로 클라이언트(브라우저)가 요청을 하면 서버는 해당 text "hello"를 보내준다.
그냥 이렇게 생각하자
http는 Url로 컴퓨터간 소통을 한다. 그 url을 짜는게 api설계다.
프론트도 결국 url를통해 정적리소스를 가져다줄수있고 백도 결국 url을 통해 동적리소스를 가져다준다.
함수를 짜고 페이지를 구현한다면 결국 그 기능을 Url과 엮어야한다.
어흥~
자 이제 이런 생각이든다.
그럼 응답을 html, string, number, Object등의 "타입"으로 전달 🎯
그렇다 지금은 해당 페이지에 text형식으로 뿌려주고있는데 이게 아니라 정말 html파일 자체를 가져다주거나
string으로 전달하거나 object로 전달해줄 수 있어야한다.
왜냐면 정적 리소스의 경우는 html파일을 원할 것이고 동적 리소스의 경우에는 DB에서의 데이터를 string, number, array, object등 다양한 형태로 가져다 줄 수 있어야한다.
그런데 가장 효율성이 좋은 타입은 object이다.
Object 짱 ✨
왜 이 사진을 가져왔나요? 그냥좋아서요
사실 이 세상 모든건 Object로 이루어져있다.
축구선수라는 카테고리에 국가대표, 올림픽대표, 청소년대표 등으로 나눌수 있고
또, 국가대표중에서 FW, MF ,DF ,GK 등으로 또 나눌수있다.
세상 모든건 Key : value로 이루어져있는데
이러한 데이터 교환에서 Object의 힘은 굉장하다 !
그래서 우리는 보통 데이터를 송신할때 Object의 형태로 보내기를 원한다.
Json 짱 ✨
Json: JavaScript Obeject Notation
즉, 제이슨은 그냥 Javascript에서 사용되는 오브젝트 형태이다
const obj ={
name:"son",
age:31,
speed:"crazy"
}이런 형태를 Json형태라고한다. 그럼 이제 서버에서 해당 Json의 형태로 데이터를 보내고싶다면 어떻게하면될까?
이미 Express형님이 다 정해놓으셨다.
다음과 같이 보낼 수 있다.
사실 이렇게 생긴 API를 많이 볼 수 있다. 예를 들어 날씨 API
다 결국 객체로 데이터를 보내준다. 그럼 이제 그냥 사용했던 API들이 좀 더 다르게 보인다.
스윗한 백엔드 형님들이 프론트엔드 힘들까봐 객체로 데이터타입을 정해 보내주신거다.
하하
그런데 이제 Json으로 데이터를 보내게되면 string타입으로 보내지기때문에
이를 백엔드에서 number는 parseInt같은 메소드를 사용해서 변환시켜주면 더 좋다.
(프론트에서해도되지만 해주세요형님)
json 응용(매개변수+query) ✨
자 그럼 url의 주소값에 입력되어있는 그 값을 다시 보낼 순 없을까?
params라는 express형님이 제공해주신 메소드를 사용하면된다.
이런식으로 url의 / 이후에 작성되는 것들이 바로 프린트되는 신기한 모습을 볼 수 있다.
이를 어떻게 사용하는지는 교육이 진행되면 더욱 느껴질 것이다.
정확히는 /: 이후에 있는 url입력값이 params에 들어간다. 그럼 /:가 여러개면??
신기하게 :로 작성된 모든 변수는 정말 변수로 저장이 되어 req.params에 저장된다.
그리고 해당 Url조건에 맞추어 작성을 하면 원하는 데이터를 보내준다. 키야
매개변수를 넣고싶다면 /:와 Params선에서 정리된다..
그리고 이제 query!
query가 뭐냐면 그냥 물음표이다.
query는 url에서 물음표, 데이터에 대한 정보를 제한하는 역할
결국 Query는 프론트에서 날리는거다.
프론트에서 url을 통해 나 이거 데이터 필요해 대신(query?)이런 데이터
그럼 query를 실제로 봐보자
필자가 지금 실시간으로 듣고있는 로파이 음악을 제공해주는 유튜브 url이다.
https://www.youtube.com/watch?v=Xc1Le3CSdrM&t=3048s
자 여길보면 /watch?v=~&t=~
? 밑으로 다 query이다
이 query를 따로 빼내서 확인할 수 있다. 그런데 당연히 백엔드 입장에서 쿼리를 읽을 수 있어야 뭔가 조치를 해주지 않겠는가?? 그러니까 query를 빼서 읽어주는 것도 Express를 개발한 형님들이 만들어두셨다. 우리는 그냥 그 함수를 편하게 사용하면된다.
자 이렇게 q라는 변수에 req.query를 저장하면
q는 url에서 ? 밑으로 있는 모든 query를 저장해준다.
이렇게 말이다!
그럼 이를 다시 Json형태로 뿌리고싶다면?
이렇게 사용이 가능하다!!
프론트에서 /watch?v=asddag&t=232.2s하고 어떤 query를 보낸다면
백에서는 /watch에 대한 get요청에 query를 따로 처리해주는 로직을 짜면될것으로 생각된다
