👨‍💻
토요일에도 불구하고
아침부터 일어나서 하루종일 학교 시험공부하다가
밤 11시부터 밀린 부트캠프 블로그 쓰며 복습하는 삶..
힘들지만 나는 진심으로 행복하다고 느낀다
세상 어딘가에는 정말로 나보다 힘든 환경 속에서 공부하는 사람들이 있기 때문에


https://www.youtube.com/watch?v=svCWSx_Dt4I&t=641s
시각장애인분들이 7급 공무원 시험에 합격한 이야기

😭
이번주도 체력적으로 정말 한계를 느낀 한주였다
몸뚱어리야 남은 5개월을 잘 버텨내길 바란다

지난 주에 http와 웹서버에 대해 학습 했을 때는 정말 무슨 말인지 하나도 몰랐는데 이번주에 직접 코드도 작성해보고 더 깊게 공부하고 나니 조금더 피부에 와닿는다
신기한건 월요일에 아무 것도 모르겠다고 느끼며 작성했던 코드들이 토요일이 되어서 다시 보니 훨씬 쉽게 읽힌다

⌨️
월요일에는 node.js의 http모듈을 이용해서 웹 서버를 만드는 작업을 해봤다
나중에서야 알게 된 사실인데 내가 이틀간 외계어를 해석하듯이 적어내려갔던 복잡한 코드들이 지금은 라이브러리로 코드 몇 줄 적지 않아도 손쉽게 구현 가능한 것들이더라.. 하드 트레이닝 좋다..

🦞 과제를 살펴보자

웹에서 문자열로 입력한 알파벳을 client가 클릭함에 따라 대문자와 소문자로 바꿔주는 역할을 앱을 만들었다.
http모듈을 통해서 웹 서버를 간단하게 만들어 줬고
이 안에서 client가 보낸 OPTIONS, POST 등의 요청을 받아내고 처리한다 그리고 url의 분기에 따라 다른 기능을 하도록 만들어줬다
기능에 대한 자세한 설명은 주석에 달아놨다

웹 브라우저에서 앱을 실행시킨 모습이다

아래 터미널을 보면 node.js에서 서버가 실행되고 있음을 볼 수 있다

📡 Node.js Web Server

const http = require('http');
const PORT = 4999;
const ip = 'localhost';

const server = http.createServer((request, response) => {

  if(request.method === 'OPTIONS') { //client가 OPTIONS method를 사용해서 보낸 request를 처리한다
     response.writeHead(200, defaultCorsHeader); //200은 정상상태
     response.end();
     //여기는 맨 처음에 클라이언트가 서버에 접속하면
     //서버 구축자 입장에서 우리가 어떤 CORS형식과 정책을 가지고 있는지 response.writeHead를 통해서 알려준다.
     //우리는 위에서 적어준 대로 클라이언트에게 defaultCorsHeader형식을 가지고 있음을 알려준다.
  }

  let body = [];
  
  if(request.method === 'POST' && request.url === '/upper') { //client가 POST method를 사용하고 /upper url로 보낸 request를 처리한다 

        request.on('data', (chunk) => {
          body.push(chunk);
        }).on('end', () => {
        body = Buffer.concat(body).toString().toUpperCase();
        //여기는 request로 들어온 data를 정제해주는 역할을 한다

        response.writeHead(200, defaultCorsHeader);
        response.end(body);
        //end안에는 클라이언트로부터 받은 request data가 들어간다. 만약 따로 요청받은 것이 없으면 end안에 인자 안적어줘도 됨.
        //우리는 여기서 body를 넣었으니, 요청으로 들어온 body를 처리 완료해줬고 끝냈다는 것으로 이해하면 된다.
        //결국 end를 써줌으로써 컨텐츠가 출력된다.
    });
  }
  else if(request.method === 'POST' && request.url === '/lower')  { //client가 POST method를 사용하고 /lower url로 보낸 request를 처리한다 
        request.on('data', (chunk) => {
          body.push(chunk);
        }).on('end', () => {
        body = Buffer.concat(body).toString().toLowerCase();

        response.writeHead(200, defaultCorsHeader);
        response.end(body);
  });
  } else {
    response.writeHead(404, defaultCorsHeader);
      // 에러로 처리합니다. bad request 404은 에러상태다
  }


  console.log(
    `http request method is ${request.method}, url is ${request.url}`
  );
  //200은 http의 상태코드를 말한다. 따로 설정하지 않으면 응답의 http상태코드는 200이다. 
  //writeHead는 첫번째 인자로 http상태를, 두번째 인자로 헤더를 넣어준다. 이렇게 헤더를 설정하고 나면 응답 데이터를 전송할 준비가 된 것이다.

});

server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10
};

그래도
https://velog.io/@notorioushong/%EA%B0%9C%EB%B0%9C%EC%8B%AC%ED%99%94-HTTP%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-5%EC%A3%BC%EC%B0%A8-2
이거 적었을 때는(불과 몇일 전) http method가 무슨 개념인지도 이해하지 못했었는데 큰 것을 깨우치지는 않았지만 나아진다는 사실이 중요하다
이것도 행복한 사실이다

🙂
앞으로
학교 기말도 있고
학교 과제도 있고
프로젝트도 있겠지만

포기하지만 맙시다

하지만 아직 중간고사도 끝나지 않았다