본문 바로가기
[react] Warning: A component is changing an uncontrolled input to be controlled... react에서 태그 사용후 나온 warning입니다. Warning 오류 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. input의 value에 undefined가 들어갔을 경우에 대한 처리가 없는다는 경고메시지 입니다. before Warning 해결 방법 inp..
[react] Warning: `value` prop on `select` should not be null. react에서 select 태그 사용할때 나오는 warning입니다. Warning 오류 Warning: `value` prop on `select` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. before 선택하세요 관리자 최고 관리자 Warning 해결 방법 value="" 으로 빈 string 값을 넣어주었습니다. 선택하세요 관리자 최고 관리자
[react] useEffect 메모리 누수 Can't perform a React state update on an unmounted component... useEffect의 잘못된 사용으로 인한 메모리 누수 warning 입니다. Warning 오류 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. useEffect 안에서 비동기로직을 실행할때 위와 같은 warning이지만 빨간색의 오류 메시지가 출현합니다. before useEffect(() => { if (!adminId) { history.push(`/admin..
[js] 이미지 특정 위치 클릭시 이벤트 처리 (ft. 특정 좌표 area, map) 이미지에서 특정 좌표 클릭시 이벤트 구현입니다. 태그는 이미지맵을 만드는 태그입니다. jpg, png, svg 와 같은 이미지에 링크를 걸어주어 화면 이동을 가능하게 합니다. 많이 사용할 일은 없지만 복잡한 지도같은 이미지에 주요 사용됩니다. 과 태그를 이용하여 특정 좌표에 영역을 지정하고 클릭 이벤트를 걸 수 있습니다. image map 태그 예제 image 태그의 usemap 의 이름과 map 태그의 name을 동일 map은 area 요소를 포함 area에서 shape(영역 모양)을 정의(rect(사각형), circle(원형), poly(다각형), default(기본값으로 전체 영역)의 속성 값) coords 좌표 위치 지정(x1, y1, x2, y 2가 속성 값으로 사각형의 왼쪽 위 모서리와 오른쪽..
[react] framer motion 사용법 react faramer motion 라이브러리를 이용해 동적인 애니메이션을 구현합니다. framer motion 설치 npm install framer-motion framer motion 제공 기능 react에서 framer motion을 이용하여 디양한 애니메이션(transition, repeat, delay ), Gesture(hover, drag, tap) 등의 다양한 동적 무브먼트를 smooth하게 구현이 가능합니다. 기본 예 사라지는 현상 구현 영상 사라지는 현상 구현 import React from "react"; import { motion } from "framer-motion" const Example = () => { const variants = { hidden: { opacity..
[react] redux-toolkit으로 쇼핑몰 사이트 만들기 (ft. 장바구니) react, redux-toolkit를 이용한 쇼핑몰(장바구니) 사이트 예제입니다. 예제는 유투버, chaoo charles님의 강의를 들으면서 공부한 내용입니다. 구현 화면 메인 화면 장바구니 페이지 구현 내용 react, hooks css 파일 코드는 중요하지 않아 불포함 redux-toolkit react-toastify 화면: 전체 아이템 리스트 화면, 장바구니 상세 화면 설치 패키지 1. npx create-react-app 앱이름(version 5.2.0) 2. npm install redux react-redux @reduxjs/toolkit 3. npm install axios 4. npm install react-router-dom 5. npm install react-toastify 폴..
[react] swiper.js으로 timepicker 커스텀 (swipe slide event) swiper.js를 커스텀하여 timepicker를 구현합니다. 구현 화면 구현 영상 구현 내용 swiper.js를 설치하여 react에서 사용 css는 tailwind 라이브러리 사용(중요하지 않아 아래 제공된 코드에서는 거의 삭제) onSliceChange로 이벤트 사용 onSlideChange={(swiper) => console.log(swiper.realIndex + 1)} 로 현재 active된 슬라이드 표시 initialSlide={숫자} 를 이용해 처음 시작 슬라이드 지정 swiper 코드 console.log(swiper.realIndex + 1)} //이벤트 사용 > react 코드 import React from 'react'; import { Swiper, SwiperSlide } ..
무료 아이콘 다운로드 사이트 (ft. icon svg, png, 일러스트, 벡터) 아이콘 무료 다운로드 사이트 입니다. 1. icon finder 아이콘파인더 https://www.iconfinder.com/ 6,025,000+ free and premium vector icons, illustrations and 3D illustrations Iconfinder is the world's largest marketplace for icons, illustrations and 3D illustrations in SVG, AI, and PNG format. www.iconfinder.com 2. flaticon 플라티콘 https://www.flaticon.com/ Free Icons and Stickers - Millions of resources to download Download..
[js] 자바스크립트 import , export 개념 import, exprot의 가져오기, 내보내기 개념입니다. 자바스크립트의 import, export라는 키워드를 통해서 가져오기, 내보내기를 실행합니다. import 사용 예제 1 npm install로 node module 설치 후 node_modules 폴더 안의 lodash 패키지를 _라는 이름으로 가지고 와서 main.js에서 활용을 하겠다는 선언입니다. main.js import _ from 'lodash' //node_modules 폴더에서 가져오기 import 사용 예제 2 - 상대 경로로 import 상대 경로를 통해서 외부에서 특정한 자바스크립트 파일(getToday.js)의 getToday 함수를 가져옵니다. main.js import getToday from './getToday' ..
[js] object의 key name을 함수 parameter로 받아 바꾸는 방법 함수 argument로 부터 값을 받아 객체 key 이름을 지정하는 방법입니다. 적용 전 예시 fnName = (type) => { return { type: { fill: 'gray' } } } 적용 후 사용 후 key를 대가로로 묶어주시면 됩니다. fnName = (type) => { return { [type]: { fill: 'gray' } } }
[react] 데이터(json) html 태그 화면 렌더링 방법 (ft. html-react-parser) api 호출로 data 출력할때 html를 넣어 바로 렌더링 시킬때 사용법 입니다. html-react-parser 라이브러리를 사용할 수 있습니다. 라이브러리를 이용해 html를 react의 문법인 jsx 로 변환합니다. HTML to React parser that works on both the server (Node.js) and the client (browser) - 공식문서 html-react-parser 설치 npm install html-react-parser --save 또는 yarn add html-react-parser html-react-parser 사용법 import Parser from 'html-react-parser'; //1. import 삽입 ... return ({Pa..
[react] react에서 inline style 적용 방법 (ft. 인라인 css) react에서 inline style(inline css) 적용 방법입니다. 인라인 스타일 방식은 태그 내에 자바스크립트 객체 형식으로 직접 넣는 스타일 방식입니다. react inline style 적용 방법 예제1 가장 보편적으로 쓰이는 태그 내 스타일 전체 삽입 방법입니다. 예제2 변수를 이용하여 스타일을 적용한 방법입니다. import React from 'react'; const SingIn = () => { const leftIcon = { backgroundImage: "url('/images/homebar.svg')" }; return ( ); }; export default SingIn; 예제3 리렌더링 방지를 위해 PureComponent로 감싸주었고, 분기 처리 된 인라인 스타일 적용..
[css] tailwind fontsize, color 커스텀 하는 법 tailwind 에서 fontsize, color 커스텀 하는 방법입니다. ailwind.config.js 파일에서 아래와 같이 color 추가하면 됩니다. postcss.config.js가 아니라 tailwind.config.js 이니 주의 하세요. 여기서 주의할 점: extend: { .. } extend 객체로 fontsize와 color를 한번 더 감싸줘야 기존 tailwind에서 제공하는 기본 style을 유지하면서 추가할 수 있다. tailwind.config.js 코드 module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: { fontSize: { xs: ['12px', { lineHeight: '18px..
[react] react-router-dom 버전 6에서 변경된 사항 (ft. 'Switch' is not exported from 'react-router-dom' 오류) react-router-dom 6에서 변경된 사항입니다. react-router-dom이 버전 6으로 바뀌면서 몇가지가 바뀌었습니다. switch -> routes component -> element useHistory -> useNavigate route, switch before: react-router-dom이 버전 5 import React from "react"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import Header from "./components/Header/Header"; import MovieDetail from "./components/MovieDetail/MovieDetail";..
[react] npx create-react-app You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 오류 npx create-react-app 오류입니다. 원래 사용하던 npx create-react-app 앱이름 코드로 react 프로젝트를 시작하려는데 아래와 같은 오류가 발생하였습니다. npx create-react-app 앱이름 npx create-react-app 오류 You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-r..
[js] default parameter 디폴트 매개변수 (ft. es6) 자바스크립트 es6 default parameter 입니다. 매개변수 = 'x'로 default 값을 지정합니다. 매개변수가 없을 경우, undefined 일 경우 default 값을 사용합니다. function multiply(a, b = 1) { //디폴트 매개변수 사용 return a * b; } //위와 아래가 동일합니다. function multiply(a, b) { //디폴트 매개변수 사용안했을때 b = b || 1 return a * b; } default parameter 사용 예시 const multyply = (a, b=1) => a * b; multyply(5) //5 multyply(2,3) //6
[react] redux-toolkit를 이용한 사이트 만들기 ver.1 보호되어 있는 글 입니다. 2021. 12. 19.
버전 코드는 이미 사용되었습니다. 다른 버전 코드를 사용해 보세요. (ft.구글 플레이) 구글플레이콘솔에서 app bundle 업로드 후 오류메시지입니다. 오류 메시지 react native에서 빌드 과정을 거친지 구글플레이콘솔에서 앱 출시를 위해 aab 파일을 업로드 하였더니 아래와 같은 오류 메시지가 나왔습니다 . 버전 코드는 이미 사용되었습니다. 다른 버전 코드를 사용해 보세요. 해결 방법 react-native를 사용하였다면 app.json 파일에서 version, versionCode를 기존의 1에서 다른 것으로 바꿔야합니다. { "expo": { ... "version": "2.1.0", ... }, "ios": { ... "buildNumber": "2.0.0", }, "android": { ... "versionCode": 2, ... } } }
[js] 배열인지 아닌지 확인하기 (ft. Array.isArray() ) 변수가 배열인지 아닌지를 확인하는 방법입니다. Array.isArray() 메서드는 가로 안의 인자가 array 인지를 판별합니다. array이면 true를 반환하고, 아니면 false를 반환합니다. Array.isArray() 예제 Array.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); // false Array.isArray('foobar'); // false Array.isArray(undefined); // false 실무에서 실제 사용했던 코드 입니다. result에 데이터가 들어왔을 때만 실행하는 코드를 만들었습니다. result라는 변수가 초기값이 null이고 데이터가 채워지면 객체의 형태인데, 무슨 이유인지 어쩔때는 초기값이 null이 ..
[react] 카운트다운 구현 (ft. 5, 4, 3, 2, 1) 보통 게임에 많이 사용하는 카운트다운을 react로 구현합니다. 구현 영상 카운드다운 react 코드 import React, { useRef, useState, useEffect } from 'react'; const Count = () => { const [num, setNum] = useState(5) const [openResult, setOpenResult] = useState(false) const timeRef = useRef([]) useEffect(() => { for (let i = 1; i 0) { console.log('i', i) timeRef.current[i] = setTimeout(() => { setNum(num - 1) }, i * ..
[react] switch toggle 버튼 구현 화면 구현 영상 react 코드 기존의 알림 값이 true/false인지를 api로 가져오기 버튼 클릭시마다 input의 checked, onChange 속성을 이용해 구현 css는 tailwind style을 적용 import React, { useEffect, useState, useRef } from "react" const Alarm = () => { const [pushStatus, setPushStatus] = useState(null) useEffect(() => { api.get(`xxx`) .then(res => { setPushStatus(res.data.pushOn) }) //기존 알림 설정값 받아오기 .catch(err => console.log(err)) } }, []) co..
[web] netlify 배포 후 https 에러 해결 netlify에서 배포 하면서 발생된 https 에러 입니다. react 프로그램을 netlify에서 배포를 한 후, 실행해보니, tweenmax is not defined 라는 오류가 나고 gsap, tweenmax를 이용한 애니메이션이 작동을 하지 않았습니다. 좀 더 정확히 확인해 보니 아래의 오류 메시지가 떳습니다. 오류 메시지 Mixed Content: The page at 'xxx' was loaded over HTTPS, but requested an insecure script 'http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'. This request has been blocked; the content must be s..
[react] Input elements should have autocomplete attributes (suggested: "current-password") 오류 react의 input에서 type="password" 사용시 나오는 오류입니다. 오류 메시지 오류: [DOM] Input elements should have autocomplete attributes (suggested: "current-password") 해결 방법 input 태그 안에 autoComplete="on" 속성을 추가합니다.
파일질라(FileZilla) FTP 사용법 (ft. FTP사용이 필요한 경우) 파일질라 다운로드 후 접속 방법입니다. FTP사용이 필요한 경우 보통 git을 이용하여 실서버에서 git pull을 하여 빌드하여 배포를 하는데 mp4 파일과 같이 고용량의 파일을 올릴 경우, git에 올리는 것이 불편하기 때문에 ftp를 이용해 서버에 직접 업로드는 시키는 방법을 사용합니다. FTP 파일질라 사용법 파일질라 홈페이지에서 파일질라 다운로드 후, 실행 합니다. 아래의 세가지 사항을 입력 후 빠른 연결을 선택하면 아래와 같이 접속이 된 것을 확인할 수 있습니다. 호스트: http(s)를 제외한 호스팅 계정에 연결된 도메인 주소 사용자명, 비밀번호: 호스팅 신청시 입력하였던 ftp 아이디와 비밀번호 포트: ftp 프로토콜을 이용하여 접속할 경우 21, sftp 프로토콜을 이용할 경우, 2022
[js] 비밀번호 영문 숫자 조합 8자리 이상, 영문 숫자 특수기호 조합 8자리 이상 체크 (ft. 정규식) 비밀번호 유효성 검사에 사용되는 정규식입니다. 비밀번호 영문 숫자 조합 8자리 이상 (정규식) let regPass = /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,25}$/; if (!regPass.test(password)) alert("영문, 숫자 조합으로 8-20자리 입력해주세요.") 영문 숫자 특수기호 조합 8자리 이상 (정규식) let regPass = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/; if (!regPass.test(password)) alert("영문, 숫자, 특수기호 조합으로 8-20자리 이상 입력해주세요.") 영문, 숫자 포함 6자리 이상 let regPass1 = /^(?=.*[a-zA-Z])(?=.*[0-..
[git] git commit 내역 commit 히스토리 엑셀 다운로드 git commit history를 엑셀에 저장하는 방법입니다. 프로젝트를 종료 할 때 쯤 문서화를 위해 git repository 안의 모든 커밋 내역을 출력할 일이 있습니다. 터미널에서 간단한 명령어로 날짜, 메시지, 커밋한 user로 엑셀에 저장하는 방법을 사용할 수 있습니다. git commit 내역 엑셀 저장 명령어 git log --all --date=format:'%Y-%m-%d %H:%M:%S' --pretty=format:%an,%ad,%s > ./history.csv 위의 명령 처리를 하면 해당 프로젝트 폴더 내에 history.csv 파일이 생성됩니다. history.csv 파일을 엑셀을 통해 오픈하면 커밋한 user / 날짜 / 메시지 순으로 다운로드가 되었음을 확인할 수 있습니다.
[git] git 강제 push (ft. 강제 git push의 문제점) 강제로 git push 하는 명령어 입니다. 강제 git push 하는 명령어 git push -u origin master --force //기존에는 git push origin master 여러 컴퓨터에서 한 프로젝트를 동시 진행하다 보니 git push 도중 아래와 같은 에러가 발생했습니다. error: 레퍼런스를 'https://github.com/...git'에 푸시하는데 실패했습니다 힌트: 리모트에 로컬에 없는 사항이 들어 있으므로 업데이트가 힌트: 거부되었습니다. 이 상황은 보통 또 다른 저장소에서 같은 힌트: 저장소로 푸시할 때 발생합니다. 푸시하기 전에 힌트: ('git pull ...' 등 명령으로) 리모트 변경 사항을 먼저 힌트: 포함해야 합니다. 힌트: 자세한 정보는 'git pus..
[js] 룰렛 라이브러리 (ft. 돌림판, roulette) 룰렛 라이브러러리 winwheel.js를 소개합니다. 게임 프로젝트에서 사용할 자바스크립트 룰렛 라이브러리를 찾다가 다양한 기능과 뷰를 적용할 수 있는 룰렛 라이브러리, winwheel.js를 소개합니다. http://dougtesting.net/home Home Welcome to the home of Winwheel.js! Winwheel.js is a feature packed JavaScript library that allows you to easily create spinning Prize Wheels on HTML5 canvas using highly configurable JavaScript classes. dougtesting.net
반응형

티스토리툴바