12월 2주차 기록

너무 추운 12월 둘째 주!!

---

배워가기

컴포넌트 리렌더링 제외 기준

다음의 4가지 조건을 모두 충족 시 리렌더링되지 않는다.

• 컴포넌트가 이전에 렌더링되었어야 함. 즉, 이미 마운트되었어야 함
• 변경된 props(참조)가 없어야 함
• 컴포넌트에서 사용하고 있는 context값이 변경되지 않아야 함
• 컴포넌트에 예정된 상태 업데이트가 없어야 함

ref 의미 2가지

1. ref object

‘current’ 프로퍼티를 갖는 자바스크립트 객체로, React.useRef의 반환값

2. ref attribute

DOM 요소를 나타내는 JSX의 특별한 attribute로, 해당 DOM 요소에 접근하는데 사용

ex) ref object 를 ref attribute 에 전달하면, 리액트는 ref object 의 current 프로퍼티에 해당 DOM 요소의 참조값을 저장해준다.

request timeout 디버깅

request timeout 오류 발생 시 그 종류에 대해 아는 것은 디버깅 범위를 좁히는데 도움이 된다.

• Connection Timeout : 클라이언트-서버 connection 실패 timeout
• Socket Timeout : 클라이언트-서버 connection 이후 데이터 주고받는 과정에서의 timeout
• Read Timeout : 실제 데이터를 전송하는 I/O 과정이 길어지는 경우 timeout
• Write Timeout : 클라이언트가 서버로 데이터를 보내는 과정이 길어지는 경우 timeout

Read Timeout 발생 시 axios 내부에서 timeout 시간이 지나면(setTimeout) XMLHttpRequest.abort를 호출하여 처리할 수 있다.

abort에 대해서

AbortController는 fetch request에 대해 취소(abort)가 가능하지만, XMLHttpRequest를 취소시키진 못한다. axios는 파편화된 브라우저 환경(어떤 브라우저는 fetch를 지원하고, 어떤 브라우저는 안하고..) 개발 경험을 통합하기 위해서 만들어졌다. 그래서 XMLHttpRequest를 사용한다. 🤔 그럼 axios에서 abort를 하고 싶을 때는? 💁‍♀️ axios 설정으로 AbortController.signal 객체를 받는다. signal에서 취소 이벤트가 감지되면 XMLHttpRequest.abort()를 실행시킨다. 즉 axios에서는 AbortController API를 사용하여 XMLHttpRequest request를 취소한다. 참고: 구현 코드

Ref https://axios-http.com/docs/cancellation

git의 대소문자 구분

git에서 파일이나 폴더명의 대소문자만 변경했을 때 git에서 인식하지 못하는 경우가 있다.

파일명을 아직 변경하기 전이라면?

• git config core.ignoreCase = false 설정을 해주면 대소문자를 구분한다.
• 공식문서에 의하면 대소문자를 구분하지 않는 일부 파일시스템에서 git이 더 잘 동작하기 위한 옵션이라고 한다.
• 기본값은 false이지만 git clone 혹은 git init 으로 레포지토리를 생성할 때 적절한 경우 true로 설정한다.

이미 파일명을 변경해 리모트와 파일 이름이 다르다면?

• git rm -r cached . 을 이용해 git 리모트 파일을 삭제하고 다시 커밋하는 방법을 일반적인 해결책으로 제시한다.

react-testing-library의 queryByRole

react-testing-library에서 DOM에 찾은 태그가 없는 것을 테스트 하고 싶은 경우, queryByRole을 사용하면 된다.

getByRole이나 findByRole을 사용하는 경우 바로 에러가 나기 때문에 검증문이 작동하지 않는다.

서버 이중화의 2가지 목적

1. Failover (시스템 대체 작동)

사용 서버가 장애로 사용이 어렵게 될 경우, 클론 서버로 그 일을 대신 처리하게 해서 무정지 시스템을 구축해 주는 것

👉 active-standby (active-passive) 이중화

2. Load Balance(부하 균등)

두 개 이상의 서버가 일을 분담처리해 서버에 가해지는 부하를 분산시켜 주는 것 한 처리기에 너무 많은 부하가 걸리거나 너무 적게 걸려 낭비되지 않도록 작업을 적절히 분배하고, 필요한 경우에는 작업을 한 처리기에서 다른 처리기로 이동시키기도 한다.

👉 active-active 이중화

---

이것저것

• analytics-debugger - GA 등 analytics의 실행 정보를 로컬에서 확인할 수 있게 해주는 도구

---

기타공유

없당.

---

마무리

코요테와 함께 전사 송년회를 즐거이 마무리하고 🎵

지난주엔 그렇게 낯설게 따뜻하더니…

이번주에 이렇게까지 추워지기 있기 없기

자취 한 달 차, 포근하고 따뜻한 내 방에서 차 한 잔 힐링 ☕️

Relative Posts: