[우테코 6기] 레벨 1 5주차 - 점심 뭐 먹지 미션 회고 ❗️

점심 뭐 먹지 회고 시작 !

 

step1 부터 웹을 시작한 건 이 미션이 처음이라 재미있었던 거 같았다. 이제 진짜 프론트엔드 개발을 하는 느낌이랄까..

사실 바닐라 JS 로 웹을 하는 건 쉬운 일이 아니었다. 하면 할수록 리액트가 천사 같이 보인달까..

아무튼 이번 미션을 어떻게 진행했는지 작성해 보도록 하겠다.

 

 

---

 

 

✅ 베포 사이트

점심 뭐 먹지?

 

 

📍 기능 목표 :

• 캠퍼스 주변의 점심 식사 스팟 목록을 관리하는 앱을 만든다.

📍 학습 목표:

• 애플리케이션을 컴포넌트 단위로 모듈화 하여 개발
  • UI를 컴포넌트 단위로 생각하고 개발하며 재사용할 수 있는 컴포넌트를 고민해 보기 TypeScript의 기본 문법을 익히며 필요성을 경험
• 웹 UI 환경에서의 테스트 기초
  • 사용자 관점에서 중요하다고 생각하는 기능을 스스로 정의하고 E2E 테스트로 검증해 보기

 

---

 

학습 목표와 나의 학습 

이번 학습 목표는 컴포넌트 단위의 개발과 더불어 E2E 테스트에 대해서 공부해 보는 것이었다.

 

 

< STEP1 내 학습 내용 및 나의 배움 정리 >

 

step1 에서는 이런 부분을 집중적으로 고민하며 개발을 해봤던 거 같다.

 

 

    컴포넌트 분리    

 

html 파일 내부에 엘리먼트를 생성한 후 가져왔던 이전 미션과 달리 각 컴포넌트마다 분리하여 랜더 하게 작업을 해보았다. 또한 내부 데이터를 불러오고 읽어오는 작업을 핸들러를 통해 분리하여 작업하였다.

이렇게 컴포넌트 분리를 통해서 코드의 가독성을 향상하려고 노력해 보았던 거 같다.

 

대충 그려본 컴포넌트 분리 ...

 

 

 

 

    TypeScript 사용    

 

도메인과 UI 영역까지도 ts를 활용하여 구현해 보면서 코드의 안정성을 높이려고 해 보았다. 이 부분에서 as 선언에 대한 궁금증과 인터페이스 선언에 대해 궁금증이 생겨서 찾아보았던 거 같다.

물론 틀리게 이해할 수 도 있지만 구글링과 리뷰어님과의 이야기를 통해 정리해 보았다.

 

 

` as ` 에 대해 리뷰어님이 주신 힌트였다.

1. 타입스크립트를 사용하여 타입 추론이 가능한 이유는 ts 컴파일러가 전체 파일을 훑어서 추론한 정보를 개발자에게 제공해 주기 때문이다.
2. 하지만 ts 컴파일러가 모든 영역을 추론할 수는 없기 때문에, 보다 구체적인 추론을 돕기 위해 컴파일러가 닿을 수 없는 영역은 개발자가 직접 타입을 명시하여 컴파일러에게 힌트를 주어야 한다.
3. 개발자가 변수나 함수를 선언할 때 타입을 같이 선언해 주는 이유는 이에 해당한다.

이를 바탕으로 as에 대해서 정리한 나의 생각은 이전에는 as 에 대해서 강제적으로 타입을 변경 혹은 확정하는 역할이라고 생각했는데 개발자가 직접 타입을 명시하여 힌트를 주는 형태로 볼 수 있다고 정의 보았다.

 

as 키워드를 사용하지 않다 보니 컴파일러가 getElementById의 반환 타입을 정확하게 알지 못해서 이후에 계속해서 if 문으로 체크를 해주었다. 여기서 DOM이나 네트워크 통신으로 받아온 응답, 타입 선언 파일이 제공되지 않는 외부 라이브러리 등 컴파일러가 해석할 수 없는 외부의 영역은 개발자가 직접 선언해주어야 하기 때문에 as를 사용하였던거 같다.

 

물론, 이외에 컴파일러가 정확히 추론을 하고 있음에도 컴파일 에러를 피하기 위해 임의로 무작정 as를 선언하여 사용한다면 런타임 에러가 날 수 있다고도 한다.

 

 

as 를 사용하게 되면 이렇게 코드가 바뀔 수 있었다.

 

이전 코드 

export const changeFilter = () => {
  document.addEventListener("DOMContentLoaded", () => {
    const categoryFilter = document.getElementById("category-filter");
    if (categoryFilter) {
      categoryFilterHandler(categoryFilter);
    }
  });
};

 

 

as 를 사용한 코드 

export const changeFilter = () => { 
	document.addEventListener("DOMContentLoaded", () => { 
		const categoryFilter: HTMLElement = document.getElementById("category-filter") as HTMLElement; 
		categoryFilterHandler(categoryFilter); 
	}); 
};

 

훨씬 깔끔하고 이해도 잘 되는 거 같다. 

 

추가적으로 dependencies와 devDependencies의 차이에 대해서도 작성해보았다. 그건 여기로....

 

 

 

---

 

 

< STEP2 내 학습 내용 및 나의 배움 정리  >

 

 

step2 에는 추가적인 기능과 더불어 E2E 테스트를 배우는 경험을 해보았다.

 

 

     E2E 테스트     

 

이번 미션에서 cypress를 사용해서 처음으로 E2E 테스트를 진행해 보았다. E2E 테스트는 이전에 진행한 단위 테스트와 다르게 사용자 입장에서 UI를 사용하며 생길 수 있는 유저 플로우를 확인하는 테스트라고 생각하면서 보았다.

 

작업한 애플리케이션에서 사용자가 기대하는 기능들(새로운 레스토랑 추가, 디테일 모달 확인, 레스토랑 삭제, 즐겨찾기 추가/취소, 탭을 활용한 즐겨찾기 목록만 보기, 필터링/솔팅 기능)을 테스트해보았고, 또한 새로운 모달 내부 폼 유효성 검사도 진행해 보았다.

 

처음에 진행할 때는 cypress 문법에 익숙하지 않아서 시간이 걸렸지만 계속 코드를 짜면서 익숙해진 거 같다.

 

 

 

 

미션을 마치며

이번 미션이 지금까지 한 미션 중에 가장 시간이 많이 걸렸던 거 같다. 점점 가면 갈수록 어려워지는 걸까? 생각보다 고민해야 하는 부분도 많이 생겨서 주변 사람들과도 많이 대화나 토의를 해보았던 거 같다. 처음에는 혼자 고민했었는데 역시 누군가와 나누면 더 빨리 해결되는 거 같다.

 

 

벌써 다음 미션이 레벌 1 마지막인데 벌써 5주가 지난 게 믿기지가 않는다. 휴휴

이번 레벨 1을 무사히 마치고 방학 때 열심히 쉬어야지…~~!!!