DiaryProject(React) - 메인페이지 구성

ryan·2022년 5월 9일
0

지난번 Git을 통해 분산되어 있던 코드를 하나의 레포지토리로 합치는데 성공하였고, 이번에는 각 컴포넌트를 합쳐서 메인페이지 틀을 구성했다.

팀원이 사용하는 패키지 자동으로 다운 받기

  • 옮기는 과정에서 배운 점은 각자가 사용하는 모듈을 일일이 하나씩 npm i (모듈명) 할 필요가 없고, 루트 경로에 있는 package.json에 의존성을 추가해준 다음 npm install을 해주면 알아서 다운받아준다는 사실을 알게 됐다.

컴포넌트 재조합

  • 최소한의 css만 되어 있는 파일을 합쳐놨다.
  • 상단에서부터 일기페이지의 정보, 이미지 업로드, 일기장 작성이 구성되어 있으며 우측에는 캘린더, 책갈피 기능이 추가된다.
  • 이렇게 직접 각자가 만든 컴포넌트를 합치는 과정에서 리액트가 가지는 장점을 체감할 수 있었다.
  • 동시에, 어떻게 하면 자바스크립트에서도 이러한 컴포넌트 조합을 적용할 수 있을까 아이디어를 고민해보고 있다.

발생하는 문제점

직관적이지 않은 파일 분류

  • 일단 위 이미지에서 보이는 것처럼 각 파일의 이름이 통일되어 있지 않고, 각 컴포넌트의 분류 또한 제대로 이루어지지 않아서 어디가 어디에 들어가는 컴포넌트인지 전혀 파악하지 못한다. 이 경우, 팀원에게 이건 어떤 파일이냐고 물어봐야해서 불필요한 커뮤니케이션 리소스가 발생한다.
  • 각 화면을 구성하는 컴포넌트 단위로 폴더를 구성하거나 파일명을 변경하여 조금 더 직관적으로 개선할 필요가 있다.

CSS 에러

  • 각자의 로컬에서 각자의 파일에 css를 했기 때문에 컴포넌트를 합치고 나서는 의도치 않게 CSS가 적용되는 문제가 발생한다 기능 구현이 일단 마무리되고 후반부에 CSS 파일 내 클래스명 등을 전반적으로 수정하면서 해결해보고 싶다.

해야할 것

  • 폴더 간 State 관리를 어떻게 할건지 논의

  • 불필요한 렌더링이 발생하지 않는지 확인하고 조치

  • 데이터 통신과 관련된 값을 저장하는 state 로직 구성

  • 생애주기 관리가 필요한 hook이 있는지 논의하고 다시 코딩하기

profile
프론트엔드 개발자

0개의 댓글