http 모듈 API 요청

restServer.js

on 함수

on(event, listener)

지정한 이벤트의 리스너를 추가

else if (req.method === 'POST') {
      if (req.url === '/user') {
        let body = '';
        // 요청의 body를 stream 형식으로 받음
        req.on('data', (data) => {
          body += data;
        });
        // 요청의 body를 다 받은 후 실행됨
        return req.on('end', () => {
          console.log('POST 본문(Body):', body);
          const { name } = JSON.parse(body);
          const id = Date.now();
          users[id] = name;
          res.writeHead(201, { 'Content-Type': 'text/plain; charset=utf-8' });
          res.end('등록 성공');
        });
      }
    }

아직 req 객체의 on 함수에 어떤 이벤트들이 들어갈 수 있고 그 이벤트가 어떤 역할을 위해 사용되는지가 모호하다.

startsWith 함수

.startsWith()는 문자열이 특정 문자열로 시작하는지 확인하고 True or False를 리턴한다.

문법

string.startsWith( searchString, length )

• searchString : 검색할 문자열로 필수 요소이다. 대소문자를 구분한다.
• length : 문자열 중 어디까지 검색할지 정한다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 한다.

split 함수

string.split(separator, limit)

자바스크립트에서 문자열을 특정 구분자로 분할하기 위해서는 split 함수를 사용하면 된다. split 함수를 사용하면 특정 구분자를 기준으로 문자열을 분리하여 결과를 배열로 반환한다.

else if (req.method === 'PUT') {
      if (req.url.startsWith('/user/')) {
        const key = req.url.split('/')[2];
        let body = '';
        req.on('data', (data) => {
          body += data;
        });
        return req.on('end', () => {
          console.log('PUT 본문(Body):', body);
          users[key] = JSON.parse(body).name;
          res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
          return res.end(JSON.stringify(users));
        });
      }
    }

여기서 key가 어떻게 어떤 값을 갖게 되는가?

url에서 '/' 단위로 문자열을 잘라서 잘라진 문자열을 배열에 담고, [2]번째 배열에 담긴 문자열을 key로 쓴다.

restFront.js

서버에서 동작하는 함수를 담은 파일

Object.keys 함수

Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다.

Object.keys(users).map(function (key)

user 객체의 key를 저장하는 객체를 만들고 key를 인자로 가지는 함수와 map하여 html요소와 이벤트를 연결한다.

확실하지 않아서 더 알아봐야 함...

preventDefault 함수

a 태그나 submit 태그는 눌렀을 때 href를 통해 페이지를 이동하거나, 창이 새로고침 되는 것을 막아줄 수 있습니다.