이번주(2월 27일 ~ 3월 5일) 백엔드와 프론트엔드가 프로젝트를 만들고 서로 협업을 경험하는 시간이었다.

이번주 Weekend, I Learend

1. 리엑트 쿼리를 사용하면서 staleTime이라는 것을 알게 되었다. staleTime은 리엑트 쿼리가 캐싱한 데이터가 stale하다고 판단해 서버에서 데이터를 refetch해오는 것을 늦춰준다.

2. refetchOnWindowFocus는 데이터가 stale 상태일 경우 원도우 포커싱 될 때마다 refetch를 실행하는 옵션이다. 기본적으로 true로 되어있지만, false로 바꾸면 포커싱이 되어도 refetch를 하지 않는다.

3. debounce란 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 헨들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간이 경과한 후에 한번만 호출하는 것이다.가령 예를 들면 일력값 실시간 검색 혹은 화면의 resize이벤트가 있다.
Throttling이란 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것이다. 예를 들면 무한스크롤이 있다.

4. 인터넷 상에서의 통신 약속을 우리는 프로토콜(protocol)이라고 한다. 특히, 웹에서 서버 ↔ 클라이언트간 주고 받은 상호간의 약속(프로토콜)을 HTTP 프로토콜이라고 한다.

5. 팀장으로써 진행하면서 그리고 벡엔드와 협업을 하면서 느낀것은 무엇보다 어떤 무엇인가에 대해 명확해야한다는 것이었다. 와이어 프레임이 되었든, API 명세서가 되었든 협업을 하는데에 있어서 명확하면 일의 진행속도와 효율이 정말로 많이 올라가는 것을 경험하였다. 또한 복잡할 수록 그리고 시간이 없을 수록 더 천천히 확실하게 진행해야 한다는 점을 배웠다. 시간이 부족하여 빠르게 하면 할 수록 오히려 에러 혹은 오류 때문에 더욱 시간이 지체된다는 것을 알게되었다.

6.
useNavigate
이 훅은 어떤 버튼을 눌렀을 때, 다른 페이지로 이동하게 도와주는 훅이다.

useLocation
react-router-dom을 사용하면, 우리는 우리가 현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있다.

Link
Link 는 html 태그중에 a 태그의 기능을 대체하는 API 이다. 만약 JSX에서 a 태그를 사용해야 한다면, 반드시 Link 를 사용해서 구현해야 한다.

7.
Fetch라는 것은 ES6부터 도입된 Javascript 내장 라이브러리이다. Promise 기반 비동기 통신 라이브러리이다. axios처럼 데이터를 다루기 쉽고, 내장 라이브러리이기 때문에 별도의 설치 및 import를 필요로 하지 않는다.

최근에 도입이 되었지만, 그만큼 단점도 많다.

• 미지원 브라우저 존재
• 개발자에게 불친절한 response
• axios에 비해 부족한 기능

마지막으로

이번 주 목표였던, 팀 협업에서 내 할일을 잘 해내는 것은 성공적이었다. 협업에서 프로젝트를 잘 마무리했기 때문이다. 다음주 (3월 6일 ~ 3월 12일) 목표는 실전가기 전에 나 자신을 되돌아보는 시간을 가질 것이다.