[React-Typescript] 프로젝트 기본 설정 및 DaisyUI 드롭다운 구현하기

개발을 업으로 삼은지 8개월이 지난 어느 날.

 

회사에서 신입 개발자들을 뽑는다는 소식을 들었다.

 

새로 뽑는 사원의 경우 업무 능력을 보기 위해 라이브 코딩 테스트를 본다고 한다.

 

주제는,

 

30분 안에 TODO 리스트 만들기

 

였다.

 

수많은 개발자들이 거쳐왔을 너무나도 익숙한 주제였지만, 프로젝트 설정부터 구현까지 30분이라는 조건이 마냥 쉬울 것 같지는 않았다.

 

시험을 보니 이게 왠걸, 생각보다 더 어려웠다.

 

차렷

 

나름 경력이 쌓이고 다양한 프로젝트를 했다고 생각한 내게 현실을 깨닫게 해주는 시험이었다.

 

시작부터 설정에서 실수해서 프로젝트를 지우고 다시 시작하는 희대의 삽질과 함께 30분이 빛의 속도로 지나갔다.

 

시험의 요구사항 절반도 채우지 못한 내가 그곳에 앉아 있었다.

 

응시자였다면 떨어질 수 있는 점수를 받았다.

 

너무나도 참담한 나의 기본기와 안일했던 나의 마음가짐을 다잡으며, 시험을 다시 풀어보았다. 기록은 무의미했지만 그래도 30분 내로 끝내보자며 전의를 불태웠다.

 

그럼에도...다 끝내지 못했다.

 

반성의 시간을 가지며 내가 무엇을 못했는지 되돌아보고, 어떤 기본기를 놓쳤는지 복기해보고자 한다.

---

프로젝트 기본 설정

 

먼저 프로젝트 기본 설정을 어떻게 하는지 되돌아 보았다.

 

나는 빠른 설정을 진행하기 위해 vite를 사용했다.

 

npm create vite@latest

 

이후에는 기본 설정들로, react와 typescript 를 기반으로 프로젝트를 생성했다.

 

여기서 문제가 발생했는데, 기본 eslint 와 prettier 설치로 넘어갔다.

 

당시에는 시간이 남을 거라는 판단에 해당 부분들을 검색을 통해 가이드대로 설치했다.

 

문제는...여기서 프로젝트 빌드나 설정이 완전히 꼬여버려 npm run dev 자체가 되지 않았다.

 

예기치 못한 변수에 완전히 당황해버렸다.

 

프로젝트를 급히 지우고, eslint와 prettier 없이 진행했는데 미치는 줄 알았다. 

 

뭐가 문제였지? 왜 빌드가 안됐지?

 

잡생각을 떨치지 못한 채 tailwind 설치로 넘어갔다.

설치는 검색 후 최연정님의 블로그와 같이 진행했다.

 

설치 과정은 블로그의 내용과 같기 때문에 자세히 쓰지는 않겠다. (좋은 가이드 글 감사합니다.)

 

1. TailWind CSS와 Dependencies 설치하기

2. 설정 파일 추가하기

3. template path 설정하기

4. Tailwind directive 추가하기

 

다행히 위 과정들은 문제없이 진행 되었다. 그럴수록 진해지는 eslint 설치 의문

 

tailwind 설치를 정상적으로 진행하고, 다음은 dropdown 을 사용하기 위한 daisyUI를 설치했다.

npm i -D daisyui@latest

 

이후 daisyUI를 tailwind.config.js의 플러그인에 추가했다.

 

module.exports = {
  //...
  plugins: [
    require('daisyui'),
  ],
}

 

다행히 tailwind 와 daisyUI 설치에서는 막히는 부분이 없어서 이후에는 빠르게 프로젝트 구현을 진행할 수 있었지만, 이미 많은 시간을 쏟아 부은 후였다.

 

---

 

시련은 여기서 끝나지 않았으니...의외의 복병이 나타났다.

TODO 리스트에서 추가된 항목에 드롭다운 메뉴 만들기 (단, 선택하여 변경 가능)

 

해당 기능은 30분 내에 구현해야하는 기능 중 하나였는데, 가장 시간이 오래 걸리게 한 장본인이었다.

 

앞서 언급한대로 나는 드랍다운을 만들 때 시간을 고려해 tailwind 기반의 daisyUI를 사용했다.

 

여기서 문제가 발생했는데, daisyUI의 드롭다운이 닫히지 않았다(!)

 

최근에 프로젝트에서 daisyUI를 썼기 떄문에 해당 기술스택을 잘 사용할 줄 안다고 생각했는데, 내 오만이었다. 

 

나중에서야 알게 되었지만, daisyUI에서 제공하는 "드롭다운"은 선택 시 열려있던 드롭다운이 닫히지 않는다. (관련 포스팅)

 

따라서 이를 해결하기 위해 다른 컴포넌트를 사용해야 한다. 해당 현상을 해결하기 위해 이전에 Collapse 컴포넌트를 적절히 활용했는데, 까맣게 잊고 있었다.

 

아래 코드는 같은 방식으로 정렬 기준으로 구현한 드롭다운(Collapse)이다.

const sorting = ['asc', 'desc'];

// ...

const handleSort = (sort: string) => {
    setIsDropdownOpen(false);
    setSort(sort as 'asc' | 'desc');
};

// ...

<div className="relative col-span-1">
  <button
    className="btn bg-transparent border-none hover:bg-transparent font-bold text-white"
    onClick={() => setIsDropdownOpen(!isDropdownOpen)}
  >
    Sort by
  </button>
  {isDropdownOpen && (
    <ul className="absolute right-0 mt-2 p-2 menu dropdown-content z-[1] bg-base-content/5 shadow-lg rounded-md">
      {sorting.map((sort, idx) => {
        return (
          <li key={`sort_${idx}`} className="cursor-pointer py-2 px-4" onClick={() => handleSort(sort)}>
            {sort}
          </li>
        );
      })}
    </ul>
  )}
</div>;

 

단, details 요소는 사용하지 않았다.

details 요소는 HTML5의 기본 요소이며, JavaScript를 통해 수동으로 열고 닫는 방식과는 다르게 작동하기 때문에 사용하기 어렵다. details 요소는 기본적으로 사용자가 클릭하여 열고 닫는 방식으로 동작하기 때문에, 이를 수동으로 제어하려면 별도의 상태 관리를 사용해야 한다.

 

위와 같이 코드를 구현하면 조건부 클래스로 드롭다운 메뉴를 열고 닫으면서 해당 값의 상태를 업데이트할 수 있다.

 

---

코딩 테스트 기반의 토이 프로젝트를 만들어보며, 내가 부족한 점들이 무엇인지 돌아볼 수 있는 좋은 기회가 되었다.

 

1. 프로젝트 처음부터 설정해보기

React-native로 해봤던 프로젝트 기본 설정을 제외하고는, 그동안 회사에서 진행했던 프로젝트들은 이미 기본 설정이 되어있는 상태로 전달받아 작업했다.

 

또한 회사 생활이 바쁘다는 핑계를 대며 토이 프로젝트에 소홀했기 때문에, 내 기본기는 더 나빠진 상태였다. 

 

앞으로는 다양한 토이 프로젝트를 해보며 프로젝트를 처음부터 설정해 보고, 기능 구현에 따라 필요한 라이브러리가 무엇이 있는지 잘 정리해야겠다.

 

2. GPT에 의존하지 않기

최근 챗 GPT가 발전하면서, 작업 속도를 내기 위해 나도 모르게 GPT에 상당 부분 의존했음을 인정했다.

 

특히 로직 관련해서 기본적인 틀은 생각하지만, 자세한 구현은 GPT에게 맡긴 부분이 많았었다.

 

이는 작업 속도에는 도움이 되었지만 내 개인적인 성장에는 도움이 안되는 나쁜 접근이라는 것을 깨달았다. GPT에게 이런 세세한 부분들을 맡기는게 내게 있어 편했지만, 그렇다면  나는 기본적인 틀만 구성한 채 "안을 채우지 못하는" 개발자라는 것을 알았다.

 

앞으로는 기능 구현에 있어 GPT에게 너무 의존하지 않고, 단순히 답변을 가져다 쓰는게 아니라 가능한 다른 구현 방식과 내 구현 방식을 최대한 사용할 필요가 있다고 느꼈다.

 

3. 기술 스택 공부하기

DaisyUI를 띄엄띄엄 쓴 주제에 나름 잘 안다고 생각했는데, 이번 일을 계기로 내가 얼마나 기술 스택을 "잘 아는 것"에 대해 얕잡와 봤는지 깨달았다.

 

나는 DaisyUI를 "잘" 알지 못했다. 그냥 써본 경험이 있을 뿐이었다.

 

새로운 기술 스택을 쓰더라도 Documentation을 잘 읽어보고, 사용할 때 관련 문서를 꼼꼼히 읽을 필요가 있음을 느꼈다.

 

또한 주어진 프로젝트에서 내가 잘 모르는 기술 스택을 함부러 사용하는 것이 얼마나 위험한 접근인지 알았다. 앞으로는 잘 아는 기술스택, 그리고 그러한 기술스택이 많아지도록 노력해야겠다.