리덕스 툴킷 - 구조분해할당 관련 질문

질문한 사진들 솔직하게 명료한 해답을 얻을 수 없어서 동영님께 따로 질문을 드려봤다. 1번은 구조분해할당인데, 이게 구조분해 할당인 것을 알고는 있었지만 정확하게 알지는 못했던 것 같다. 다음과 유사한데 1번은 하나의 객체를 찢어서 할당시키는 것이다. 그렇다면, 1번과 같은 경우 하나의 값이 업데이트 되면 그값을 가져오기위해 다시 객체를 가져와서 다시 찢어내야한다. 그렇기 때문에 아래와 같은 설명을 한 것이다. 그래서 나는 2번이 코드는 더 길지만 성능적으로 더 좋다고 판단하였다.

[Redux Toolkit] A non-serializable value was detected in an action

현재의 생각은 저렇게 non - serialized 한 값들은 context api 에 저장을 해야한다는 것이다. 그런데 왜 그래야하는지 근거가 없다. 내 실력으로는 테스팅 할 방법을 모르겠다. 속상하다.

무작정 따라해본 Redux toolkit (1)

https://www.youtube.com/watch?v=bbkBuqC1rU4&t=149s Store.js import { configureStore } from "@reduxjs/toolkit"; export const store = configureStore({ reducer: {}, }); Slice 슬라이스라는 걸 배웠는데 useReducer를 사용할 때 처럼 초깃값을 넣어주나보다. 감속기를 장착한다나 뭐라나.. 전역 state 가 어떻게 변하는지 확인할 수 있다. 이것때문만이라도 쓸 수 있을 것 같다. 너무 편리한 기능이다. useSelector를 사용해서 하나의 값에 접근할 수 있었다. 그냥 구조분해 할당을 사용할 수 도 있었다. https://heroicons.com/ Heroicons Be..

export default vs export

공부를 하다가 export 와 export default 때문에 오류를 경험하였다. export default 로 선언된 컴포넌트는 다음 처럼 구조분해할당을 사용할 수 없다. 어차피 export default 가 하나를 export 하는 것을 의미하니까 말이다. 아래 코드가 올바른 코드 이다. 그리고 export default 는 import 할때 내가 원하는 이름으로 가져올 수 있다만 export 같은 경우에는 아래 코드처럼 as 를 통해 바꾸어주어야한다. import { MyFirstClass as BlahBlahClass, MySecondClass } from './MyClass' 참고자료 https://medium.com/@_diana_lee/default-export%EC%99%80-named-..

M1 프로 윈도우 마우스 키보드 연동

아 리덕스 툴킷 공부하다 재미가 없어서 딴짓을 해버렸다.. 최근에 맥북 노트북이랑 윈도우 노트북을 사용하고 있는데 (아이패드는 덤) 마우스와 키보드 하나로 모든 기기를 사용하고 싶었다. 로지텍 flow 사용하려했지만 (실패) 하지만.. 결국 방법을 찾았다 늘 그랬듯이.. Barrier 라는 오픈 소스를 설치한다. https://github.com/debauchee/barrier/releases Releases · debauchee/barrier Open-source KVM software. Contribute to debauchee/barrier development by creating an account on GitHub. github.com 아래의 블로그에서 굉장히 잘 설명을 해놓으셔서 저는 추가해..

React JSX 조건부 렌더링

https://velog.io/@hidaehyunlee/React-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-2-JSX%EC%97%90%EC%84%9C-%EC%A1%B0%EA%B1%B4%EB%AC%B8-%EC%82%AC%EC%9A%A9%ED%95%B4-%EB%A0%8C%EB%8D%94%EB%A7%81%ED%95%98%EA%B8%B0 [React 리팩토링 #2] JSX에서 조건문 사용해 렌더링하기 리액트에서 if문을 사용하려면 즉시실행함수 형태로 사용해야하기 때문에 AND연산자가 훨씬 간편한 방법이 될 수 있다. velog.io 위 블로그의 자료를 공부한 내용입니다. 왜 조건부 렌더링에 대해 공부하게 되었나? 우선 상황에 맞게 다른 컴포넌트를 렌더링해야했습니다. 하지만 저는 삼항연산..

git reset 특정 커밋으로 돌아가기.

최근 프로젝트를 진행하면서 백엔드분이랑 많은 소통을 하고 있다. 그런데 백엔드 코드의 이전 커밋으로 돌아가고 싶은 경우가 있었다. 그럴경우엔 어떻게 해야할까? 나는 7594ca2 커밋으로 되돌아 가고싶다. (이미 가장 최신의 pull을 한 상태라고 가정하자) 해당 commit 을 복사하자. 이제 아래의 reset 명령어를 통해 해당 commit으로 이동할 수 있게된다. git reset 7594ca297f374eb783 정현님 알려주셔서 감사합니다.

css 정중앙에 위치시키기

언뜻 보면 가운데 있는 것 같지만.. 아닌가 지금보니까 가운데 아니네 .. 가운데 일 수가 없는 이유가 top:35% left:30%를 주었기 때문이였다. 그래서 검색을 해본결과 top:50% left:50% 으로 주면 된다고 한다. 하지만 top:50% left:50% 안된다 ㅋㅋ 50% 50% 는 모달의 시작 지점이 바뀌는 것이다. 기존에 top:0 , left : 0 이었던 디폴트가 바뀌는 것이다! top: 50% , left: 50%로.. 그렇다면 저 모달녀석을 정중앙에 위치시키려면 어떻게 해야할까! margin-left margin-top 을 사용해서 모달 크기의 절반만큼 빼주면 된다. 이 보다 좋은 방법이 있으니.. 바로바로.. transform 을 사용하는 것이다. 위 방법보다 좋은이유는 반..

채팅 여러 ip로 테스트

chatBeforeModal.tsx

swr 인자 넘기는 방법

https://velog.io/@denmark-banana/useSWR-arguments useSWR - Get 요청 시 fetcher 함수에 인자 넣어주기 useSWR을 사용하던 중 fetcher에 인자로 데이터를 보내야해서 공식문서를 참고하였다.2번째 인자로 fetcher로 넣을때 위 3개의 expression은 같은 의미를 갖는다.useSWR은 기본으로 첫번째 인자인 key를 fetch velog.io