🔥 오늘 한 일
- [프로그래머스] 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?
해결 방법:
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천원짜리 액정 소중히 다루자..🥲
이번주 내로 하던 플젝 기본 기능 마무리 짓기!
FE developer