토이 프로젝트 Dev View

 

 

처음에 토이 프로젝트에 주제에 대해 토론을 하다가 여러가지 의견이 나왔다.

의견 중 한솔님이 생각했던 날씨별 옷 추천과 내가 생각한 개발영상 공유 커뮤니티 두개중에 하나를 선택해야 했고 

우린 개발자를 목표로 공부중이기도 하니 개발영상 공유 커뮤니티를 선택하게 되었다.

 

우리가 만들고자 하는 토이프로젝트의 기능을 생각하다보니 여러 기능이 나왔지만 어떻게 각자 분담할지 또 난관이 였다. 

 

우리 프로젝트는 개발 카테고리별 개발영상을 서로 추천해주는 사이트인데 어차피 카테고리 별로 

기능은 동일하게 들어갈꺼기 때문에 다같이 모여서 만드는게 좋지 않을까 의견을 냈었고 

같이 만들기보단 각자 만들어서 코드 리뷰하고 그걸 다시 전체적으로 수정해서 하자는 의견도 나와서 의견 충돌이 있었다.

 

그리고 첫날 밤 기술매니저님 순회때 한페이지더라도 각자 다른 기능을 구현하고 그걸 리뷰하는 형식으로 진행을 하는걸 추천해주셨고 

 

우리 프로젝트의들어가야할 기능들을 1차적으로 정리 후 공평하게 사다리타기로 결정했다. 

 

내가 맡은 기술은 아래 이미지처럼 사용자가 게시물을 추천해주면 그 게시물에 대한 댓글 과 별점 평균을 내는거였다.

결론을 먼저 말하자면 이 기능은 결국 최종적으로 만들지 못하고 기능을 없앴다. 

 

기능 구현을 위해서 여러가지 시도를 해봤는데 

 

 

1. 게시물에 아이디값을 찾아서 댓글 데이터를 DB에 넣어줘야해서 class name으로 게시물의 아이디를 불러와서 넣고 id값을 불러와서 넣어보려 했으나 파이썬 미숙으로 실패했다. 



2. 이벤트 위임으로 id값을 찾아서 서버에 보내주려했는데, id값은 찾았으나 적용하려 했을때 예시로 만들어놓은 게시물에만 올라갔다.



3. 위 오류를 해결하기 위해 예시 HTML에 body를 통채로 지우고 자바스크립트에서 append 시켜보려 햇으나 댓글 등록 버튼을 눌렀을때 리스트화 되는 함수를 addEventListener로 이벤트를 넣었으나 함수가 실행이 되지 않았다.



4. 백틱 안에 넣은 HTML에 직접 onclick으로 {handleSaveClick}함수를 바로주고 함수를 실행시키는 코드를 만들었다.

   이렇게 하니까 함수는 실행이 되나 그안에 다른 데이터들이 undefined값이 되버렸다.



5. forEach로 넣은 댓글 구현들이 id값을 찾을 수 없어서 버튼을 눌렀을때 다 에러페이지로 넘어갔다.

 

 

여러 시도를 해봤으나 결국에는 자바스크립트 문법을 잘 알지 못해 구현하지 못한것 같다. 

 

매니저님에게 자문을 구해서 나온 답은 댓글을 적는 input값에 id를 주지 않아서 댓글기능이 인풋이 어떤걸 가르키는지 알 수 없어서 함수가 실행 될 수 없는것 같다라고 했다. 

 

추가로 게시물을 화면에 보여주는 get요청을 구현하는걸 내가 하는게 아닌데 화면에 보이지도 않는 구현단계 이후에 기능을 넣으려하니 더 어려움이 있었다.

 

매니저님이 말한 방법 자체도 id값을 내가 또 생성을 해줘야하는 거기 때문에 구현하지 못했고 여러 방법을 더 찾아보려했으나 프로젝트 제출기한과 발표기한이 정해져있어 시간문제로 결국 해결하지 못하고 해당 기능은 없애는걸로 팀원들과 합의를 봤다.

 

결국 내가 하기로한 기능을 없애고나니 토이프로젝트에서 내가 만든 기능이 전혀 없어지게 되버렸다. 

그래도 내가 한 노력이 있었기 때문에 이런 스토리를 녹이면 괜찮을거라고 생각했다. 

하지만 같이 만든 프로젝트에 내가 만든 구현이 전혀 없다면 그게 내가 참여한 프로젝트라고 할 수 있을까?

 

시간을 소비해서 기능 구현을 하려함으로써 내가 알아가는것도 있었으나 결국에 보여지는게 없는건 나만아는 노력이라는 생각이 들었다.

 

그래서 추가로 도영님이 get해서 가지고온 데이터를 용식님이 만들어준 피그마에 맞춰서 css작업을 했다. 

 

추가로 프론트 개발자는 css도 분명히 중요하지만 기능구현이 정말 중요한거  아니겠는가?!?!?!?!?!

 

해서 검색기능을 구현해보려고 했다.

 

@app.route("/search", methods=["POST"])
def search():
  # POST 요청으로부터 검색어를 가져옴
  keyword = request.json['keyword']
  # MongoDB에서 검색
  result = db.board.find({'videoname': {'$regex': keyword}})
  # 검색 결과를 리스트로 변환
  data = []
  for doc in result:
    data.append({
      'videoname': doc['videoname'],
      'videodesc': doc['videodesc'],
      'videolink': doc['videolink'],
    })
  # 검색 결과를 JSON 형태로 반환
  return jsonify(data)

MongoDB에서 원하는 키워드를 검색해서 찾고 그 리스트를 바로 변환해서 자바스크립트에서 따로 get요청을 하지 않고 리스트를 불러올 수 있었다.

자바스크립트에서는 POST요청으로 input에 들어오는 내용을 보내줘야해서 사용자가 입력 후 검색 버튼을 누르면 함수가 실행이 되도록 해서 입력된 밸류값을 변수에 담아 서버로 보내줬다.

document.querySelector('#searchIcon').addEventListener('click', async () => {
  // 검색어를 가져옴
  const keyword = document.querySelector('input[name="keyword"]').value;

  // 검색어를 서버로 전송하는 POST 요청
  const response = await fetch('/search', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ keyword }),
  });

  // 서버에서 받은 응답을 JSON 형태로 파싱
  const data = await response.json();

  if (data.length === 0) {
    alert('일치하는 추천영상이 없습니다!')
  } else {
    append_list(data);
  }
});

검색을 완료 시킨건 아니고 내가 검색해서 서버에서 찾아서 리스트화 시키고 클라이언트에선 콘솔에 가져온 데이터가 찍히게까지 했다. 

 

이렇게 까지 하고나니까 그래도 프로젝트에서 내 기여도가 생기고 나니 뿌듯했다. 

 

마지막으로 각자 기능 구현한걸 하나로 합치려고 하니까 충돌이 일어나서 당황을 많이 했다. 동일한 페이지를 여러명이서 작업한걸 합쳐야하는 부분이여서 한명씩 수정 후 푸쉬한걸 다시 풀로 가져와서 수정 후 푸쉬 해주는 방식으로 했고 최종적으로 올릴 수 있었다. 

 

깃허브 링크 : https://github.com/devView-hanghae/devView

GitHub - devView-hanghae/devView: 항해99 풀스택 미니 프로젝트 17조

노션 링크 : https://ethereal-ethernet-87a.notion.site/Dev-View-29c85bad320f4d2590d4faa5c37b123b

[미니풀스택] Dev View

 

그리고 용식님이 UIUX디자인 공부를 했었다고 했는데 피그마를 만들어줘서 CSS하는데에 큰 도움이 됬다.

 

이번 프로젝트를 하고 다른팀들의 프로젝트 발표하는걸 보면서 아 ~ 진짜 프론트앤드 개발자가 코드를 짜는것도 정말 중요하지만 css라던가 디자인감각도 있으면 좋은 무기가 될 수 있겠다 생각이 들었다. 

 

조원들에게 너무 많은 도움도 받고 같이 뭔가 만들어 나갔다는게 신기하고 재밌었다. 

 

다만 제일 아쉬운건 프로젝트를 만들면서 그과정을 내가 자세하게 메모해두지 않았더니 다 만들고 어떤게 어려웠는지에 대한게 자세하게 생각나지 않았다. 

 

앞으로 프로젝트를 하거나 무언가 할때 내가 어려웠던 점은 항상 메모 해두는 습관을 가질필요가 있을 것 같다. 

 

우리 팀원들진짜 너무 고생많았다..우리 프로젝트가 젤 잘했다 객관적으로 정말로다가