230919(화) 성장

🚤 성장일지 7.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

⚛ (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이라는 서비스도 있었는데, 이것도 너무 잘 되어있어서 배포하는데 어려움이 없었다. 따로 설정에 대한 글을 적을 필요가 없을듯…!

📝 회고

오늘 정말 하루종일 몸이 무겁고 졸려서 힘들었는데, 그런 것치고는 이것저것 많이 한 하루를 보낸 것 같아서 기분이 좋다 :)

참고

🚤 성장일지 7.0
⚛️ 키워드: 직관적이고 쉽고 간단하게 작성
📝 회고
참고