들어가며 가끔 .env 파일이나 개발 내용과는 전혀 상관 없는 이미지 파일, 개인적인 자료들이 실수로 Git 히스토리에 커밋 되어 원격에 올라가는 경우가 있습니다. 로컬에서 파일을 삭제하고 커밋을 할 경우 최신 이력에서는 삭제 되지만 히스토리를 살펴보면 파일 조회가 가능하기에 보안상 심각한 이슈를 낳을 수 있어요. git filter-branch ...
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은 단순히 홈페이지라는 개념을 넘어서 응용프로그램의 영역을 대체한지 ...