Today I Learned (미니 프로젝트 회고)

Parkboss·2022년 11월 28일

내일배움캠프

목록 보기

30/120

한 주의 흐름

한 일(프로젝트 소개)

프로젝트 명: Hype Express
팀원: 박진양, 김예슬, 유영재, 한상권, 조영찬
최신 패션,음식,여행 그리고 엔터테이먼트 등 다양한 분야의 소식을 데일리 뉴스와 유니크한 콘텐츠를 제공하는 플랫폼을 기획하였습니다.

기능

모든 페이지를 반응형으로 디자인
각 카테고리별로 뉴스피드 구현
맘에 드는 피드 클릭 시 좋아요 와 스크랩 기능 추가 구현
로그인 / 회원가입 구현
로그인 시 MY PAGE로 이동 시 아이디, 사진 수정할 수 있는 설정 부분 구현
내가 쓴 글과 좋아요로 구혁을 나눠 나의 자료를 볼 수 있게 구현
파이어 베이스를 활용한 백엔드 구축
AWS S3로 배포

느낀점

예슬
플렉스 박스가 생각보다 유기적으로 돌아가지 않는 점이 어려웠다.
js도 아니고 css인데다가 마크업언어니까 쉽겠다고 막연하게 생각했었는데 내가 지정해둔 부분들이 반응형을 구현할 때 쯔음 발목을 잡아 나중에 틀어지는 모습들을 보면서
html,css부분을 대충 만들어서는 안될 것 같단 생각이 들었다.
또한 서로 미리 약속하지 않는다면, 각자의 파일을 합칠 때 예측되지 않는 문제들이 생긴다는 점이 어려웠었다.

영찬
사실 프로젝트를 진행하면서 많은 어려움을 겪고, 혼자서 해결 못하는 부분도 많았지만 이제 와 돌이켜보면 가장 기억에 남는 코드는 제일 처음 간단하지만 연결에 어려움을 겪었던 이제 와 보면 별거 아니라고 느껴지는 이 함수가 가장 기억에 남네요.
지금은 조금 많이 피로하고 시간도 급급하여 함수가 작동하는 것에 대한 기쁨을 느낄 시간도 없지만 초기에 저 함수가 잘 동작하는 것을 봤을 때의 기쁨이 프로젝트 하면서 가장 컸던 것 같습니다. 아쉬운 점은 에디터를 적용하였는데 그 안에 있는 기능들을 충분히 사용하지 못한 점, 이미지 업로드를 끝내 구현하지 못하고 포기한 점이 가장 아쉬운 부분이 아닌가 생각이 듭니다. 그래도 진짜 마음 잘 맞는 팀원들을 만나서 이렇게 멋진 프로젝트를 완성할 수 있어서 정말 영광이었습니다.

//home.js 1줄
//Dom이 그려지고 그 안에 있는 요소를 가져오는 것을 보장하기 위해서 함수로 만들어준다.
const TypeText = () => {
  const h2 = document.querySelector(".first_text");
  const txt = `여러분들의 공간에 
Hype함을 배달합니다.`;

  let counter = 0;

  // 출력할 내용
  setInterval(() => {
    // 글자가 모두 출력되면 setInterval을 멈출 것
    if (txt.length === counter) {
      return;
    }
    // 문자열 하나하나 h2의 텍스트 컨텐츠로 추가한다
    h2.innerHTML += txt[counter] === "\n" ? `<br>` : txt[counter];
    // 카운터 증산
    counter++;
  }, 60);
};

//router.js 63줄
  if (path === "/") TypeText();

상권
제가 어려움을 느낀 곳은 뉴스피드 클릭 시 상세게시글로 전환하는 기능입니다.뉴스피드를 클릭했을 때 상세한 게시글이 보여지게 하고 싶었습니다.
그러나 처음에는 DB 전부를 불러올 수는 있지만, 특정 게시글 단 한 개만 불러오는 방법을 몰라 난항을 겪고 있다가, 후에 ID 값을 불러오는 방법을 알아냈습니다.
그러나 또 이번엔 어떻게 해야 특정 ID 값에 해당하는 글을 불러올지 고민했습니다.그러다가 DB에서 뉴스피드를 불러올 때 뉴스피드를 클릭할 때 상세페이지로 이동할 수 있게 만든 a태그에다

<a href="?${Object.id}#board" class="board_w">

이 코드를 이용해 해쉬값 앞에 쿼리파라미터를 ID 값으로 지정해주었고요,

let param = window.location.search.replace("?", "");
    if (postObject.id === param)

이 코드를 이용해 현재 ID 값에 해당하는 글만 보여 줄 수 있게 만들었습니다.그러나 이 방식은 재 렌더링이 되더라고요.

저희의 과제는 SPA였기 때문에 다른 방식으로 고쳐보고 싶었지만, 실패했습니다.

하지만, 댓글이나 사이트 이동 등으로 주어진 SPA 과제를 충분히 수행했으며,

거기다 없는 것보다는 있는 게 낫다고 생각해 빼지는 않았습니다.그리고 추가로 좋아요와 글 북마크 기능도 추가해보고 싶었습니다.

시간이 조금만 더 있었으면 만들어 볼 수 있었을 것 같은데, 너무 아쉽습니다.

영재

데이터베이스에 글쓰기탬에서 보내진db를 다시끌어와서 내페이지에 랜더링 (미구현)
이유 : 처음 html을 작성할때 항상 원페이지 형식만 만들어봣기에 화면의 구성을 생각하지못했음
고쳐야할점 : 화면의 구성을 팀원들과 커뮤니케이션을 통하여 한층더 세부적이게 구상 및 구현할것
버튼클릭시 드롭다운 및 외부를 클릭했을시 다시 visiblity : hidden 될것 (일부구현)(버그발생)
이유: 버튼에 대한 고유한 값을 지정하지 않고 모든 버튼에 먹길래 이름만 바꾸어서 설정하였으나
중복된 현상으로 한 가지의 버튼만 외부 클릭 시 hidden으로 설정되었음

고쳐야할점 : 버튼만이아닌 모든코드에 대하여 정확한 class나 id값을 부여하고 설정해야함
조금더 클린한 코드를위하여 들여쓰기를 해야할것3. 수정 버튼을 클릭하면 글쓰기탭에 랜더링하기(미구현)
이유 : db에는 정보가 들어가있으나 랜더링을 어덯게 해야할지 모르겠음

고쳐야할점 : 나중에 리펙토링할때 꼭 한번 싣해볼것4. 삭제 버튼을 클릭하면 글쓰기로 올라간 데이터베이스에있는 모든 정보를 삭제하기(미구현)
이유 : 댓글 삭제기능과 동일한 기능이지만 전체적인 페이지를 어떻게 지워야할지 모르겠음
시도는 해보았으나 구현이 불가능했음

고쳐야할점 : 나중에 튜터님과함께 진행해볼것5. Input탭으로 입력되는 벨류값을 등록 버튼을 클릭하면서 db로 저장하는기능(구현)6. input탭으로 전달된 db를 다시 호출하여 user img, nickname의 value값과 합쳐 댓글형식으로 출력하는기능(구현)7. 드롭다운으로 떨어지는 수정버튼을 클릭하면 댓글을 수정할수있게하고 valuer값을 가져와다시 input태그내부에 뿌려주는 기능(구현)8. 드롭다운으로 떨어지는 삭제버튼을 클릭하면 데이터베이스에올라가는 댓글 db를 삭제(구현)9. 각댓글마다 고유한 id값을 지정하여 로그인한 id의 내글만 볼수있는기능(구현)10. like button에있는 하트를 클릭할시에 숫자가 올라가고 db에 클린된값을 저장(일부구현)
이유 : if 문을 활용하여 클릭시 화면에 숫자가 카운팅은되었지만 db와 연결을 하지못함
고쳐야할점 : db연결시 like요소를추가하고 고유 Id값을 추출하여 그값을 각 게시물의 like에부여하여
db에 저장하고 value값을 가져와 랜더링하면 될듯?11. louting으로 뿌려지는 html css(구현)

진양
구글과 깃헙이 팝업으로 뜨지만 동시에 떠서 작동이 되지 않았습니다.
그 이유는 비동기적으로 받아오기 때문에 동기적으로 바꿔서 순차적으로 실행되게 만들었습니다.
여기서 비동기와 동기에 대해 정확하게 알고 넘어갈수 있었습니다.
아쉬웠던 점은 버튼 클릭시 네비바가 숨겨지는 자바스크립트 구현을 하지 못해서 다른 팀원분이 도와주셔서 해결하였습니다. 다음에는 적극적인 자세로 임해야겠다!
그리고 좋은 팀원들을 만나 프로젝트 기간중에 너무나 행복했고 소통이 원활하여 큰 어려움없이 멋진 프로젝트를 마무리해서 뿌듯합니다!
4ever 10조