JUSTCODE - Week9(1차 프로젝트 개선 하기)

1차 프로젝트 팀원들과 함께
첫 프로젝트였던 그라폴리오 클론 사이트를 개선 및 리팩토링하는
미니 프로젝트를 시작하였다

프론트 레포지토리:
https://github.com/JUSTCODE-PHOTOFOLIO/Renewal-Front

프로젝트 노션:
https://www.notion.so/tobedev/PhotoFolio-Renewal-fee965ca5fcd4fed876b8f660863cf23

---

팀적으로 적용한 점

컨벤션

- 프로젝트 노션에서 발췌

- Branch
    - const PR = (merge) ⇒ { develop을 pull 받아요 }.then{ git checkout -b feature/users }.then{git push origin feature/login (원격) }
    - 리팩토링 : refactor/기능명
    - 기능 : feature/기능명
    - 수정 : fix/기능명
        - 필요에 따라 임시로 브랜치 명 정하고, push하기 전에 브랜치 명 바꾸고 push
    - 급한 에러 : hotfix/기능명 (화면이 안뜬다?! 등등)
- Commit message
    - 기능 추가)  `Add :상세기록`
    - 기능 변경) `Modify : 상세기록`
    - 기능 수정) `fix : 상세기록`
- [Front] Style
    - Inline-style 금지
    - module.scss 파일 사용 → 새로 추가되는 파일만 사용합니다.
    - SASS - Nesting 적극 사용
- [Front] Variable
    - 변수 : camelCase - 새로 추가되는 파일부터 사용합니다.
    - 함수 : 동사로 시작 / arrow-function 사용(상황에 따라 function() 사용)
    - Component : functional component
    - URL : 단수
        - 회원관리 : /user/페이지명
        - 작품 관련 : /work/페이지명
        - 피드 관련 : /feed
        - 카테고리 관련 : /category/페이지명
        - 검색 관련 : /searchlist/페이지명

git rebase
merge 대신 rebase를 사용하였다

환경 변수
.env파일에서 통신에 사용할 URL를 관리해주었다

README 작성

---

느낀점(코드 부분)

1. 반복적인 코드는 map을 사용하는 것이 좋다
   알고있는 부분이라고 생각했지만 반복하여 사용한 코드가 많았다

2. map을 사용 할 때, 항상 조건부 랜더링을 해주는 것이 좋다
   (통신에 실패했을 때, 통신 에러로 사이트가 터지는 것을 방지해줌)

X: {data.map(elem => {})}
O: {data && data.map(elem => {})}

3. map을 사용 할 때, key로 idx를 사용하지 않는다
   (요소에 변화가 생기면 모든 요소에서 변동이 생기므로
   서버로부터 받은 id값을 사용하는 것이 좋다)

4. 함수로 태그를 반환할 수 있다

function useFunction() {
  return (
    <div>반환할 태그</div>
  )
}

return (
  <>
    {useFunction}
  </>
)

5. input으로 받은 이미지 미리 보기
   https://velog.io/@yopi27/리액트-이미지-업로드-정리

6. fetch 코드를 관리되지 않는 사이드 이펙트 영역에서 사용할 경우
   계속해서 통신이 발생하므로 통신 코드의 실행을 고려해서 코드를 작성해야 한다

7. 모달창 위치를 absolute로 지정할 경우,
   모니터의 크기에 따라 위치가 레이아웃이 바뀌므로 주의해야 한다

8. 삼항연산자도 값이기 때문에,
   클래스명에 삼항연산자를 넣어 클래스를 동적으로 사용할 수 있다

9. useEffect의 의존성 배열은 state가 아닌 값의 변화도 인식할 수 있다
   (대신 경고가 발생한다)