캐나다 개발자

https://11001.tistory.com/191 요약 redux-persist 패키지 사용 자동로그인을 원하면 localStorage를 사용 브라우저를 닫으면 로그인이 풀리는 것을 원하면 sessionStorage를 사용 사용 목적 리덕스는 웹 브라우저 창을 닫으면 모든 state가 리셋된다. 유저 로그인 정보 같은 경우 브라우저를 닫아도 유지되어야 한다. 이런 경우 사용될 수 있음 원리 App 이 불러와졌을 때 로컬스토리지에 있던 유저 정보 사용 서버에 현재 로그인 상태 재검증 서버가 응답한 로그인 정보로 업데이트 만약에 토큰이 만료되었을 시에는, 재로그인 요청 웹 스토리지 객체(web storage object) 개념 이해 종류 localStorage sessionStorage localStor..

설치 npm i uuid 사용 import { v4 as uuid } from 'uuid'; const uuid = uuid(); // 랜덤값이 출력된다. v1 : timestamp + random value v3 : namespace + sha-1 v4 : random v5 : namespace + md5

Redux관련 포스팅은 많지만, 너무 어렵다.. 이 포스팅 하나로 최대한 간단하지만 최대한 많이 알리고싶은게 목적이다. 1. Redux는 왜 쓰는가? - useState가 불편해서.... 2. Redux vs Redux Toolkit - 항해 7기는 React Redux만 배운다 - Reduxjs Toolkit 은 React Redux를 보다 쉽고 짧고 편하게 쓰기 위해 나왔다. 실제로 코드량이 반토막난다. - 벨로퍼트님도 Redux Toolkit을 꼭 사용하자고 하신다. - 하지만 항해에서 안배우는거라 툴킷 잘못쓰면 다른 팀원들이 못알아보고 Redux를 사용 못하게 되는 불상사가 일어날지도 아래 마치면서 출처: https://ridicorp.com/story/how-to-use-redux-in-ridi..

명령형 프로그래밍 // double이란 함수는 그냥 들어오는 배열 내부의 값을 2배 하는 함수 function double (arr) { let results = [] for (let i = 0; i item * 2) } fun..

내가쓴 부분은 1도 없고, 스파르타 항해99에서 제공해준 정보이다. 왜 Redux를 쓰는가? useState가 불편하기 때문이다. 여러 컴포넌트에서 같은 state를 공유해서 쓰려면 부모 자식 컴포넌트를 반드시 거쳐야 하는데, Redux를 사용해서 state를 중앙에서 관리하면 원하는 컴포넌트에서 바로 가져와서 사용 할 수 있다. 개발을 하면서 사용할 수 있는 devtools의 퀄리티가 좋고, 많은 개발자들이 사용하는 라이브러리라서 자료가 많아 error 해결이 용이하다. 리덕스 모듈 용어 정리 Action type 어떤 행동을 의미한다. 여기서 행동이란, 가령 계산기 기능을 구현한다면 plus, minus 처럼 기능에 필요한 행동을 뜻한다. action type은 object = {} 다. 그리고 무조..

툴킷에 대해 공식문서 예제로 설명을 하려한다. https://redux-toolkit.js.org/tutorials/quick-start 1. store를 생성해준다 import { configureStore } from '@reduxjs/toolkit' // 빈 스토어 생성, // configureStore - reducer에서 반환된 새로운 state를 store라는 객체로 정리 export const store = configureStore({ reducer: {}, }) 2. store를 index.js에 연결해준다 - 전역관리 세팅 import React from 'react' import ReactDOM from 'react-dom' import './index.css' import App f..

Redux 란 store : 변수들을 저장하고 있는 저장소입니다 -> 단 1개만 생성가능 view : 우리가 보는 화면을 말합니다. action : store에 있는 값을 바꾸고 싶을 때 action을 활용합니다. -> store안의 데이터는 오로지 action으로만 변경가능하다. -> action을 dispatch한다 라고 표현한다. reducer : 이전의 상태와 바꾸고자 하는 action을 합쳐 새로운 값을 생성합니다 -> 값을 실질적으로 수정하는곳, CRUD 가능. 쉽게말하자면 store라는 창고가 있다. 거기서 데이터들을 보관할거고 만약 데이터를 수정할일이 있으면 수정해 달라는걸 관리인한테 알려줘서 수정을 진행해야한다. - 수정해달라고 알려주는거( action을 dispatch), 관리인이수정 ..

깃헙 IO에 올릴때는 BrowserRouter 대신 HashRouter를 써야한다. 주소창에 #이 생겨서 보기는 싫어지지만, #을 기준으로 좌측의 주소를 무시해준다. 이것도 된다는데 내가햇을땐 실패했다. PUBLIC_URL은 홈페이지를 가르킨다고 했었다. // 터미널에 입력 npm i gh-pages package.json에 추가해야함 homepage:"https://kevinkim910408.github.io/리파지토리이름" // 리파지토리 체크 git remote -v // package.json에 추가해야함 - Scripts에 추가할것 "deploy": "gh-pages -d build", "predeploy": "npm run build" // 빌드 생성 npm run deploy

https://kyung-a.tistory.com/36 자세한 변화는 위의 글 참조 1. Routes 모든 Route 들은 Routes 안에 들어가야한다. exact 기능도 없어졌다. - 알아서 url은 정확히 매칭된다. 2. useHistory() 같은건 없다 이제 대신 useNavigate()를 쓰면 된다. import {useNavigate } from 'react-router-dom'; const navigate = useNavigate (); {navigate('/detail')}}> useNavigate() vs Link Link는 JSX로 쓸수 있고, useNavigate()는 없다. 3. 잘못된 url 처리 app.js, bucketlist.jsx 더보기 app.js import React..