한 걸음
일반적으로 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)에서 패키지를..
프로젝트 초기세팅 시 eslint와 함께 깔아주어야 하는 것들이 몇가지 있다. 이번 기회에 내가 뭘 설치해서 쓰고있는 건지 정리하고 넘어가야겠다는 생각을 했다. eslint는 문법적 오류를 잡아주고, prettier는 코드컨벤션을 통일시켜준다. 하지만 eslint에는 포맷팅 기능이 포함되어있어서, eslint와 prettier를 함께 쓰면 충돌이 발생할 수 있다. eslint-config-next next.js의 린팅 룰 eslint-plugin-react 리액트의 린팅 룰 eslint-config-prettier eslint에서 prettier와 겹치는 포매팅룰을 삭제 eslint-plugin-prettier eslint에 prettier의 포매팅 기능을 추가 @typescript-eslint/pars..
요즘들어 초기화된 mac에 개발환경 셋팅하는 일이 잦은 것 같아 프로세스를 정리해둔다. vscode, post man, figma 설치 Homebrew 설치 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" git 설치 brew install git git 사용자설정 git config --global user.name "본인이름" git config --global user.email "본인 이메일 주소” nvm 설치 & 시스템 환경변수 등록 brew install nvm vim ~/.zshenv export NVM_DIR="$HOME/.nvm" [ -s "/opt/homebrew/..
const makeHighlightText = useCallback( (renderedText?: string) => { if (!renderedText) return ''; if (!searchKeyword) return renderedText; const keywordRegex = new RegExp(`(${searchKeyword})`, 'gi'); const textArray = renderedText.split(keywordRegex); return textArray.map((part, partIndex) => { if (keywordRegex.test(part)) return ( {part} ); return part; }); }, [searchKeyword], );
1. pnpm 설치 npm i -g pnpm 2. 기존의 node_modules 폴더 삭제 npx npkill * npkill은 node_modules 폴더를 쉽게 찾고 제거할 수 있는 경량 NPM 패키지 3. pnpm 만 사용 가능하도록 package.json 수정 "scripts": { "preinstall": "npx only-allow pnpm", ... }, 4. pnpm-lock.yaml 파일 생성 pnpm import 5. 이제 package_lock.json은 사용하지 않으므로 삭제 6. 의존성 설치 및 node_modules 폴더 생성 pnpm i react-scripts도 더이상 사용하지 않으므로, pnpm uninstall react-scripts로 삭제해준다.
