프로그래머스 데브코스 TIL - Day 23 / 과제 제출 및 회고

 

✅ 오늘의 학습

- Notion Cloning 과제 마무리 및 제출!

 

---

🔥 과제 제출 전 마지막 체크 했던 부분

- 코드 리팩토링

작성한 코드를 리팩토링하면서 시간을 꽤 보냈다.

중복되는 부분을 찾고 모듈화를 진행하거나

테스트를 해보면서 새로 발생한 에러들을 꼼꼼하게 살피며 수정해 보았다.

그랬음에도 불구하고 그 때는 안 보이던 것들이 제출하고나니 몇가지가 추가로 보였다.. 😂

이후 추가적으로 수정해 볼 예정이다.

 

- Component를 재귀구현 하던 방식에서 innerHTML 방식으로 변경

처음에 Document들을 트리구조로 렌더링 하는 부분을

component형식으로 생성자 함수를 만들어서 구현을 했었는데

다른 기능들에는 문제가 없지만 렌더를 할 때마다 해당 컴포넌트가 아예 없어지고 재 생성되기 때문에

렌더를 할 때마다 이벤트가 계속 생성되어서 전부 변경했다.

 

😓 이전 코드

 this.state.map((doc) => {
      new PostList({
        $target: $ul,
        initialState: { ...doc, depth: 1 },
        onAdd: async (documentId) => {
          const newDoc = await fetchAddDocument(documentId);
          setItem(SELECTED_DOCUMENT, { id: newDoc.id });
// ...

 

✅ 수정 후 코드

 const createPost = (documents, depth) => {
    return `
    ${documents
      .map(({ id, title, documents }) => {
        const isOpen = (openList && openList[id]) || false;
        return ` 반복되는 부분 작성 `;
      })
      .join("")}
    `;
  };

PostList 내부에 재귀 함수를 생성하여 return 받은 값을 innerHTML로 처리하는 방식으로 바꾸었다.

이전의 컴포넌트 형식의 재귀의 경우 각각의 setState가 있었는데 그것 말고는 기능은 이전과 그대로 구현이 되었다.

 

- sidebar에 슬라이드 적용

팀원분이 전날 슬라이드 구현을 하셨는데 재밌었다고 하셔서

과제 제출 끝나고 추가해 보려고 했는데 시간이 조금 남아서

css의 transition와 JS의 클릭 이벤트로  간단하게 추가했다.

메뉴 아이콘과 애니메이션의 기능 하나가 있고 없고의 차이가 확실히 있다.

 

 

- 제목이 없는 document 선택 시 input에 커서 이동

새 Document를 추가할 때마다 url은 이동은 되는데

제목을 추가하려면 마우스로 클릭해야해서 내가 불편해서 추가 했다..

if ($input && !this.state.title) {
      $input.focus();
}

엄청 간단하게 구현할 수 있었다.

 

---

😢 아쉬웠던 점

- 마지막의 보너스 요구사항을 못한 것..

" 편집기 내에서 다른 Document name을 적은 경우,
자동으로 해당 Document의 편집 페이지로 이동하는 링크를 거는 기능을 추가"

위 구현사항을 하지 못한 것이 너무너무너무x100 아쉬웠다.

 

search하는 API가 없었기 때문에 완전탐색을 이용해서라도 하려고 했다.
재귀 함수를 확실하게 구현해 본 적이 많이 없어서 임시 팀 분 중 한 분께 도움을 요청했다.

const returnSearchList = (documents, keyword, list) => {
  documents.forEach((doc) => {
    if (doc.title.startsWith(keyword)) {
      list.push(doc);
    }
    if (doc.documents.length !== 0) {
      search(doc.documents, keyword, list);
    }
  });
};



export const searchDocuments = (documents, keyword) => {
  let list = [];

  returnSearchList(documents, keyword, list);

  return list;
};

초기에 작성한 코드 일부였다. 귀여운 초안.. 어떻게 변할지 기대되는 부분이였는데 아쉬웠다.

 

반? 정도 구현을 하기는 했지만 이후 에러를 체크하는 등 변수가 생긴다면
시간이 촉박 할 것 같아서 전부 빼고 기존까지 만들었던 페이지의 오류를 수정하기로 했다.

 

- 토글 클릭 시 애니메이션 구현

이전엔 토글을 할 때 렌더링은 하지 않는 방식으로 구현했었는데

innerHTML방식으로 변경을 하게 되면서 토글 시에도 렌더링이 되어 애니메이션은 구현하지 못했다.

이 부분은 다시 한번 제대로 본다면 가능할 것 같았지만 필수 요구사항이 아니였기에 일단은 과제를 제출했다.

 

- 컴포넌트 명 및 Class 명의 매치

변수명들에는 document를 사용하고 컴포넌트나 CSS에는 Post라는 키워드를 사용해서 

다른 사람들이 처음 내 코드를 본다면 조금 헷갈릴 것 같다는 생각이 들었다.

앞으로는 통일성 있게 맞추어서 이해되기 쉽도록 작성해야겠다는 생각이 들었다.

 

- 효율적이게 처리하지 못한 기능들

: 기능 구현을 떠나서 분명 더 좋게 처리할 수 있을 것 같은 기능들에 대한 아쉬움이 크다.

구조를 잘 정리했다면 좀 더 효율적으로 처리할 수 있었을 듯 하다.

 

 

==>> 과제를 제출했으니 피드백 이후에 다시 한번 정리해서 개선해 볼 예정이다.

 

---

😱 어려웠던 점

- contentEditable..

- 변수명 짓기..

- 금방 끝날 줄 알았는데 반갑게 날 맞이하는 에러&변수들..

- 과제를 구현하며 생기는 욕심..

- 커밋 분리..

 

---

👊 개선해야할 점

1. 컴포넌트 구조나 데이터 흐름을 미리 생각하기

: 과제 및 프로젝트 시작 전 구조들을 미리 짜고 데이터 흐름을 고려하여

진행하기. 그래야 연관된 기능들에 대해 효율적으로 코드를 작성할 수 있을 듯!

 

2. 커밋 제대로 분리해서 하기

: 중간에 이전 커밋에 관련된 사항이 생기면 해당 커밋으로 가서 수정을 하든,

적어놓은 후에 이후에 하던 익숙치 않더라도 기능별로 구분할 수 있게 확실하게 하기!

 

3. 기능 구현 후 주석으로 메모 달기

: 나중의 내가 확인했을 때 인지를 할 수 있도록

어떤 부분을 왜 이렇게 구현했고 어떤 문제가 발생하고 있는 지 적어두기!

 

---

✍ 노션 클로닝 과제 회고

기능은 만들어졌지만 추가적인 테스트를 하며 발생하는 상황들이나
이후에 요구사항은 아니였지만 추가하는 기능들 때문에
데이터 구조를 변경을 해야되는 상황들이 생겼다.

 

이로써 처음에 계획을 하고 구조를 잡는 것에 대한 중요성을 매우 매우 느꼈다.
예를 들면 컴포넌트 구조는 어떻게 할 것이며,

해당 컴포넌트 안에서는 어떤 데이터를 관리를 하고,
어떤 요청을 보내고 어디에 어떻게 데이터를 전달할 것인지... 등등

사실 간단한 예제라고 생각하고 간과했던 부분들이다. 과거의 나 ..반성

 

당장 앞에 있는 기능 구현을 위해 데이터의 흐름을 그저 유추만 하게 되고

모든 것을 상황에 따라 변경해나가게 되니 처음의 의도와 달라지고, 구조를 변경하게 되었다.
심지어 마지막에 도달했을 때 '이거 왜 이렇게 처리했었지?' 라는 질문을 나한테 던지고 있었다..

 

그리고 과제를 하고 있을 땐 몰랐는데 과제를 제출하고 나니, 
현재 우리 팀과 임시 팀, 그리고 다른 팀원 분과 이야기를 통해 다른 방법에 대해 고려해 보기도 하고,
생각하지 못했던 부분들을 알기도 하고 너무 좋은 시간들이였던 것 같다.
그리고 과제의 문제 해결을 하는 꿈까지 꿀 정도로 작은 문제로 몇 시간을 쓴 적도 있었는데

해결이 되니 그 고생이 정말 사라지는 게 신기했다!!

 

과제를 시작하기 전 미처 고려하지 못했던 부분으로 인해 생긴

시간 소모나 비효율적이였던 부분들을 개선하여 다음 과제에서는 구조를 먼저 짜야겠다.

그리고 내가 왜 이렇게 처리를 했었는지 메모하는 습관을 들이기로 했다.