본문 바로가기
728x90

분류 전체보기66

React에서 reduxtoolkit 사용해보기 .with AsyncThunk // redux/modules/postSlice.js import { createAsyncThunk,createSlice } from "@reduxjs/toolkit"; const initialState = { // 초기값, data, isLoading, error로 상태관리 posts: [], isLoading: false, error: null, }; const postsSlice = createSlice({ name:"posts", initialState: [], reducers: { createPost: (state,action) =>{ // 액션 생성함수 state = state.concat(action.payload); // dispatch 실행부분 } } }) export const {} =.. 2022. 9. 1.
React input으로 이미지 업로드/미리보기 글을 작성하는 화면에서, 이미지를 업로드하고 미리보기 화면을 보여주는 방법을 알아봤다. // state 값으로 이미지 값 받을 준비 const [imgSrc, setImgSrc] = useState(''); // 미리보기 로직 - input의 onChange에 넣어줄 함수 const fileChange = (fileBlob)=>{ const reader = new FileReader(); // file, Blob 객체를 핸들링하는데 사용 // File, Blob 객체를 사용해 특정 파일을 읽어들여 // js에서 파일에 접근할 수 있게 도와줌 reader.readAsDataURL(fileBlob); // File 혹은 Blob 을 읽은 뒤 base64로 인코딩한 문자열을 //FileReader 인스턴스의 .. 2022. 8. 31.
javaScript axios 사용하기 Axios란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트이다. 즉, http를 이용해 서버와 통신하기 위해 사용하는 패키지이다. Promise: 자바스크립트 비동기 처리에 사용되는 객체 (비동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 의미함) Promise를 사용하면 비동기 메서드에서 동기 메서드처럼 값을 반환할 수 있으며, 다음 중 하나의 상태를 가진다. 대기(pending): 이행하지도, 거부하지도 않은 초기 상태 이행(fulfilled): 연산이 성공적으로 완료됨 거부(rejected): 연산이 실패함 https://axios-http.com/kr/ Axios 브라우저와 node.js를 위한 Promise .. 2022. 8. 27.
React map() 사용 시 unique "key" prop. 오류 컴포넌트를 map() 메서드로 돌릴때 아래와 같은 오류를 볼 수 있다. 일단 React에서 배열을 map으로 돌릴 때 배열의 원소가 key값을 갖고 있지 않아서 생기는 문제이다. 이 오류가 떠도 사용에는 문제가 없지만, 빨간 콘솔을 보기 싫으니 지워봐야겠다. // Home.jsx return 뭐할까용 navigate("/addPost")}>글쓰기 {todoList.map((item)=>( ))} 키값을 달라니 컴포넌트에 키를 추가해줘야겠다. // Home.jsx return 뭐할까용 navigate("/addPost")}>글쓰기 {todoList.map((item)=>( ))} 컴포넌트에 리스트의 각 id를 key값으로 줘봤다. index를 사용해도 된다고 하지만, 구글선생님은 그게 별로 좋은 방식이 아.. 2022. 8. 26.
728x90

티스토리툴바