728x90 반응형 SMALL TIL & WIL & 회고록/TIL25 2022.09.21 / react-query 오늘 한 일 리액트 쿼리 사용법을 알아봄 알림 기능 SSE로 결정함 백엔드와 작업 전 get, delete 모듈을 만듦 내일 할 일 백엔드와 기능 맞춰보기!!! React-Query 소개 Redux를 사용한 API 요청과 비동기 데이터 관리의 불편함을 해소하기 위해 React Query를 도입하여 사용함 React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리 React-Query 장점 1. 서버사이드 상태 관리와 관련된 여러 가지 반복적인 작업들을 손쉽게 처리할 수 있음 데이터뿐만 아니라 isIdle, isLoading, isFetching, isSuccess, isError등과 같은 여러 가지 부가적인.. 2022. 9. 22. 2022.09.20 / 알림기능 - SSE vs WebSocket 오늘한 일 알림기능을 구현하기 위한 방법으로는 두가지가 있음 - SSE vs WebSocket 그 기능들의 차이점을 찾아봄 WebSocket SSE(Server-Sent-Event) 브라우저 지원 대부분의 브라우저에서 지원 대부분 모던 브라우저에서 지원(polyfills 가능) 통신 방향 양방향 단방향(서버 -> 클라이언트) 리얼타임 O O 데이터형태 Binary, UTF-8 UTF-8 자동 재접속 X O(3초마다 재시도) 최대 동시 접속수 브라우저 연결 한도는 없지만, 서버 셋업에 따라 다름 HTTP를 통해서 할 때는 브라우저당 6개까지 가능, HTTP2로는 100개 기본 프로토콜 websocket HTTP 배터리 소모량 큼 작음 Firewall 친화적 X O websocket(server push) .. 2022. 9. 21. 2022.08.10 / Todolist 수정하고, 배포하기 아직은 덜 수정된 상황이지만, 일단 기본 구현은 다 해놨고, 추가 기능 구현 몇개만 더 하면 끝난다. 배포하는 건 vercel과 heroku를 사용해서 배포하는 것이 요구사항이다. 하지만 학습자료에 나와있는건 버전이 다른 버전이라... 똑같이 해도 에러가 뜬다..... 그래서 우리 팀 조장이 매우 힘들어했다ㅠㅠ 결국엔 구글링해서 찾아서 거의 5시간만에 하는 방법을 찾아 배포를 했다. 배포를 하고나니까 코드를 수정할때 모든 코드를 팀장의 레포로 보내야하고... 그렇게 해야 서버가 잘 작동한다 오늘 내가 뭘 한건가 싶은 날이었던거 같다 뭔가 했는데 뭘했는지 모르게 시간이 금방 지나간 하루였다 내일은 1. 디테일에서 이전으로 색깔 오렌지로 바꾸기 2. 코멘트에서 추가하기 버튼 위치 안맞는 거 바꾸기 3. 코멘.. 2022. 8. 11. 2022.08.09 / axios delete 구현 ....ing 다행히도 오류는 더이상 뜨지 않았다!! 삭제 버튼도 잘 작동되고 오류도 안뜨고 아주 잘 돌아가고 있다 다만, element 요소를 나누는 작업을 먼저 했어야했는데 뒤늦게 해버려서, element 내에 기능을 넣지는 못하고, styled-components 용도로만 사용하게 되어버렸다,,, 내가 만든 element는 input과 textarea 부분이었다. styled-components 에서 props를 이용해서 사용할 수 있다는 것을 알고는 있었지만, 사용 방법을 눈으로만 보고 직접 치지 않아 정확히는 몰랐는데, 오늘 코드를 짜보면서 잘 알게되었다. 나는 todolist에서 list 조회하는 것과 todo 컴포넌트를 만드는 것인데, 다른사람들은 나와 다르게 리스트에서 onClick을 했을.. 2022. 8. 10. 2022.08.08 / 404 Not Found.... 에러...... 에러 잡는 데 다섯 시간이 걸렸다............. 왜 내 눈에는 안보이는거지......? 이번에는 delete 버튼 구현하는데 id값에서 오류가 있어서 봤더니, filter메서드를 쓸때 앞에 글자 하나를 빼서 오류가 난것이었다.... 그럼 그 에러는 잡았는데 문제는 하나의 컨테이너 전체에 onClick을 해주고, navigate를 넣어 이동시켜줬는데 그 컨테이너 안에 삭제버튼이 있었는데 이벤트 버블링이 걸렸던거다 그래서 이벤트 버블링을 막기 위해 내가 사용한 방법은 event.stopPropagation() 이다. (이벤트 전파 방지) 그리고 새로고침을 해주기 위해, window.location.reload();를 썼으나, 쓰면 db에 있는 데이터가 전체적으로 날라갈 수 있다는 말에 get을 이용.. 2022. 8. 9. 2022.08.06 / 리액트 Todolist 뷰 만들기 리액트 심화주차 시작하고 나서 오늘이 이틀째다 어제는 리덕스 툴킷, 미들웨어 공부를 했는데 오늘은 빠른 진도를 위해서 Todolist Upgrade 버전의 뷰를 만들었다 4명이서 각각 CRUD를 나눠서 진행하였다 2시간 정도 오류 찾느라 고생했다 콘솔에 아무것도 안찍히구... 터미널도 성공했는데.... 왜 안나오는지 계소오옥 혼자 찾아보다가 나중에 매니저님이 다른 일로 오셨는데, 그 때 그 오류에 대해 물어봤는데..... 알고보니 변수네임이 컴포넌트 네임과 같아서 무한루프가 걸렸다는..... 꼼꼼히 잘 확인해야겠다는 생각을 했다 2022. 8. 7. 이전 1 2 3 4 5 다음 728x90 반응형 LIST
