Who I really am
마우스 클릭으로 동작하는 가상키보드 컴포넌트를 만들었는데,추가적으로 키보드 입력도 감지해달라는 요청사항이 있었다. 마우스 입력만 받는 가상키보드에서 키보드 숫자입력 받기 useEffect(() => { const handleKeyDown = (e) => { const isNumber = /^[0-9]$/.test(e.key); if (isNumber) { passwordInput(Number(e.key)); } else if (e.key === 'Backspace') { passwordInput('back'); } }; window.addEventListener('keydown', handleKeyDown); retur..
Next.js는 빌드 후 결과물에 console이 뜨지 않도록 하는 기능을 자체적으로 제공하고 있다. next.config.js 파일의 compiler에 아래와 같이 removeConsole 옵션을 주면 간단하게 해결된다. removeConsole: process.env.NODE_ENV === 'production', (* NODE_ENV === 'production' 조건 없이 그냥 true값으로 주면, 개발환경에서도 콘솔이 뜨지 않게 되니 주의하자) 만약 모든 console을 제거하는 게 아닌, 특정콘솔(ex. console.error)은 띄워주고 싶다면 아래와 같이 작성하면 된다. removeConsole: process.env.NODE_ENV === 'production'..
미들웨어(Middleware)란?페이지를 렌더링하기 전, 서버측에서 실행되는 함수(Next.js 12버전부터 안정화)캐싱된 페이지보다 먼저 수행되며, request와 response 객체에 접근할 수 있음이와 같은 원리를 활용하여 부가적인 처리를 할 수 있음간단히 말하면 ‘특정 요청 전에 무언가를 수행할 수 있게 해주는 기능’공식문서(링크) 사용 예시화면 렌더링 전 사용자 권한 확인i18n 라우팅(사용자가 사전에 설정한 언어로 화면을 그려줄 때)특정 상황에서 response, request header의 수정이 필요할 때A/B 테스트가 필요할 때 사용법export async function middleware() { ...}// matcher에 포함된 경로에서만 미들웨어 실행export const c..
openapi-generator란RESTful API를 보다 쉽고 편리하게, 일관되게 설계하고 개발할 수 있도록 자동화 도구를 제공하는 오픈소스간단히 설명하면 배포된 swagger 문서를 기반으로 클라이언트에서 바로 사용가능한 type을 자동으로 생성해줌 필요성[POST] token/issue라는 API가 있다고 하자.// request{ "tokenType": "string", "network": "string", "tokenName": "string", "tokenDecimals": "number", "initialSupply": "string", "maxSupply": "string", "symbolImage": "string", "walletAddr": "string", "o..
일반적으로 css의 text-ellipsis를 적용하면 뒷부분만 말줄임표 처리가 되는데, (ex. "가나다라마...") 나는 위와 같이 앞부분과 뒷부분은 사용자에게 보여주고, 중간 부분만 말줄임표하는 처리가 필요했다. (ex. "가나다...바사") 자바스크립트를 이용해 다음과 같은 과정으로 처리했다. 1. 실제 텍스트를 먼저 렌더링한 뒤 (서버에서 받아오는 값에 따라 width가 넘칠수도, 안넘칠수도 있다) 2. ref.current.offsetWidth를 통해 렌더링된 div의 width를 구한다. 3. 만약 내용이 넘치면 isOverflow를 true로 설정한다. 4. isOverflow가 true일 땐 첫 10글자, 뒤 4글자를 잘라낸 값을 보여준다. const TargetCell = ({width..
세로로 긴 스크롤을 쭉쭉 내리다가, 특정 컴포넌트가 mount 됐을 때 애니메이션이 실행되도록 해야한다. 같은 방식으로 동작하는 컴포넌트들이 여기저기 여러번 쓰여서, 커스텀 훅으로 만들어 쓰기로 했다. (Next.js14 & Styled-components 사용 환경이다.) Custom hook // useScrollAnimation.tsx 'use client'; import { useEffect, useState, RefObject } from 'react'; const useScrollAnimation = (ref: RefObject) => { const [isInViewport, setIsInViewport] = useState(false); useEffect(() => { if (!ref.cur..
npm 개발자가 하나의 패키지를 설치한다고 해도, 꼬리에 꼬리를 무는 종속성(dependency) 패키지까지 모두 설치된다(Ghost Dependency) 이 과정에서 어떤 패키지가 중복 저장되거나, 설치를 의도하지 않은 패키지를 사용할 수 있게 되는 등 잠재적인 문제가 발생할 수 있다. npm은 패키지 설치 시 패키지들을 각각 별도로 설치한다. 이로 인해 공유된 의존성이 중복으로 설치될 수 있고, 의존성 트리가 깊어질수록 패키지 설치 속도가 느려지며 디스크 공간을 많이 차지할 수 있다. pnpm (performant npm) npm의 의존성 문제를 해결하기 위해 고안된 패키지 매니저. pnpm은 패키지를 node_modules에 직접 설치하는 대신, 전역 저장소(Virtual Store)에서 패키지를..
