[TIL] 내일배움캠프 React 과정 2022.12.27

Today I Learned

팀 프로젝트 CSS 작업
프로젝트 결과물 정리본(제출용) 작성

팀 프로젝트 진행 기록

git reset 이용해서 특정 커밋으로 되돌아가기

이번 팀 프로젝트는 git-flow에 따라 git을 이용하자는 팀 규칙을 세워서 main > dev > feature 브랜치로 나누어서 진행했는데, 각자의 feature 브랜치에서 구현을 완료하면 PR을 통해 dev 브랜치에 합치는 과정이었다.

그런데 오늘 오전에 팀원 한 분이 dev에 merge해야 하는 것을 main 브랜치에 merge하는 바람에 hard reset을 진행하는 일이 있었다. 그리고 나는 몇 시간 지나지 않아서 또 main에 merge하는 바보 같은 짓을 저질렀다.😨 그래도 오전에 한번 경험이 있었기 때문에 금방 되돌릴 수 있었지만 항상 merge하려는 브랜치를 꼼꼼히 확인하는 습관을 들여야겠다.

상황: dev에 merge해야 하는 것을 main에 잘못 merge함

main을 clone해서 merge 전 상태로 reset해야 함
"git reset --hard 커밋주소" (커밋주소 예시 Commit: 0cd8c771ba075aabcefcbdb82aa82c820f937bda)
local은 특정 커밋으로 되돌아갔는데 origin에 뒤처져있어 push를 할 수 없다고 뜬다.
`git push -f --set-upstream origin main`를 하니 원격에도 이전 상태로 잘 올라간다!

로그인 여부에 따라 URL 접근 막기

처음에는 react-router-dom으로 router를 이용해서 접근을 차단하려고 했지만 검색해봐도 코드가 전혀 이해되지 않는데도 그냥 복붙 하듯이 따라서 작성하려니 힘들었다. 그리고 검색 결과에는 1-2년 전 자료가 뜨는데 React Router가 V6로 업그레이드되면서 문법이 달라진 부분이 많았기 때문에 계속 에러가 떴다.

// 로그인하지 않았을 경우 메인으로 이동
  useEffect(() => {
    const currentUserDi = localStorage.getItem("id");
    if ( currentUserDi === null ) {
      navigate("/")
    }
  });

튜터님에게 아이디어를 얻어서 react-router-dom을 사용하지 않고 useNavigate로도 원하는 대로 구현할 수 있다는 것을 알게 됐다! 로컬스토리지에 유저의 id가 저장되어 있는지에 따라 로그인 여부를 판단할 수 있기 때문에 이것을 이용해서 로컬스토리지에 id가 없다면 메인페이지로 이동하라는 로직을 짰다.

마이페이지 CSS 수정

다른 팀원 분이 했던 CSS 결과물 폰트 사이즈나 패딩 값 등 디테일을 조금 다듬었다. 이번에 CSS를 마지막 이틀 정도에 몰아서 했는데 그닥 좋은 방법은 아니었던 거 같다. 초중반에 기능 구현에만 신경 쓰다 보니 CSS 구조를 제대로 쌓지 못해서 CSS 수정하는 데 많은 어려움이 있었다. 게다가 styled-components는 클래스 명이 모두 해쉬화되다 보니 작업하기 더 어려운 부분이 있다.

그리고 내가 참을 수 없는 두 가지...

클릭할 수 있는 요소에 cursor: pointer를 주지 않는 것과 padding을 주지 않는 것🙁

헤더에 width: 100%;가 적용되지 않던 문제

이유는 모르겠지만 <div id="root">에 width가 900px로 설정되어 있어서 헤더나 푸터가 900px 이상 늘어나지 않는 문제가 있었다. 이걸 해결하기 위해서 검색하다가 width: 100vw를 사용했더니 문제가 해결되었다.

100vw를 사용하면 부모 요소에 상관없이 width를 100%를 줄 수 있는데 100vw는 브라우저 화면의 넓이, 100vh는 브라우저 화면의 높이를 의미한다고 한다.

참고 https://skout90.github.io/2017/09/01/CSS/full-width-ignore-parent/

Footer 하단에 고정하기

position : absolute;
bottom : 0;

화면 비율에 따라 푸터가 하단에 붙어있지 않고, 푸터 밑에 빈 공간이 생겨버리는 경우가 있어서 이것을 해결하기 위해 position: absolute;로 bottom을 고정해봤지만 이렇게 해도 경우에 따라 푸터가 아예 섹션의 범위를 침범해버리는 문제가 발생했기 때문에 결국 absolute 사용하기 전으로 되돌리고 이 문제는 해결하지 못했다.

참고 https://velog.io/@gomiseki/footer-하단-고정

img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

img 안에 img를 넣어줘서 발생한 오류였다. 상위 태그가 스타일 컴포넌트를 사용한 img 태그라서 간과했던 부분이다.

vercel로 배포 시 yarn build에 계속 실패하던 문제

어제 vercel로 프로젝트 결과물을 배포하려는데 위의 이미지와 비슷한 에러가 계속 뜨면서 yarn build가 실패했었다. 원잔 튜터님이 새벽까지 이 문제를 해결하기 위해 노력해주셨는데 문제의 원인은 나였다....😭

import { v4 as uuidv4 } from "https://jspm.dev/uuid"; // 에러 발생
import { v4 as uuidv4 } from "uuid"; // 배포 성공!

유저와 게시물, 댓글마다 고유한 id를 넣어주기 위해 uuidv4를 사용했었는데 다른 팀원들은 import 경로를 "uuid"로 작성하고, 나만 https 링크를 작성했었다. 이렇게 하면 외부 라이브러리를 import 해 오기 때문에 계속 에러가 났던 거 같다. 신기하게도 경로를 "uuid"로 바꾸니까 바로 배포에 성공할 수 있었다. 나 때문에 발생한 상황이라 죄송했지만 그래도 튜터님의 도움으로 금방 해결할 수 있어서 너무 감사했다.

회고

당장 내일이 마감인데도 계속해서 자잘한 에러들이 발견되고 CSS도 거의 진행되지 않은 상태라서 마음이 조급했었다. 오늘 해보며 느낀 거지만 CSS를 너무 한번에 몰아서 하는 것도 좋은 방법이 아닌 거 같다. 그래도 팀원들과 함께 새벽 4시까지 남아서 CSS까지 마무리하고 배포할 수 있었다. 프로젝트 마감날이라 새벽 4시에도 ZEP에 20명이 남아 있었던...

오늘 거의 CSS 작업만 했는데 어렵고 재미없었다. 차라리 어떤 로직으로 구현할까 javascript 코드를 고민하는 게 더 재밌었던 거 같다. 그래도 프로젝트가 끝나면 CSS 구조를 뜯어고쳐서 반응형을 완벽히 구현해보고 싶다. 매번 프로젝트마다 반응형은 추가 기능으로 남겨두자 하고는 마지막엔 바빠서 반응형은 포기하게 되는 거 같다.

저작자표시