front-end
-
npm xlsx vulnerabilities(취약점) 해결 방법front-end/React 2024. 2. 7. 15:22
- npm xlsx vulnerabilities(취약점) 발생 아래와 같은 vulnerabilities(취약점)에러가 발생을 합니다. xlsx * Severity: high Compiled successfully! 해결방법 참고 사이트 : https://github.com/SheetJS/sheetjs/issues/2822 npm i https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz
-
React HTTP GET, POST, PATCH, DELETE 사용법front-end/React 2024. 2. 6. 17:44
1. GET 방식 데이터 요청시 사용 매개변수를 url로 전달(보안, 캐싱 등 문제 발생) 데이터 검색 및 조회시 활 fetch(`{백엔드 주소값}?{매개변수 혹은 KEY}=${ 매개변수에 전달할 값}& ... `, { method: 'GET', headers: { 'Content-Type': 'application/json' }, // body가 없다 // 생략 2. POST 방식 데이터 전송 용량이 get 대비 많은 데이터 전송 get 대비 url에 정보가 노출되지 않아 보안에 이점 데이터 변경시 사 fetch({백엔드 주소값}, { method: 'POST' headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ 매개변수 혹..
-
npx create-react-app 에러front-end/React 2024. 1. 5. 17:16
1. create-react-app 에러 npx create-react-app my-app npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\-주소값- npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\-주소값-' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent 2. create-react-app 제거 후 재설치 npm uninstall -g create-react-app npm install -g create-react-app 3. create-..
-
리액트 로그인 유효성 검사 방법 3가지front-end/React 2023. 10. 30. 10:18
1. input 태그 고유 속성 사용 required 내용이 입력되지 않으면 전송이 불가능합니다. 보내기 pattern 정규식 패턴을 넣을 수가 있습니다. 추가적으로 title 속성을 넣어 사용자에게 형식을 알려줄 수가 있습니다. 생년월일 : 보내기 minlength, maxlength 최소, 최대 글자를 제한이 가능합니다. 보내기 2. hook으로 직접 만들기 retrun 값을 주거나 메시지를 표시하게 하거나 중복 검사 등등 넣을 수가 있습니다. // 생략 if (email === '') { // 이메일이 비어있는 경우 오류 메시지 설정 setErrorMessage('이메일을 입력하세요.'); } else if (!emailPattern.test(email)) { // 이메일 형식이 올바르지 않은 경우..
-
React Redux state 변경하기front-end/React 2023. 10. 15. 22:27
1. 함수 만들기 changUser라는 함수를 작성을 해야 됩니다. let user = createSlice({ name : 'user', initialState : 'SIM-TOO', reducers : { changeUser(state){ return 'user1004' } } }) 2. 함수 export 하기 export let { changeUser } = user.actions 3. 함수가 필요한곳에 불러오기 import { useDispatch, useSelector } from "react-redux" import { changeUser } from "./store.js" function App() { let test = useSelector((state) => { return state }..
-
React Redux 설치, 세팅, 사용하기front-end/React 2023. 10. 15. 22:12
1. Redux 설치하기 npm install @reduxjs/toolkit react-redux 2. Redux 세팅하기 store.js파일 만들기 src/store.js에 기본 세팅 입력하기 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) index.js 파일로 이동하기 Porovider와 store.js 를 import 하기 Porovider로 감싸기 // 생략 import { Provider } from "react-redux"; import store from './store.js' const root = ReactDOM.createRoot(document.getElem..
-
setTimeout와 setInterval (5초 뒤 삭제되는 알림창)front-end/JavaScript 2023. 8. 23. 22:33
1. setTimeout 이란 작성된 코드를 일정 시간 이후 실행시켜 줍니다. setTimeout(function(){ 코드 }, 시간); 시간의 경우 ms 단위 1000ms = 1초 setTimeout(function(){ console.log('반갑습니다') }, 1000); 2. setInterval 이란 작성된 코드를 일정 시간마다 반복적으로 실행을 해줍니다. setInterval(function(){ 코드 }, 시간); setInterval(function(){console.log('HI')}, 3000); 3. 콜백 함수의 기능 addEventListener()과 같이 setTimeout()도 콜백 함수를 요구를 한다. 다른 곳에 만든 함수를 이용해도 작동을 합니다. setTimeout(함수,..
-
JS input, change 이벤트의 차이점front-end/JavaScript 2023. 8. 21. 21:06
1. input 태그에서 발생하는 이벤트 input 이벤트 즉시 반응 다양한 변경에 반응 change 이벤트 포커스가 다른 곳으로 옮길 경우 발생 document.getElementById('ID').addEventListener('input', function(){ console.log('글자입력중') }); - 글자를 한글자씩 변화가 생기면 console.log에서 실행이 된다. document.getElementById('ID').addEventListener('change', function(){ console.log('글자입력됨') }); - 글자를 입력후 input 창에서 벗어나면 실행이 된다. - 용도는 무엇일까? input 이벤트의 경우 실시간 검색 필터링 효과 글자 제한 수 확인 실시간 ..