본문 바로가기
[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..
[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 } ..
[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로 감싸주었고, 분기 처리 된 인라인 스타일 적용..
[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..
[react] redux-toolkit를 이용한 사이트 만들기 ver.1 보호되어 있는 글 입니다. 2021. 12. 19.
[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..
[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" 속성을 추가합니다.
[react] [DOM] Input elements should have autocomplete attributes (suggested: "current-password") 오류 해결 react에서 form, input 박스를 사용하던 중 위와 같은 에러가 나왔습니다. 오류 메시지 오류 해결
[react] Next.js에 global 폰트 삽입하기 (ft. index.html 역할) Next.js에 embed link 적용하는 법입니다. 보통은 index.html 파일에 태그 안에 cdn 코드를 적용하여 폰트 또는 폰트 어썸의 아이콘 등을 삽입하는데, Next.js 는 index.html 파일이 없습니다. Next.js의 기본 구조를 확인하여, cdn 설치하는 방법을 알아보겠습니다. Next.js 폴더 기본 구조 pages/ // HTML, Container, router를 이용하는 페이지 삽입 _document.js // HTML document _app.js // container 공통으로 적용되는 레이아웃, dependency 설치, react의 app.js _error.js // Error 페이지 index.js // Root 페이지 '/'의 path를 가진 페이지 hello..
[react] react hooks로 form 구현 (ft. input이 많을 때) react hooks로 form을 구현하는 가장 효과적인 방법입니다. 구현 화면 react hooks에서 form 구현 방법 admin 페이지에서 가장 많이 사용되는 form을 구현할 때는 수많은 input 또는 select 태그에 입력한 내용을 전달하는 것이므로 각 하나의 항목마다 useState를 일일이 전달하는 것이 아니라, input 태그에 name 속성을 지정한 후, 아래와 같이 { }, 객체 안에 name : value 형식으로 모든 데이터를 전달하여 한번에 관리하는 것이 편합니다. const [myData, setMyData] = useState({}); setData({...data, [e.target.name]: e.target.value }); code import React, { us..
[react] redux, thunk 대화형 챗봇 코드 샘플 보호되어 있는 글 입니다. 2021. 10. 6.
[reast] react-toastify 사용법 react, toast 라이브러리, react-toastify 사용법 입니다. 화면 구현 react-toastify https://www.npmjs.com/package/react-toastify react-toastify React notification made easy www.npmjs.com react-toastify 설치 npm i react-toastify react-toastify import import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; 코드 const Info = () => { const onSubmitData = (e) => { e.preventDe..
[react] Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0. 오류 해결 react에서 sass 사용을 위하여 npm node-sass -save를 통하여 설치를 하고, npm start로 로컬 서버를 구동하다가 아래와 같은 오류가 나왔습니다. 오류 메시지 ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1! ./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader?? ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss) Node Sass version 6.0.1 is incompatible with ^4.0.0 |..
[react] 네비게이션 구현 react, 웹 admin, dashbord에서 필요한 nav 바를 구현합니다. 구현 화면 구현 영상 구현 내용 1. react, hooks를 이용한 Nav 바 구현 2. style은 tailiwind 사용 3. 하위 메뉴 hidden에서 상위 메뉴 클릭 시 하위 메뉴 출현 상위 폴더 const Nav = () => { const menus = [ { id: 1, upperMenu: '상위 메뉴1', lowerMenu1: '하위 메뉴1', lowerMenu2: '하위 메뉴2' }, { id: 2, upperMenu: '상위 메뉴2', lowerMenu1: '하위 메뉴1', lowerMenu2: '하위 메뉴2' }, { id: 3, upperMenu: '상위 메뉴3', lowerMenu1: '하위 메뉴1'..
[react] gauge 차트에 svg, path태그에 text 추가하기 svg, path태그에 텍스트를 추가하는 방법입니다. gauge 차트를 사용하기 위해 react-gauge-chart 라이브러리를 사용하였습니다. react-gauge-chart 라이브러리 https://www.npmjs.com/package/react-gauge-chart react-gauge-chart React component for displaying a gauge chart, using D3.js www.npmjs.com 위의 라이브러리를 이용하여 게이지 차트가 완성되었습니다. 하지만 제가 원하는 것은 아래와 같이 arc 위에 label을 표시하는 것입니다. 자바스크립트를 이용하여 태그를 만들어 innerhtml 속성을 이용하여 텍스트를 추가하려고 하였는데, svg에 text가 삽입이 불가능하..
[react] 챗봇 구현하기 (ft. react-simple-chatbot) react-simple-chatbot 을 이용하여 챗봇을 구현합니다 . react에서 가장 많이 쓰이는 simple 챗봇입니다. documentation 이 잘 되어있고, api를 이용하여 여러가지의 custom이 가능합니다. 구현화면 구현 영상 react 챗봇 https://lucasbassetti.com.br/react-simple-chatbot/ React Simple Chatbot A simple chatbot/conversational-ui react component lucasbassetti.com.br react simple chatbot 설치 npm install react-simple-chatbot --save react simple chatbot import import ChatBot ..
[react] Redux, thunk를 이용한 쇼핑몰 만들기 (ft. redux-thunk) ver.3 보호되어 있는 글 입니다. 2021. 9. 16.
[react] Redux를 이용한 쇼핑몰 만들기 (ft. view) ver.2 보호되어 있는 글 입니다. 2021. 9. 14.
[react] Redux를 이용한 쇼핑몰 만들기 (ft. redux, axios) ver.1 보호되어 있는 글 입니다. 2021. 9. 13.
[react] 장바구니 추가, 삭제, 전체 삭제 기능 구현 예제는 패스트캠퍼스의 "이웅재"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 const [orders, setOrder] = useState([{id: ' ', quantity: 0}]) 의 형식으로 state 관리 장바구니에 상품 추가 선택한 상품 삭제, 전체 장바구니 삭제 사용한 web API: find(), map(), filter() 구현 영상 상품 리스트 컴포넌트 {prototypes.map((prototype) => { const { id, thumbnail, title, price, desc, picUrl } = prototype; const onAdd = () => {addToOrder(id)} //** 이 부분에서 클릭이벤트로 해당 id 보내줌 return ( {title} $ {p..
반응형

티스토리툴바