페이지는 텍스트
Coddy Node.js 여정의 Express 기초 섹션에 포함된 레슨. 23개 중 8번째.
브라우저는 HTML 문자열을 페이지로 그립니다. 태그는 텍스트에 구조를 부여합니다. <h1>은 제목이고, <ul>은 목록이며, <li>는 항목 하나입니다. 닫는 태그는 각 부분을 끝냅니다.
const cities = ['Oslo', 'Lima'];
const rows = cities.map(city => `<li>${city}</li>`);
const page = `<h1>Places</h1><ul>${rows.join('')}</ul>`;템플릿 문자열은 백틱을 사용해 값을 삽입합니다. map은 항목 문자열의 배열을 만들고, join('')은 쉼표 없이 문자열을 결합합니다. 이 실습에서는 서버가 HTML을 JSON 안에 담아 반환하므로 정확한 태그를 확인할 수 있습니다. 제공된 함수는 제목과 항목 배열을 전달받습니다. 다음으로 삽입된 텍스트를 이스케이프합니다.
챌린지
쉬움exercise.js를 수정하세요. 서버는 title과 items 배열이 포함된 객체를 전달합니다. html 필드 하나를 반환하세요. 제목 다음에 목록이 오도록 하고, 각 문자열을 항목 하나로 표시하세요. 원래 항목 순서를 유지하고 항목 사이에 쉼표를 넣지 마세요.
{"html":"<h1>Recipe Box</h1><ul><li>Soup</li><li>Salad</li></ul>"}‘실행’을 눌러 보세요. 제공된 GET 예제는 위 응답을 생성합니다. 다른 제목과 목록을 보내려면 GET /result?title=Lunch&item=Rice&item=Beans를 전송하세요. 쿼리 값은 함수의 입력값으로 전달됩니다.
서버는 제목과 items 배열을 사용해 exercise 함수를 호출합니다. 쿼리에서 item=을 반복하면 여러 항목을 전달할 수 있습니다. GET 메서드를 선택한 상태로 두고 요청 입력란에는 경로만 입력하세요.
직접 해보기
export function exercise({ title, items }) {
return { html: title };
}
Express 기초의 모든 레슨
직접 연습해 보세요: Express 플레이그라운드