(비록 협업할 사람도 없이 혼자 하는 프로젝트지만) 시간에 쫓겨 와다닥 만든 컴포넌트들 정리하는중.. ㅋㅋ오늘의 타겟은 이 Pagination 컴포넌트 만들때 사용한 select와 button들 입니다. shadcn의 button과 select를 기반으로 만들었습니다. 1. Select- 기존 코드 setSelectedValue(value)} > {selectedValue} 20 50 100 - 수정 후 코드 : 반복되는 SelectItem 부분을 map을 사용하여 정리 setSelectedValue..
후후..vscode상에서 파일명에 들어간 대소문자를 변경했는데, 해당파일을 import하는 모든 곳에서 변경점을 감지하지못하고 빨간줄을 마구 내뱉을때! 침착하게 캐시를 지우고 의존성 재설치를 합니다.1. node_modules와 lock 파일 삭제하기rm -rf node_modules package-lock.json yarn.lock 2. Next.js 캐시도 삭제rm -rf .next 3. 의존성 다시 설치npm install# 또는yarn install4. 개발 서버 재시작하기npm run dev# 또는yarn dev 로컬은 이렇게 해결이 되는데 연결되어 있는 깃레포에는 또! 반영이 안되는데요~??하시는분들 ㅎ 만능 방법이 있습니다.. 예를들어 nav.tsx를 Nav.tsx로 바꿨을때 이런문제가 ..
2024년들어 처음 쓰는 블로그 ㅎ간만에 프로젝트 세팅부터 하는중인데 다까먹어서 되는게 없군요.. 열심히 다 찾아가면서 틈틈히 기록으로 남겨보는것으루.. 먼저 각 파일에서 스타일을 정의하는 방법을 알아보자. 1. tailwind.config.ts에서의 스타일 정의tailwind.config.ts 파일은 Tailwind CSS의 기본 설정과 테마를 확장하거나 수정하는 데 사용된다. 여기서는 Tailwind의 기본 색상, 폰트, 간격, 크기 등의 전역적인 디자인 시스템을 정의할 수 있다.주요 목적: Tailwind의 기본 유틸리티 클래스를 확장하거나 덮어쓰기.예시: 색상, 폰트 크기, 간격 등을 전역적으로 수정하고 싶을 때 사용./** @type {import('tailwindcss').Config} */..
ref란? : 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법. reference의 줄임말 리액트 id를 사용하면 안되나? : id를 사용할 수는 있으나 JSX안에서 DOM에 id를 달면 해당 컴포넌트를 여러번 사용시 중복 id를 가진 DOM이 여러개 생기므로 사용을 권장하지 않는다. 반면 ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 발생하지 않는다. ref는 어떤 상황에서 사용해야하는가? : DOM을 꼭 직접적으로 건드려야 할때 - 특정 input에 포커스 주기 - 스크롤 박스 조작하기 - Canvas요소에 그림그리기 등 ref 사용 1) 콜백 함수를 통한 ref설정 : ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해주면 된다. 이 콜백함..
