내가 보려고 만든 개발 공부 일지

React로 카카오톡과 같은 채팅 컴포넌트를 만들던 중 발견한 버그와 해결한 방법을 기록해봅니다. 위 이미지는 내가 만들고있던 Chatting.tsx 컴포넌트다. 기록된 메시지들이 보이는 부분이 ChattingList.tsx 이고, 메시지를 입력하는 아랫부분이 ChattingInput.tsx 이다. ChattingInput 에 텍스트를 입력하고 Enter를 누르거나 전송을 클릭하면 입력된 텍스트가 ChattingList에 추가되는 기능을 구현했다. 그런데, 영문을 입력하면 정상적으로 ChattingList에 잘 추가가 되었지만 이상하게 한글만 입력하면 입력된 텍스트와 그 텍스트의 마지막 부분이 잘려서 두번 이벤트가 발생하는 것이었다... 위 이미지와 같은 현상이 발생했다. 그래서 개발자도구에서 break..

const [val, setVal] = useState(true); const someFunc = ()=>{ setVal(false); setVal(true); } return ( {val ? null : message! } ) 위의 예제 코드에서 하고자 하는 일은, 어떤 이벤트 발생 시 div 태그를 한번 제게했다가 다시 보이게 하려는 것이다. 그래서 위처럼 set을 연달아 다른 값으로 해주면 div가 null 됐다가 다시 그려질줄 알았는데 그렇게 되지않았다.. (함수형 업데이트 방식으로 해도 동일했다) 원인 : setter 함수는 비동기적으로 실행되기 때문 즉, js 작업스택에 작업들이 모두 비워진 이후에 호출된 모든 훅들을 다 처리한 후 렌더링을 하기 때문에 위 상황에서 val 는 false가 되어..

(일단, express 에서 사용되는 함수를 미들웨어 라고 부른다. --> 요청과 응답 사이의 중간작업을 해준다는 의미) 예제1) var app = express(); 일때 App.use( A, B, C ) 이런식으로 use 함수를 쓸수있다. (use 안에 인자로 들어가는 함수를 실행하겠다 라는 의미) 여기서 A 에 url 을 적어주면 해당 url 로 요청이 왔을때 B, C 함수가 차례로 불리게되는것이다. 그리고 B 에서 (req, res, next )=>{ next(); } 와 같이 해줘야 C 가 실행된다. (next()를 해주지 않는다면 요청은 거기서 영원히 멈추게 될것이다.) 만약 use의 인자 함수가 하나일때 next()를 하면 요청 url 에 매칭되는 다음 함수(미들웨어) 가 실행된다 Next ..