본문 바로가기
728x90

전체 글66

React datepicker 사용하기/css react datepicker 사용하기 https://reactdatepicker.com/ React Datepicker crafted by HackerOne reactdatepicker.com package 설치 yarn add react-datepicker import DatePicker from "react-datepicker"; // 데이트픽커 import import "react-datepicker/dist/react-datepicker.css"; // 데이트픽커 기본 CSS import { ko } from 'date-fns/esm/locale'; // 한국어 변환 export default function DatePickerTest() { const [startDate, setStartDat.. 2022. 9. 15.
React styled Component hover 리액트 스타일 컴포넌트에 hover 주기 // &:hover를 넣는다. const ButtonStyle = styled.button` &:hover{ background-color : skyblue; color : blue } `; 동일한 방식으로 :link , visited, active 등을 사용할 수 있다. 2022. 9. 9.
redux Mock server(json-server) 사용하기 / .with POST MAN React를 사용하면서 서버와 연결하기 전, Post Man을 통해 임시로 서버를 연결해서 React의 view가 어떻게 처리되는지 보고싶을때, 데이터가 어떻게 들어가있는지 확인하고 싶을때 사용할 수 있다. postman https://www.postman.com/ Postman API Platform | Sign Up for Free Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster. www.postman.com Post Man을 쓰기 전에, 먼저.. 2022. 9. 2.
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.
728x90

티스토리툴바