5월 23일 오픈 이후 5월 27일 기준
누적사용자 4.4천
페이지뷰 2.4만
흩어져있는 날씨, 코로나, 미세먼지, 생활지수 정보들을 한 번에!
내가 원하는 정보를 중점적으로!
깔끔한 UI로!
내가 중요하게 생각하는 요소에 따라 외출 점수도 계산해주는!
날씨 어플 외출난이도!
🌅서비스 바로가기
💾프론트엔드 git repository
💾백엔드 git repository
개발기간 : 21.4.23 ~ 21.5.14
서비스 개선 작업 : 21.5.15~ 진행중
stack : react, typescript, styled-component, redux, spring-boot, redis, ec2, s3
개발자
Front-end : 조윤경, 전재민
Back-end : 채수연, 강상연, 김동현
Designer : 공은지
협업툴 : notion 구글스프레드시트 git
프론트엔드와 백엔드를 분리하여 프로젝트 개발
사용자의 현재 GPS 정보를 기반으로한 날씨 정보 제공
사용자가 설정한 우선순위에따라서 날씨 정보 카드를 우선적으로 보여줌
카카오톡으로 자신의 오늘 날씨 점수를 공유
뉴모피즘과 귀여운 날씨 캐릭터가 가미된 UI
반응형 디자인
PWA
<RangeWrapper
className="wrapper"
>
{rangeList}
<ShowButton onClick={handleRangeHidden}>
{isHidden ? <MdKeyboardArrowDown /> : <MdKeyboardArrowUp />}
</ShowButton>
</RangeWrapper>
const stopTouchStart = (e) => {
e.stopPropagation();
}
React.useEffect(() => {
// RangeWrapper
const wrapper = document.querySelector('.wrapper');
wrapper.addEventListener('touchstart', stopTouchStart);
return () => {
wrapper.removeEventListener('touchstart', stopTouchStart)
}
}, [])
const Score = (props)=>{
let timer ;
const onClickLogo = () => {
console.log(timer);
clearTimeout(timer);
dispatch(weatherActions.getIconMessage(nowIcon));
setIsShowBubble(true);
timer = setTimeout(() => {
setIsShowBubble(false);
}, 3000);
};
...
}
const [timerState, setTimerState] = useState(null);
const onClickLogo = () => {
clearTimeout(timerState);
dispatch(weatherActions.getIconMessage(nowIcon));
setIsShowBubble(true);
const timer = setTimeout(() => {
setIsShowBubble(false);
}, 3000);
setTimerState(timer);
};
수정을 하고 새로 배포했을 때, 수정사항이 반영되지 않음
cloud front 캐시 문제
CloudFront에서 특정 파일 캐시 방지
service-worker 캐시 문제 - cache 삭제 로직 추가
// service-worker.ts
self.addEventListener("activate", event => {
console.log('activate');
// delete any unexpected caches
event.waitUntil(
caches.keys().then((keys) => {
return Promise.all(
keys.filter(key => {
return key
}).map((key) => {
if (`weather-service-precache-${CURRENTVERSION}` != key && 'images' != key) {
caches.delete(key);
}
return
})
);
})
);
});