목록react (8)

대기업을 향한 디벨롭 블로그

이미지 미리보기 - FileReader 객체 사용하기(공식문서 파헤치기)

FileReader 객체는 파일을 읽어들어와주는 API이며 , 읽어드린파일 데이터는 개발자가 사용할 수 있다. 일단 공식문서를 토대로 정리할거니 공식문서를 올리겠다. https://developer.mozilla.org/ko/docs/Web/API/FileReader FileReader - Web API | MDN FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 developer.mozilla.org 일단 파일을 넣어야되기때문에 웹에 input태그를 이용해서 띄어보겠다. {fileOn(e)}}/> input태그의 속성은 type은file , m..
ReactJS 2022. 8. 4. 15:39
localStorage 브라우저에 데이터 저장하기(상세)

참고용사이트 https://ko.javascript.info/localstorage localStorage와 sessionStorage ko.javascript.info 브라우저에 데이터를 저장할 수 있는 LocalStorage를 알아보겠습니다. 브라우저에 데이터를 저장할 수 있는 객체는 2가지가있는데 하나는 sessionStorage와 우리가 배워볼 localStorage가 있다. 이 두가지를 웹 스토리지 객체라고 부른다. 먼저 localStorae의 특징을 알아보자. 데이터를 저장할때의 자료형은 '문자열'데이터만 저장할 수 있다. 데이터를 새로고침하여도 데이터가 남아있다. (브라우저를 닫았다 열어도 없어지지않음) 웹 스토리지객체는 네트워크 요청시 서버로 전송되지않는다. 최소 2MB이상의 객체를 저장할..
ReactJS 2022. 8. 1. 00:52
Redux Toolkit-3 state파라미터(payload) 응용

Redux Toolkit 저번 1,2에서 slice만들고 state변경함수 만들어보고 해보았다. 이번에는 state변경함수에 파라미터를 전달하는걸 해보겠다. 일단 예제를 만들것이기때문에 셋팅해주겠다. //store.js import { configureStore, createSlice } from "@reduxjs/toolkit"; let todo = createSlice({ name : 'todo', initialState : [{id : 0 , title : '할일이없습니다', complete : false}] }) export default configureStore({ reducer:{ todo : todo.reducer } }) store.js를 만들어주고 todo라는 slice를 하나 만들어 ..
ReactJS 2022. 7. 28. 16:41
Redux Toolkit-2 state변경하기 (useDispatch)

https://mhypro.tistory.com/60 Redux-1 (useSelector) state만들기 사용하기 이번엔 Redux를 알아보겠다. Redux는 상태관리 라이브러리다. 리액트에서 가장많이 쓰이는 상태관리 라이브러리라고 한다. 약간 ContextAPI처럼 전역적으로 데이터를 관리할 수 있다. react뿐만 아니라 mhypro.tistory.com configurestore를 사용하여 새롭게업데이트된 Redux store를 만들고 slice도 만들어주었다. 이제 변경을 해보자. //store.js let person = createSlice({ name : 'person', initialState : 'younghwan' }) 저번에 만들었던 person이라는 slice이다. 변경을 할때는..
ReactJS 2022. 7. 28. 10:53
이전 Prev 1 2 Next 다음