프론트엔드로 가는 길/react13 09. localStorage Local Storage 크롬개발자 도구 -> Application -> Local Storage 1) 특징 5MB 정도의 문자 데이터 저장 가능 캐시를 삭제하지 않는 이상 영구적으로 저장 object 자료랑 유사하게 key/value 형태로 저장 2) 문법 (1) 추가 localStorage.setItem('dataName','data') (2) 읽기 localStorage.getItem('dataName') (3) 삭제 localStorage.removeItem('dataName') 3) array/object를 바로 저장 불가능 편법으로 저장 방법 (1) array/object -> JSON 변환 JSON은 문자 취급을 받는다. JSON은 따옴표친 array/object 자료이다. localStor.. 2023. 2. 14. 08. react_redux Redux 왜써?! props 없이 state를 공유할 수 있게 도와주는 라이브러리 js파일 하나에 그냥 state 저장해놓고 모든 component가 직접 꺼내쓰는 거 가능 props 전송 안해도 된다~! 꺄륵 1. Redux Toolkit Install 1) Redux 설치 npm install @reduxjs/toolkit react-redux ※ 설치 전에 packge.json 열어서 react,react-dom 두개 18.1x 이상이면 사용가능 2)Redux 셋팅 (1) state 보관 파일 생성 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) store.js 파일(st.. 2023. 1. 30. 07. 자연스러운 메뉴 만들기 Q. 서서히 내용이 나오게 어떻게 해야할까? let [tap, setTap] = useState(0); { setTap(0); }} eventKey="link0" > 버튼0 { setTap(1); }} eventKey="link1" > 버튼1 { setTap(2); }} eventKey="link2" > 버튼2 {/* {tap == 0 ? 내용0 : null} {tap == 1 ? 내용1 : null} {tap == 2 ? 내용2 : null} */} defaultActiveKey: 기본으로 눌려있는 버튼 {setTap(0);}} eventKey="link0"> 버튼0을 클릭 했을 때 '내용0'을 나오게 하기 위해 state 사용 function TapContent({ tap }) { let [fade,.. 2022. 12. 26. 06. Ajax Ajax 서버와 문자만 주고 받을 수 있다. "{ name: "kim" }" 따옴표 쳐놓으면 array,object도 주고받기 가능 : json 문법 (1) XMLHttpRequest (2) fetch() (3) axios Axios Axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 입니다. 문법코드 axios.get(url,[,config]) import axios from "axios" { axios .get("https://codingapple1.github.io/shop/data2.json") .then((result) => { console.log(result); }) }} > 데이터 요청 요청 실패 할 경우 catch axi.. 2022. 12. 25. 이전 1 2 3 4 다음
