[포스코 x 코딩온] 웹 개발자 부트캠프 7주차 수업 회고

 

🐯  포스코 x 코딩온 웹개발자 부트캠프 7주차 수업 회고 

 

1.  백엔드 시작

백엔드 - 서버와 데이터베이스 관리

프론트엔드 - 사용자가 마주보는 인터페이스 관리

 

 

http? - HyperTextTransferProtocol의 약자로 웹상에서 정보를 주고받을때 쓰이는 프로토콜(통신 규약) 이다. 서버측과 클라이언트 측의 요청과 응답으로 동작한다.

API?

- Aplication Programming Interface

- 서로 다른 두 어플리케이션이 통신을 할 수 있도록 해주는 일종의 규약이다.

- 예를들어 서버측은 java, 프론트엔드측은 javascript로 되어있다면 api가 서로의 말로 통역을 해주는 역할을 한다.

 

프론트에서 백엔드에게 정보를 요청하거나 백엔드에서 데이터를 보내서 그려주는 대표적인 방법이 있다.

 

api를 사용하면 틀을 짜놓고 Back End data만 변경되면 알아서 바뀐다.

 

2. Node-JS

브라우저에서 자바스크립트를 읽는 V8 엔진을 활용하여 자바스크립트 런타임 환경을 제공한다. Node안에서 여러 패키지를 사용해서 서버를 만들 수 있다. 

Nod-JS는 스크립트 언어라 어느 환경에서도 동작하며 성능이 빠르고 좋다. 또한 방대한 오픈 소스 생태계를 가지고 있다.

 

npm? - Node Package Manager, 직접 컴퓨터에 설치하여 사용하는 node package를 관리한다. node.js 관련 package의 모든 정보는 생성되는 Package.json 파일에 들어간다.

 

 

3. JSON

- javascript object notation의 약자로 js의 객체처럼 속성과 해당하는 값을 쌍으로 가지는 객체형 자료이다.

- 서버 통신을 위한 개방형 표준 포맷이므로 쉽게 전송이 가능하고 데이터를 최대한 압축 가능해야 한다.

- 사람의 눈에는 객체처럼 보이지만 데이터로 전달 될 때에는 하나의 긴 문자열 처럼 전달된다.

- 서버에서 다른곳으로 데이터를 전송할 때 해당 데이터를 JSON형태로 변환해서 전달해야한다.

- 해당 데이터를 받은 시스템에서는 JSON 데이터를 해당 시스템에 맞는 자료형으로 다시 변경해서 쓴다.

 

 

4. 비동기 프로그래밍

- 동기, 비동기 프로그래밍

동기 - 하나의 요청이 완료되면 그 후에 다음 요청을 실행한다.

비동기 - 하나의 요청이 완료되기 전에 다음 요청을 실행한다.

Node.js는 비동기적 프로그래밍으로 여러가지 일을 동시에 수행할 수 있고 빠르고 가벼운 서버를 만들 수 있다.

 

- 비동기 프로그래밍의 단점

서버 통신을 할 때에는 동기적(절차적)으로 문제를 해결해야하는데 node.js는 비동기적 특성을 가지므로 처리에 문제가 생긴다.

위와 같은 문제를 해결하기 위해 js에서 지원하는 방시기 callback이다. 

 

5. Callback 함수

- callback 함수는 특정 함수의 작업이 종료되어야만 다른 함수를 호출하기 때문에 사용자가 원하는대로 절차적 프로그래밍이 가능하다.

- callback은 함수에 마지막 인자로 해당 함수가 종료 된 시점에서 실행하고 싶은 함수를 넣어주면 된다.

- callback으로 사용할 함수를 따로 선언하지 않아도 바로 익명함수를 즉시 만들어 사용할 수 있다.

 

function buySync(item, price, quantity, callback) {
console.log(`${item} 상품을 ${quantity} 개 골라서 점원에게 주었습니다.`);
setTimeout(function () {
console.log("계산이 필요합니다."); 
const total = price * quantity; callback(total);
}, 1000); }


// function pay(tot) {
// console.log(`${tot} 원을 지불하였습니다.`); // }
buySync('포켓몬빵', 1000, 5, function (total) { console.log(`${total} 원을 지불하였습니다.`);
});

 

- CallbackHell : 여러 함수를 절차적으로 실행하기 위해 콜백안에 콜백안에 콜백안에... 아주 보기 힘든 콜백함수가 탄생함

const fs = require('fs');
backend/file.js
fs.readFile('./readme.txt', (err, data) => {
  if (err) {
throw err; }
console.log('1번', data.toString()); });
fs.readFile('./readme.txt', (err, data) => { if (err) {
throw err; }
console.log('2번', data.toString()); });
fs.readFile('./readme.txt', (err, data) => {
  if (err) {
throw err; }
console.log('3번', data.toString()); });
fs.readFile('./readme.txt', (err, data) => { if (err) {
throw err; }
console.log('4번', data.toString()); });

파일 시스템으로 다음과 같이 파일을 읽어오면 js의 비동기적 특성에 따라 차례대로 불러오지 않는다.

다음을 콜백함수로 구현해서 동기식으로 처리할 수 있는데 그럼 Callback Hell에 빠지게 된다.

const fs = require('fs');
fs.readFile('./readme.txt', (err, data) => {
  if (err) {
    throw err;
  }
  console.log('1번', data.toString());
  fs.readFile('./readme.txt', (err, data) => {
    if (err) {
      throw err;
    }
    console.log('2번', data.toString());
    fs.readFile('./readme.txt', (err, data) => {
      if (err) {
        throw err;
      }
      console.log('3번', data.toString());
      fs.readFile('./readme.txt', (err, data) => {
        if (err) {
          throw err;
        }
        console.log('4번', data.toString());
      });
    });
  });
});

이러한 Callback Hell을 탈출하기 위해 promise를 사용한다.

 

6. Promise

- promise는 생성자이므로 new를 통해 사용한다.

const promise = new Promise(function(resolve, reject){});

- resolve, reject라는 2개의 콜백 함수를 받아서 사용한다.

- promise가 할당되면 promise는 reslove또는 reject 함수가 callback 될 때 까지 무한 대기한다.

- resolve는 Promise가 정상적으로 이행 되었을 경우 사용하며, reject는 반대의 경우에 사용한다.

- resosve는 추후에 then으로 받으며 reject는 catch로 받는다.

- resolve, reject가 사용되지 않으면 promise는 해당 콜백이 나올 때 까지 pending(대기) 상태가 되어 기다린다.

다음과 같이 promise chaining을 통해 Callback Hell을 탈출할 수 있다.

const fs = require('fs').promises;
fs.readFile('./readme.txt')
  .then((data) => {
    console.log('1번', data.toString());
    return fs.readFile('./readme.txt');
  })
  .then((data) => {
    console.log('2번', data.toString());
    return fs.readFile('./readme.txt');
  })
  .then((data) => {
    console.log('3번', data.toString());
    return fs.readFile('./readme.txt');
  })
  .then((data) => {
    console.log('4번', data.toString());
  })
  .catch((err) => {
    throw err;
  });

 

7.  Async, Await

- Function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환한다.

- 즉 async가 붙은 함수에서 return을 쓰면 다음과 동일한 역할을 한다.

async function f1(){
	return 1;
}

async function f2(){
	return Promise.resolve(1);
}

- async가 붙은 함수 내부에는 await 키워드를 사용 가능한데 await는 promise가 결과(resolve, reject)를 가져다 줄 때까지 기다린다.

- async는 함수를 정의하는 상황에서 쓰이므로 함수 정의 후 해당함수를 외부에서 한번 사용해 줘야한다.

- promise는 기존에 js코드 스타일과 다르기 때문에 promise를 기존 코드 스타일로 사용할수 있도록 만든것이 Async, Await이다.(syntatic sugar)

- async await로 promise chaining을 변경

const fs = require('fs').promises;
async function main() {
  let data = await fs.readFile('./readme.txt');
  console.log('1번', data.toString());
  data = await fs.readFile('./readme.txt');
  console.log('2번', data.toString());
  data = await fs.readFile('./readme.txt');
  console.log('3번', data.toString());
  data = await fs.readFile('./readme.txt');
  console.log('4번', data.toString());
}
main();

 

8.  Express 사용하기

- Middleware: 서로 다른 어플리케이션이 서로 통신하는데 사용되는 소프트웨어,양쪽 어플리케이션 가운데서 역할을 하는 소프트웨어

- express는 백엔드 서비스 구성을 위한 다양한 상황에 맞는 여러가지 서비스 미들웨어 형태로 제공한다.

- 즉, express의 미들웨어는 서버에 들어온 요청이 들어와 응답으로 나갈 때 까지 거치는 모든 함수 또는 기능을 의미한다.

- express에서 app.use 또는 app.method 함수를 이용해 미들웨어를 사용한다.

- App.use('요청주소',(req,res,next)=>{}); 형태로 사용이 가능하다. req: 요청, res: 응답, next: 다음 미들웨어 실행

 

미들웨어를 통해 응답 보내기

const express = require('express');
const app = express();
const PORT = 4000;
app.use('/', (req, res, next) => {
  console.log('Middleware 1');
  next();
});
app.use((req, res, next) => {
  console.log('Middleware 2');
  res.send('res.send!');
  next();
});
app.use((req, res, next) => {
  console.log('Middleware 3');
});
app.listen(PORT, () => {
  console.log(`The express server is running at port: ${PORT}`);
});

 

9.  CRUD

- 컴퓨터 소프트웨어가 가진 기본적인 처리 기능인 Create Read Update Delete 를 묶어서 일컫는 말이다.  

- http요청 메서드로 Create - Post, Read - Get, Update - PUT, Delte - DELETE를 사용한다.

10.  HTTP status

- http 통신의 상태를 코드를 상태코드를 통해 확인할 수 있다.

- 100번대 : 정보/ 리퀘스틀 받고 처리중

- 200번대 : 성공/ 리퀘스트를 정상 처리

- 300번대 : 리디렉션/ 처리 완료를 위해서는 추가 동작 필요

- 400번대 : 클라이언트 에러/ 클라이언트에서 요청을 잘못 보냄

- 500번대 : 서버 에러/ 리퀘스트는 잘 들어갔으나 서버에서 처리를 못함

11.  백엔드에서 프론트로부터 데이터를 받는 방법 - Req.Params

- 보통 요청은 주소로 들어오므로 프론트에서 받아야 하는 정보는 주소값에 담아서 보낸다.

- 받을 url에서 :파라미터 명을 미리 정의해 두면 해당 내용은 req.params에 담겨서 백엔드에 전달된다.

- 어떠한 값을 전달하는지 보내는 쪽에 인지시키기 위해 보내는 paramsr가 어떠한 params인지 명시해서 사용도 가능하다.

app.get('/id/:id',(req,res)=>{
	console.log(req.params);
    res.end(`ID 번호가 ${req.params.id}인 회원 정보`);
});

12.  백엔드에서 프론트로부터 데이터를 받는 방법 - Query

- parmas의 약점은 정의 된 형태로만 데이터를 받을 수있는데 query를 쓰면 문제점을 해결할 수 있다.

- query는 url뒤에 ?를 붙인 뒤, 필드명 = 값 으로 사용하면된다. 여러갤르 보내고 싶으면 &로 묶어서 여러개를 보낼 수 있다.

app.get('/', (req,res) => {
	console.log(req.query);
    res.send(req.query);
});

 

13.  Express Routing

- 프론트에서 백엔드로 요청을 보낼 때에는 주소 값을 다르게 해서 요청한다. 따라서 백엔드에서는 각각 주소에 따라서 각기 다른 역할을 해주면 된다!

- 이렇게 주소에 따라 각기 다른 역할을 하도록 나누는 방법을 Routing이라고 한다.

- express에서는 app.메소드명();의 형태로 요청 방식을 나누어 처리할 수 있다.

const express = require('express');
const app = express();
const PORT = 4000;
app.get('/', (req, res) => {
  res.send('GET request');
});
app.post('/', (req, res) => {
  res.send('POST request');
});
app.put('/', (req, res) => {
  res.send('PUT request');
});
app.delete('/', (req, res) => {
  res.send('DELETE request');
});

- Express에서는 Routing을 위한 미들웨어인 Router()가 존재하고 사용 시 특정 url요청에 대한 것들을 묶어서 처리 가능하다

const express = require('express');
const app = express();
const userRouter = express.Router();
const PORT = 4000;
userRouter.get('/', (req, res) => { res.end('회원 목록');
});
userRouter.get('/:id', (req, res) => { res.end('특정 회원 정보');
});
userRouter.post('/', (req, res) => { res.end('회원 등록');
});
app.use('/users', userRouter);
app.use('/', (req, res) => {
  res.end('Hello, express world!');
});
app.listen(PORT, () => {
console.log(`The express server is running at port: ${PORT}`);

 

14.  서버에서 받은 데이터로 동적인 웹 그리기

- res.write로 하나하나 그려줄 수 있다.

userRouter.get('/show', (req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html;charset=UTF-8' });
  res.write('<h1>hello, Dynamic Web page</h1>');
  for (let i = 0; i < USER.length; i++) {
    res.write(`<h2>USER id is ${USER[i].id}`);
    res.write(`<h2>USER name is ${USER[i].name}`);
  }
  res.end('');
});

- 하지만 css설정, 내부 js코드불러오기, 등등 사용하기 힘든 부분이 많고 서버에서 받은 데이터로 웹을 그릴 수 있는 view engine을 이용하면 단점들을 보완할 수 있다.

- 뷰엔진들의 특징

15.  ejs 사용하기

- npm으로 ejs를 설치하고 express에게 다음과 같이 어떤 viewEngine으로 웹페이지를 그릴 것인지 알려줘야 한다.

app.set('view engine', 'ejs');

- 서버폴더 가장 외부에 views 폴더를 만들고 요청이 들어오면 index.ejs 파일을 띄운다.

userRouter.get('/ejs', (req, res) => {
  res.render('index');
});

- ejs로 데이터를 넘기기 위해서는 res.render('ejs파일명',{넘길데이터}); 방식으로 데이터를 넘기며 오브젝트 형태로 넘어간다.

- 오브젝트로 전달된 데이터는 ejs파일에서 <%= %>안에 js문법을 사용하여 받을 수 있다.

 

- /ejs 주소로 요청이 오면 index.ejs를 렌더링하는 서버파일 (데이터 전달)

userRouter.get('/ejs', (req, res) => {
    const userLen = USER.length;
    res.render('index', { USER, userCounts: userLen });
    });

- 뷰 코드

<body>
<h1>회원 목록</h1>
<h2>총 회원 수 <%= userCounts %> </h2>
<ul>
<li>
<p>ID: <%= USER[0].id%> </p>
<p>이름: <%= USER[0].name%> </p>
</li> </ul>
</body>

 

15.  Static

- 실제로 구성한 back-end의 폴더 구조와 프론트에서 url로 접근하는 구조가 동일하다면 보안적으로 위험할 수 있다.

- 따라서 express 프레임워크에서는 url주소를 바탕으로 back-end 폴더 구조를 알 수 없도록 static이라는 미들웨어를 제공한다.

- static은 브라우저에 접근이 가능한 폴더의 위치를 지정해 준다

- 사용법은 app.use(express.static('폴더위치')로 사용하고 보통 public으로 많이 사용한다.

app.use(express.static(public));

 

16.  express 기본 폴더 구조

- express로 만들어진 서비스의 기본 폴더 구조

17.  느낀 점

처음 접해보는 백엔드라서 정말 정신없이 한주가 지나갔던 것 같다.

아무래도 처음이다보니 머리에 쉽게 박히지 않았던 것같은데 반복 숙달 하면서 구조를 익히고 생각도 빨리빨리 하는 능력을 갖고싶다.

그래도 내가 서버를 열고 서버에 데이터를 전송하고 또 서버로 데이터를 보내는 작업을 해보았는데 재미없을 것 같다는 우려와 달리 생각보다 재밌었다.

앞으로 배울 것들이 조금 걱정도 되지만 한편으로는 기대가 된다.