삐옹

문제 소속된 워크스페이스 목록을 조회하는 요청과 내가 받은 초대장 목록을 조회하는 요청(GET요청 x2)이 2개의 useEffect 안에서 실행되고 있다. 전역 state를 이용해 같은 slice의 다른 키 값으로 업데이트 요청을 보내는데 소속된 워크스페이스 목록의 값을 잘 불러왔다가, 또 어떤 때는 값이 들어왔다가 다시 초기값으로 돌아가는 상황. Redux로 저장한 배열의 값이 여러번의 렌더링을 거친다. 초깃값 -> 업데이트 -> 초깃값 or 초깃값 -> 업데이트 패턴으로 리렌더링 할 때마다 들어오는 값이 달라짐 그래서 어떤 때는 배열 값이 비어있어서 에러가 뜨고 또 어떤 때는 잘 읽어온다. 예) 첫 렌더링 - arr = Array(0) / 두 번째 렌더링 - arr = Array(3 ) / 세 번째 ..

상황 로그인을 하고나서 workspace 배열 내에 데이터 유무에 따라 처음 로그인한 사람(뉴비)과 기존 유저에게 다른 화면을 보여주어야 한다. 생각 할 것 앱의 상태에 따른 state 관리가 핵심이다. workspace 배열 내에 데이터 유무에 따라 유저의 상태를 어떻게 표현 할 것인지 명시한다. (앱의 상태를 나타내는 state를 만든다.) 로그인 일 때와 아닐 때를 구분한다 뉴비인지 아닌지 판단하는 상태를 만들기 로딩 중 일 떄와 아닐 때 를 구분하는 상태만들기.(스피너를 위함! 난 꼭 스피너를 넣어야겠음!) +) 로그인 상태 유지하기 순서대로 코드로 살펴보기 상황 별 유저의 상태 // App.js // 정리해보면 유저의 상태는 3가지로 나뉜다 // 워크스페이가 있는지 없는지 판단 중일 떄 -> "..

내가 구현하고 싶은 채팅 기능의 일부이다. 채팅 할 수 있는 사람들의 리스트가 있다. (A유저, B유저, C유저) -> A유저를 클릭 시 A유저에게 채팅을 할 수 있다. -> B유저를 클릭하면 A유저와의 채팅을 끝내고 B유저와 채팅을 할 수 있다. -> C유저를 클릭하면 B유저와의 채팅을 끝내고 C유저와 채팅을 할 수 있다. * 실시간이냐고? 오브콜스 와이낫. 실행 순서 서버와 socket.io 연결. 방에 입장 + 대화목록 불러오기 불러온 대화목록 화면에 뿌리기 채팅을 치면 채팅목록에 저장하고 대화목록을 다시 화면에 뿌리기 지금껏 나눈 채팅을 대화목록에 저장하고 방 떠나기 간략히 말하자면 방 입장 -> 채팅 -> 방 나가기 + (다른) 방 입장 -> 채팅 -> 방 나가기 + (다른) 방 입장 + 채팅 ..

서론 진행 중인 프로젝트에 업로드 할 파일의 이미지를 미리보여주는 기능을 넣어 보고싶어서 내용을 알아보다가, 단순히 코드 복붙을 하고 싶지않아 정리하게 되었다. Web API 인 FileReader라는 객체를 이용하여 구현해보았다. React에서 이미지 미리보기 마크업 ... const [imgSrc, setImgSrc] = useState(""); return( 이미지업로드 {imgSrc && } { encodeFileToBase64(e.target.files[0]); }} /> ) ... 동작원리 onChage함수 안에서 e.target.files를 콘솔에 찍어보면 선택된 파일의 목록(FileList)이 나온다 fileList를 자바스크립트에서 파일에 접근할 수 있도록 한다 file 객체를 읽어서 b..

증상 잘 작동하던 추가하기 버튼이, 버킷리스트의 이행여부를 체크할 수 있도록 Redux의 initialState에 completed 키값을 추가해준 뒤부터 버튼을 누르면빈 태그만 반환하기 시작 해결방법 click이벤트 발생한 태그 확인 click이벤트 함수 : useRef로 접근한 value값이 문제일까 싶어 콘솔을 찍어보았더니 current객체에 value가 잘 받아와진다. bucket.js(Redux파일) 내 createBucket 함수 : value값도 잘 넘어오고 action객체를 생성하는 코드에도 이상은 없다. 여기까지 문제가 없었다는건 분명 reducer에서 문제가 난거라고 확신했다. reducer 안에서 type이 create인 객체 [X] action 타입이 "bucket/CREATE"가 ..