7월 2주차 기록

해커톤 달려달려 🏃‍♀️

배워가기

Node.js 클러스터

Node.js 클러스터를 이용하여 하나의 포트로 여러 인스턴스를 실행시킬 수 있다.

가용 CPU 만큼 만들 수 있으며, 이를 통해 부하를 분산 시키는 것이 가능하다.

cluster.fork() 명령어로 생성하고, 이를 통해서 PM2 cluster 모드가 동작한다고 한다.

Ref https://nodejs.org/api/cluster.html#cluster_how_it_works

텍스트 위 아래 위위 아래

• Descender: 하단 라인(baseline) 너머로 내려간 영역
• Ascender : 상단 라인 너머로 올라간 영역

curl 이모저모

• 응답값을 파일로 저장하기
  • -o(--output) FILE: curl로 받아온 내용을 FILE 이라는 이름의 파일로 저장
• Moved Temporarily 또는 Moved Permanently가 뜬다면
  • -L(--location): 변경된 URL 로 따라 가서 결과를 가져온다. 변경된 URL에 연결했더니 또 다른 곳에 컨텐츠가 있다는 응답을 보낼 수 있다. curl 은 이렇게 다른 위치를 보낼 경우 몇 번을 따라갈 지 여부를  --max-redirs 뒤에 숫자로 지정할 수 있고 기본 설정은 50이다.

Ref https://www.lesstif.com/1stb/curl-deprecated-18219557.html

자바스크립트 debugger

debugger 문은 중단점 설정 등 현재 사용할 수 있는 디버그 기능을 호출한다. 사용할 수있는 디버깅 기능이 없으면 아무런 동작도 하지 않는다.

function potentiallyBuggyCode() {
  debugger;
  // 버그가 있을 것으로 생각하는 코드를 분석하거나, 한 단계씩 진행해보거나...
}

Ref https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/debugger

<video muted />

리액트에서 <video /> 태그의 muted 속성을 설정해도, 실제 브라우저의 개발자도구에서는 표시되지 않는다

먼저 muted 속성에 대해 알아보자. muted 프로퍼티(HTMLMediaElement.muted)는 input의 value처럼 live한 속성(실시간성을 가짐)이며, 현재 값을 반영한다. 그러나 muted 속성(<video muted />)은 초기 컴포넌트의 상태를 반영한다.

💁‍♀️ HTMLMediaElement.defaultMuted 프로퍼티는 muted 속성의 값을 반영한다. 동적인 값 변경은 불가하며, 음성 출력을 on/off시키고 싶다면 muted 속성을 사용한다

리액트는 muted를 속성(attribute)이 아닌 프로퍼티로 넣어주기 때문에 DOM 요소에 표시되지 않는다.

이와 관련하여 jest에서 Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering 메시지가 뜰 수 있다.

video 태그에서 발생하는 에러로, 해결책은 다음 코드를 테스트코드의 beforeAll에 넣어준다

Object.defineProperty(HTMLMediaElement.prototype, "muted", {
  set: jest.fn(),
});

Ref https://stackoverflow.com/questions/62732346/test-exception-unstable-flushdiscreteupdates

enzyme filterWhere vs findWhere

• .findWhere(fn) => ShallowWrapper
  • 렌더 트리에서 주어진 조건을 만족하는 모든 노드를 찾는다
• .filterWhere(fn) => ShallowWrapper
  • 현재 wrapper에서 주어진 조건을 만족하는 노드들의 새로운 wrapper를 반환한다

next.js useFileSystemPublicRoutes

• next.js는 기본적으로 pages 폴더 하위의 파일들에 따라 라우팅을 매칭해주지만, custom server를 사용할 경우 여러 경로에서 같은 컨텐츠가 서빙될 수도 있다.
• 이러한 next.js의 기본 동작을 막기 위해 next.config.js에 useFileSystemPublicRoutes를 false로 지정해준다.

Ref https://nextjs.org/docs/pages/building-your-application/configuring/custom-server

이것저것

• vite build 명령어 실행 시 mode는 자동으로 ‘production’으로 지정되며, 변경하려면 vite build --mode=beta 와 같이 명시해야 한다.
• few shot 러닝 - 일반적으로 10개 미만의 한정된 Sample로부터 학습할 수 있는 머신러닝 방법론
• 터치 디바이스 판별식 - 'ontouchstart' in window || navigator.maxTouchPoints > 0
• ::selection - 마우스로 드래그한 텍스트의 스타일을 지정할 수 있는 가상 요소 선택자
• github CODEOWNERS - 레포지토리별로 팀/개인에 대한 소유권을 구성할 수 있다

기타공유

vite 4.4.0

vite가 벌써 4.4.0 버전이나 나왔다.

한국어 문서도 번역이 되었다니 😲

Ref https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#440-2023-07-06

마무리

대학 졸업하고 오랜만에 해커톤이라는 것에 참여해봤다 🏃‍♀️

12시면 자는 아침형 인간(?)에게 밤샘 코딩이라니…

그런데 정말 그 사이에 운동 열심히 해서 체력이 는 건가, 꽤나 잘 버티다가 휴게실에서 3시간 기절하고 나왔다.

열정적인 팀원들과 함께해서 재밌었던 경험이었다 😄

(상 받았으면 좋겠다 ㅎㅎ)