[TIL] 0214

TypeScript Project

스터디에서 알게 된 점

• 이벤트 해제 안해주면 돔 사라져도 계속 남아있다
  • 이벤트는 처음 한번만 걸어주는 게 좋음
• xss: innerHtml을 쓸 시의 보안 문제
• domparser
  • 텍스트를 돔으로 만들어주는 api
  • 기존에 자식 컴포넌트 연결 시 innerHtml과 appendChild의 문제점 해결

해결해야할 문제

• 상태가 바뀔때 자식 컴포넌트들이 모두 다시 생성되는 것이 아닌 조건부로 되도록 구현해야 함

MonthSub Refactoring - TS 전환

문제점
js에서 점진적으로 ts를 적용하려면 js,jsx파일에서는 tsLint rule이
적용되지 않아야한다

해결법
lint rule에 js, jsx문법으로 인해 오류가 나는 rule들을 꺼놓고
overied를 사용하여 ts, tsx파일에만 rule을 켜주었다

rules: {
    ...
    '@typescript-eslint/explicit-module-boundary-types': ['off'],
    '@typescript-eslint/no-empty-function': ['off'],
    '@typescript-eslint/no-unused-vars': ['off'],
},

 overrides: [
    {
      files: ['*.ts', '*.tsx'],
      rules: {
        '@typescript-eslint/explicit-module-boundary-types': ['error'],
        '@typescript-eslint/no-empty-function': ['error'],
        '@typescript-eslint/no-unused-vars': ['error'],
      },
    },
  ],
  

WaffleCard Refactoring

가이드 페이지 이미지 슬라이드 반응형 적용에서 애를 먹었다
이미지 사이즈가 다 다르고 텍스트가 2줄이 될 때 slide컨테이너의 높이가 변하는게 문제였다
→ 이미지를 감싼 이미지 컨테이너의 높이를 정하고,
→ 텍스트와 이미지를 flex-direction: column, justify-content: space-between으로 설정해서 해결했다