![]()
https://velog.io/@ahsy92/JavaScript-FileList%EB%8A%94-%EB%B0%B0%EC%97%B4%EC%9D%B4-%EC%95%84%EB%8B%88%EB%8B%A4 이벤트 객체의 FileList는 배열이 아닌 file 객체를 여러개를 담고 있는 유사배열 객체(Array-like)이다. 위처럼 이벤트 핸들러에서 input엘리먼트의 .files로 FileList 배열객체를 참조할 수 있다. 그렇기 때문에 .files[0]접근이나 .length는 사용가능하나, 배열이 아니기 때문에 map, filter, foreach 등을 사용할 수 없는 것이다. 라고 하신다. 일단 나는 FileList를 사용하여 여러장을 올려볼 생각이다. 타입으로도 가능할 것 같긴 하다.. ㅋㅋ.. 일단 F..
# * 외부 라이브러리 타입이 없을 경우 처리 : 타입 설정 # 1) tsconfig.json 파일 - compilerOptions 속성에 아래 추가 : 프로젝트시작위치/types - 이 위치에 타입을 인식하게 하는 경로 설정 "typeRoots": ["./types", "./node_modules/@types"], // 보통 types 폴더를 만들어 타입 정의 # 2) types/외부라이브러리명/index.d.ts 파일 생성 후 아래 추가 declare module '외부라이브러리명';
![]()
이번에는 개발환경 설정 , 배포 환경설정이다 경로 .env.development 는 개발환경 .env.production 은 배포 환경이다. 좀 다른 사람들에게 보여주면 안된다 하는 파일은 여기놓고 ignore 로 git에 안올리고 있다. 안의 설정은 ★ REACT_APP 은 필수로 적어주자. # 개발 환경 : .env.develoment # springboot url REACT_APP_BASE_URL=http://localhost:8000/api # 배포 환경 : .env.production # springboot url REACT_APP_BASE_URL=http://playhost.com/api 사용했을 때다. process.env.이름 을 적어주면 불러올수 있다. import axios from '..
페이징 처리할때 쓰는 놈 # 만약 페이지 네이션을 사용하게 될시 # 4) Material Page component 업그레이드 # 과거 v4 -> v5 변경 설치 npm install @mui/material @emotion/react @emotion/styled # 4-1) 소스에서 임포트 사용법 : import Pagination from '@mui/material/Pagination'; 써보지 뭐 일단 html 부터 보자 {/* 페이징 처리 */} 뭔가 길긴 한데 대충 다른건 필요없고 count , page , onChange 만 보면된다 (다른건 그냥 예쁘게 할려고..) JavaScript import Pagination from "@mui/material/Pagination"; // TODO 공..
npm 설치 # 7) 폼 유효성 체크 라이브러리 설치 # 7-1) formik npm i formik # 7-2) yup npm i yup # typescript npm i @types/yup 유효성 체크는 3가지로 나뉜다. Javascript 변수 초기화 , 유효성 체크 , 값이 들어오는 함수 import { Formik, Form, Field, ErrorMessage } from "formik"; import * as Yup from "yup"; // Todo : 유효성 체크 lib // Todo : Formik 객체 초기화 (initialValues) : html 태그에서 // Todo : 체크대상 (email , password) : Field 태그 const initialValues = { na..
![]()
개발 시 설정 1번 package.json 사용 2번 http-proxy-middleware 사용 # middleware npm i http-proxy-middleware setupProxy.js // src/setupProxy.js // middleware 사용 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/ISteamApps/GetAppList/v2', // 이 url 로 접근시 createProxyMiddleware({ target: 'https://api.steampowered.com', // https://api.steampwored.com/I..
대표적인 두가지 라이브러리 Yup & Formik # 폼 유효성 체크 라이브러리 설치 # 1) formik npm i formik # 2) yup npm i yup npm i @types/yup # import import { Formik , Form , Field , ErrorMessage } from "formik"; import * as Yup from "yup"; 중요 태그 태그 설명 Formik Formik 라이브러리 사용 정의 Form Form 태그 부분 정의 == form 태그 Field Form 태그 안의 Field 부분 정의 == input 태그 ErrorMessage Field 에러 메시지 부분 정의 Formik initialValues 객체 초기화 // Todo : 유효성 체크 lib..
install # 공유라이브러리 리덕스-툴킷 설치 npm i react-redux @reduxjs/toolkit 필자는 타입스크립트 사용 type // IAuth.ts : 인터페이스 import IUser from "./IUser"; export default interface IAuth { isLoggedIn : boolean, // 로그인 상태(true , false) user? : IUser | null, // 유저 객체 } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // IUser.ts : 인터페이스 export default interface IUser { // EMAIL VARCHAR2(1000) -- id (email) //..
![]()
https://www.kobis.or.kr/kobisopenapi/homepg/main/main.do 회원가입 후 open api 보기 URL 확인 요청 구조와 응답 구조 확인 , 응답구조(인터페이스) 만들기 ( 필자는 typescript 사용 ) 키 발급 받기 react - service 구축 예제 [ 전체조회 , 상세조회 ] 발급받은 키(key)는 필수로 사용해야한다 // CinemaService.ts // 영화진흥 위원회의 오픈 API 통신 함수들 정의 // 전체조회 또는 상세조회 import axios from "axios"; import { Console } from "console"; import ICinema from "../../..
![]()
공식 홈페이지 https://swiperjs.com/ npm 방식 # 공홈 : https://swiperjs.com/get-started#install-from-npm # 9) npm i swiper npm i swiper npm i @types/swiper # 9-1) js import : main.js : 자바스크립트 파일 import Swiper from 'swiper'; # 9-2) css import - App.tsx // TODO : swiper css import // TODO : 참조 : xxx.css -> (압축) xxx-min.css // TODO : : xxx.js -> (압축) xxx-min.js import "swiper/swiper-bundle.css"; 또는 import "sw..
![]()
DaterangePicker # 8-2) range calendar 달력 # 공식 홈페이지 : https://www.daterangepicker.com/ 컴포넌트 코드 // DaterangePicker.js import React, { useEffect, useRef, useState } from "react"; /* eslint-disable */ function DaterangePicker() { const [jdate, setJdate] = useState(""); // TODO : 특수한 함수 : 리액트에서 지정한 태그에 직접 접근할때 사용 const daterange = useRef(null); // TODO : 화면이 뜰때 달력 생성 useEffect(() => { if ($("#dateran..
![]()
JQuery-ui Calendar 달력 공식 홈페이지 https://jqueryui.com/datepicker/ CDN # 8-1) JQUERY-UI 달력 # 8-2) range calendar 달력 8-3) jquery-ui typescript npm i @types/jqueryui 컴포넌트 // Datepicker.tsx import React, { useEffect, useRef, useState } from "react"; function Datepicker() { const [jdate, setJdate] = useState(""); // TODO : 리액트에서 특정태그에 직접접근하는 방법 : const 변수명 = useRef() // TODO : html input 태그 속성 정의 : ref=..
