230919(화) 성장
🚤 성장일지 7.0
책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록
살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!
⚛ (7.0)<완전 개편>
파인만 학습법을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다.
⚛️ 키워드: 직관적이고 쉽고 간단하게 작성
favicon이 변경되지 않을 때 해결법
프로젝트를 시작하면서 디자이너분께서 만들어주신 아이콘으로 favicon에 적용했다. 그런데 아무리 새로고침을 해보고, 페이지 캐시도 지워봐도 변경되지 않았다.
그러다가 방법을 찾았는데 아래와 같이 version을 명시해줌으로써 브라우저가 새로운 favicon을 가져오도록 할 수 있다.
기존
<link rel="icon" href="%PUBLIC_URL%/icons/favicon.ico" type="image/x-icon" />
변경
<link rel="icon" href="%PUBLIC_URL%/icons/favicon.ico?v=2" type="image/x-icon" />
PWA
PWA란 Progressive Web App의 약자로, 웹과 앱의 장점을 결합한 것이다. 웹의 장점은 브라우저에서 접근할 수 있다는 것이고, 앱의 장점은 오프라인에서도 사용할 수 있다는 것이다. 이러한 장점을 결합한 것이 PWA이다.
CRA와 함께 PWA를 쉽게 적용할 수 있는 템플릿이 있다.
npx create-react-app my-app --template cra-template-pwa-typescript
위와 같이 어플리케이션을 형성하면 manifest.json과 serviceWorker.ts 파일이 생성된다. 이 파일들을 통해 PWA를 적용할 수 있다.
각 파일의 역할은 다음과 같다.
manifest.json: 웹 앱의 정보를 담고 있는 파일serviceWorker.ts: 웹 앱의 오프라인 캐싱을 담당하는 파일
이후에 위의 파일들에 대한 설정과 아이콘에 대한 설정을 해주면 되는데, 이 부분은 어렵지 않으니 아래 참고 자료를 보면 된다!
Storybook
Storybook 공식문서가 너무 잘되어있어서 놀랐다. 사실 styled-components와 함께 사용하는 것이라서 번거로운 설정들이 많을 거라 생각했는데, 공식문서가 너무 잘 되어있어서 어렵지 않게 설정할 수 있었다. 또, Storybook에서 Story를 배포하기 위해 만든 chromatic이라는 서비스도 있었는데, 이것도 너무 잘 되어있어서 배포하는데 어려움이 없었다. 따로 설정에 대한 글을 적을 필요가 없을듯...!
📝 회고
오늘 정말 하루종일 몸이 무겁고 졸려서 힘들었는데, 그런 것치고는 이것저것 많이 한 하루를 보낸 것 같아서 기분이 좋다 :)
참고
undefined