728x90 반응형 회고록5 [React] 22.07.20 회고록 채팅을 보낼 때 엔터키 이벤트를 받아보자 채팅창 입력창에 글을 쓰고 마우스로 보내기 버튼을 누르는 것이 아니라 엔터키를 눌러서 메세지를 보내고 싶다!! const handleKeyPress = (event: React.KeyboardEvent) => { if (event.key === "Enter") { btnSend(); } }; 이벤트를 받아서 키가 엔터인지 판별해서 엔터일 경우 마우스로 보내기를 눌렀을 때 동작하는 btnSend 함수를 호출해주었다. html, css에서는 이렇게 넣어주면 된다. onChangeFunc(event, setEmitMessage)} className="w-[85%] border-main border-2 rounded px-2 py-1 text-sm font-main" o.. 2022. 7. 20. [React] 22.07.19 회고록 socket.on의 위치를 잘 설정하자 강제 퇴장 기능을 구현하는 과정에서 강제 퇴장 버튼이 있는 컴포넌트에서 emit을 보냈다. 그리고 아무생각 없이 똑같은 위치에서 socket.on으로 백에서 보내는 데이터를 받았더니 팝업을 켰을때만 강퇴가 되는 현상이 발생해서 상위 컴포넌트로 올라가서 socket.on을 하는 것으로 바꾸었더니 잘 되었다. Component 재사용 이거는 정확하게 알지 못해서 이게 문제인지는 정확하게 모르겠다. 컴포넌트를 재사용하면서 소켓통신이 이루어질 때마다 다른 유저의 행동이 나의 행동에 영향을 미치는 것 같다. 똑같은 유저리스트 박스를 다른 페이지에서 각각 사용하고 있는데 이거때문인 것 같다.. 아닌가.. 아무튼 지금은 이놈이 문제일거라고 생각중이다... 내일 컴포넌트 리팩토링.. 2022. 7. 19. [React] 22.07.13 회고록 어제의 삽질이 헛된 것은 아니었다. useEffect를 사용하여 atom의 값을 변경한 후 api를 요청하는 파라미터로 사용하는 것. 백문이 불여일견이라했다. function PopUpOtherProfile({ targetId }: PopUpOthProfProps): JSX.Element { const [openModal, setOpenModal] = useState(false); const setUserIdInfo = useSetRecoilState(userIdInfoAtom); const setReqUserInfo = useSetRecoilState(reqUserInfo); useEffect( () => setUserIdInfo(targetId.toString()), [targetId, setUser.. 2022. 7. 13. [React] 22.07.12 회고록 렌더링 할때 State를 변경하면 Warning이 뜬다. function ChatRoom() { const path = window.location.pathname.split("/")[2]; const [chRoomId, setChRoomId] = useRecoilState(getChRoomId); useEffect(() => setChRoomId(path), [path, setChRoomId]); const mainUser = useRecoilValue(getUserInfoSelector); const chatParticipants = useRecoilValue(getChRoomUser); const myIndex = chatParticipants.findIndex( (chatParticipant) =.. 2022. 7. 12. [React] 22.07.11 회고록 후회 바쁘다는 핑계로 리액트로 프로젝트를 하면서 시행착오와 배운 것들을 정리하지 않았다. 프로젝트를 목표한 시간 내에 끝내야 한다는 압박감에 블로그에 정리하는 것은 사치다 라고 자기위로를 하며 하루하루를 보냈다. 프로젝트를 시작하고 매일매일 검색하고 들이받아보면서 지금까지 왔는데 그것들을 다 정리해놓았다면 나중에 조금이라도 도움이 되지 않았을까 하는 후회를 뒤로하고 오늘부터라도 오늘의 시행착오 및 배운 것들을 나열하면서 기록해두자는 생각을 하게 되었다. 그래 오늘부터라도 시작하자. 이미지 업로드 리액트로 이미지를 업로드하는 여러 글들을 찾아보았다. function PopUpProfile(): JSX.Element { const [preview, setPreview] = useState(DefltImg);.. 2022. 7. 11. 이전 1 다음 728x90 반응형
