[TIL] 221202

Beanxx·2022년 12월 2일
1

TIL

목록 보기
108/120
post-thumbnail

🔥 오늘 한 일

  • [프로그래머스] Lv.2 최소값 만들기, 숫자의 표현 2문제 완료
  • [Udemy TS] Section5(Class) 학습
  • [TS 플젝] 회원가입시 Profile Image URL 저장

🚨 Error Handling

➰ Tab으로 이동시 Button으로 focus되는 현상 방지

아래와 같이 Email Input에서 Tab으로 focus 이동시 Password Input으로 이동하는게 아니라 Sub-Button인 'Forgot password?'으로 focus가 이동하게 된다..
이 현상이 생각보다 꽤나 UX적으로 불편하다고 느꼈다. 그래서 구글링해서 해결방법을 서치서치 🔎

🔗 [StackOverFlow] Can I ignore some website element when navigating using the tab key?

스크린샷 2022-12-02 오후 11 56 18

해결 방법: tabIndex 속성을 이용하면 되는데 default 값이 0이라면 이 속성 값을 -1로 변경해주어 요소를 건너뛸 수 있다!

<button type="button" onClick={props.onClick} tabIndex={-1}>

🧚 새롭게 알게 된 내용

💡 Class

class Department {
  private employees: string[] = [];

  // 매개변수에 private과 type을 함께 설정해줄 수 있다. 그러면 위에서 따로 타입지정 안 해줘도 됨!
  // readonly: 초기화 후에 변경되면 안 되는 특정 필드에 설정
  constructor(private readonly id: string, public name: string) {
		// 빈 객체여도 ㄱㅊ
  }

  describe(this: Department) {
    console.log(`Department (${this.id}): ${this.name}`)
    // this.name가 아닌 name 작성시 클래스 내의 변수가 아닌 외부의 전역 변수를 불러오게 됨
    // this: 생성된 클래스의 구체적인 인스턴스를 참조함
  }
}

// extends: 생성자를 포함하여 기본 Department class가 가진 모든 것을 자동으로 가져오게 됨
class ITDepartment extends Department {
  admins: string[];
  constructor(id: string, admins: string[]) {
    // 다른 클래스로부터 상속받는 클래스에 고유 생성자를 추가할 때마다 상속하는 클래스로 super를 추가해야 함
    // => super: 기본 클래스의 생성자를 호출함
    super(id, 'IT'); // 상속받는 기존 class 값들
    this.admins = admins; // 새롭게 추가한 값
  }
}

✍️ Diary

드뎌 My 맥북 액정 수리 완료,, 102만6천원짜리 액정 소중히 다루자..🥲
이번주 내로 하던 플젝 기본 기능 마무리 짓기!

profile
FE developer

0개의 댓글