[항해99 1기] [Chapter6] 실전 프로젝트 (29) (2021.5.27)

실전 프로젝트에 대한 일지

한 것

예상 질의 응답 준비

왜 Redux를 사용했나요?

컴포넌트가 구조가 복잡하지 않지만 날씨 데이터의 종류와 형식이 다양해 props로 전달하기 보다는 각 컴포넌트에서 필요한 데이터를 store에서 가져오는 방식이 편할 것 같아서 상태 관리 라이브러리가 필요했고, context api나 mobx보다 보편적으로 많이 사용하는 redux가 학습적인 측면에서도 좋을 것 같아서 redux를 사용했습니다.

리덕스를 사용해 글로벌 상태를 관리하는데 용이했고, 상태관리 로직을 컴포넌트에서 분리해 따로 관리할 수 있었으며, 네트워크 통신 로직을 미들웨어를 이용해서 처리했습니다.

프로젝트를 진행하며 flux 패턴의 단방향 데이터 흐름에 대해 이해하고, action, dispatch, redeucer등 다소 복잡한 리덕스의 개념들을 익숙해질 수 있었습니다.

thunk는 무엇인가요?

비동기처리를 할 수 있는 리덕스 미들웨어중 하나입니다.

thunk는 액션객체가 아닌 액션생성자를 리턴합니다. 일반 액션생성함수는 바로 액션객체를 리턴하지만 thunk는 dispatch와 getState를 매개변수도 받아 dispatch를 지연하거나, 특정 조건에서만 dispatch할 수 있습니다.

typescript를 사용한 이유는 무엇이며, 어떤 점이 달랐나요?

날씨 데이터의 종류와 타입이 다양해 타입을 정의해 사용하는 것이 오류를 줄일 수 있을거라고 생각했습니다. 코드를 작성할 때부터 지정해둔 타입과 다를 경우 에러가 나 실행 전에 미리 데이터 타입 관련한 오류를 잡을 수 있었고, vs code에서 자동완성 기능이 편리했습니다. 또 api로 받아오는 데이터나 컴포넌트에서 사용하는 state, 함수 파라미터를 볼 수 있어 데이터 사용할 때나, 다른 사람의 소스를 이해할때나 유지보수 측면에서도 수월했습니다.

atomic design 패턴을 완벽하게 적용하지 않은 이유는 무엇인가요?

맨 처음 설계할 때 아토믹 디자인 패턴을 적용하려 했으나, 앱 규모와 재사용성 측면에서 atom - molecules-organisms-templates-pages 패턴을 지키며 세분화하는게 더 비효율적이라는 판단했습니다. 대신 element(atom)-component(molecules,organism,template)-page 구조로 컴포넌트를 설계했습니다.

PWA란?

웹에서 네이티브 앱과 유사한 모바일 친화적인 사이트를 구축할 수 있게 합니다. 구글에서 정한 Lighthouse 지표를 준수해야 웹사이트에 PWA를 적용할 수 있습니다. 대표적으로 HTTPS 통신 방식을 사용할 것, 서비스 워커를 사용할 것, manifest.json 에 여러 환경에서 지원하는 아이콘을 설정해 놓을 것 등이 있습니다.

서비스워커란?

브라우저가 백그라운드에서 실행하는 스크립트이며 웹 페이지와는 별개로 작동합니다. 캐시를 사용하거나 푸쉬 알림을 보여주거나 오프라인에서의 작업을 지원할 수 있습니다.

본 프로젝트에서는 애플리케이션에 사용되는 폰트, 이미지 파일들을 저장하는 캐시기능을 지원하도록 하였습니다.

반응형 디자인을 위해서 한 것은?

우선, 기본 레이아웃은 아이폰 x를 기준으로 진행하였습니다. 최신 스마트폰 기종은 아이폰 x와 같이 세로가 긴 경우가 많았기 때문입니다.

그리고 각 브라우저마다 설정된 기본 스타일이 있기 때문에 통일을 위해서 Reset.css를 애플리케이션 전역에 설정하였고 선택자로 html을 지정하여 font-size: 62.5%를 적용했습니다. rem 단위를 사용하기 위해서인데요, rem을 사용하여 margin, padding, font-size 등을 반응형으로 정의하기 위함입니다. html의 기본 폰트 크기는 16px 인데 이것의 62.5%는 10px이 됩니다. 그러므로 1rem == html 폰트의 크기이므로 계산이 편하지며 미디어 쿼리로 html 폰트크기를 조절할 수 있어 유연하게 화면을 만들 수 있습니다.

서버로부터 데이터를 받아올때 비동기처리 어떻게 했는지?

앱이 켜지는 순간, 사용자의 GPS 정보를 기록 후 선호도 설정과 날씨 정보를 불러온 뒤, 카카오 공유 기능을 활성화 하는데, 각 함수가 순서대로 실행되도록 async, await를 사용 하였습니다.

불러온 데이터를 어떻게 가공하여 화면에 출력했는지?

사용자의 GPS정보를 기록 후 사용자의 날씨 정보 선호도를 서버로부터 불러옵니다. 그 이후에 위치정보를 기반으로 서버로부터 날씨 정보를 불러옵니다.

날씨 정보를 받아오는 api가 호출되면, store에 그 정보를 저장 후, 사용자의 날씨 정보 선호도를 불러옵니다. 그 이후 날씨 카드 정보를 생성합니다. 날씨 카드 정보를 생성하기 위해 변환 함수를 실행합니다. 변환 함수에서, 유저 날씨 정보 선호도의 순서를 기준으로 카드 정보를 원하는 형식으로 변환합니다. 변환된 데이터는 store에 저장되어 컴포넌트에서 호출 후 출력됩니다.

CSS에 시간 얼마나 들였는지?

CSS는 프로젝트 총 개발 시간에서 40퍼센트 정도를 투자한 것 같습니다.우선 1주차, 2주차에는 요소를 구성하는 최소 단위 컴포넌트를 만들 때 재사용성을 최우선으로 염두하여 만들어 놓았고 전체적인 레이아웃 즉, 틀만 잡은 뒤에 데이터를 기획안대로 출력하는 것에만 집중했습니다. 데이터 출력이 완성되고 나서는 디자인의 디테일을 맞추는데 주력했습니다.

작업하기 제일 까다로웠던 화면은?

최신 기기는 가로대비 세로가 길게 나오는데, 예전 기기는 비교적 가로가 긴 편이라서 두 종류의 화면에서 동일한 디자인을 나타내는 것이 까다로웠습니다. 기기별로 미디어 쿼리를 정의하여서 해결할 수 있었습니다.

아이콘이 많은데, 아이콘 관리 어떻게 하고 있는지?

아이콘은 svg 확장자를 사용하고 있습니다. icons라는 디렉토리에 이 아이콘들을 모아놓고 icon.tsx 컴포넌트에서 import를 하여 사용합니다. svg 파일을 리액트 컴포넌트로서 사용하기 위해, ReactComponent as 로 불러왔습니다. 그 다음에는 불러온 svg 컴포넌트들을 IconList라는 딕셔너리에 key 값으로 넣었고 key가 호출되면 컴포넌트가 불릴 수 있도록 하였습니다.