분류 전체보기66 [localStorage] DB없이 web에 데이터를 저장하는 방법 데이터를 저장하는 방법은 대표적으로 DB서버에 저장하여 불러오는 방법이 있다. F12 키로 개발자도구를 켜서 콘솔창에 다음을 입력한다. localStorage.setItem('name', 'Kim') 그러면 key가 'name'이고 value가 'Kim'인 데이터가 localStorage에 저장된다. 확인하는 방법은 개발자도구 Application탭을 들어가면 Local Storage가 있다. 자료를 출력하는 방법 localStorage.getItem('name') // "Kim" key에 해당하는 value가 출력된다. 자료를 제거하는 방법 localStorage.removeItem('name') 이번엔 key에 해당하는 value가 제거 된다. 그럼 객체나 배열형 자료도 저장이 될까? 저장은 되지만 .. 2021. 8. 18. [Redux] 사용법 let alert초기값 = true; function reducer2(state = alert초기값, 액션){ if() return state } let store = createStore(combineReducers({reducer,reducer2})); Cart.js로 와서 다음과 같이 state.reducer와 state.reducer2를 한다. function state를props화(state) { //redux store데이터를 가져와서 props로 변환해주는함수 return { state : state.reducer, alert열렸니 : state.reducer2 } } state를 쉽게 꺼내 쓰는 방법 Cart 아래 다음을 입력한다 let state = useSelector((state) =.. 2021. 8. 17. [React js] Redux 프롭스가 많아지면 쓰기 불편해서 쓰기 싫을 때 쓴다. 1.띄어쓰기를 해서 2개를 동시에 설치한다. yarn add redux react-redux 2.index.js 에 import하고 다음과 같이 app component를 Provider로 감싸준다 (감싸진 애들끼리 props 없이 state 공유 가능) 3. createStore로 state를 만든다. let store = createStore(()=>{}); 4. Provider에 값을 전달한다. 그냥 바로 store로 쓸수는 없고 세팅을 해야한다. 5. Cart.js에서 다음 함수를 추가하고 export default부분을 다음과 같이 바꾼다. function state를props화(state) { return { state : state } }.. 2021. 8. 13. [React js] props 대신 쓸 수 있는 context API 1. 범위를 생성한다 let 재고context = React.createContext(); 2. 같은 값을 공유할 범위를 지정한다 { shoes.map((a,i)=>{ return ( ) }) } 3. 변수로 받아오기 & 사용하기 function Card(props) { let 재고 = useContext(재고context); return ( { props.shoes.title } { props.shoes.content } & { props.shoes.price } {재고[props.i]} ) } export default App; hook이기 때문에 자동으로 import 할 수 있음 # 다른 파일(Detail.js)에서도 context를 쓰는 방법 1. 생성한 범위 앞에 export를 붙여준다. ex.. 2021. 8. 13. [React js] Ajax Ajax 서버에 새로고침없이 요청을 할 수 있게 도와줌 1.jquery $.ajax() 2.axios.get() 3.쌩 자바스크립트 fetch() yarn add axios (또는 npm install axios) onClick={()=>{axios.get()}} get요청 .then() 요청성공시 실행하는 코드 .catch() 요청실패시 실행하는 코드 then(result) 가져온 result.data 결과 데이터만 json은 따옴표가 쳐져있음 object가아님. 서버와 통신은 텍스트로만 되기때문. axios를쓰면 json을 object로 알아서 바꿔줌.(fetch는 안해줌) 내가 생각한 답 let shoes사본 = [...shoes] shoes변경([...shoes사본,...result.data]) .. 2021. 8. 12. [React]SASS SASS 를 설치한다. yarn add node-sass (npm install node-sass) SASS는 CSS를 좀더 프로그래밍언어 스럽가 젝성가능한 preprocessor.(css에서 변수 연산자,함수,extend,import사용가능) 브라우저는 css밖에 모르므로 sass 작성파일을 css로 컴파일 해야함. node-sass가 알아서해줌 2021. 8. 11. 이전 1 ··· 3 4 5 6 다음
