12/23 TIL | 쉼표 작업 일지 #11. 일단은 동작하게 만들기!

🔙 이전 시리즈

12/22 TIL | 쉼표 작업 일지 #10. 이루지 못할 일은 없어요✨

---

작업 회고

좌) 웹 / 우) 모바일

1. 페이지 레이아웃

어제 TIL에서도 적었다시피 스프린트 목표를 재조정했기에 메인 페이지 레이아웃을 잡고 마크업, 테스트 코드까지 작성하면서 프론트 레이아웃을 잡기 시작했다. 우선 모바일 웹 앱이기 때문에 브라우저에서는 위와 같이 가운데에 화면이 출력되게끔 레이아웃을 잡아놓았고, 모바일에서는 좌우 여백 없이 해당 콘텐츠만 보이게 레이아웃을 잡았다.

레이아웃의 경우 Layout 컴포넌트를 따로 만들어 해당 컴포넌트로 모든 페이지들을 랩핑할 수 있게 구조를 만들었다. 다만 Header와 BottomNav가 있는 페이지도 있고, 없는 페이지도 있어서 이거에 대해서 각 페이지마다 설정해줘야 하나 고민하던 도중 사용하는 곳에서 생각하라는 홀맨님의 팁으로 Layout 컴포넌트에 props 형태로 Header, BottomNav의 유무를 플래그 형태로 넘겨주면 되겠다는 결론을 내릴 수 있었다.

2. 폴더 구조

그리고 고민했던 내용으로는 폴더 구조를 어떻게 잡아야 가독성이 좋을지였다. 프론트엔드 파일 양이 기존에 해왔던 프로젝트와는 다르게 엄청 많은 상황이다. 더군다나 컴포넌트 단위로 테스트 코드를 모두 작성하기 때문에 한 컴포넌트 당 최소 2개의 파일을 갖게 되는데다가 스타일이 길어질 경우 스타일도 다른 파일로 분리할 계획이기에 지금 단계에서 폴더링을 해줘야 한다는 생각이 들었다.

원래는 절대 경로를 사용해야 깔끔한데, parcel을 사용해서 번들링할 때는 어떻게 설정해야 하는지 방법을 아직 찾지 못해 import문이 상대 경로인 상황이다(참고로 이건 핵심 작업이 끝나면 설정하겠다는 생각으로 백로그에 추가해 두었다). 무튼 이렇게 상대 경로인 상황에서 한참 작업하다 폴더를 이동하게 된다면 경로가 다 깨지고 날 거 같아서 처음부터 구조를 제대로 잡고 가고 싶은 마음인지라 그거에 대해서 좀 고민을 했었다. pages 폴더에 페이지 별로 폴더를 나누고 각 페이지에 해당하는 페이지 컴포넌트를, components 폴더에도 페이지 및 공통 컴포넌트 폴더를 나눠 각 폴더에 해당하는 컴포넌트들을 넣기로 하였다.

3. Jest svg 파일 오류

Header 컴포넌트에서 svg 파일을 아래와 같이 사용하고 있는데, 테스트가 깨지는 상황 발생했다.

import SearchIcon from '../../assets/icons/header/search.svg';

export default function Header() {
  return (
	{/* 생략 */}
	<img src={SearchIcon} alt="검색 아이콘" />
	{/* 생략 */}
  );
}

Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

지난 번에 이미지 때문에 테스트가 깨질 때는 identity-obj-proxy 패키지로 해결했었는데, 막상 이번에는 그거로도 해결이 안 되는 것이다. 생각해보니 svg 파일이 실제로는 코드로 작성되어 있기 때문이라고 판단이 되어 찾아보았더니 jest-svg-transformer 패키지로 해결할 수 있었다.

---

이번 월요일부터 금요일까지의 작업을 돌아보자면 너무나도 지엽적인 것에 매몰되어 있었다는 느낌이 강하다. 처음부터 완성형을 만드려고 하지 말고 우선은 동작하게 만들고 그다음에 수정하고, 점진적으로 개선해나가는 방식으로 작업을 할 수 있게 노력하자. 솔직히 맨날 하는 소리인 거 같은데 나는 매번 이전의 방식을 답습하는 거 같다. 일단은 동작하게 만들기. 그게 다음 스프린트 전까지 나의 목표이다!