중간미션

1. express 설정

var express = require('express')

var app = express()

app.listen(3000, function() {
  console.log('mission server on!')
})

2. 필요한 npm 모듈 설치

• npm init
• npm install express --save
• npm install body-parser --save
• npm install ejs --save

3. input UI만들기 (검색창)

4. 검색결과를 받아 dummy json 형태를 내려주기 (연관 검색어 나오도록)
   -> 받은 데이터 뒤에 숫자를 붙여 만듬

5. 화면에 결과 노출

app.post('/search', function(req,res){
  console.log('#### request.body : ', req.body)
  var resData= {'result': 'OK'}
  
  for(let i = 0; i<20; i++){
    if(req.body[i] === undefined){
      console.log('마지막 = ' + req.body[i]);
      break;
    }

    resData[i] = req.body[i];
    console.log('push data= ', resData[i])

  }

  res.json(resData)
}) // app.js 데이터 처리

<script>
  document.querySelector('.inputText').addEventListener('change', function(){

    var word = document.querySelector('.inputText').value;
    console.log('word = ', word);

    var inputData = {}

    for(let i = 0; i < 5; i++){
      inputData[i] = word+(i+1);
    }
    
    console.log('inputData= ', inputData)

    send('/search', inputData)
    

  })

  function send(url,data){
    
    data = JSON.stringify(data);
    console.log(data)
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url);
    xhr.setRequestHeader('Content-Type', 'application/json')
    xhr.send(data);
    
    xhr.addEventListener('load', function() {

      console.log('111111111111111111111111111111111 load function -- ')
      var result = JSON.parse(xhr.responseText);

      // const tags = document.getElementById('searchWord')
      
      // document.querySelector('#searchWord').innerHTML = '<li>' + result[0] + '</li>';
      for(let i = 0; i<5; i++){
        // if(result[i] === undefined){
        //   console.log('load 후 = ' + result[i] + " / i = " + i);
        //   break;+++
        // }
        console.log(result[i])
        // document.querySelector('#searchWord').append(<li> ${result[i]} </li>);

        // const li = document.createElement('p');
        
        var target =  document.querySelector('#searchWord')
        var li = document.createElement('li')
        var liText = result[i]
        li.append(liText)
        
        target.append(li)
        
        

      }
  
 
    })

  } // ejs의 script 부분
  </script>