본문 바로가기
[react] npm install 설치시 npm ERR! code ERESOLVE npm install 중 npm ERR! code ERESOLVE 오류입니다. react에서 react 차트 패키지인 recharts를 설치하려고 npm install을 하던 중 에러가 발생하였습니다. 오류 메시지 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree 오류 해결 npm install 뒤에 ' --save --legacy-peer-deps ' 를 추가해주면 됩니다. 설치 후 package.json을 확인해보면 받으려고 한 recharts가 잘 받아져 있는 것을 확인할 수 있습니다.
[react] Warning: `value` prop on `input` should not be null. react로 form 작업할 때 자주 나타나게 되는 warning 이에요. Warning 오류 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. input의 value에 null가 들어갔을 경우에 대한 처리가 없는다는 경고메시지 입니다. before after input의 value가 null일 때 ''가 들어올 수 있도록 함 value={value || ' '}
[js] 두가지 배열 합치기, 중복되는 요소 찾기 두가지 배열 합치기(배열 합집합) 배열 합치기 예시 전개 연산자 spread operator(...)를 이용해 두 배열을 그대로 합칩니다. 여기서 중복된 요소를 제거하기 위해 new Set으로 한번 묶어줍니다. let arr1 =[1,2,3,9] let arr2=[2,4,6,9] let newArr = [...arr1, ...arr2] console.log([...new Set(newArr)]) //결과 (6) [1, 2, 3, 9, 4, 6] 두가지 배열 중복되는 값 찾기(배열 교집합) 배열 중복되는 요소 찾기 예시 filter와 includes를 이용하여 중복되는 값을 찾을 수 있습니다. let arr1 =[1,2,3,9] let arr2=[2,4,6,9] let newArr = [...arr1, ...
[js] find includes 차이 array에서 사용하는 메소드 find()와 includes()의 비교입니다. array.find() find() 메서드는 주어진 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefinded를 반환합니다. 찾은 요소의 값 대신 인덱스를 반환하는 것은 findIndex() 요소의 위치를 찾고자 하는 경우에는 indexOf() 배열 요소가 해당 배열에 존재하는지 확인하고자 하는 경우에는 Array.prototype.indexOf() 또는 Array.prototype.includes()를 사용세요. array.find() 예시 const arr1 = [5, 30, 7, 120, 45]; const found = arr1.find(el => el > 10); console.log(f..
[js] 자바스크립트 코드 줄이는 방법 js 코드를 더 짧게 줄이는 몇가지 방법입니다. 자바스크립트 코드 축약 방법 1. or 조건문 (||) 2. and 조건문 (&&) 3. null, undefined, ' ' 체크 4. 삼항연산자 5. 숫자 형변환 1. or 조건문 (||) || 대신 includes()를 사용하면 끝없이 긴 조건문을 짧게 줄일 수 있습니다. before if (a === 'hi' || a === 'hello' || a === 'hallo') { code... } after if (['hi', 'hello', 'hallo'].includes(a)) { code... } 2. and 조건문 (&&) ?. 연산자인 optional chaining operator를 사용하여 객체의 속성값을 접근합니다. 속성 값이 없을 경우 u..
[react] axios headers authorization 추가 axios headers authorization 추가 방법입니다. 아무나 데이터 접근을 못하게 하기 위해서 headers에 token값을 추가하여 token값이 있어야 데이터를 불러오게끔 처리합니다. Bearer란 기본적인 의미는 정보의 신호 전달을 네트워크 단에서 손실 없이 있는 그대로 전달하는 서비스를 말합니다. axios.get axios.get(url, headers: { Authorization: `Bearer ${accessToken}` }) axios.post axios.post(url, data, headers: { Authorization: `Bearer ${accessToken}` }) 프로젝트에서 편하게 import 형식으로 사용하는 방법 const common = { SERVER_..
[html] 자바스크립트 코드 없이 자동완성 검색 구현하기 js코드 없이 html 만으로 자동완성검색을 구현합니다. 구현화면 자바스크립트 코드 없이 자동완성 검색 구현 html 코드
[js] button submit 막기 (ft. form) button의 submit 방지하는 방법입니다. form 태그에서 내에 위치하는 button은 클릭 시 항상 onSubmit 속성의 함수를 실행하는데요. button에 뒤로 가기 또는 취소의 기능을 원할때는 onSubmit 기능을 막아야 합니다. button submit 방지 button type 속성을 button으로 설정합니다. 버튼 form 태그 안의 button 사용법 저장 //submit 실행 취소 //submit 방지
[react] tailwind로 메뉴바 세팅 bottom 쪽 nav바 tailwind className 코드 import React, { useMemo } from "react"; const BottomMenuBar = () => { const naviIcon = useMemo(() => ({ background: "url('/images/mobile/home/hamburger.svg') no-repeat center" }), []) const plusIcon = useMemo(() => ({ background: "url('/images/mobile/home/plus.svg') no-repeat center" }), []) const userIcon = useMemo(() => ({ background: "url('/images/mobile/ho..
[react] 검색 기능 구현하기 react에서 fitler, include를 이용한 검색 기능 구현입니다. html input 코드 input value 속성을 넣어줍니다. onSearch(e)}> 검색 onChange action 코드 input 태그에서 onChange action을 통해 input value값에 저장된 검색어를 가져옵니다. const [search, setSearch] = useState(""); const onChangeSearch = (e) => { e.preventDefault(); setSearch(e.target.value); }; 검색 기능 코드 filter, includes를 이용하여 userId가 검색어를 포함시 필터링을 해주어 검색을 구현합니다. const onSearch = (e) => { e.p..
[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, ... } } }
반응형