[WIL]항해99 5주차 주특기 심화 회고록

weekend I Learned

 

5주차 주특기 심화 주차 (11 . 29 월 ~ 12. 4 토 )

 

 

 

 

목차

 

- 주특기 심화 주차 개인 과제

 

- Middleware

 

- Jest

 

- 5주차 소감 및 부족한 점

 

 

 

 

1. 주특기 심화 주차 개인 과제

이번 주는 주특기 심화 주차 개인 과제를 테스트 코드를 작성하는 과제를 진행했다. Javascript Class와 객체에 대한 개념만 알면 풀 수 있는 문제였다.

 

과제를 봤을 때 어떻게 하지 하다가 우선 Class와 객체에 대한 개념을 배우기 위해서 공부를 했지만 기초가 무너진 느낌이라서 Javascript기초를 아예 처음부터 공부를 했다. 과제 제출일이 토요일 이었지만 기초를 알아야 과제를 할 수 있을 것 같다는 생각이 들어서 기초를 공부했다.

 

금요일에는 무조건 과제를 시작해야겠다고 생각을 하고 월요일부터 금요일 오전까지 진짜 잠을 줄여가면서 기초를 다졌던 것 같다.

 

공부를 다 하고 과제를 시작하는데 Class와 객체에 대한 개념을 알고 있으니까 어떻게 코드를 짜야할지 눈에 보였다. 예상치 못하게 4시간 안에 과제를 다했다.

 

테스트를 해보니까 다 PASS여서 당황해서 팀원들끼리 코드를 공유했는데 이렇게 해도 되는건가라는 의심이 공유해보니까 다들 비슷해서 아 이렇게 하는 거구나 하고 과제 제출을 했다.

 

주특기 심화 주차 개인 과제 

 

https://github.com/kwak9898/abstract-site.git

GitHub - kwak9898/abstract-site

 

 

 

 

2. Middleware

Middleware란

• 미들웨어 함수는 req(요청) 객체, res(응답) 객체, 그리고 어플리케이션 요청-응답 사이클 도중 그 다음의 미들웨어 함수에 대한 엑세스 권한을 갖는 함수이다.
• 간단하게 클라이언트에게 요청이 오면 그 요청을 보내기 위해서 응답하려고 하는 중간(미들)에 목적에 맞게 처리를 해주는 거쳐가는 함수들이다.
• 미들웨어 함수에 대한 엑세스는 next 함수를 이용해서 다음 미들웨어로 현재 요청을 넘길 수 있다.
• next 함수를 통해서 middleware는 순차적으로 처리가 되므로, 순서가 중요하다.

 

 

HTTP 메서드

미들웨어가 작동할 path

미들웨어 함수

 

 

 

다음 미들웨어로의 액세스 함수

HTTP response 객체

HTTP request 객체

 

Middleware 특징

• 모든 코드를 실행할 수 있다.
• 미들웨어가 순차적으로 실행이 되므로 순서가 중요하다.
• res(응답), req(요청) 객체를 변경을 할 수 있다.
• 요청-응답 주기를 종료(res methods)는 res method를 이용해서 클라이언트에게 응답을 전송한다는 의미이다.

Middleware 유형

 

expresss는 여러 유형의 Middleware가 있다.

• 어플리케이션 레벨 미들웨어
• 라우터 레벨 미들웨어
• 오류 처리 미들웨어
• 써드파티 미들웨어

- 어플리케이션 레벨 미들웨어

 

app.method() 함수(.get .use 등) 를 이용해서 app object의 인스턴스에 바인드를 시킨다.

미들웨어를 어플리케이션 영역에서 지정한 path대로 처리 가능하게 하도록 한다.

const app = express();

app.use("/", function (req, res, next) {
	console.log(req);
	next();
});

app.get("/", (req, res) {
	res.send('hello!!')
});

app.listen(3000);

이 예시코드를 보면 중간에 app.use라는 미들웨어를 쓰겠다고 하는 부분이다.

이 코드는 어떤 요청이 들어오더라도 console에 req라는 로그를 찍고나서 순차적으로 실행이된다.

 

- 라우터 레벨 미들웨어

• express.Router() 인스턴스에 바인드 된다는 점을 제외하면 어플리케이션 레벨 미들웨어와 동일한 방식으로 작동이 된다.
• Router객체를 이용해 router.use() 및 router.Method()함수를 사용해서 라우터 레벨 미들웨어를 가지고 올 수 있다.
• Router 객체는 그 자체가 미들웨어처럼 움직이므로 app.use()의 인수로 사용이 될 수 있고, 다른 router의 use() method에서 사용될 수 있다.
• const router = express.Router()로 router객체를 생성한 후 app.use()를 통해 지정해줘여만 사용할 수 있다.
• app.use()에서 지정한 경로와 같은 것이 들어오면 모두 적용을 시키기 때문에 중복이 될 수 있다.
• router를 사용하는 이유는 특정 root url을 기점으로 기능이나 로직별로 라우팅을 나눠서 관리를 할 수 있다.

- 서드 파티 미들웨어

• 기능적으로 express app에 미들웨를 추가하기 위해서 서드 파티 미들웨어 사용을 권고한다.
• node.js 모듈을 사용하고 싶으면 어플리케이션 레벨이나 라우터 레벨을 가져와서 사용하면 된다.
• npm에서 설치를 할 수 있다.

 

 

 

3. Jest

1. Jest란?

Node 환경에서 주로 사용이 되는 테스트용 종합 프레임워크다. 프론트엔드와 백엔드 환경에서도 활용할 수 있다. Jest는 페이스북에서 만든 테스트 패키지이다.

 

2. Jest 이용 방법

(1) Jest 모듈 설치

npm init
npm i jest -D

위와 같이 터미널 창에 코드들을 하나씩 작성 후 Jest를 설치 해준다.

 

(2) package.json 파일 수정하기

{
...
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
...
}

 

"scripts": {
    "start": "nodemon server",
    "test": "jest",

package.json에 "scripts"안에 "test"를 "jest"로 바꿔준다. 바꿔줘야만 jest를 사용해서 테스트 코드를 진행할 수 있다.

 

 

(3) 테스트 할 간단한 함수 만들어보기

 

// validation.js

module.exports = {
  isEmail: (value) => {
    const email = value || "";
    const [localPart, domain, ...etc] = email.split("@");

    if (!localPart || !domain || etc.length) {
      return false;
    } else if (email.includes(" ")) {
      return false;
    } else if (email[0] === "-") {
      return false;
    } else if (!/^[a-z0-9+_-]+$/gi.test(localPart)) {
      return false;
    } else if (!/^[a-z0-9.-]+$/gi.test(domain)) {
      return false;
    }

    return true;
  },
};

 

 

(4) Jest로 간단한 단위 테스트 코드 작성해보기

 

일반적인 관례로 "테스트할파일이름.spec.js"와 같은 파일 형식으로 파일을 만든다. 그 이유는 Jest가 "테스트할파일이름.spec.js"와 같은 파일을 읽어서 테스트 코드를 실행하는게 기본 설정이기도 한다.

 

Jest가 테스팅을 위해 기본적으로 제공하는 함수들이 있다.

• test() : 단위 테스트를 묶어주는 함수다.
• expect() : 특정 값이 정상적인지 확인하기 위한 표현식을 작성할수 있게 해주는 함수다.

// 코드 예시

const { isEmail } = require("./validation");

test('입력한 이메일 주소에는 "@" 문자가 1개만 있어야 이메일 형식이다.', () => {
  expect(isEmail("my-email@domain.com")).toEqual(true); // 1개만 있는 상황
  expect(isEmail("my-email@@@@domain.com")).toEqual(false); // 여러개 있는 상황
  expect(isEmail("my-emaildomain.com")).toEqual(false); // 하나도 없는 상황
});

test("입력한 이메일 주소에 공백(스페이스)이 존재하면 이메일 형식이 아니다.", () => {
  expect(isEmail("myemail@domain.com")).toEqual(true);
  expect(isEmail("my email@domain.com")).toEqual(false);
});

test("입력한 이메일 주소 맨 앞에 하이픈(-)이 있으면 이메일 형식이 아니다.", () => {
  expect(isEmail("e-m-a-i-l@domain.com")).toEqual(true);
  expect(isEmail("-email@domain.com")).toEqual(false);
});

test("입력한 이메일 주소중, 로컬 파트(골뱅이 기준 앞부분)에는 영문 대소문자와 숫자, 특수문자는 덧셈기호(+), 하이픈(-), 언더바(_) 3개 외에 다른 값이 존재하면 이메일 형식이 아니다.", () => {
  expect(isEmail('_good-Email+test99@domain.com')).toEqual(true);
  expect(isEmail('my$bad-Email9999@domain.com')).toEqual(false);
});

test("입력한 이메일 주소중, 도메인(골뱅이 기준 뒷부분)에는 영문 대소문자와 숫자, 하이픈(-) 외에 다른 값이 존재하면 이메일 형식이 아니다.", () => {
  expect(isEmail('my-email@my-Domain99.com')).toEqual(true);
  expect(isEmail('my-email@my_Domain99.com')).toEqual(false);
  expect(isEmail('my-email@my$Domain99.com')).toEqual(false);
});

위와 같은 예시를 저장 후에 npm test 명령어를 실행했을 때 

위와 같이 PASS를 했다면 정상적인 테스트 코드를 진행한 것으로 볼 수 있다.

 

하지만 만약에 모든 코드가 성공을 한다면 작성한 테스트 코드에 빈틈이 많으며, 자신의 코드의 결함을 찾지 못하는 테스트 코드를 작성한거다.

 

 

 

 

4. 5주차 소감 및 부족한 점

소감

주특기 심화 주차인 5주차를 끝으로 주특기 커리큘럼이 끝났다. 3주동안 진행된 주특기 커리큘럼이 도움이 됐다하면 도움이 됐지만 한편으로는 아쉬움이 컸다.

 

개인 프로젝트에서 더 잘 만들 수 있을 것 같았는데 원하는대로 못 나온 것 같아서 아쉬운 마음이 있던 것 같다. 하지만 한달이 조금 지나서 이정도로 만들어서 원하는 요구사항을 해냈다는 거에 의의를 두고 시간이 될때 한번 더 만들어서 퀄리티를 높여가는 연습을 해봐야 할 것 같다.

 

3주동안 잠을 줄여가면서 열심히 했던것을 보면 내가 선택한 Node.js에 흥미를 느끼는 것 같다. 이제 다음주 부터는 프론트엔드와 협업을 통한 미니 프로젝트2와 클론코딩 그리고 실전프로젝트가 있다.

 

기대도 되지만 걱정이 있는게 잘 못해서 팀에 민폐를 끼칠 것 같다는 생각이 들지만 1주차때 아무 것도 몰랐을때 미니 프로젝트를 만들었던 기억을 되짚어보면 그때와 같이 해낼 수 있다는 생각이 든다. 

 

이제 3개의 커리큘럼이 남았는데 별 탈없이 잘 해내서 수료하는 날까지 최선을 다 해보려고 한다.

 

부족한 점

너무 아쉬웠던 점은 언어 기초에 대해서 아쉬웠던 것 같다. 하지만 그 부분을 캐치해서 기초를 공부해서 기초를 닦고 다음 주 부터 있을 미니프로젝트2를 들어가기 전에 기초 공부를 할 수 있었던 것에 대해서 좋았던 것 같다.

 

이번주 처럼 부족한게 있다면 바로 인지해서 부족한 점을 채우려고 노력을 하는 모습을 잃지 않고 계속해서 내 것으로 만들어내면 뭐든지 해낼 수 있을 것 같은 느낌이든다.