로그인을 하면 accessToken이 발급되어서 해당 토큰이 localstorage에 담기게 하려고 했다.근데 분명히 토큰은 받아와지는데 ..자꾸 localstorage에는 안 담기는 이슈 발생 .. const data = await response.json();const accessToken = data.accessToken;console.log('data:',data);console.log('token:',accessToken);localStorage.setItem("accessToken", accessToken);router.push("/main"); 혹시나 해서 콘솔로 data,accessToken을 찍어봤는데도 다 잘 나왔다.. 찾아본 결과 localstorage는 클라이언트(브라우저)에서만 ..

리액트의 가상돔이 일단 무엇인지 알고있어야 한다. 가상돔: 웹 성능을 최적하하기 위해 사용되는 DOM 관리 방법으로 웹 어플리케이션의 상태가 변경될 경우 객체 형태의 가상 DOM을 통해 변경된 부분만 찾아내어 실제 DOM에 반영하는 기능을 한다. 가볍게 동작순서를 보자면,1. Diffing 알고리즘을 통해 가상돔에서 변경된 부분을 찾아낸다.2. 찾아낸 변경점을 실제 DOM에 적용하는 Reconciliation(재조정) 알고리즘을 거친다.따라서 위 과정으로 인해 브라우저 성능이 향상되는 것이다. 상태가 변경 된다는 것은 즉, state와 props가 변경된다는 뜻 아닐까? Q: 그럼 state,props가 변경될때마다 매번 Diffing,Reconciliation 과정이 수행되는 걸까?A: 각각 매번 처리..

해당 input에 값을 입력하니까 이렇게 에러 메시지가 떴다. 1.초기: field.value가 undefined2. react 판단: 아,이건 uncontrolled Input 이구나!3. 값이 들어옴 : field.value가 string으로 변경4. react 혼란 : 어,,갑자기 왜 controlled 됨? 즉, uncontrolled 컴포넌트인데 controlled로 되서 react가 혼란을 겪고있다는 뜻.. ( )}> 작성한 코드를 보니까 form 형태에서 초기 defaultvalues에 '비밀번호 확인'필드를 지정을 안해줬고, 또한 value={field.value}를 보면 undefined 혹은 null이 들어왔을때의 처리를 안해줬기 때문에..

GET 요청시 parmas에 배열을 보내는 부분이 있어서 ,해당 요청 url을 확인했더니 //admin_api/users?role[0]=MANAGER&sort=createdAt:desc&offset=0&limit=15이런식으로 role[0] 이상한 값이 들어있다. 서버에서 원하는 url은 다음과 같은데../admin_api/users?role=MANAGER&role=ADMIN&sort=createdAt:desc&offset=0&limit=15이런식으로 '&'형태로 나열되는 것! 서버에서는 배열타입을 정의했기에 프론트에서 배열을 보내도 주소값이 이상하지 않게 처리를 해줘야한다!즉,query string 처리를 해줘야하는 것이다. 1. qs 설치query string 관련 형식 맞추기 편리하게 함수 제공하..

계정 등록 페이지에서 폼 필드에 값을 입력하고 '저장'버튼을 눌렀더니 'RangeError : Maxmum call stack size exceeded' 라는 에러가 떴다. 보통 재귀함수를 호출할때 발생하는 에러다. 해당 view 코드를 확인해보니 저장버튼을 눌렀을때 모달을 띄워 확인과 취소를 실행하게 하는데, 이때 취소버튼을 눌렀을때 모달이 닫히면서 현재 페이지의 상태를 유지해야한다. const handleRegister = handleSubmit(()=>{ showModal({ type: "default", dimmedColor: "transparent", title: "저장 성공", ..

다음과 같은 질문에 답은 뭘까?1. userB의 출력값은 뭘까?const userA = { name:"Tom", profile :{email:"Tom12@gmail.com"}};const userB = {...userA}userA.name="Mon"userA.profile.email = "Mon12@gmail.com"console.log(userB) 자칫하면 ' {name :"Mon", profile:{email:"Mon12@gmail.com"}} ' 으로 생각할 수 있다.userB는 userA의 얕은 복사본을 생성한다. name 속성이 얕은 복사 과정에서 '값'으로 복사가 되므로 userB.name에는 영향을 주지 않는다 .여기서 name이 그저 문자열이고, 문자열은 기본형(primitive) 이기 때..