전체 글 753

[TIL] 0330 div아래에서부터 쌓기/ 리액트 무한스크롤/ 날짜별로 메세지 묶기/ 스크롤 맨 밑으로 내리기

1. div 아래에서 부터 쌓기 채팅을 하는데 가장 최근의 채팅이 아래에 있어야하고 그러니까 위에서부터 순서대로 쌓이는게 아니라 밑에서 부터 순서대로 쌓여야하는 것이다. export const MessageField = styled.div` padding: 15px 24px; overflow-y: auto; position: relative; height: 500px; box-sizing: border-box; `; export const MessageFieldInner = styled.div` position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; box-sizing: border-box; height: 500px; `; 밑에서 부터 쌓..

TIL 2022.04.01

[TIL] 0329 소켓 연결이 계속 늘어나는 문제

1. 소켓 연결이 1개씩 늘어나는 문제 소켓 연결이 있는 페이지에 새로 고침 없이 나갔다가 다시 들어가면 1개만 연결됐다가 2개 연결됐다가 3개 연결됐다가 한개씩 늘어남 useEffect(() => { dispatch(MyPageService.getOneChatRoomContents(chatroodId)); console.log("connect"); StompClient.connect( {}, function (frame) { StompClient.subscribe( `/sub/chat/room/${chatroodId}`, function (message) { var recv = JSON.parse(message.body); recvMessage(recv); } ); }, function (error) ..

TIL 2022.04.01

[TIL] 0328 ag grid 기본 옵션들 설명

1. ag grid 기본 옵션들 ✏︎ columnGroupShow: 'closed' - open이면 화살표가 생기면서 옆으로 늘어날 때 오픈되고 closed면 closed되었을때 노출됨 ✏︎ resizable: true, - 컬럼 사이즈를 조정할 수 있는지 없는지 ✏︎ editable: false, - 셀을 수정할 수 있는지 ✏︎ sortable: true, - 컬럼 자체에서 소팅가능한지 ✏︎ enableRowGroup: true, - 로우 그룹을 지정할 수 있는지 ✏︎ enablePivot: true, - 피봇 기능 가능한지 ✏︎ enableValue: true, - 컬럼에 function을 지정해서 값을 보여줄 수 있는지 ✏︎ floatingFilter: true, - 컬럼 헤더 바로밑에 필터가 있는..

TIL 2022.04.01

[에러노트] A component is changing an uncontrolled input to be controlled. ...

[문제발생] A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: [원인] select option에 undefined가 들어가는 문제 때문인듯 [해결] 값이 없을 때 '' empty string이 들어가도록 해주기 value={value|| ''}

에러노트 2022.04.01

[TIL] 0326 소켓 + stomp로 리액트 채팅 구현 참고 자료

1. 웹소켓 + stomp를 이용하여 react 채팅 구현 https://dodop-blog.tistory.com/227 WebSocket 사용해서 react와 함께 채팅구현하기 (Stomp사용하기) nodejs에서 socketio를 이용해서 클라이언트와 서버의 채팅을 구현한다면, spring에는 stompjs가 존재한다. STOMP stomp는 websocket와 같이 양방향(클라이언트-서버)네트워크 프로토콜로 HTTP에서 모델링되는 dodop-blog.tistory.com https://dev-gorany.tistory.com/235 [Spring Boot] WebSocket과 채팅 (3) - STOMP [Spring Boot] WebSocket과 채팅 (2) - SockJS [Spring Boot]..

TIL 2022.04.01

[TIL] 20220311 남은 여생을 잘 살아가기 위해 필요한 마음가짐

TIL을 너무 오랜만에 쓴다. 그동안 노션에는 매일마다 업무를 하면서 새롭게 알게 된 지식들을 정리해왔지만 마땅히 새롭다고 할 만한 지식이 없어서 쓰지 않았다. 오늘은 컴퓨터지식이라기 보다는 생각나는 것들을 쓰려고 한다. 제목은 좀 거창한데 내용은 가볍게~ 내가 그동안 생각했던 것들임.. 1. 우울과 무기력이 오는 이유 한동안 무기력한 증세가 며칠간 이어졌다. 심각할 정도가 아니었다. 단지 그냥 잠이 많이 올 뿐이었다. 휴일이 되니 단지 외로워서 친구든지 누구든지 아무나 같이 있었으면 좋겠다고 생각했다. 그런 날이 아주 드물지만 1년에 몇번 찾아온다. 이런 날은 왜인지 도무지 이유를 몰라서 답답하다. 그런데 오늘 아무 생각 없이 산책을 하러 나갔다가 이유를 딱 알게 됐다. 바로 체력이 부족해서이다. 회사..

TIL 2022.03.12

[REACT] AG GRID 를 구현하는데에 필요한 정보들!

내가 이번에 ag grid를 쓰면서 구현하는데 참고했던 자료들 모음zip~ 1. external filter 그리드 바깥의 버튼이나 검색바로 그리드의 컬럼에 필터를 집어넣는 방법 참고 : http://54.222.217.254/javascript-grid-filtering/ https://www.ag-grid.com/react-data-grid/filter-external/ https://www.ag-grid.com/react-data-grid/filter-api/#example-get--set-all-filter-models 2. redux 연결 그리드와 리덕스 연결하는 방법 참고 : https://ag-grid.com/react-data-grid/redux-integration-pt1/ https:/..

WEB/REACT 2022.03.04