개인프로젝트 진행 중 사파리에서 z-index를 설정해둔 요소가 생각대로 보이지 않는 것을 발견했다! css animation을 이용한 물결치는 효과가 타이틀을 가리지 않게 하기위해 z-index를 적용해주었는데, safari는 그대로 가려진다😶🌫️ 시도이 외에도 폰트사이즈, 물결 애니메이션의 위치가 다르게 나타나는 것은 과제 해설 영상에서 소개해주신 reset.css를 적용해 해결했지만 위 현상은 해결되지 않았다.혹시 글자에만 인덱스를 적용한 것이 문젠가 싶어서 wave에도 각각 인덱스를 줘봤지만 해결되지 않았다.검색해보니 safari의 z-index 문제는 꽤 흔하게 일어나는 문제인 것 같다. 원인safari가 다른 브라우저와 렌더링 알고리즘이 달라 발생하는 문제다. 특히 두개 이상의 요소에..
자식 클래스가 생성자를 오버라이딩 하는 경우자식 클래스의 생성자가 호출됐을 때 무조건 부모 클래스의 생성자도 호출된다. 그런데, 자식클래스가 생성자를 오버라이딩 하는 경우가 생긴다.class Car { constructor (name, type, price) { this._name = name; // ...생략 }}class ElectronicCar { constructor (name, price, chargeTime) { super(name, 'e', price); this._chargeTime = chargeTime; } set chargeTime(value) { this._chargeTime = value; }}const elecCar = new Electr..
클릭한 요소의 ID 출력하기필수 구현요소였던 alert 창으로 영화 ID 띄우는 기능!오늘의 작업을 시작하기 전 지난 요소들이 잘 작동하고있는지 확인을 해봤는데 영화 ID가 출력되지 않는 것을 발견했다.1) 각 영화 데이터를 불러올 때 ID가 잘 받아지고있는지 출력해봄 -> 아주 잘 들어오고있다.2) 클릭한 이벤트의 id를 콘솔 출력 -> 아무것도 없다!3) 클릭한 이벤트의 돔 요소를 출력 -> 영화 카드가 아니라 마지막에 추가했던 영화 제목 등이 보이는 infoLayer가 출력됐다! 내가 영화 id를 추가한 요소는 그 상위 요소인 movieCard 였기 때문에 infoLayer에는 id가 없고, 그래서 아무것도 출력되지 않은 것이다. 시도1) infoLayer css pointer-events:none..
참조타입(객체)은 속성을 추가/제거하거나 값을 변경하는 등 여러 변경이 일어날 수 있다.만약 어떤 객체가 더이상 변경되지 않도록 막고싶다면 경우에따라 freeze(), seal()을 사용할 수 있다. freeze() - 모든 변경을 막는 경우새로운 속성 추가/제거, 속성의 값 변경을 포함한 모든 변경을 막는다. 설정 가능 여부, 쓰기 가능 여부가 모두 거짓이 된다!또한 변경을 막은 객체를 반환한다. const obj = { prop: 42,};const returnObj = Object.freeze(obj);obj.prop = 33; // 처리X, 에러발생Xconsole.log(obj.prop); // 42console.log(obj === returnObj); // true seal() -..