지난 포스팅에서 슈퍼테스트(Supertest)를 이용해서 만든 테스트 코드가 잘 작동되는지 확인해보았다. 이번 포스팅에서는 본격적으로 테스트 코드에 맞게 API를 개선해 보는 코드를 만들려고 한다. 이번 포스팅에서 해볼 내용은 다음과 같다. 슈퍼테스트(Supertest)와 슈드(ShouldJs)를 같이 다뤄본다. limit라는 쿼리 속성을 추가하여, 원하는 만큼의 데이터를 가져온다. limit 속성 값이 Number형이 아닐 경우, Status 코드 400번을 보내는 실패 케이스를 만들어본다. 먼저, server.js라는 파일을 생성해서 다음과 같이 코드를 입력해보자. import express from "express"; const obj = [ { id: "cheonyulin", name: "천유린"..

1. 완성본 [동영상] 완성본 2. HTML HTML 구조는 크게 어려운 것이 없다. The Nav Home About Work Projects 3. CSS 내가 어렵다고 생각한 것은 주석을 달아놨다. 엄청나게 어려운 것은 없다. * { margin: 0px; padding: 0px; box-sizing: border-box; } nav { display: flex; justify-content: space-around; align-items: center; /* 요소의 최소 너비 지정, height 속성 무시 vh단위는 브라우저 안쪽 높이(window.innerHeight)을 기준으로 설정된다. 하지만 태블릿이나, 모바일의 경우에는 뷰 포트에 따라 맞춰짐*/ min-height: 8vh; backgro..

1. 완성본 완성본 영상은 다음과 같다. 간단하게 사칙연산(더하기, 빼기, 곱하기, 나누기)만을 구현했다. [영상] 완성본 영상 2. HTML 구조 0 3. CSS * { box-sizing: border-box; } html, body { height: 100%; padding: 0; margin: 0; } .calc-wrapper { width: 250px; height: 300px; position: relative; margin: 0 auto; margin-top: 50px; background-color: #f9f9f9; border: 1px solid #dfe1e5; border-radius: 20px; padding: 10px; display: flex; flex-direction: colu..

1. 완성본 2. HTML HTML 구조는 다음과 같다. 1 2 3 4 5 6 7 8 9 10 11 12 00:00 3. CSS CSS 코드도 다음과 같다. 특별히 어려운 것은 없다. * { box-sizing: border-box; } body { background-color: #ea7612; } .clock-container { /* 가로 세로를 280px인 정사각형으로 만든다.*/ width: 280px; height: 280px; /* 테두리를 만들고 반지름이 140px인 원으로 만든다..*/ border: 8px solid black; border-radius: 50%; /* margin top-bottom을 100px로 주고 가운데 정렬한다. 그리고 margin-bottom을 이용하여 밑의 ..

1. 완성본 이번 강의에서 만들 완성본 영상입니다. 2. HTML, CSS 이번에는 스케치 없이도 바로 구조가 어떻게되있는지 알 수 있기 때문에 따로 하지 않겠습니다. 그래서 먼저 HTML과 CSS를 이용해서 다음과 같은 메뉴 디자인만 만들어보려고 합니다. 코드는 다음과 같습니다(CSS 헷갈리시는 분들을 위해 약간의 주석을 달아놓았습니다.). HTML Menu Slide Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 CSS // 전체 태그에 box-sizing을 적용합니다. box-sizing에 border 박스를 하면 // 전체 픽셀을 유지한 채로 padding이나 border의 크기만을 늘릴 수 있습니다. // 예를 들면, 가로 300px, 세로, 300px의 블록이 있고..