6주차 코드 리뷰 후기

코드 리뷰

내 코드를 다른 사람이 봐주고 그에 대해 의견을 주는 코드 리뷰를 받는건 언제나 좋다.

더군다나 나는 지금 배우는 입장이기 때문에 코드 리뷰를 통해서 얻을 수 있는게 정말 많다.

사실 부트캠프에서 크게 기대를 하진 않았고 공유 오피스를 빌려주니까 거기서 공부할 생각이었다.

하지만 매주 이런 코드 리뷰도 받을 수 있어서 더욱 공부할 맛이 난다.

 

이번 부트캠프에서 목적은 "내가 이용할 수 있는 환경은 모두 이용하자 였다."

코드 리뷰에서도 올바른 질문 방법을 통해 최대한의 효용을 끌어낼 수 있도록 노력해야지.

이번주 부터는 리액트를 이용하기도 하니까 코드 리뷰도 알찰거라 예상이 된다.

겸사겸사 복습도 할겸 코드 리뷰를 받고 배운점과 리뷰 내용도 정리해보고자 한다.

---

수정 사항

1. UI 분리

기존에는 부모 컴포넌트 한 군데에서 API 호출을 관리하면 관리 포인트가 줄어서 좋지 않나? 싶었다.

하지만 이러면 부모 컴포넌트가 너무 과도한 책임을 지는것 같고, 코드 양도 길어지기 때문에 분리하기로 했다.

UI 를 분리하고 나니 부모 컴포넌트에 의존하지도 않으므로 기존보다 변경에 유연한 코드라고 느껴졌다.

기존

function App() {
  const [folders, setFolders] = useState([]);
  const [userProfile, setUserProfile] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const folders = await getFolders();
        const userProfile = await getUserProfile();  // 부모 컴포넌트가 API 요청 두개를 처리
            ...생략... 
  return (
    <>
      <Nav userProfile={userProfile} />
      <div className={styles.body}>
        <FolderListPage folders={folders} />
      </div>
      <Footer />
    </>
  );
}

export default App;
-------------------------------------------------------------------------
function Nav({ userProfile }) {
	...생략...
}

export default Nav;
-------------------------------------------------------------------------------
function FolderListPage({ folders }) {
	...생략...
}

export default FolderListPage;

변경 후

function App() {
  return (
    <>
      <Header />
      <div className={styles.body}>
        <Outlet />
      </div>
      <Footer />
    </>
  );
}

export default App;
--------------------------------------------------------
function Nav() {
  const [userProfile, setUserProfile] = useState(null);
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        const userProfile = await getUserProfileById(1);   // Nav, SharedPage 각자 API 호출
			...생략...
}

export default Nav;
-----------------------------------------------------------
function SharedPage() {
  const [folder, setFolder] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const { folder } = await getFoldersSample();   // Nav, SharedPage 각자 API 호출
			...생략....
}

export default SharedPage;

 

2. 내용이 너무 길어지면 ... 표기

입문자의 어려움은 "모르는게 있는데 어떻게 검색해야할지도 잘 모르는거" 라고 생각한다.

나도 이번에 과제를 하면서 내용이 너무 길어지면 ... 으로 표기하고 생략했으면 좋겠는데,

이걸 뭐라고 검색해야할지 몰라서 우선은 지정한 영역을 벗어난 부분은 스크롤 하게만 만들어 두었다.

이에 대해 멘토님께 물어봤더니 아래처럼 답변을 들었고, 내 페이지에도 적용해보았다.

 

기존

변경 후

 

이것 말고도 리뷰 받은 부분을 몇개 더 고쳤다.

이번주엔 궁금한것도 생각나는건 다 물어봤고, 덕분에 해결된 부분도 많아서 만족스러운 코드 리뷰였다.

백엔드 할때는 프론트엔드 정말 별거 있나? 싶었는데 아직 갈 길이 멀다는걸 느낀다.

특히 CSS 는 진짜 너무 힘들어 ㅋㅋ