나만보는개발공부블로그

내가 만든 사이트의 사용자들이 겪는 불편함 및 사이트 성능 이슈들을 확인하고 싶은데 여러가지 방법을 찾아봤다. 첫번째로는 Nextjs performance 관련 공식 document에는 reportWebVitals 의 함수가 존재한다. 이 함수에서 metric 데이터들을 받아올 수 있는데 이 값을 통해서 통계를 만들어 낼 수 있다. export function reportWebVitals(metric) { console.log(metric) } 내가 생각한 간단한 방법은 Google Analytics를 통해서 데이터를 전송해주는 방법이였는데 이 방법으로 진행할 경우 event 타입으로 받아오는 value들을 GA 통계화면에서 한번에 보기 힘들어서 어려움을 겪었다. GA 태그로 전송하는 방법은 다음 코드와..

Nextjs에서는 layout이라는 기능을 제공합니다. 페이지마다 공통되는 부분이 많은데 Layout을 이용하여서 재사용이 가능하게 하고 사용된 컴포넌트의 state가 유지되는 장점이 있습니다. 여기서 페이지의 왼쪽은 계속 공통된 부분(예시로 사이드 메뉴바)를 보여주고 왼쪽(예시로 메인 컨텐츠)은 링크마다 다른 페이지를 보여줘야하는 경우가 layout을 대표적으로 사용될 수 있습니다. //pages/something.tsx export const Something = () => { return ...; } Something.getLayout = function getLayout(page: ReactElement) { return {page}; }; 만약에 메뉴부분과 메인 컨텐츠부분의 보여주는 부분이 계속..

Nextjs에서의 스크롤 유지 방법 Nextjs에는 페이지 사이를 이동할 때 스크롤 높이를 유지하는 옵션이 있습니다 next/router 의 컴포넌트의 요소에 scroll false 옵션을 전달할 수 있고 router.push()에는 scroll false props가 있습니다. router.push('/url', undefined, { scroll: false }); 하지만 위의 옵션들은 스크롤이 window를 참조하는 경우에 작동하지만 특이 케이스에 따라 div 구성 요소를 참조하는 경우에는 작동하지 않을수 있습니다. 이 경우 ref를 임의로 만든 커스텀 스크롤 훅으로 전달해야 합니다. 저같은 경우의 페이지 스크롤은 div를 참조하고 있었고 이 div의 높이는 페이지의 불러오는 사이즈에 따라서 div..

Cypress 공식 홈페이지의 test coverage 가이드 라인을 참고하며 따라해도 window.__coverage__가 undefined로 뜨는 현상이 있었다. 그리고 Cypress e2e 테스트를 실행하고 맨 아래에 아래와 같은 경고가 떳다. ⚠️ file xxx/.nyc_output/out.json has no coverage information Did you forget to instrument your web application? Read https://github.com/cypress-io/code-coverage#instrument-your-application 위의 url을 찾아 들어가보면 instanbul의 babel plugin에 들어가야 한다고 한다. //.babelrc { "..

nextjs에서 SEO와 관련해서 svg파일을 어떤식으로 보여줘야할지 고민하게 되었다. svg SEO를 구글링해본 결과 |https://vecta.io/blog/best-practices-for-svg-seo-in-google-image Best practices for SVG SEO in Google Image Will SVG be indexed in Google Image search? Which way of embedding SVG is best for SEO and what to keep in mind when using them? What's the simplest way to get your SVG images optimized for search engines? vecta.io 위와 같은 글..

SVG 파일을 responsive하게 size를 변경할려다가 svg의 viewBox가 있어야한다는걸 인지하게 되었고 @svgr/webpack에서 options 설정을 따로 해주지 않을경우 viewBox가 표시되지않는걸 확인하였다. 그래서 다음과 같이 설정하였는데 module.exports = { webpack(conf) { conf.module.rules.push({ test: /\.svg$/, use: [ { loader: "@svgr/webpack", options: { svgoConfig: { plugins: [ { removeViewBox: false, }, ], }, }, }, ], }); conf.resolve.modules.push(__dirname); return conf; }, }; 제목..