생각과 기록

개요 useWindow라는 커스텀 훅을 만들어 isMobile, isTablet, isDesktop 으로 컴포넌트나 props를 분기시키며 개발하고 있었다. // useWindow.ts const useWindow = () => { const isMobile = useRef(false); const isTablet = useRef(false); const isDesktop = useRef(false); const isClient = useRef(false); const [windowSize, setWindowSize] = useState({ width: 0, height: 0, }); useEffect(() => { if (typeof window !== 'undefined') { isClient.cur..

기존 개인 프로젝트에서 영어와 한국어를 섞어서 사용하고 있었고, 게다가 텍스트를 그냥 코드 중간에 삽입하는 형식으로 관리하고 있었다. 사실상 관리는 아닌 것이다. nextjs에서 사용하는 다국어 패키지를 찾아보았고, 그중 괜찮은 것을 사용하기로 하였다. 기본 설정 next-i18next 설치 npm install next-i18next npm과 yarn등으로 쉽게 설치할 수 있다. next-i18next 경로 예시 . └── public └── locales ├── ko | └── common.json | └── index.json | └── footer.json └── en └── common.json └── index.json └── footer.json json형식으로 사용하는 텍스트를 관리할 수 ..

서비스를 운영하다보면, 요구사항이 추가되거나 변경되는 경우가 많다. 그리고 어떤 환경에서 개발을 하더라도 테스트를 하던 코드를 실수로 커밋하거나 다양한 실수를 할 수 있다. 이를 해결하는 것이 테스트 코드를 미리 작성하여, 테스팅을 하며 개발하는 것인데 TDD에 대한 짧고 명확한 개념과, Nextjs에서 hooks과 testing-library/react와 Mobx와 TypeScript를 사용해본 방법을 작성해보았다. TDD 실패 개발 시작 전부터 테스트코드를 먼저 작성하여, 성공 테스트코드에 의한 테스트를 진행하면서 개발하고 성공을 이루어내고, 리팩토링 성공 후 개선할 수 있는 부분은 최대로 개선하면서 그 도중에도 테스트를 한다. install and setting npm install --save-d..

7월부터 계속해서 개인 프로젝트를 성장시키는 중이다. 딱 어떠한 서비스 같은 토이 프로젝트가 아니고, 확장성을 최대한으로 할 수 있는 도메인을 판 것이다. 자세한 내용은 이 전 포스트를 참고하면 될 것이다. { window.gtag('config', GA_TRACKING_ID, { page_path: url, }); }; type GTagEvent = { action: string; category: string; label: string; value: number; }; // https://developers.google.com/analytics/devguides/collection/gtagjs/events export const event = ({ action, category, label, valu..

🧐 사용 install npm install next-pwa next js로 만들어진 프로젝트가 있다는 가정하에 설치해줍니다. next.config.js const withPWA = require('next-pwa'); const nextConfig = { pwa: { dest: 'public', }, ... }; module.exports = withPWA(nextConfig); 해당 파일에 pwa에 관한 설정을 추가해줍니다. manifest.json PWA Manifest Generator | SimiCart PWA Manifest Generator Automatically generate a fully functional web app manifest along with size-optimized ..