2월 첫주차 기록

배워가기

msw resolver

• request, response, context가 인자로 들어온다
• 모킹 데이터를 분기에 따라 사용 가능, req.passthrough()를 사용하면 바이패스한다.

Ref

• https://mswjs.io/docs/basics/response-resolver
• https://wiki.woowa.in/pages/viewpage.action?pageId=959512838

[Weak Cryptography] Make sure that using this pseudorandom number generator is safe here.

Math.random()(자바스크립트 내장 함수)은 난수를 만들어주긴 하지만 보안적으로 취약한 PRNG(Pseudorandom number generator)다.

이보다 안전한 방식으로 암호화된 강력한 난수를 만드는 CPRNG를 사용해야 한다. 예를 들면 Crypto.getRandomValues())가 있다.

사용법은 다음과 같다.

export const generateUUID = (): string => CryptoJS.MD5(Math.random().toString()).toString();

강력 새로고침

• 단축키
  • 크롬: cmd + shift + R (윈도우 ctrl + F5)
  • 사파리: cmd + option + R

일반 새로고침과의 차이점

• 일반 새로고침 Standard Refresh
• 브라우저 캐시를 사용하여 페이지를 빠르게 표시한다.
  • 브라우저 캐시란?
    • 웹 페이지의 복사본과 관련된 파일(이미지, 스타일시트, 스크립트 등)을 임시로 저장
    • 동일한 웹사이트를 다시 방문할 때 속도를 높이기 위해 사용
• 강력 새로고침 Hard Refresh
  • 브라우저 캐시를 무시하고 서버에서 모든 리소스를 새로 받는다.

&

& 문자는 HTML entity로, HTML에서는 ’&‘를 해석할 수 없어서 &로 써주어야 한다.

HTML entity가 문자열 값으로 렌더링된 경우, 브라우저 환경이라면 다음과 같이 원래의 값으로 돌릴 수 있다.

function decode(text: string): string {
  const div = document.createElement('div')

  div.innerHTML = text
  return div.textContent ?? ''
}

HTML 특수코드 리스트

• https://lynmp.com/ko/article/na4022da3d633f943a

이것저것 모음집

• pnpm view [package] verions - 해당 package의 latest 버전을 볼 수 있다

기타공유

meta의 React Conf

아 맞다 meta가 React 만들었지…

Ref https://ti.to/reactconf/2024

Next.js App에서 Router를 사용할 때의 실수들

• 서버 컴포넌트와 Route Handler들을 같이 사용
• 정적 또는 동적 Route Handler
• Route Handler와 클라이언트 컴포넌트
• 서버 컴포넌트와 함께 Suspense 사용
• 들어오는 요청 사용
• App Router와 함께 Context Provider 사용
• 서버/클라이언트 컴포넌트를 함께 사용
• 불필요한 “use client” 사용
• mutation 후 데이터를 재검증하지 않음
• try/catch 블록 내부로 리다이렉트

Ref

• https://vercel.com/blog/common-mistakes-with-the-next-js-app-router-and-how-to-fix-them#using-the-incoming-request(원본)
• https://velog.io/@hawnbin/Next.js-App-Router를-사용할때-발생하는-9가지-실수(번역)

v0.dev

이름 엄청 까리하다. vercel에서 만든 UI 컴포넌트를 만들어주는 도구라고 한다.

Ref https://v0.dev/

Github Copilot을 사용하는 10가지 예상치 못한 방식

1. 깃헙 코파일럿 챗으로 터미널 명령어 입력
2. Pull Request 요약 작성
3. 커밋 메시지 생성
4. CLI에서 깃헙 코파일럿으로 터미널 도움 받기
5. 깃헙 레포지토리 설명
6. 인라인 코드 수정
7. 1000개가 넘는 깃헙 이슈 닫기
8. 코드 문서화 생성
9. 터미널에서 에러 메시지 도움 받기
10. 깃헙 액션 워크플로우 디버깅

별 걸 다 하네… 난 이제 뭐하나…

Ref https://github.blog/2024-01-22-10-unexpected-ways-to-use-github-copilot/

피그마의 독주!

어도비가 두 손 들었다니… 내가 피그마 잘 될 줄 알았지

Ref https://www.bloomberg.com/news/articles/2024-01-30/adobe-gives-up-on-xd-after-figma-deal-collapse

마무리

좋은 일이 있었던 2월 첫주차 🎉

그리고 앞으로도 내 힘으로 해나가야 할 일들이 많을 2024년 🏃‍♀️