심플 미세먼지 알리미

개인프로젝트

심플 미세먼지 알리미

YoHaYo 2023. 11. 14. 23:01

728x90

사이트 미리보기

배포용 링크

https://yohayo-fineduskalimi.netlify.app/

심플 미세먼지 알리미

yohayo-fineduskalimi.netlify.app

소스코드

https://github.com/YoHaiYo/react-finedust-app

GitHub - YoHaiYo/react-finedust-app

Contribute to YoHaiYo/react-finedust-app development by creating an account on GitHub.

github.com

사이트소개

미세먼지 API를 받아서 도시별로 미세먼지 정보를 알려주는 앱입니다.

작업 히스토리

23.07.03 :

미세정지 기본 데이터 API 통신
미세먼지 치수에 따라 색이 바뀌는 기본 카드 완성.

카드 css 작성하다가 중단. 센터 배치하는거 확실히 짚고 가기.

해야할것 : BaseCard를 컴포넌트로 빼서 다양하게 카드를 꺼내 쓸수 있게 하기. V

23.07.10 :

카드배치 grid 형식으로 완료.
css 디자인 수정

23.07.13 :

드롭다운으로 시/도별 데이터 받아오기 완료. (이거 한다고 진짜 쌉고생함; useState 유튜브 강의 여러개 찾아보고 gpt센세한테 많이 물어본 끝에 드디어 성공 !)
임시 json 데이터 연결 완료

주목할것 : selectedSido 로 데이터 흐름 파악하고, useState 더 이해하기 !

23.07.15 :

서버통신 오류인데 내 코드오류인줄 알고 계속 뻘짓함.
일단 width = 412px로 최신폰 기준으로 UI 작업까지 해놓음.

해야할것 : 바텀네비바 반응형으로 아래스크롤하면 사라지게 하기. (지금 최하단 카드 안보임!)
=> 그냥 패딩으로 조절했음.

23.07.17 :

즐겨찾기 추가/삭제 기능 추가함 => 배열에 넣고 빼는게 핵심이었음 !
네비바 클릭하면 활성화된 네비바 색깔 바꾸기 완료.

해야할것 :

반응형으로 메뉴버튼 활성화 : hover로 옆에서 튀어나게 하기 구현실패. 질문하기 !
전체 지역보기 n씩 보기 드롭다운 V
로딩화면 (지금은 로딩걸리면 즐찾이 나옴..)

23.07.18 :

마무리작업.
질문한것 정리하기.
에러코드에 대한 질문

해야할것 / 추가할 것:

★gpt센세가 짜준코드 흐름 이해하고 넘어가야됨 !
css 모바일 최적화
미세먼지 상태별로 리스팅 기능

개발후기

@ 개발 도중 어려움. 극복과정 쓰기 : 기상악화 서버통신 문제, 배포시 운영계정 문제 등

개발하면서 기초를 철저히 하는것이 중요하다는걸 느꼈습니다. 그리고 코드가 아닌 API 통신서버가 문제된다던지, 모바일기기마다 다르게 UI가 보여서 특정기기에서는 깨져서 보일 수 있다던지하는 보이는것 외에도 신경쓸게 참 많다는걸 알게되었습니다.

파이널프로젝트 리뷰

@ 파이널 리뷰를 통해 얻은 피드백을 반영하는 과정을 글로 정리하기.

질문 답변

1. 앱 시작시 콘솔에 다음 에러가 뜨는데 이유가 뭔가요? 앱 기능에 영향을 주진 않는 것 같습니다.
:Warning: Invalid DOM property `class`. Did you mean `className`?

React에서는 class 대신 className을 사용해야 합니다.
class 대신 className을 사용하는 유일한 이유는 class는 JavaScript에서 예약된 키워드이고 React는 JavaScript 확장인 JSX를 사용하기 때문에
class 속성 대신 className을 사용해야 합니다.
다만 넵 앱 기능에는 영향을 미치진 않습니다만 warning이 뜨는 것은 보통 앱 동작에는 영향을 주지 않지만
좋지 않은 코드 스타일로 작성하고 있다고 경고를 주는 것이라 고쳐주는 것이 좋습니다.
https://stackoverflow.com/questions/46989454/class-vs-classname-in-react-16

2. 메뉴창이 옆에서 스스륵 튀어나오고 나머지 화면 어두워지게 하는 법을 구현하고 싶습니다.

우선 해당되는 UI를 drawer라고 부르는데요. mui나 chakra-ui같은 곳에 github을 통해서 어떻게 구현했는지 살펴보시면 좋은 공부가 될 것 같습니다.
일반적으로 다른 레이어를 위에 렌더링 할 때는 보통 createPortal api를 사용해서 구현을 하는 편인데 해당 api도 공부해보세료

참고문서

https://mui.com/material-ui/react-drawer/

https://chakra-ui.com/docs/components/drawer/usage

https://react.dev/reference/react-dom/createPortal=

3. 왜 img폴더의 finedust-logo.png를 제외한 다른 이미지들은 첨부가 안되는지요?
(다른 이미지는 계속 엑박으로 나옵니다.)

어떤 에러인지랑 상황을 적어주시면 보다 파악이 용이할 것 같습니다.

아래 마크업을 추가로 작성해주었는데요
로고가 뜬 이유는 로고에 경로가 public 폴더에 img에 assets이 있어서 그렇습니다. src 폴더에 있는 이미지는 import를 통해서 경로를 지정해주어야 합니다.
<img src="/img/finedust-logo.png" alt="title-logo"/>
<img src="/img/finedust-logo-spare1.png" alt="title-logo"/>
<img src={spare1} alt="title-logo"/>

4. 즐겨찾기 기능을 구현할려고 ★버튼을 누르면 배열에 해당 객체데이터가 추가되고 다시 누르면 삭제되게 하였습니다.
다른 앱들도 이런 원리로 데이터를 저장하나요? 더 효율적인 방법이 있는지요

우선 보통 좋아요는 API로 서버에 요청을 보내서 서버상태를 가지고 처리하는 편인데요.
이 경우 학습을 위해서 클라이언트 상태에서만 처리를 했다고 보시면 될 것 같습니다.
지금 과제 같은 경우 전역으로 좋아요 상태를 관리하는 것이 좋을 것 같습니다. 페이지가 바뀌어도 필요한 정보니까요.

그래서 react-redux랑 redux-persist를 통해서 로컬스토리지에도 동기화를 시켜서 관리할 것 같습니다.

https://redux.js.org/introduction/getting-started

배열로 저장해서 조회해서 삭제하는 방식도 있을테고, 객체로 저장해서 조회해서 삭제하는 방식도 있을 것 같네요. 각각의 어떤 장단점이 있을지 공부해보시면 좋을 것 같습니다.

5. 앞으로의 학습 방향에 대한 조언 부탁드려요.

우선 리액트 공식문서를 읽어보며 해당 API들을 잘 익히면서 컴포넌트 구조를 짜는 연습을 해보시면 좋을 것 같습니다.

공식문서랑 같이 리액트를 다루는 기술 책을 따라가면서 개념을 익혀보시면 좋을 것 같습니다.

https://thebook.io/080203/

그리고 간단한 버튼, mui에 있는 요소들을 하나씩 재사용성 있게 디자인 해보면서 짜보는 연습을 해보시면 좋을 것 같습니다.

https://mui.com/material-ui/react-button/ -> 이를 스토리북 라이브러리로 문서화 하는 것도 추천드리고요
(즉, 내가 작업한 UI나 사이트들을 비쥬얼 리뷰할 수 있도록 하는것. 보여주기도 좋고 내가 복습하기도 좋을 거 같다.)
스토리북이란?
https://storybook.js.org/docs/react/get-started/whats-a-story

react, react-redux, recoil 등 상태관리 라이브러리를 사용해보면서 전역 상태 관리를 컨트롤 하는 부분을 연습해보시고

react-query, react-router등을 공부해서 보다 편리하게 어플리케이션을 만들어보며 공부하면 좋을 것 같습니다.

코드리뷰

1. 우선 App.js 에 모든 코드가 있어서 가독성이 떨어집니다. 책임과 역할에 맞춰서 컴포넌트를 분리해주시면 좋을 것 같습니다.

2. getCardColor, getDustState, getEmojiState 모두 같은 pm10Value 로직에 따라서 움직이는데 한 번에 return 값을 묶어서 처리해주셔도 될 것 같네요.

3. 그리고 아래영상을 참고해서 if-else 함수를 switch cases나 객체 맵핑으로 리팩토링 해보시면 좋을 것 같습니다.

https://www.youtube.com/watch?v=p0YEviesgRM&t

4. 북마크 체인지에 함수안에 useEffect를 넣어서 사용하였는데 좋지 않은 패턴입니다. 사이드 이펙트는 따로 빠져서 컨트롤 해주시는게 좋을 것 같네요.

마크업 부분도 함수내에 있지 않고 로직과 분리되어 있어야 가독성이 좋을 것 같습니다.

5. 커스텀 훅으로 사이드 이펙트를 주는 부분을 분리해보시면 좋을 것 같습니다.

아래 참고 문서를 바탕으로 점진적으로 로딩이나 에러 상태 처리 그리고 async await 등을 활용해보시면 좋을 것 같습니다.

보통 screen 으로 페이지 컴포넌트 분리한 것 처럼 api fetch하는 함수를 따로 분리해서 관리하는 편입니다. (유지보수에 용이)

https://www.robinwieruch.de/react-hooks-fetch-data/

6. 볼필요한 주석은 코드상에서 제거해주는 습관들여주세요.