[React Error] Uncaught (in promise) TypeError: Assignment to constant variable. 해결 방법
2023. 12. 5. 20:08
프로그래밍/React
Uncaught (in promise) TypeError: Assignment to constant variable. 에러 발생 원인과 해결 방법 발생 원인 상수로 선언된 변수에 값을 재할당하려고 할 때 발생 자바스크립트에서 const 키워드로 선언된 변수는 재할당이 허용되지 않음 const result = ''; result = 'result';// error 해결 방법 const 키워드를 let으로 변경해주거나 재할당을 없애기 // 첫 번째 방법 const result = 'result'; // 두 번째 방법 let result = ''; result = 'result';
[React] inline style !important 적용 방법
2023. 11. 15. 20:22
프로그래밍/React
React inline style !important 적용 React 에서는 내부 스타일 설정 시 !important 적용이 안됨 해결 방법으로는 크게 3가지가 있음 1. css 파일에 선언해주기 2. 부트스트랩을 사용해 className값 설정하기 3. inline에 style을 줘야한다면 style 메서드 정의해서 사용하기 참고로 리액트에서는 !important를 사용하는것을 권장하지 않음 import React from 'react'; const MyComponent = () => { const importantStyle = { color: 'red !important', fontSize: '20px', // 다른 스타일 속성은 그대로 작성 }; return ( Hello, World! ); };..
[React Error] onKeyUp, onKeyDown 이벤트 한글 입력시 2번 실행되는 이유와 해결 방법
2023. 10. 27. 20:12
프로그래밍/React
onKeyUp, onKeyDown 이벤트 한글 입력시 2번 실행되는 문제 영어가 아닌 한글을 입력한 후 onKeyUp, onKeyDown 이벤트를 실행하면 중복으로 이벤트가 실행됨 원인 IME composition IME는 브라우저에서 다양한 언어를 지원해주는 OS 단계의 어플리케이션 IME 과정에서 이벤트가 발생하면, 한글 변환 작업이 OS에서도 이루어지고 브러우저에서도 처리되면서 중복 발생하는 문제 isComposing Web API 스펙에는 Event Target에 KeyboardEvent.isComposing 이라는 프로퍼티를 제공하고 있음 한글을 포함하여 비영어권 언어를 사용한다면 이 값을 참조하여 중복을 막을 수 있음 해결 isComposing 프로퍼티를 사용하여 한 번만 실행되도록 처리하기..
[React] ag-grid 사용법
2023. 9. 15. 20:01
프로그래밍/React
Ag-Grid 및 관련 라이브러리 설치 npm install --save ag-grid-community ag-grid-react Ag-Grid 컴포넌트 생성 import React from 'react'; import { AgGridReact } from 'ag-grid-react'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; function MyGridComponent() { const columnDefs = [ { headerName: 'ID', field: 'id' }, { headerName: 'Name', field: 'name' }, // 추가 열 정의...
[React] Get 파라미터로 List 전달
2023. 9. 8. 20:40
프로그래밍/React
리액트에서 스프링부트로 Get 요청 시 List를 파라미터로 전달 Aixos를 사용하여 Get 요청 시 파라미터로 List를 전달하려면 join(',')로 구분하여 전달하면 됨 예시 const idList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const resultList = axios.get('id/list', {params: {idList: idList.join(',')}}); 위의 파라미터를 전달하는 경우 스프링에서는 idList 타입으로 받을 수 있음 controller 예시 @GetMapping("/id/list") public List getIdList(@RequestParam("idList") List idList) throws Exception { return bo..
[React] Module not found... 에러 해결 방법
2023. 8. 23. 20:17
프로그래밍/React
발생 에러 Module not found: Error: You attempted to import ../../../public/assets/css/login.css which falls outside of the project src/ directory. Relative imports outsde of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_moules/. 에러 원인 create-react-app(CRA)에서 컴파일은 src 내부에서만 일어나는데, 이때 js에서 import 된 이미지와 같이 엮여 있는 파일들은 모두 컴파일 대상임 따라서 해당 파일을 js 파일에..
[React] React와 Spring Boot 연동하기
2023. 7. 27. 20:32
프로그래밍/React
React와 Spring Boot 연동 방법 1. package.json 파일에 프록시 설정 "proxy”: "http://localhost:8080", "scripts": {...}, 2. 통신 테스트 App.js import React, { useEffect, useState } from "react" function App() { const [data, setData] = useState(''); useEffect(() => { fetch('/api/main') .then(response => response.text()) .then(data => setData(data)) .catch(error => console.error(error)); }, []); return ( {data} ); expo..
[React] React Spinner 사용 방법
2023. 7. 14. 20:11
프로그래밍/React
React Spinner axios interceptor에 적용하기 mobx를 사용해서 store 관리를 하고 있는 프로젝트에 spinner를 적용하게 되어 그 과정을 기록할 것임 React Spinner 설치 yarn add react-spinners # or npm i react-spinners Spinner component 생성 스피너 모양은 react-spinners demo 페이지에서 확인 가능 예시 import React from 'react'; import MoonLoader from "react-spinners/MoonLoader"; import { AppStore } from '../store/AppStore'; const Spinner = () => { return ( ); }; ex..