1차 프로젝트 후기

da.circle·2022년 11월 13일

회고

2022.10.30 ~ 2022.11.11 2주에 걸친 1차 프로젝트가 끝났다.
나는 프론트엔드 개발로 참여했다.

저스트코드에 참여한 이후 처음으로 진행한 프로젝트!

팀원 : 프론트 3명 / 백엔드 3명

프로젝트 설명

주제

클론 사이트

네이버 그라폴리오

선정 과정 및 이유

팀원들과 회의 전 각자 만들어보고 싶은 페이지를 몇가지 정해오기로 했다.
컴퓨터로는 웹서핑을 잘 안해서 어떻게 검색해야 하는지 막막했다.
내가 참고한 사이트는 아래와 같다.

지디웹(gdweb)
디비컷(dbcut)

위 사이트에서 프로젝트로 진행할 수 있을만한 사이트를 찾던 도중에 내가 평소에 제일 자주 들어가던 네이버 그라폴리오가 생각났다. 배경화면 구하러 자주 들어갔었다.

페이지가 깔끔하고, 댓글이나 좋아요, 팔로우 기능도 있어서 프론트에서 만들어볼 수 있는 기능도 많고 백엔드도 필터링등의 기능 구현 이외에도 팔로우, 댓글 관리 등 배운 것을 응용할 수 있는 기능들이 많은 것 같아서 제안하게 되었다.
다행히 팀원들도 내 의견에 동의해주어서 최종적으로 선택하게 되었다!👍

구현할 페이지

회원가입, 로그인
작품 페이지
피드 페이지(로그인 하면 나타나는 페이지)
작품 상세페이지
- 댓글
- 팔로우
카테고리 상세페이지
작가 채널 페이지(개인 채널 페이지와 동일)
개인정보 수정 페이지
업로드 페이지

내 담당 기능

네비게이션 바(header)
footer(페이지 하단)
캐러셀(Carousel)
팔로우 기능
검색페이지

협업 툴 및 개발환경

협업 방식

노션에서 칸반보드와 타임라인을 이용하여 티켓으로 일정관리
Daily Stand Up Meeting : 매일 오후 1시 30분에 30분간 미팅 진행
- 어제까지 작업한 사항 공유 및 오늘 작업계획 공유
Slack으로 공지사항 전달
VSCode Live Share : 실시간 코드 공유 및 피드백
프론트엔드 merge meeting : 매일 오후 11시 프론트엔드 팀원들끼리 작업 공유 및 merge

기능 구현 방식

git, github, google meet, zoom을 사용하여 실시간으로 팀원간의 코드 리뷰를 진행하고 에러 및 충돌 해결

개발환경

OS : Windows, Ubuntu, MacOS
언어 및 기술Stack
- 프론트엔드 : HTML, CSS, JavaScript, SASS, React
- 백엔드 : JavaScript, Express, MySQL, AWS-S3 cloud service
형상관리 : Github
문서관리 : Notion
협업 : Slack

후기 및 느낀점

팔로우 버튼 사건(기본기가 중요해)

팔로우 버튼 구현할 때 힘들었지만 재밌었던 일이 있었다.
아래 사진이 내가 구현한 작품상세페이지에 들어가는 팔로우 및 캐러셀 부분이다.

로그인 한 상태에서 팔로우 버튼을 누르면 팔로잉 버튼으로 바뀌고, 팔로워가 1 증가한다.
팔로우 한 작가의 작품 상세페이지로 다시 들어가면 팔로우 버튼이 아닌 팔로잉 버튼으로 나타난다.

팔로우,언팔로우 기능도 잘 작동하고, 팔로워 수도 증가하고 감소하고 잘 된다. 하지만 문제는..
팔로우하고 페이지를 다시 들어가면 여전히 팔로우 버튼이 떠있다는 것이었다.

이미 팔로우를 했는데..왜 또 팔로우를 하라고 하는건지..😥

코드는 아래와 같다.(jsx코드 부분만 가져왔다.)

<div className="followBtns" onClick={handleToggle}>
  {/* 
  로그인 한 상태이면서 팔로우한 상태에서만 팔로잉 버튼 
  1 : 팔로잉 되어있는 상태 (하얀 버튼)
  0 : 팔로잉 되어있지 않은 상태 (초록 버튼)
  */}
  {isLogin ? (
    isFollow === 1 ? (
      <div
        className={isClick ? 'followBtn' : 'followingBtn'}
        onClick={sendResult}
      >
        {isClick ? '팔로우' : '팔로잉'}
      </div>
    ) : (
      <div
        className={isClick ? 'followingBtn' : 'followBtn'}
        onClick={sendResult}
      >
        {isClick ? '팔로잉' : '팔로우'}
      </div>
    )
  ) : (
    <div className="followBtn" onClick={clickLoginBtn}>
      팔로우
    </div>
  )}
</div>

isLogin은 localStorage에서 token이 있는지 여부로 판단한다. (있으면 true, 없으면 false)

const [isLogin, setIsLogin] = useState(false);

//localStorage에 token 유무 체크
const token = localStorage.getItem('token');
useEffect(() => {
  if (token) {
    setIsLogin(true);
    return;
  } else if (!token) {
    setIsLogin(false);
    return;
  }
}, [token]);

isFollow는 백에서 팔로우 여부를 0과 1로 보내주는 값을 저장한다.
0은 해당 작가를 로그인 한 사람이 팔로우 하지 않은 상태,
1은 해당 작가를 로그인 한 사람이 팔로우 하고 있는 상태이다.

const [isFollow, setIsFollow] = useState(0);

fetch('http://localhost:8000/works/feed/' + params.id + '/followcheck', {
      headers: {
        'Content-Type': 'application/json',
        token: localStorage.getItem('token'),
      },
    })
      .then(res => res.json())
      .then(json => {
        setIsFollow(json.checkFollow[0].success);
      });
  }, [params.id]);

isClick은 초기값으로 isFollow를 넣은 state로, 클릭할 때마다 0과 1을 왔다갔다 한다.(handleToggle 함수로 관리)

const [isClick, setIsClick] = useState(isFollow);
  const handleToggle = () => {
    setIsClick(!isClick);
  };

아무리 봐도 문제가 없는 것 같은데 팔로우 버튼은 팔로우를 하던 안하던 페이지를 들어가면 계속 팔로우 버튼으로 떴다.
시간이 부족해서 다른 기능을 구현하면서 틈나는대로 고쳐보려고 "로그인 했고... 팔로우 했고... isClick이 1이야... 어 맞는데???" 를 반복했다.
console.log를 코드 사이사이에 넣어가면서 콘솔에 값을 찍어보고, 삼항연산자 안에서 div를 바꿔보기도 하고, isClick에 !isFollow값을 넣어보기도 하고, 팀원들과 zoom으로 화면공유를 하면서 조언도 구해봤지만, 해결하지 못하고 있었다.

팀원들과 다같이 "로그인 했고... 팔로우 했고... isClick이 1이야... 어 맞는데???"🤣

그러다 저스트코드에서 제공하는 커뮤니티에 질문을 올렸고, Tom님의 도움을 받아서 해결할 수 있었다!

위커뮤니티에 질문을 올리는건 처음이어서 정신없이 질문을 올렸는데, 함께 문제를 해결해주신 Tom님 정말 감사합니다!

백엔드에서 보내주는 값은 문자인데, 나는 isFollow === 1 이렇게 숫자와 비교하고 있었던 것이다!!!
isFollow == 1로 비교연산자를 바꿔줬더니 정상적으로 작동하였다.
팀원들도 본인 일처럼 기뻐해 주었다ㅎㅎ🥰(우리팀 정말 최고야)

이번 일을 통해서 기본기가 정말정말 중요하다는 것을 다시 한번 깨닫게 되었다.

마무리

처음으로 캐러셀도 만들어보고(라이브러리 사용안하고 직접 만들었다), 백엔드와 통신하면서 받은 데이터가 화면에 나타나는 걸 처음 봤을 때는 소리지를뻔 한 적도 있다.
프로젝트를 하면서 팀원들의 도움으로 2주 전보다 훨씬 성장한 것 같은 느낌이 들었다.

이번 프로젝트로 한 걸음 성장했다면, 2차 프로젝트에서는 두 걸음 성장하는 것을 목표로!

다음 프로젝트도 기대된다!

2주동안 같이 새벽까지 작업하고 밤샜던 PhotoFolio 팀원 모두들 고생많으셨습니다!
같이 프로젝트 진행하면서 정말 재밌었어요! 개발하는게 즐거워서 시간 가는줄도 몰랐네요ㅎㅎ 앞으로도 잘 부탁드립니다!
(+개인사정으로 오프라인 모임때 참여하지 못한 백엔드 팀원님! 저의 뜬금없는 데이터 요청(?)에도 친절하게 대답해주시고 정말 감사했습니다! )