[Inner Circle] FE과정 3-4주차 정리

25/04/07

번들링, tsconfig에 대해서도 보기

 

25/04/08

왜 useEffect 밖에서 실행한 함수는 ref(엘리먼트)값이 없을까?

useEffect는 렌더링 직후 실행되기 때문.

반면 일반 함수는 렌더링 중에 실행되기 때문에 엘리먼트가 렌더링되지 않은 시점이기 때문에 없다.

 

25/04/09

• 에러 핸들링 시에 에러 바운더리를 이용해보고 싶다.(그냥)
• 리렌더링시 state와 ref와 일반변수의 차이: 일반변수는 값이 안남아있음. state와 ref는 남아있음.
• state와 ref의 가장 큰 차이는 "값 변경" 시임. state는 값이 변경되면 리렌더링을 유발함.
• 또 다른 차이는 ref는 항상 최신 값이라는 점. state는 렌더링이 끝나야 최신 값을 얻을 수 있음.
• 고민되는것: 프리티어 쓰기
• 멘토링: 요새는 테스팅 라이브러리에 vitest랑 playwright(end-to-end)을 많이 쓴다.

 

25/04/12

• npm의 tsx 라이브러리를 사용하면 .tsx나 .ts 파일을 바로 실행할 수 있다. ex) npx tsx App.tsx
• 오픈소스 라이브러리를 만들 때 테스트코드는 일반 사용자가 아닌 '개발자'가 사용하므로 매뉴얼에 따라서만 테스트 코드를 작성해주면 된다.
• React.FC는 children을 자동으로 포함시켜주며, props의 타입을 제네릭으로 명시해줄 수 있다.(요즘은 굳이 잘 쓰지 않는다)
• HOC이란? 고차함수 (React.memo 등)
• 리액트 Hook form: 리액트 form을 쉽게 다루기 위해 만들어진 라이브러리
• type으로 표기가 되어있으면 번들러가 그 파일을 처리하지 않고 넘어간다.
• 리팩토링 / 기술 부채는 프로젝트 진행중인 상황에서 한다고 하면 명백한 이유가 있어야 한다. ex) 코드 길이 줄이기 그렇지 않으면 사이드프로젝트 진행.
• dependancy가 꼭 필요한지 생각해보기. (fetch 대신 꼭 axios 써야하는가? 요새는 ky도 많이 쓴다고 함.)
• headless UI란 css를 전혀 제공하지 않고, 사용자가 css를 자유롭게 설정하도록 하는 UI이다.

 

25/04/15

• 불필요하게 의존성 배열을 여러개 쓰지 않는지 확인하기. 예를 들어 useEffect의 의존성에만 들어가도 된다면 useMemo와 useCallback의 의존성에 굳이 넣지 않는다.
• vi.stubGlobal()은 전역 객체(window나 globalThis) 에 있는 전역 변수를 mock하는 함수.

vi.stubGlobal("getComputedStyle", () => ({
  lineHeight: "16px",
}));

• vitest.config.ts에서 globals: true 설정은 describe, it 등을 import 없이 전역에서 바로 쓸 수 있도록 하는 설정. syntactic sugar(문법적 편의) 중 하나이다.
• globals: true를 설정했는데도 IDE에서 경고를 띄운다면 tsconfig.json를 설정한다. (compilerOptions를 가지고 있는 config 파일이어야 한다. tsconfig.app.json일 수도 있음)

// compilerOptions.types는 타입스크립트가 전역 타입 정의(.d.ts)를 어디서 불러올지 지정하는 설정이다.
// vitest/globals는 vitest가 제공하는 전역 타입들이다.

{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

• .d.ts는 타입스크립트에서 타입만 정의하는 용도의 파일이다. 라이브러리나 글로벌 타입 정의에 사용된다. 예를 들어 아래와 같은 함수를 정의해놓으면 전역적으로 어디에서나 import 없이 add()를 쓸 수 있다. (대신 .d.ts 파일이 root 경로에 있어야 함)

// math.d.ts
declare function add(a: number, b: number): number;

• 하지만 이렇게 함수를 전역적으로 관리하면 충돌 위험이 크므로 export/import로 모듈화시켜서 관리한다.
• Node.js에서 제공하는 전역 객체(process, __dirname, Buffer, require)를 사용하려면 tsconfig.json에 있는compilerOptions.types에 node 타입을 넣는다. ex) process.env.NODE_ENV
• vite/client 타입은 import.meta.env 타입을 정의할 때 쓴다. (vite 전용 env)

 

25/04/17

• 아래와 같이 쓰면 객체 구조 분할 할당을 하는 것이다.

const {container} = render(<TableWrapper {...dummyProps} />);

• Testing Library에서 screen.find~~ 메소드는 내부적으로 waitFor를 사용한다.