백엔드 완전완전완전 기초 !

글을 시작하기에 앞서, 저는 프론트앤드만 접해본 사람입니다 ! 

리액트 , 코틀린 등등 웹 앱 다 해보았는데 코틀린은 거의 맛보기 정도로만 해보았고, 리액트 위주로 공부하다가 

리액트가 생각보다 나랑 잘 안맞는 것 같기도 하고...

백엔드를 접해보지도 않고 프론트로 길을 정한건 아닌가 싶었습니다. 또, 프론트를 하려면 백엔드에 대해 알고있어야 더욱 작업이 수월해질 것 같아 백엔드 쪽으로 방향을 틀던, 프론트를 하기 위한 백엔드 공부가 되던 우선 한번 경험해보려고 합니다 ! 

 

공부 시작 !

---

node.js 란 ?

우선, 자바스크립트는 파이썬같은것과 달리 별다른 다운로드 없이 사용이 가능하다. 그 이유는 자바스크립트는 바로 브라우저에서 실행하기에 가능했던 것 이다. 즉, 컴퓨터에서 실행된게 아니라 브라우저에 인터프리터가 있어서 자바스크립트를 해석해서 실행한거다. 하지만 이건 프론트엔드의 관점이고, 백엔드 서버에서 관리를 하려면 이 node.js 라는걸 설치해야 한다.

 

간단히 vscode 로 node.js 를 실행해보자면 

console.log("hello world")

이렇게 입력하고 터미널에서 

 node index.js

이렇게 node 명령어를 실행하면 hello world 가 출력된다.

 

npm 이란 ?

Node Package Manager 의 약자로 이름 그대로 필요한 툴을 가져다가 쓸 수 있게 도와주는 거라고 생각하면 된다. npm install ____ 이라는 명령어를 활용해 다운받을 수 있다. 여기서 무작정 install 을 해도 되지만, 조금 더 정돈하기 위해 npm init 이라는 명령어를 먼저 사용하면 좋다. 이건 npm 을 시작하겠다는 명령어이다. 이 명령어를 실행하면 package.json 이 생성되고, 그게 설치된 모듈들을 정리해주는 메모장 같은 역할을 해준다.

 

이렇게 init 먼저 해준 후 npm 모듈을 설치하면

이렇게 설치한 모듈(figlet) 의 버전이 나오고, package-lock.json 이라는 파일이 생긴다. 이건 좀 더 상세한 정보를 담은 파일이라고 생각하면 된다. 

 

아무튼 ! 이렇게 하면 해당 모듈 사용이 가능하고, 사용법은 npm 사이트의 해당모듈 탭으로 넘어가면 잘 나와있다.

이렇게 사용한 모습 ~ !

 

이제 본격적으로 express 를 사용해볼거다.

 

express 란 ?

node.js 를 이용해서 웹 프레임워크를 만드는 것 ! 

이걸 다운받고 아까처럼 사이트에 나와있는 사용방법 그대로 사용해보면

터미널에선 이렇게 가만히 멈춰있는데 오류난게 아니라 잘 작동된거다.

아무런 탭이나 열고 localhost3000 에 들어가면

이렇게 뜬다 !

express 사용방법에 나와있는 코드는

const express = require("express");
const app = express();

app.get("/", function (req, res) {
  res.send("Hello World");
});

app.listen(3000);

이런 코드인데  코드 하나씩 알아보면,

app.listen(3000);

이건 뭔가를 듣는다 라는 코드같은데, 저 괄호안에있는건 포트번호이다.  3000번 포트로 리스닝 하겠다는 뜻이다.

app.get("/", function (req, res) {

 

get 은 http 메소드 , '/' 는 라우팅, () => {} 는 콜백함수이다.

http 메소드는 어떤 요청을 했을때, 요청의 목적, 종류를 알리는 수단으로 get 요청과 post 요청이 있는데, get 은 주소창에서 데이터를 넘기는 방식이고 post 는 주소창이 아니라 내부적으로 body 에 담아서 데이터를 보내는 방식이다.

 

라우팅은 서버에 들어갈때 여러 포트가 있는데, 이 포트 안에서도 여러가지 파일이 있을거다. 예를들면 https://www.youtube.com/watch?v=0gY_z7fqPjs 이 링크를 봤을때 페이지를 옮겨다닐때마다 / 뒤에 글자가 추가되는데 이걸 라우팅이라고 한다.

 

콜백함수는 조건이 끝나고 실행할 함수를 넣어주는거라고 생각하면 된다. 위 코드에선 req 와 res 를 파라미터로 담는다. 

 

조금 더 스토리텔링 형식으로 코드를 해석해보자면, 코드는 3000번 포트에 대해 듣고있었다.(기다리고있었다) 그러다가 주소창에 localhost:3000 을 입력해서 접근했는데 이건 get 방식이다. 이 get 방식으로 루트에  접근했기때문에 그 뒤에있는 콜백함수가 실행된다. 그리고 res(보내는 응답) 으로 hello world 를 보낸다는 뜻이다.

 

한번 간단한 api 를 생성해보자. 

 

- 라우팅을 활용하여 /newapi 에 접근하면 { ' new ' :  '새로운 api 입니다.' } 라는 json data 를 돌려줘볼거다.

 

const express = require("express");
const app = express();

app.get("/", function (req, res) {
  res.send("Hello World");
});

app.get("/newapi", function (req, res) {
  res.json({'new' : '새로운 api 입니다.'});
});


app.listen(3000);

간단하다 ! 그냥 동일한 코드에 라우팅부분 주소를 바꿔주고, 전달하는 값만 json 형식의 데이터로 바꿔주면

이렇게 원하는 값으로 나온다.

 

저렇게 말고 변수로도 줄 수 있다.

아깐 res 만 사용했는데 req 도 사용할거다. 요청을 할 때 get 을 사용하는 방법이 두가지가 있는데, 하나는 params 를 사용하는 방법 , 하나는 query 를 사용하는 방법이다. 

먼저 params 가 실제로 어떻게 쓰이냐면 

app.get("/user/:id", function (req, res) {
  const q = req.params
  console.log(q)
  res.json({ new: "새로운 api 입니다." });
});

우선 q 라는 변수에 요청으로 들어온 params 를 담아서 한번 출력해보면

이렇게 id 로 내 이름을 넣어주면 

이렇게 요청이 들어와서 값을 받을 수 있다.

app.get("/user/:id", function (req, res) {
  const q = req.params
  console.log(q)
  res.json(q.id);
});

이렇게 res 도 q.id 로 바꿔보면 

변수로 넣어준 값이 잘 나온다. 이번엔 쿼리로 받아볼거다.

app.get("/user/:id", function (req, res) {
  // const q = req.params
  // console.log(q)

  const q = req.query
  console.log(q)

  res.json(q.id);
});

쿼리는 이런 방식으로 사용하면 되고

http://localhost:3000/user/kimchaeyeon?q=hello&name=chaeyeon

주소창엔 이렇게 ? 와 & 를 사용한다. 이렇게 해서 다시 터미널을 확인해보면 

이렇게 데이터가 들어간걸 알 수 있다. 그래서 아까처럼 q.q , q.name 등 원하는 데이터에 접근이 가능하다.

 

다음으로 post 방식으로 받아보는 방법에 대해 알아볼거다. 

params 는 get 방식과 똑같고 , axios 나 fetch 를 사용할때 이용할 수 있다. 단, req 를 할때 params 가 아닌 body 로 받아온다.