Project Debugging

IT 매거진, DEVzine 디버깅

2021.09.13 ~ 2021.10.08 (3인, 4주 프로젝트 디버깅)

jongah

Published in

Jongah Tech Blog

7 min readOct 9, 2021

왜 DEVzine 디버깅했어?

1.4주란 정해진 시간이 짧아 아쉬움이 남아서
2.프로젝트 발표했을 때 기능을 추가했으면 하는 피드백을 받아서

회사 프로젝트라면 지속적인 디버깅과 업데이트를 통해 프로젝트의 완성도를 높여갈 것이다. 코드스테이츠에서 진행했던 프로젝트는 팀원들 간의 여건이 맞아야 디버깅을 할 수 있다.

모두들 끝난 뒤에 이력서, 면접, 테스트 준비로 바쁘지만 위의 내가 생각한 1,2번의 이유처럼 디버깅의 필요성을 느낀 백엔드 팀원 2명과 함께 디버깅을 하기로 했다.

(정리된 프로젝트 내용을 보고 싶다면, 노션 DEVzine 클릭!)

어떻게 디버깅하기로 했어?

수료 후 만나 고쳐야하는 디버깅 작업, 기능 개선하는 작업, 기능이 추가되는 작업으로 분류하여 생각했고 담당자를 정했으며 필요성이 높은 디버깅 작업부터 하기로 했다. 디버깅 기간 중에 추석연휴와 개인 사유를 제외하고 일주일에 1~2회 만나 작업 상황을 공유했다.

어떤 부분을 작업했어? (주요 코드 공개)

첫번째, 고친 디버깅 작업
1.매거진 보기에서 carousel이 tablet에서 안 나왔다 → carousel breakpoint 수정
2.모바일 전체 팝업창 뜰 때 스크롤 없애기 → useEffect 활용

// 모달오버레이에서 스크롤 방지
useEffect(() => {
  document.body.style.cssText = `
  position: fixed;
  top: -${window.scrollY}px;
  overflow-y: scroll;
  width: 100%;`;
  return () => {
    const scrollY = document.body.style.top;
    document.body.style.cssText = '';
    window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
  };
}, []);

3.소식이 모두 보여지면 더보기 버튼 없애기 → 조건문 추가하기

{ArticleData.length <= 12 ||
  ArticleData.length <= ArticlePlus ? null : (
  <Button
    subject={`더보기`}
    color={`#999999`}
    backgroundColor={`#ffffff`}
    border={`1px solid #d9d9d9`}
    onClickHandle={articlePlusHandler}
  />
)}

두번째, 기능 개선한 작업
1.탈퇴할 때 팝업창에 개인정보 보관 기한 명시 문구 삽입 (피드백 받은 건)
2.대소문자 상관없이 검색 가능하게 하기 → 모두 소문자로 받아서 비교하게 함
3.로그인 비밀번호 누르고 enter 클릭 시, 로그인 버튼 클릭과 같은 기능

const onKeyPress = e => {
  if (e.key === 'Enter') {
    postHandler();
  }
};

4.모바일 sidebar 애니메이션 추가

@keyframes slide {
  from {right: -50%;}
  to {right: 0;}
}@keyframes outslide {
  from {right: 0;}
  to {right: -50%;}
}

5.admin 전체선택 가능 (피드백 받은 건)
수정 전에는 각 요청 건마다 승인, 거부가 있었는데 수정하면서 전체 선택, 요청 건 여러 개 선택이 가능하게 했다. 체크되었을 때만 승인과 거부 버튼 활성화된 것처럼 보이게 했으며, 비활성화 상태에서 누르면 “선택해야 합니다.” 알림창이 뜬다.

useEffect(() => {
  if (PostBody.length !== 0) {
    setAcitiveBtn(true);
  } else {
    setAcitiveBtn(false);
  }
}, [PostBody, checkItems]);// 개별선택
function checkHandler(checked, id, status) {
  if (checked) {
    setPostBody([...PostBody, { contribution_id: id, status: status }]);
    setCheckItems([...checkItems, id]);
  } else {
    // 체크해제
    setPostBody(PostBody.filter(o => o.contribution_id !== id));
    setCheckItems(checkItems.filter(o => o !== id));
  }
}// 전체선택
function checkAllHandler(checked) {
  if (checked) {
    const ids = [];
    const body = [];
    Requested.forEach(v => {
      ids.push(v.contribution_id);
      body.push({ contribution_id: v.contribution_id, status: v.status });
    });
    setCheckItems(ids);
    setPostBody(body);
  } else {
    setCheckItems([]);
    setPostBody([]);
  }
}

세번째, 기능 추가한 작업
1.FAQ(자주 묻는 질문) 페이지 추가 →코드보단 컨텐츠 위주
궁금할 질문을 4가지 생각하여 답변을 적었고, 반응형으로 구현했으며 데스탑, 테블릿에서는 bottom을 통해 이동할 수 있고, 모바일에서는 sidebar을 통해 이동할 수 있다.

2. Password(비밀번호 재설정) 페이지 추가 → 회원가입 페이지와 유사
회원 이메일인지 확인하고, 회원 이메일일 경우 이메일로 인증코드(Bcrypt)를 보낸다. 인증코드를 입력하고 재설정할 비밀번호를 입력한다. 제대로 입력하였을 경우, “비밀번호 변경하였습니다.” 알림창이 뜨고 로그인 창이 뜬다. 그렇지 않을 경우, “인증코드 확인해주세요.”, “모든 것을 만족해야 합니다.” 등의 오류 알림창이 뜬다.

느낀점

디버깅을 준비할 때, ‘과연 우리가 제대로 신경쓸 수 있을까?’ 고민했지만 다들 시간을 내어 작업해주었고, 예상 외로 많은 작업과 일부 오류들이 발견되어 깜짝 놀랐다.

결과적으로 피드백 받은 부분과 계획한 작업을 완료할 수 있어서 뿌듯하고 재밌었다. DEVzine 사이트를 지속적으로 업데이트하고 싶은 마음도 있지만 일단 취업 준비와 취업하고 난 뒤의 상황이 또 다르기 때문에 이 이후로는 이런 시간이 없을 것 같다. ㅠㅠ

하지만 멋진 팀원들과는 계속 인연을 이어갈 것이다! 취업 준비가 잘 되어 좋은 기분으로 다들 만나고 싶다.