0518_TIL_팀원소개 페이지 프로젝트5

KPT 회고록

https://huu-oong.tistory.com/7

내배캠 1주차 미니프로젝트 KPT 회고록

부트스트랩같은 라이브러리를 사용하지 않고, 완전 날것의 UI의 웹페이지를 만들어버려서 아쉬움이 있었다!

다음 프로젝트에서는 초기에 꼭꼭꼭 충분한 자료조사를 진행하고, 명확한 틀을 정한 후에 진행하는 방식으로 해야겠다는 큰 깨달음도 알게 되었다...!!

다음엔 코드도 웹페이지도 더 예쁘게 만들고 싶다!!😂

 

 

---

튜터님의 꿀팁

[부트스트랩같은 라이브러리 사이트]

 

https://ko.wix.com/

무료 홈페이지 | 홈페이지 제작 | Wix.com

https://chakra-ui.com/

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a

https://mui.com/

MUI: The React component library you always wanted

cafe24

 

[코드를 보기 좋게 작성하는 법]

작동하는 방식을 숨기고

사람이 생각하는 대로 코드를 작성해서 가독성 좋게...!!

 

const searchParams = new URLSearchParams(location.search);

  let name = searchParams.get("name");

  let formData = new FormData();

  formData.append("name", name);

  fetch("/information", { method: "POST", body: formData })

    .then((response) => response.json())

    .then((data) => {

      let a = data["result"];

      $(".content").empty();

      let name = a["name"];

      let mbti = a["mbti"];

      let hobby = a["hobby"];

      let merit = a["merit"];

      let style = a["style"];

      let blog = a["blog"];

      let signature = a["signature"];

      let goal = a["goal"];

      let promise = a["promise"];

      let comment = a["comment"];

      let imageURL = "";

      if (name == "김진수") {

        imageURL = "/static/img/KJS.png";

      } else if (name == "김성훈") {

        imageURL = "/static/img/KSH.png";

      } else if (name == "조인재") {

        imageURL = "/static/img/JIJ.png";

      } else if (name == "윤수민") {

        imageURL = "/static/img/YSM.png";

      } else if (name == "안홍민") {

        imageURL = "/static/img/AHM.png";

      }

      let temp_html = `<div>

                        <img class="main-imoji" src="${imageURL}">

                        <textarea class="comment" id="comment" name="comment">${comment}</textarea>

                      </div>

                      <div class="controls">

                          <p>

                          <label for="name">이름</label><br>

                          <input class="tbox" type="text" id="name" name="name" value="${name}"readonly />

                      </p>

                      <p>

                          <label for="mbti">MBTI</label><br>

                          <input class="tbox" type="text" id="mbti" name="mbti" value="${mbti}"readonly />

                      </p>

                      <p>

                          <label for="hobby">취미</label><br>

                          <input class="tbox" type="text" id="hobby" name="hobby" value="${hobby}"readonly />

                      </p>

                      <p>

                          <label for="merit">장점</label><br>    

                          <input class="tbox" type="text" id="merit" name="merit" value="${merit}"readonly />

                      </p>

                      <p>

                          <label for="style">협업 스타일</label><br>

                          <input class="tbox" type="text" id="style" name="style" value="${style}"readonly />

                      </p>

                      <p>

                          <label for="blog">블로그 주소 -></label><a href="${blog}"> 이동</a><br>

                          <input class="tbox" type="text" id="blog" name="blog" value="${blog}"readonly />

                      </p>

                      <p>

                          <label for="blog">팀 특징</label>

                          <input class="tbox" type="text" id="signature" name="signature" value="${signature}"/>

                      </p>

                      <p>

                          <label for="blog">팀 목표</label>

                          <input class="tbox" type="text" id="goal" name="goal" value="${goal}"/>

                      </p>

                      <p>

                          <label for="blog">팀 약속</label>

                          <input class="tbox" type="text" id="promise" name="promise" value="${promise}"/>

                      </p>

                      </div>`;

      $(".content").append(temp_html);

    });

위의 코드를 깔꼼하게 정리하려면

 

function makeHTML(data) {   

let a = data["result"];

      $(".content").empty();

      let name = a["name"];

      let mbti = a["mbti"];

      let hobby = a["hobby"];

      let merit = a["merit"];

      let style = a["style"];

      let blog = a["blog"];

      let signature = a["signature"];

      let goal = a["goal"];

      let promise = a["promise"];

      let comment = a["comment"];

      let imageURL = "";

      if (name == "김진수") {

        imageURL = "/static/img/KJS.png";

      } else if (name == "김성훈") {

        imageURL = "/static/img/KSH.png";

      } else if (name == "조인재") {

        imageURL = "/static/img/JIJ.png";

      } else if (name == "윤수민") {

        imageURL = "/static/img/YSM.png";

      } else if (name == "안홍민") {

        imageURL = "/static/img/AHM.png";

      }

      let temp_html = `<div>

                        <img class="main-imoji" src="${imageURL}">

                        <textarea class="comment" id="comment" name="comment">${comment}</textarea>

                      </div>

                      <div class="controls">

                          <p>

                          <label for="name">이름</label><br>

                          <input class="tbox" type="text" id="name" name="name" value="${name}"readonly />

                      </p>

                      <p>

                          <label for="mbti">MBTI</label><br>

                          <input class="tbox" type="text" id="mbti" name="mbti" value="${mbti}"readonly />

                      </p>

                      <p>

                          <label for="hobby">취미</label><br>

                          <input class="tbox" type="text" id="hobby" name="hobby" value="${hobby}"readonly />

                      </p>

                      <p>

                          <label for="merit">장점</label><br>    

                          <input class="tbox" type="text" id="merit" name="merit" value="${merit}"readonly />

                      </p>

                      <p>

                          <label for="style">협업 스타일</label><br>

                          <input class="tbox" type="text" id="style" name="style" value="${style}"readonly />

                      </p>

                      <p>

                          <label for="blog">블로그 주소 -></label><a href="${blog}"> 이동</a><br>

                          <input class="tbox" type="text" id="blog" name="blog" value="${blog}"readonly />

                      </p>

                      <p>

                          <label for="blog">팀 특징</label>

                          <input class="tbox" type="text" id="signature" name="signature" value="${signature}"/>

                      </p>

                      <p>

                          <label for="blog">팀 목표</label>

                          <input class="tbox" type="text" id="goal" name="goal" value="${goal}"/>

                      </p>

                      <p>

                          <label for="blog">팀 약속</label>

                          <input class="tbox" type="text" id="promise" name="promise" value="${promise}"/>

                      </p>

                      </div>`;

      $(".content").append(temp_html);

}

const searchParams = new URLSearchParams(location.search);

  let name = searchParams.get("name");

  let formData = new FormData();

  formData.append("name", name);

  fetch("/information", { method: "POST", body: formData })

    .then((response) => response.json())

    .then(makeHTML);

따로 makeHTML이라는 함수를 선언해서 간결하게 작성!!