항해99 TIL [9/15]

첫 주부터 보통이 아니다. 하지만 협업의 경험이라곤 전무한 나에게 이러한 체험은 사실상 진귀함 그 자체이기도 하다. 힘들 때마다 생각한다. 누구나 처음부터 잘하는 사람은 없었다고. 그리고 여기에는 각자의 인생을 살아가던 사람들이 하나의 목표를 위해 모여, 함께 웃으며 항해하고 있다. 그리고 오늘 나의 팀은 현재 잘 나아가고 있는지를 평가해볼 수 있는 중간점검을 간단히 받게 되었다.

중간점검 멘토링 사전준비 사항

참석하시기 전에, 팀장님께서 아래 사항을 준비해 오시면 좋겠습니다.
팀과 의논하여, (1) 프로젝트 스콥 (2) 현재 진행상황 (3) 고민이 되는 부분 or 질문들을 정리하여 참석해 주세요. 문서 정리에 큰 시간을 쏟지 마시고, 간단하게 텍스트로 정리하셔도 괜찮습니다.

중간점검 멘토링 결과

@app.route('/room/room_post', methods=['POST'])
def roompost():
    comment_receive = request.form['comment_give']
    now = datetime.datetime.now()
    now_date_time = now.strftime("%Y년 %m월 %d일 %H:%M:%S")
  
    doc = {
        "uid": uuid.uuid4().hex,
        "speak": comment_receive,
        "id": user_id,
        "name": user_name,
        "team": int(user_team),
        "date": now_date_time
        }
    db.comment.insert_one(doc)
    return jsonify({'msg': '등록 완료!'})
    
 
 # 방명록에 inputbox에 입력시 많은 정보를 받아 DB에 저장 하는 API
@app.route('/room/room_post', methods=['POST'])
def roompost():
    comment_receive = request.form['comment_give']
    now = datetime.datetime.now()
    now_date_time = now.strftime("%Y년 %m월 %d일 %H:%M:%S")
    # uid,inputbox,id,name,team,date 등을 다큐먼트에 저장 및 db commnet에 저장
    doc = {
        "uid": uuid.uuid4().hex,
        "speak": comment_receive,
        "id": user_id,
        "name": user_name,
        "team": int(user_team),
        "date": now_date_time
        }
    db.comment.insert_one(doc)
		# message를 띄워 주는 코드
    return jsonify({'msg': '등록 완료!'})

//--------아래의 바닐라js 코드를 Ajax로 변경시도.
function loadList() {
  $.ajax({
    //방 번호는 GET으로 받아온다. GET이므로 data는 없음.
      type: "GET",
      url: "/roomlist/number",
      data: {},
      //방 번호를 받아오는 게 성공할 경우, 서버에서 받아온 데이터는 response 인자로 넘어감.
      success: function (response) {
          let team = response["team"];
          let name = response["name"];
          let roomsArray = response["listArray"]
          //ajax 통신을 통해 해당 데이터들(roomlist)을 서버에서 가져옴(반복-마우스로 클릭할 때마다).
          $(".roomlist-wrap");
          for (let i=0; roomlist.length; i++)
            console.log(roomlist)
          }
          error: function (request,status,error){
            alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
           }
      }
)}

------------------------------------------------------------------------------------

// roomlist 페이지에 들어오면
function loadList() {
  fetch("/roomlist/number", {
    method: "GET",
    headers: { "Content-Type": "application/json" },
  })
    .then((res) => res.json())
    .then((response) => {
      let team = response.team;
      let name = response.name;
      let id = response.id;
      // 미리 만들어진 방 번호를 서버에서 받아온다.
      let roomsArray = response.listArray;
      const roomlistWrap = document.querySelector(".roomlist-wrap");
      // 서버에서 받아온 방 번호들은 배열의 형태임으로
      // 고차함수 map으로 돌면서 하나씩뷰에 보여준다.
      roomsArray.map((rooms) => {
        roomlistWrap.innerHTML += `
                <div class="roomlist ${rooms}" token interpolation">${team},'${name}','${id}')">
                  <p class="room-team-number">${rooms}팀</p>
                </div>
            `;
      });
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}