20221108 TIL

오늘의 한 일

• 추천 프로젝트 - 마무리, 시연영상 제작, 발표

 

시연 영상

 

https://www.youtube.com/watch?v=rAbO0dIBcmI 

 

 

 

 

KPT 회고

 

Keep
코드 컨벤션, PR컨벤션
csv파일 json화시켜서 데이터베이스에 로드(loaddata)하기, 협업 필터링 함수 실제로 돌려보고 적용시키기


Problem
협업필터링 작업중 연습용으로 적은 코드를 마무리단계까지 수정하지 않고 그대로 쓴 점
백엔드 부분에서 라이브 쉐어를 활용한 특성으로 각자 작업한 부분에 대한 커밋이 쌓인게 적다.


Try
직접 api 설계 구조 따라서 코드 확인해보기
커밋, 풀리퀘스트를 더욱 활용하기
프론트엔드 페이지 url 연결 / URLSearchParams 부분 더 공부하기

 

초반에 백엔드부분이 생각보다 일찍 끝나고 주말즈음부터 모두 프론트엔드 부분 공부해가면서 꾸미기에 들어갔는데, 환절기 감기로 인한 컨디션 저하로 많이 집중하지 못해 기여를 충분히 하지 못한것 같아 개인적으로 아쉽고,

프로필 페이지를 담당하시는 분이 계신줄 알았는데 알고보니 수정페이지를 담당하신거라서 이런 부분을 내가 맡았다면 시간에 맞춰서 프로젝트를 진행할 수 있었을텐데 커뮤니케이션 부분도 아쉬운 부분이 남는다..

 

 

알게된 점

 

** Ajax, axios, fetch 차이점 장단점 - https://cocoon1787.tistory.com/756

[개발상식] Ajax, axios, fetch 차이점 장단점

 

자바스크립트 코드작성을 웹개발 이후로 아예 처음하는 입장에서 회원가입 - 로그인 강의의 fetch 부분만 들은채로 프로젝트를 진행했는데, 웹개발 강의를 되돌아보며 ajax로 get요청을 보내서 받는 정보를 temp_html 형태로 가공하여 append 하는 형식을 해야하나? 계속 고민했는데 

사실 Ajax나 fetch나 데이터를 받아오는건 똑같아서 그대로 받아온 데이터를 가지고 가공하면 되는 문제였다. 정말 백지장같은 상태에서부터 시작하려다보니 이런 단순한 얘기에서부터 이미 과부하가 왔던 것 같다ㅠㅠ

 

 

** URLParams - https://fun25.co.kr/blog/javascript-url-query-parameter-reading-updating-urlsearchparams/?page=4 

[자바스크립트] url 에서 쿼리 파라미터를 가져오거나 수정할떄 사용되는 URLSearchParams | 퍼니오 호

 

백엔드 부분에서는 무리없이 SearchFilter 모듈을 적용해 검색기능을 구현했지만 이를 프론트엔드에 적용시키는데 굉장히 어려움을 겪었는데 팀원분께서 URLParams를 사용해 구현해내셨다.

// webtoon_search.html --------------------------------------------------------------------------->
// 검색한 웹툰 //
async function getWebtoonsSearch() {
  const response = await fetch(
    `${backend_base_url}/webtoon/search?` +
      new URLSearchParams(window.location.search),
    {
      method: "GET",
    }
  );
  console.log(response);

  response_json = await response.json();
  return response_json;
}

// 웹툰 검색 페이지 연결 //
function webtoonSearch() {
  const word = document.getElementById("inputSearch").value;
  const url = `${frontend_base_url}/webtoon_search.html?search=${word}`;
  location.href = url;
}

또한, 각 검색 페이지나 웹툰의 디테일 페이지로 갈때 자바스크립트를 통해 url을 연결해주는 방법도 이번에 처음 보는거라 확실하게 익혀야 할 것 같다.

 

// 웹툰 디테일 페이지 연결 //
function webtoonDetail(webtoon_id) {
  const url = `${frontend_base_url}/webtoon_detail.html?id=${webtoon_id}`;
  location.href = url;
}

 

 

넵더적