전체 글 35

[React] TypeScript Module Augmentation 정리 (TanStack Table 사례)

TypeScript를 사용하다 보면 라이브러리 타입에 내 프로젝트에서 필요한 속성을 추가하고 싶을 때가 있다.이때 사용하는 기능이 Module Augmentation이다. TypeScript Module Augmentation(모듈 보강)이란 ?TypeScript에서 이미 존재하는 모듈의 타입 정의를 확장하는 기능이다.즉, 새로운 타입을 만드는 것이 아니라 기존 라이브러리의 타입에 추가 속성이나 타입을 merge하는 방식이다. 보통 다음과 같은 상황에서 사용된다.외부 라이브러리 타입에 프로젝트 전용 속성을 추가하고 싶을 때전역 객체(window 등)에 새로운 프로퍼티를 추가해야 할 때라이브러리에서 확장을 의도적으로 열어둔 타입을 확장할 때 Module Augmentation은 declare modul..

Develop/React 2026.03.13

[React] useRef(null)로 시작하는 이유

이전 포스팅에 이어 React의 ref에 대해 좀 더 자세히 알아가보자. React에서 ref를 초기값 null로 두는 이유는 아래와 같다. 1. DOM 노드가 아직 존재하지 않기 때문 (흔함)const inputRef = useRef(null); React에서 useRef는 보통 이렇게 선언한다.컴포넌트가 처음 렌더링되는 시점에는 DOM 요소 생성 전이기 때문에 ref.current가 가리킬 대상이 없다.때문에 초기값을 null로 두는 것은 정상적이며, 렌더링 후 DOM이 연결되면 React 가 자동으로 값을 채운다. 2. React가 마운트/언마운트 상태를 명확히 표현하기 위해 null은 참조 대상이 없음 이라는 명확한 상태값이다. 시점ref.current초기 렌더 전null마운트 후DOM elem..

Develop/React 2026.03.09

[React] ref를 사용하는 이유와 역할

React 개발을 하다 보면 중간중간 ref를 선언하고 사용한다.주 목적과 이유는 아래와 같다. React의 "선언형 방식"으로 해결하기 어려운 순간에 “실제 DOM 객체”를 직접 만지기 위해 여기서 “DOM에 직접 접근한다”는 말이 처음 들으면 좀 추상적인데, 실제로는 브라우저가 만든 HTML 요소 객체를 그대로 가져와서 JS로 조작하는 것을 의미한다. 이런 설명을 봐도 글로 배우는 느낌이라 와닿지 않을것이다. 여기서 말하는 선언형 방식과 DOM 객체 직접 접근을 좀 더 쉽게 비유로 이해해보자! (비유는 비유일뿐 대충 그렇다는 느낌만 가져가세요)React 방식 (선언형) = 식당에서 주문하는 것“파스타 하나 주세요” 손님은 요리 과정에 개입하지 않고 주방(React)이 알아서 함 ref 방식 (직..

Develop/React 2026.03.09

[Lofree] 페탈 마우스 페어링 방법

https://www.lofree.co/products/lofree-petal-mouse Petal Bluetooth MouseInspired by Manicure Aethetics, LOFREE PETAL designs the button into the shape of nail and comes with fluffy tail as USB dongle. A great gift for girlswww.lofree.co 공홈에서 로프리 페탈 마우스를 구매하여 사용중인데요 ㅎㅎ노트북 교체로 인해 마우스 페어링을 다시 해야되는 이슈가 있었어요 사용 설명서 같은거 누가 들고다닙니까 ~글쎄 페어링하는 방법을 까먹고 일반적으로 다른 마우스들 페어링 하는 방법으로 하면 되는 줄 알았는데 안되는거있죠 공홈이나 문서..

제빵소 2026.03.09

[IntelliJ] Gradle 프로젝트가 인식이 안될때

한 폴더에 모듈 여러개를 넣어 한 번에 Import할 경우 Gradle 파일 인식이 되지 않아 인텔리제이에서 서비스가 뜨지 않거나 Application 인식을 못 하는 경우가 있다. 한 번 받은 프로젝트는 그 이후에 새로운 환경을 세팅해줄 필요가 거의 없다 보니 까먹거나 헷갈려서 Project Structure, 코끼리아이콘, 서비스모듈, Import Module 등을 번갈아가며 찾을때가 생긴다. 이런 경우 Gradle 프로젝트 불러오는 방법을 간단하게 해결할 수 있다. 1. 모듈(폴더) 내에 build.gradle 파일 우클릭 > Link Gradle Project 2. build.gradle 파일 열어서 우클릭 > Link Gradle Project 이렇게 하면 우측에 코끼리가 뿅 하고 생긴다..

Develop/Spring 2026.02.10

[yarn] yarn 버전이 말을 듣지 않을때(yarn set version not working)

[서론]포맷 이후 npm 을 어찌저찌 다시 설정하다보니 yarn 설치할때 yarn set version [버전] 입력하는 것을 깜빡하였고 4.1.0 버전을 원한 나는 4.3.1버전으로 설치가 된다 . .다운로드만 해주고 설치는 안해줌 ㅋ ((가운데 부분은 추후 중요한 역할이 됩니다))[본론]프론트엔더 프로젝트 버전 관리는 크게 두가지가 있습니다.프로젝트 별 버전관리와 전역 버전 관리인데요 오늘 둘 다 해볼 것입니다.  1. 프로젝트 별 버전관리1. 해당 프로젝트 폴더 안에 들어가 yarn set version 4.1.0 을 입력합니다.프로젝트 폴더 안에 ./yarn/release/yarn-4.1.0.cjs 경로에 4.1.0 버전이 설치되었다는 문구가 뜹니다. ➡️ cjs라고 ? 너 누군데 ?더보기yar..

Develop/JavaScript 2024.10.23

[MacOS] jdk17 설치하기(feat. adoptopenjdk, temurin)

얼마전에 맥북이 맛이 가서 포맷했다.그래서 환경구성을 처음부터 하고있는데 아래와같은 상황이 발생함 문제상황1. brew install --cask adoptopenjdk17 명령어가 작동하지않음 (Warning: Cask 'adoptopenjdk17' is unavailable: No Cask with this name exists.)2. brew tab 이랑 brew untab 작동 안함해결과정근본인 brew search 를 검색해보니 adoptopenjdk는 16에서 버전이 끊긴 것을 확인할 수 있었다. 알고보니 17부터 brew에서 지원종료라고함 ㄷㄷ해결과정 1. 명령어 순차적으로 입력# 자바 버전 관리툴 설치brew install jenv# zshrc에 설정 필요echo 'export PAT..

MacOS 2024.07.03

[Mac] OpenJDK 17 설치 및 버전 변경

1. homebrew 공식 홈페이지 : https://formulae.brew.sh/formula/openjdk@17 brew install openjdk@17 2. 설치된 openjdk 링크파일 생성 sudo ln -sfn /opt/homebrew/opt/openjdk@17/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-17.jdk 3. zshrc에 JAVA_HOME 설정 rc파일을 변경하기 위해 관리자 권한이 있거나 sudo명령어를 사용해야합니다. 아래와 같이 jdk 버전에따라 JAVA_HOME 변수를 구분해두면 추후 path에서 간단하게 변경하여 사용할 수 있습니다 :) vi ~/.zshrc ### zshrc 안에 내용 입력 ### e..

MacOS 2024.03.30

[React] yarn으로 husky를 설정해보자(feat. .git경로)

Husky란? Git hook입니다. git과 관련된 액션이 일어날때 husky에 설정한 처리가 수행됩니다. 쉬운 예시로, pre-commit 훅을 사용하면 커밋 전 husky에 사용자가 설정한 액션이 수행됩니다. 공식사이트 : https://typicode.github.io/husky/ 사용 전 주의사항 : husky를 설치하려는 프로젝트의 폴더 경로에 .git이 있어야 합니다. husky는 yarn으로 설치할때와 .git의 위치에 따라 설치 방법이 달라져서 조금 까다롭습니다. 저는 오늘 프로젝트 폴더가 아닌 상위 폴더에 .git이 있는 관계로 설치 과정이 평범하지 않아 이러한 상황에 설치하는 방법을 알려드리려고 합니다 :) 일반적인 구조 내 폴더 구조 ReactApp (Root) ㄴ .git ㄴ ....

Develop/React 2024.03.25
반응형