분류 전체보기
-
Next.js 설치front-end/Next 2024. 2. 19. 09:18
1. node.js 설치 - 18버전 이상 - chocolatey 설치 X https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. VS Code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and..
-
중첩 라우팅 쉽게 이용하기(주소값 변경)front-end/React 2024. 2. 14. 12:34
1. App 코드 내용 import { Route, Routes } from 'react-router-dom'; 하기! App에 아래와 같은 코드를 작성을 합니다 2. Page01 코드 내용 import { Link, Outlet } from "react-router-dom"; import { Link, Outlet } from "react-router-dom"; const Page01 = () => { return ( (헤더가 있다고 생각) 2번으로 이동 3번으로 이동 ); } export default Page01; 3. 참고 영상
-
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-..
-
개인 포트폴리오 사이트 만들기project/personal 2023. 11. 8. 10:47
1. 개요 프로젝트명 : 포트폴리오 만들기 기술 스택 : Scss, JS, React.JS 프로젝트 기간 : 2023.11.04 ~ 2023.11.07 (4일) - 프로젝트 설명 포트폴리오 사이트 만들기 포트폴리오 배포하기(네트리파이) - 프로젝트 문제 해결 문제 CONTACT 섹션에서 그림자 애니메이션이 딜레이가 발생 이벤트 핸들러가 과도하게 실행되어 성능이 저하 해결 GSAP 라이브러리를 활용하여 그림자 애니메이션을 개선 코드를 더 간결하게 작성하여 성능을 향상 - 기존 코드 - 개선 코드 2. GIT GitHub - SIM-TOO/portfolio2023 Contribute to SIM-TOO/portfolio2023 development by creating an account on GitHub...
-
eyecon 팀프로젝트project/team 2023. 11. 8. 10:27
1. 팀프로젝트 개요 프로젝트 명 : EyeCon 역할 : 프론트엔드 기술스택 - Client : React, Tailwind, Lottie, Redux, fabricJS - Server : Spring Boot(JPA, Security), Flask - Data Base : MySQL - Data storage : FireBase - Model : ChatGPT API, CNN, OpenCV, YOLOv5 프로젝트 기간 : 2023.09.18 ~ 2023.11.09(7주) - 프로젝트 설명 시선예측 AI를 활용한 상품배치 최적화 서비스 - 개인 역할 테일윈드를 사용하여 웹사이트 전반적인 레이아웃 담당 로그인 회원가입 유효성 검사를 통한 최소한의 SQL인젝션 방어 리덕스를 활용해 로그인 상태관리로 페이지..
-
리액트 로그인 유효성 검사 방법 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)) { // 이메일 형식이 올바르지 않은 경우..