파일의 데이터를 반영하는 동적 HTML 반환하기

이번엔 파일에서 데이터를 읽어서 이를 HTML파일로 반환하려고 한다. 이름을 추가할 때마다 배열은 바뀌게 되므로 동적인 HTML을 반환하게 된다.

큰 틀을 보자면 사용자 이름을 배열에서 읽어온 뒤 li태그의 콘텐츠로 추가하고 이를 리스트의 원소로 집어넣는 것이다.

코드

app.get('/users', function(req, res){
  const filePath = path.join(__dirname, 'data', 'users.json');
  const fileData = fs.readFileSync(filePath);
  const names = JSON.parse(fileData);

  let responseData = '<ul>';

  for (const user of names){
    responseData += '<li>' + user +'</li>';
  }

  responseData += '</ul>';
  
  res.send(responseData);
})

app.get('/users', function(req, res){
  const filePath = path.join(__dirname, 'data', 'users.json');
  const fileData = fs.readFileSync(filePath);
  const names = JSON.parse(fileData);

존재하는 데이터를 조회하려고 하므로 get메서드를 사용하고, 배열을 원시 텍스트로 읽은 뒤 이를 자바스크립트 객체로 변환한다.

  let responseData = '<ul>';

  for (const user of names){
    responseData += '<li>' + user +'</li>';
  }

  responseData += '</ul>';
  
  res.send(responseData);

다음으로 HTML구조를 만드는데, 먼저 responseData라는 변수에 ‘<ul>’을 할당하고 for-of을 사용하여 배열에 담긴 각 이름을 li태그의 콘텐츠로 추가하여 더해주면 끝이다. 닫는 태그도 빼먹지 말자. 이제 서버를 열고 실험해보면

json파일에 담긴 배열을 이용하여 동적인 HTML이 표시되고 있는 것을 볼 수 있다. 이는 사용자가 이름을 입력할 때마다 직접 HTML을 고친 것이 아니기에 동적이고, HTML과 CSS, JS로 할 수 있는 작업이 아니다. 매우 신기한 듯.

콘텐츠가 끊임없이 바뀌는 온라인 쇼핑몰 등이 이러한 원리를 사용한다.