Univdev
취소

Safari SVG Blurry 현상 해결 방법

들어가며 회사에서 서비스 되는 앱에서 사용할 WebView 페이지를 작업하던 중 발견한 이슈입니다. iOS 앱에서 WebView 페이지를 접속하면 SVG로 추출한 이미지인데도 불구하고 화질 저하가 일어난다는 기묘한 이슈였습니다. 구글에 Safari SVG 화질 저하에 대해 검색해보니 꽤 오래 전부터 이 이슈에 대해 논의 되고 있었다는 것을 알 수 ...

원활한 협업을 위한 .nvmrc

nvmrc .nvmrc 파일이란, 프로젝트 구동을 위한 Node의 버전을 기록할 수 있는 파일을 말합니다. NodeJS 프로젝트에서 타인이 만든 프로젝트를 구동할 때 버전 문제가 발생해서 실행을 못한다거나, 일부 라이브러리를 사용하지 못했던 경험이 한 번 쯤은 있을텐데요. README.md 파일에 버전명을 적어두는 것 보다 협업 대상자가 명령어 한 줄...

내가 주로 쓰는 Next.js ESLint 설정

Package 설치 더욱 정교한 Formatting을 위해 플러그인을 설치합니다. yarn add -D eslint-plugin-simple-import-sort eslint-plugin-unused-imports # or npm install -D eslint-plugin-simple-import-sort eslint-plugin-unused-i...

기술 블로그에 Giscus를 추가했습니다!

개요 기술 블로그를 Github Pages로 이전하면서 정적인 웹사이트로 바뀐 이후, 기술 블로그에 방문하는 분들의 리액션을 알 수 있는 창구가 필요해졌습니다. 그래서 지난번에 게시물 하단에 applause-button를 추가했었죠. 가장 큰 호응을 얻고 있는 Pinia 게시글 하지만 박수 횟수로는 방문자들의 니즈를 알 수가 없다는 문제가 있습니...

소스코드의 퍼포먼스를 벤치마킹하는 방법

개요 프로젝트를 진행하다보면 하나의 Feature를 해결하기 위한 다양한 방법들을 마주할 때가 많아요. 예를 들어, 특정 Element를 복제하고 싶을 때 사용할 수 있는 API는 크게 createElement와 cloneNode가 있습니다. 둘 중 어떤걸 써도 문제의 해결은 가능하지만 가급적 좋은 길을 선택하고자 할 때, 어떤 API가 보다 좋은 ...

Nextjs에서 React Portal 사용해보기

React Portal 웹을 제작하다보면 대부분의 경우 계층 구조로 컴포넌트를 배치하여 렌더링하는 방식으로 문제를 해결할 수 있습니다. 그런데 간혹 n레벨에 배치 되어야 하는 컴포넌트가 실제로 렌더링 될 때는 Document의 최상단에 배치하고 싶을 수 있습니다. Tooltip Modal Tooltip이나 Modal 컴포넌트가 바로 그 대표적인...

Nextjs의 hydration이란?

Hydration Hydration을 검색하면 나오는 이미지 Hydration은 위 이미지처럼 ‘수분 공급’을 의미합니다. Hydration을 이해하기 전에 CSR, SSR이 무엇인지 간단하게 짚고 넘어가야 합니다. CSR Client Side Rendering의 약자입니다. Web은 단순히 홈페이지라는 개념을 넘어서 응용프로그램의 영역을 대체한지 ...

Element가 서로 같은지 비교하기

개요 실제로 웹을 개발하다보면 DOM Element를 직접 핸들링 해야하는 일이 은근히 생깁니다. 그럴 때, 내가 선택한 Element와 어떤 Element가 서로 동일한 Element인지 비교를 하고 싶을 때가 있는데, Javascript에서는 다행히도 isEqualNode와 isSameNode Method를 지원합니다. 사용해보기 코드 const ...