항해99 TIL [9/14]

항해99 코딩 부트캠프의 둘째 날. 이른 아침에 한 팀원이 갑작스러운 이탈을 선언후, 부트캠프를 그만두었다. 물론 각오는 하고 왔지만 이렇게나 빨리 누군가의 이탈을 바로 옆에서 목격하니 마음이 다소 무거워졌다. 하지만 나는 해내야 한다. 아니, 해내고 싶다.

주특기 Q&A 참가 (리액트)

향후 항해99에서의 주특기를 결정을 위한 리액트 세션에 참가함. 아직은 생소한 리액트에 대해 보다 상세히 알아가는 시간을 가진 후, 리액트를 선택하기로 어느정도 마음의 결심을 굳힘.

프로젝트 중 난관에 봉착

온라인 방명록 제작 과정에서 로그인 페이지 후 모든 팀별 방(32개)을 보여줘야 하는 기능을 맡음. 이 과정에서 로그인한 회원이 방 페이지에서 자신이 클릭한 방으로 연결되게 하는 기능을 구현하는 데 있어 어려움을 겪었으나, 팀원들과 참고영상 및 자료를 가지고 함께 논의하며 해결하는 과정에서 많은 진전을 이룸. 또한, 이 과정에서 다른 팀원이 만들어둔 아래와 같은 바닐라js 코드를 Ajax로 변경하는 과정을 통해 학습을 하기도 함.

//--------아래의 바닐라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);
    });
}

git이해도 부족으로 오는 문제

이는 비단 나 혼자만의 문제가 아니라 다른 팀원들도 공감하고 있는 부분이었기에 드림코딩 by 엘리 유튜버의 강의 시청 및 구글링, https://teamsparta.notion.site/Git-e1c306a503a649adb9297f700fb0b32c 등의 방법을 통해 해결함.

매니저 1:1 멘토링

매니저님과의 개인면담을 통해 그간의 감정적 피로감이나 불안 등을 상담하는 시간을 가지고 다시 앞으로 나아가야 할 방향 등을 재점검하는 기회로 삼음.