6월 3주차 기록

친구를 만드는 거야

배워가기

robots.txt

사이트의 웹 루트 디렉터리에 robots.txt 가 없다면 모든 콘텐츠를 수집하는 것을 허용하는 것으로 간주한다.

따라서 사이트가 크롤링 되는 것을 원치 않는다면 아래와 같은 옵션을 통해 접근을 차단해야 한다.

// 모든 봇의 접근 차단

User-agent: *
Disallow: /

테스트의 getByLabelText

🧐 다음 테스트는 통과할 수 있을까?

render(<label>가게 이름</label>);

expect(screen.getByLabelText("가게 이름")).toBeInTheDocument();

통과하지 못하며, 다음 에러가 발생한다.

TestingLibraryElementError:
Found a label with the text of: 가게 이름,
however no form control was found associated to that label.
Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.

테스트 API getByLabelText 조회는 ‘레이블과 컨트롤의 연결’이 전제 조건이기 때문에 label을 단독으로 쓸 경우 실패하게 된다.

즉, label을 DOM상에 렌더하는 것만으로는 테스트에 통과할 수 없고, label을 올바르게 연결시켜주어야 테스트에 통과할 수 있다.

Sentry의 Issue Grouping

Sentry에서 **각 이벤트는 fingerprint를 가지고 있다.

fingerprint는 이벤트 내에 수집된 stacktrace, exception, message와 같은 정보들을 기반으로 내재되어 있는 그룹화 알고리즘으로 생성되며 fingerprint가 동일한 이벤트들은 자동으로 하나의 이슈로 그룹화 된다.

Ref https://tech.kakaopay.com/post/frontend-sentry-monitoring/

jest.config 옵션 이모저모

• jest.config transform 옵션

  • transform
    • transformer를 위한 정규표현식 경로 매핑
    • Jest는 프로젝트 코드를 자바스크립트로 실행시키기 때문에, JSX, TypeScript, Vue template 등의 지원되지 않는 문법을 사용하려면 transformer가 필요하다.
    • 기본적으로 Jest는 babel-jest transformer를 사용한다.,
  • transformIgnorePatterns
    • transform시키지 않을 파일들의 정규식 경로

• jest.config moduleNameMapper의 identity-obj-proxy

  • ES6 proxy를 사용하는 identity 객체로, 간단한 webpack imports를 테스트하는 데 사용된다
  • CSS modules을 mocking하기 위해 사용한다.
    • 이후 스타일 객체의 모든 클래스명 조회가 그대로 반환된다.
    • ex) styles.foobar === 'foobar'

Ref https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer—pathtotransformer-object

너무 많은 dangling commit

git 명령어 입력 시 warning: There are too many unreachable loose objects; run 'git prune' to remove them. 메시지가 뜨는 경우가 있다.

이는 git에 dangling commit들이 너무 많아서 자동으로 cleanup하기 어려울 때 뜨는 메시지다.

• dangling blob - staging 영역이나 index 영역에 있는, 커밋되지 않은 변경사항들
• • dangling commit - 자식 커밋, 브랜치, 태그나 다른 참조에 직접 연결되지 않은 커밋

이런 dangling object들은 저장공간의 많은 부분을 차지하게 된다.

git prune 명령어로 dangling object들을 지워줄 수 있다.

자꾸 이것저것 시도해보고 stash만 해두고 있는데, 처리해야겠다 😅 (아니면 리모트에서 받아온 브랜치와 커밋들을 정리하지 않아서 그런 것 같기도…)

Ref https://medium.com/lynns-dev-blog/git-there-are-too-many-unreachable-loose-objects-c2df601b8001

React의 key prop

• React 컴포넌트에서 상태는 컴포넌트 인스턴스에 결합되어 있다. 따라서 같은 컴포넌트를 페이지에 두 번 렌더링하더라도 각각은 독립적으로 동작한다.
• React의 ‘key’ prop으로 컴포넌트 인스턴스를 컨트롤할 수 있다. React는 컴포넌트를 렌더링할 때마다 새로운 React Element를 반환하는 함수를 호출하여 DOM을 업데이트한다. 만약 같은 element type을 반환한다면, 모든 prop이 변경되더라도 React는 해당 컴포넌트/DOM node들을 유지할 것이다.
• 위에서 말한 모든 prop의 예외 케이스가 ‘key’ prop이다. key prop은 같은 element type을 리턴하더라도 React가 이전 인스턴스를 unmount하고 새로운 인스턴스를 mount하도록 강제한다. 이는 즉 해당 순간에 존재하던 모든 상태들이 완전히 제거되고 컴포넌트가 다시 초기화(reinitialize)된다는 것이다.

👉 즉 React에서 key prop은 단지 배열의 아이템에서뿐 아니라, 자식 컴포넌트를 리렌더링하고 싶을 때도 사용할 수 있다

Ref https://kentcdodds.com/blog/understanding-reacts-key-prop

이것저것

• KeyboardEvent의 keyCode는 deprecated되었고, 이제는 그냥 key를 쓰면 된다. - ArrowDown, ArrowUp, Enter 등의 이름으로 더욱 직관적으로 바뀌었다.
• 자바스크립트에서도 쓸 수 있는 돌연변이 테스트 도구 - https://stryker-mutator.io/
• link vs button
  • button - 현재 페이지에서 특정 상태를 바꿀 것임을 의미
  • link - 현재 페이지에서 다른 페이지로 이동할 것을 의미

기타공유

앗! 공유내용이 없다

마무리

2달 만에 모든 밴드 부원들끼리 모여 전체합주도 하고, 신나는 음주 🍻

원래 알던 부원들과는 더 재밌어지고, 새로운 분들과도 많이 친해졌다. 회사에 언니 동생 친구들이 많이 생겨 기쁘다 😆