원티드 프리온보딩 프론트엔드 코스 2주차 회고 (1) — TypeScript

설날 연휴에 푹~ 쉬는 척 이것저것 공부도 많이 하고 나서 다시 듣게 된 2주차 수업.

TypeScript 수업이었는데 사실 바로 실전 프로젝트를 하게 될 줄은 몰랐다. 그나마 설 연휴에 React with TS로 TodoList 만드는 강의라도 보고 따라해서 망정이라고 생각했음. 그리고 직접 해 보니까 더 어려웠따......

 

---

 

 

TypeScript

사실 타입스크립트는 C언어, Java, Python 그리고 약간의 C++까지 배웠던 전공생으로써 익숙한 부분들이 많았다. 당연함. 그것이 OOP이니까. 어떻게 보면 자바스크립트가 되게 희한한 언어다. 변수의 타입도 지정해 주지 않아도 되고, 호이스팅으로 인해 변수 선언을 호출보다 밑에 해도 오류가 안 난다든지 그런 점을 보면 말이다.

그치만 React+TypeScript라면 말이 달라진다. 자바스크립트에 길들여진 코딩 입맛으로는 처음엔 정말 어려웠다. 제네릭 같은 경우는 Java 수업을 들었을 때도 많이 사용해 보지 않았던 부분이라 어려웠고, 사실 객체 지향 언어 강의들은 2018년에 개념 강의 들은 게 마지막이라...... 좀 많이 까먹었다. ^^; 그리고 이번 과제에서는 타입스크립트를 처음 사용해 봤다.... 2019년 때부터 써보라고 얘기만 듣다가 이제서야.... 타입스크립트를 접한 사람들은 다시는 타입스크립트를 사용하기 전으로는 못 돌아간다고들 한다. 아직 JavaScript만 쓰다가 TS는 맛보기 수준으로 건드려 본 정도라 타입을 입력하는 과정이 조금 번거롭지만 직접 체감해 볼 때까지 사용해 보려고 한다.

 

 

 

 

 

1. json-server

설 연휴에 벨로퍼트 리액트에 있는 모든 걸 따라 해 봤는데, 여기 json-server로 서버를 구동해서 API 연동하는 부분이 있었다. json-server의 쓰임이 어렵지는 않았지만 써 본 경험이 있기 때문에 수월하게 mock data로 서버를 띄울 수 있었다.

 

 

 

 

 

 

2. 필터링 기능 구현

아무튼 내가 이번에 주로 담당한 기능은 필터링 기능이었다. 1주차 과제에서 체크박스 상태 관리를 해 봤기 때문에 그 부분은 더 수월하게 할 자신이 있었고, 걱정되는 부분은 두 가지 이상의 체크박스를 선택했을 때 그 교집합의 조건을 필터링하는 부분이었다. 이전에 구현했던 필터 태그 기능에서는 한 가지 조건만 필터링해 결과를 리턴하면 됐었기 때문에... 어떻게 하는지 감을 잡기가 힘들었다.

그치만 내가 겪는 문제는 이미 이전에 누가 한 번 겪은 문제라고...... 역시 구글은 모르는 게 없음.

map.reduce 메소드를 사용해서 필터된 부분을 누적시켰다. 

 

const onFilter = () => {
    if (!selected) {
        setData(originData);
    } else {
        const newData = originData.reduce<IRequests[]>((acc, curr) => {
            const selectedMethodCondition =
                name === 'method' && selected && selected.length > 0
                    ? selected.every((i) =>
                          curr.method.includes(i.toString())
                      )
                    : true;
            const selectedMaterialCondition =
                name === 'material' && selected && selected.length > 0
                    ? selected.every((i) =>
                          curr.material.includes(i.toString())
                      )
                    : true;
            if (selectedMaterialCondition && selectedMethodCondition) {
                acc.push(curr);
            }
            return acc;
        }, []);
        setData(newData);
    }
};

이런 식으로 acc에 누적시키는 형식을 택했다. 

 

이 부분에서 아쉬웠던 점은 TypeScript를 팀원들이 사용해 본 적이 없어서, redux를 사용하면 많이 어려워질 것 같았다. 그래서 props를 부모에서 자식이 전달해 주는 방식을 택했는데, 이 과정에서 전달해 주는 props가 너무 많이 생겨 코드의 가독성이 안 좋아진다고 생각했다. 3일 안에 완성해야 하는 프로젝트였기 때문에 코드를 급하게 짰던 것도 있었다. 완성하고 보니 한 props로 여러 가지 기능을 할 수 있음에도 불구하고 굳이 나눠서 상태 관리를 했던 게 보였다.

이후에 필터링 기능으로 전달하는 props는 왼쪽에서 오른쪽만큼 줄여서 리팩토링했다.

 

 

 

 

 

3. 리프레시 기능

선택된 조건이 있다면 필터링 리셋 버튼을 표시해 선택 조건을 초기화하는 기능을 구현했다. 이 부분에서 필터링 리셋을 눌렀을 때 바로 가공방식과 재료가 초기화되는 게 아니라 가공방식이나 재료 버튼을 눌러야 초기화가 되는 버그를 발견했다.

자식 컴포넌트에서 전달된 props를 출력해 봤을 때 전달이 아예 안 되는 것을 발견했고 가공방식/재료 버튼을 클릭해 체크박스 컴포넌트가 열려 있어야 자식 컴포넌트로 전달이 된다는 것을 알아냈다.

// 이런 식으로...
{isMethodOpen && (
    <FilterButton
    ... 
    />
)}

체크박스를 클릭할 때만 생각하고 체크박스 컴포넌트가 열려 있을 때만 FilterButton을 호출했는데, FilterButton에서 또 호출되는 자식 컴포넌트에 필터링 기능이 있었기 때문에 버튼을 눌러야만 리셋 기능이 제대로 돌아갔던 거다......

엄청 삽질 했었는데 아무튼 이 코드 저 코드 예전 코드 다 비교해 가면서 겨우 해결할 수 있었다.

 

 

 

---

 

외에는 반응형 구현도 있었는데...... 지금도 반응형 width나 height 조절은 어떤 걸로 해야 할지 정말 어렵다. vw를 쓰는 게 좋은가? rem? em? 더 찾아봐야겠다. 그리고 아무래도 한 달 정도 지나서 쓰니까 생각이 안 나서 github 커밋 기록을 더듬더듬 찾아보면서 썼다. 다른 회고도 더 까먹기 전에 얼른 써야 할 듯. ^^;

 

쨌든 TypeScript는 처음 써 봤는데, 실무에서는 TypeScript를 정말 많이 쓴다고 한다. JavaScript로만 개발하는 것보다 확실히 베네핏이 있으니 사용하는 거라고 생각하고, 지원할 수 있는 범위를 넓히기 위해서라도 공부해야 할 거라고 생각한다. 앞으로 거의 모든 React 프로젝트는 TypeScript를 사용하지 않을까 싶다.

 

 

 

전체 코드는 여기서 확인해 주세요. 🥰

GitHub - ttaerrim/requests-for-partner: 요청서를 관리하는 과제 구현 내용을 담은 레포지토리입니다

 

참고

여러 조건 필터링