[ Vite + React + Vscode ] 절대 경로 별칭 @로 자동 import 하기

자동 import의 상대경로들이 너무 지저분해보이기도 하고, 한번에 경로를 알아보기가 힘든 것 같아 import를 절대 경로로 바꾸어주기로 했다. 대부분 글을 검색하면 tsconfig.json 과 vite.config.ts 파일 설정법만 알려주기에, vscode의 기능을 활용하여 자동 import 시에도 절대 경로를 설정하는 법을 기록한다.  1. VS Code 설정 변경1. typescript.preferences.importModuleSpecifier 설정VS Code는 기본적으로 상대 경로를 선호하도록 설정되어 있다. 이를 절대 경로로 변경하려면 VS Code 설정을 업데이트해야 한다.VS Code 설정 열기Ctrl + , (Windows) 또는 Cmd + , (macOS)를 눌러 설정 창을 연다...

• format_list_bulleted REACT/React-개념정리
• · 2025. 1. 13.
• textsms

[react-query v5] 공식 문서 번역 - useQuery

프로젝트로 react-query 의 v5버전을 쓰게 되었다.근데 공식 번역이 없음 영어 문서인 채로 읽는 것이 가장 좋지만... 빠른 이해를 위해 한번 번역해 기록해 두기로 https://tanstack.com/query/v5/docs/framework/react/reference/useQuery useQuery | TanStack Query React Docstsx const { data, dataUpdatedAt, error, errorUpdatedAt, failureCount, failureReason, fetchStatus, isError, isFetched, isFetchedAfterMount, isFetching, isInitialLoading, isLoading, isLoadingError,..

• format_list_bulleted REACT/React-개념정리
• · 2024. 12. 4.
• textsms

[React] 모바일에서 100vh 맞추기

웹 기준 100vh와 모바일웹 기준 100vh는 조금의 차이를 가지고 있다. 모바일웹은 상단바와 하단바를 포함하여 100vh를 계산하기 때문에, 만일 높이를 100vh로 설정한 컴포넌트가 있다면 아래위 부분이 조금 가려질 수 있다. 이럴 경우 현재 기기의 화면을 계산해서 vh를 설정해주면 된다. 이렇게 할 경우 input을 눌렀을 때, 키보드가 나타나 윗화면을 볼 수 없게 되는 일이 발생하지 않는다. 나는 CRA를 사용했기 때문에 아래와 같은 방법을 사용했다. (CRA, 즉 creat-react-app을 사용했을 때는 아래 코드를 복사해서 설정하면 완료된다.) App.js에 추가 function setScreenSize() { let vh = window.innerHeight * 0.01; documen..

• format_list_bulleted REACT/React-개념정리
• · 2023. 1. 19.
• textsms

[React] React Templates

리액트 템플릿이란 홈페이지 디자인 중 자주 쓰이는 React 모델을 제작하여, 수정이 가능하도록 배포되는 디자인 템플릿. 특히 리액트 템플릿은 무료로 배포되고 있는 것이 많기 때문에 bootstrap과 적절히 섞어 사용하면 빠른 시간 안에 프론트를 마무리할 수 있어 편리하다. 아래는 내가 자주 사용하는 리액트 템플릿 사이트이다. https://www.creative-tim.com/templates/react-free 29+ React Free Themes And Templates @ Creative Tim www.creative-tim.com https://dev.to/davidepacilio/35-free-react-templates-and-themes-32ci 35+ Free React templat..

• format_list_bulleted REACT/React-개념정리
• · 2022. 12. 6.
• textsms

[ React ] 실전에서 사용하는 실전형 문법 STEP 정리

실제로 개발을 하면서 사용되는 문법들을 개발 시 사용하는 순서에 맞추어서 정리해 보았다. ui나 redux 사용 절차는 언제나 똑같기 때문에 숙지해두면 무조건 도움이 된다. 사실상 나를 위한 메모장.. useState / Component / 동적인 UI 만들기 / map( ) / props / 태그 / import, export / Router / useEffect() / AJAX, axios / Redux / 삼항연산자의 object , array 자료형 응용 / React-Query / useMemo useState() 용도 : html에서 보여주어야 하는 내용 중, 자주 변경될 것 같은 것에 사용한다. state가 바뀌면 html은 자동으로 재렌더링된다. ▼ 사용법 1. import { useSt..

• format_list_bulleted REACT/React-개념정리
• · 2022. 11. 17.
• textsms