반응형 JavaScript/React5 [React] TypeScript Alias 설정 import ../../../redux -> @redux로 변경 소스를 보면은 Import 부분에 ../../../../를 많이 봤을거다.이거 나중에 파일을 복사하고 다른 폴더에 옮긴 후 다시 쓸려고하면은 경로 에러도 발생하고 소스도 길어지고 이런 불필요한 작업을 줄여주는 Alias 설정을 해보자 .1. 기존 tsconfig.json 파일이다 각 설정을 알아보자 target: TypeScript를 어떤 버전의 JS로 변환할지 설정 ("es5"= 옛 브라우저도 실행 가능하게 변환)lib: 프로젝트에서 사용할 수 있는 기능(라이브러리) 범위("dom"(브라우저 API),"esnext"(최신 JS 기능) 등을 추가)allowJs:.js파일도 TypeScript 프로젝트 안에서 허용 (ts + js 혼용이 가능하다.)skipLibCheck: 외부 라이브러리 타입 검사 건너.. 2025. 11. 19. [React] 이미지 미리보기 C: 경로에 있는 파일 불러오기 2025.07.04 - [JAVA] - [Java] 이미지 미리보기 C: 경로에 있는 파일 불러오기 [Java] 이미지 미리보기 C: 경로에 있는 파일 불러오기요즘에는 클라우드에 이미지를 업로드하고 클라우드에서 가져오는 방법이 가장 좋은 방법이긴 한거같다 .하지만 나는 클라우드 구축도 안되어있고 ,., JWT SECURITY등 다 설정을 이미 해놨는데 불ycds.tistory.com 클라우드로 업로드하는 방식이 아닌 특정 폴더에 이미지를 업로드 할때 저장하는데 이미지를 특정 폴더 및 파일에서 읽어서 불러오는 방법을 설명하고자한다. 우선은 나는 세팅을 이렇게했다 .env 파일을 사용중이다. 1.env 설정REACT_APP_API_URL="http://localhost:9090/api/in"REACT_.. 2025. 7. 4. [React] Fullcalendar 달력 공휴일 적용 (누리집) FullCalendar 라이브러리를 사용해서 달력에 공휴일을 추가하고싶었는데 google이 아닌 누리집에 API를 사용해서 만들어보았다.우선은 먼저 완성된 달력을 공유하겠다 . 1) https://www.data.go.kr/index.do 이후 로그인 2) 공휴일 입력 -> 한국전문연구원_특일 정보 활용신청 클릭 3) 활용신청 이후 -> 승인 확인4) 일반 인증키 확인. (활용신청 상세기능정보 에서 테스트 가능)5) env , env_developer, env_production(운영계정따로신청해야함) 서비스키 (일반 인증키) 입력 6) holidayApi.ts (공통 유틸) 함수 선언 // 한국천문연구원_특일 정보 (누리집 API )export async function fetchKoreanHoli.. 2025. 5. 30. [React] Input Onchange 이벤트 버벅임 해결 다들 Input태그에 onChange 이벤트를 활용하여 개발을 진행할때 버벅이는 속도를 한번씩은 겪어보신 적이 있었을것이다. 나도 마찬가지다. 사용자입장으로 생각해보니 너무 느려서 Input전용 공통 함수를 하나 만들고 진행해보았다. 1. input안에 onChange 이벤트를 발생시킬것이다. 기존 코드를 한번 봐보자-- onChang 이벤트 setSearchParams((prev) => ({ ...prev, eventSpeedTest: e.target.value, })) } /> 만약 하나의 화면에 Input이 많이 존재하지않고 setSearchParam에 담겨있는 컬럼이 많이 없다면은 onChange 이벤트를 사용해도 속도에서 크게 차이는 못느낄.. 2025. 5. 20. [React] React Hooks이란 ? 1. 훅(Hooks)란 무엇일까?React에서 훅(Hooks)은 함수형 컴포넌트에서 React의 기능(상태 관리, 생명 주기 관리 등)을 사용할 수 있게 해주는 도구입니다.원래는 클래스형 컴포넌트에서만 상태를 다루거나 생명 주기를 관리할 수 있었는데, 훅 덕분에 함수형 컴포넌트에서도 이런 기능을 사용할 수 있게 되었습니다.훅의 장점더 간결한 코드 작성 가능.재사용성과 가독성 향상.클래스 없이 상태나 생명 주기 같은 React 기능을 사용 가능. 2. 자주 사용하는 기본 훅들React에서 제공하는 몇 가지 기본 훅이 있습니다. 2.1. useState컴포넌트에서 상태를 관리하기 위한 훅입니다.상태(state)는 UI가 기억해야 할 값이라고 생각하면 됍니다.예를 들어, 버튼을 클릭했을 때 숫자를 증가시키고 .. 2024. 11. 27. 이전 1 다음 반응형
