728x90 반응형 SMALL TIL & WIL & 회고록29 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. 8월 1주차 WIL - 라이프사이클, React hooks 이번주에 배운 내용은 LifeCycle과 리액트 hooks에 관한 내용이다. 라이프사이클(클래스형 vs 함수형), React hooks 리액트의 컴포넌트는 라이프 사이클을 가진다. 예전에는 라이프 사이클을 관리하기 위해서 주로 클래스형 컴포넌트를 사용했다. 현재는 리액트팀에서 함수형 컴포넌트로 바꾸라고 하는 추세다. 함수형 컴포넌트에서는 LifeCycle의 기능을 가지고 있는 React Hook을 사용한다. 하지만, 아직도 클래스형 컴포넌트를 사용하는 기업들이 있으므로, 유지보수를 위해 클래스형 컴포넌트에 대해 알고 있어야한다. 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const na.. 2022. 8. 7. 이전 1 2 3 4 5 다음 728x90 반응형 LIST
