Attraversiamo :) 위코드 1차 프로젝트

위코드 초반 자기소개때 제가 좋아하는 영화 대사를 말하면서
앞으로 하루하루 조금씩이라도 성장해 나간다면 그걸로 된 거니까 다 같이 조급해하지 말고 위코드 기간을 같이 건너자고 했었는데
역시는 역시..말처럼 쉽지는 않았어요 🙃


중간중간 왜 시간이 지나도 잘 안되지? 잘하고 있는 게 맞나? 라는 생각이 많이 들었거든요
그래도 새삼 확실하게 느낀 점은 포기하지 않고 이리저리 부딪히며 해나가다보면 우리도 모르게 앞으로 나아가고 결국 가려던 곳에 도착한다는 거예요


이리저리 부딪히느라 수고 많았어요 여러분
Attraversiamo !
(우리 함께 건너자)
지금까지 같이 건너온 것처럼 남은 기간도 같이 건너요 🥰


                        -나의 개인 notion에 숨겨놨던 1차 최종회고 중-

팀명: POSEA

기능구현 및 blocker

1. 캐러셀 기능 구현
   (1) 상품이미지들을 감싸는 부모태그와 조상태그 중 조상태그에 useRef를 적용하여 이동이 제대로 되지 않음
   조상태그에 적용하여 수정함
   (2) IMG_MAX는 이미지의 마지막 인덱스값으로 설정해주었고 slideState값이 IMG_MAX값과 같거나 크다면
   setSlideState값에 0을 주어서 다시 첫번째 이미지로 돌아감

  const handleRight = () => {
    if (slideState >= IMG_MAX) {
      setSlideState(0);
    } else {
      setSlideState(slideState + 1);
    }
  };

(3) useEffect에서 ref에 transform으로 traslateX를 주어 설정된 크기만큼 이동시키려고 하였으나 되지 않음
transform이 아닌 translate로 잘못적혀있어 수정 후..정상적으로 작동함

const [slideState, setSlideState] = useState(0);
 const IMG_MAX = 3;
 const slideRef = useRef();

 useEffect(() => {
   slideRef.current.style.transition = 'all 0.5s ease-in-out';
   slideRef.current.style.transform = `translateX(-${slideState * 427}px)`;
 }, [slideState]);

2. 모달창 구현
   (1) 수정 전 모달창 구현

     <div className="modalBox">
       <Modal
         isModalShow={isModalShow}
         onModalShowBtnClick={onModalShowBtnClick}
         noShow={onModalExitBtnClick}
       />
     </div>

   (2)모달창 조건부 렌더링 사용하여 효율적으로 관리
   : isModalShow가 true면 modal창 활성화
   : 조건부 렌더링 사용할 경우 클릭 전에는 모달창 dom 자체가 보이지 않음

     {`isModalShow &&` (
       <div className="modalBox">
         <Modal
           isModalShow={isModalShow}
           onModalShowBtnClick={onModalShowBtnClick}
           noShow={onModalExitBtnClick}
         />
       </div>
     )}

   (3) display:none과 visibility:hidden의 차이점
   visibility:hidden

보이지만 않고 해당 공간은 존재함. width와 height값을 주었다면 그만큼 공간은 존재하게 됨
display:none

아예 사라짐. 보이지 않고 해당 공간도 존재하지 않게 됨
(4) 상세페이지의 footer 하단으로 공백 스크롤 생기는 버그 발생
→조건부 렌더링 적용할 경우 공백 사라졌지만, 적용한 애니메이션이 사라짐
→조건부 렌더링 지우고 모달의 부모태그에 fixed 적용하여 수정

3.merge 후 버그
(1) merge 후 버튼 작동하지 않음
Nav를 합친 후 상세페에지상 모달창 버튼과 장바구니 버튼이 작동하지 않음
z-index 값을 설정 및 nav 담당자 css 수정으로 완료함

4. 장바구니 버튼

나에게 팀플젝이란?

1. 함께 하면 못할 건 없다
2. 처음부터 모든 개념을 온전히 이해하고 코딩할 순 없다

1차 프로젝트를 통해 2가지를 새삼 다시 알게되었다
개발분야뿐만 아니라 모든 분야에서 적용되는 당연한 기본적인 사실들이라고 할 수 있는데, 이래서 기본이 제일 중요하다고 하나보다

함께하면 못할 건 없다

프로젝트 팀이 발표되고 첫날, 설렘 반의반 나머지는 막막함이었다
"내가 맡은 파트를 완전하게 구현하려면 어떻게 해야할까?"가 주된 고민이었던 것 같다.

처음에는 백엔드 분들의 용어나 계획들을 잘 이해하지 못했다
그래서 종종 시간이 좀 더 걸리게 돌아가는 경우도 있었지만,
백,프론트가 서로 쉽게 풀어서 설명하고 변경사항이나 문제가 있을 때 빠르게 공유를 하면서 풀어나갔다
막연했던 프로젝트 과정들과 개념들이 어렴풋이 익숙해져가고
그렇게 시간이 지날수록 나의 파트, 나의 기능구현이 아닌 우리의 프로젝트라는 생각으로 바뀌어 갔다

처음부터 모든 개념을 알고 코딩할 순 없다

혼자하는 공부였다면, 나는 이해가 안 가는 부분에 대해 파고들어서 영상도 찾아보고 여기저기 정리글도 탐방하며 이해하는 데에 시간을 썼을 것이다
하지만 프로젝트는 기한이 있고, 나의 것이 아닌 우리의 것을 만들어가는 과정이니 스프린트에 맞춰 움직였다

또, 나는 코딩을 하면서 오류가 나고, 깃에서 conflict가 나는 걸 최대한 피하고 싶어했던 것 같다
특히 modal창이나 carousel을 구현할 때 vscode에 일단 쳐보면서 이런저런 알 수 없는 오류들을 고쳐나가면서 알게되었다

영상을 통해 보거나, 이런 저런 정리된 글들보다 내가 직접 고치고 다듬은 내용들이 더 찐하게 남고 다른 사람에게도 설명할 수 있다는 걸.