javascript93 FOUT(Flash of Unstyled Text) 웹 페이지를 만들다 보면 폰트가 늦게 적용되어 발생하는 FOUT(Flash of Unstyled Text) 현상이 나타납니다. 개발자 도구에서 Fast 4G로 페이지를 로드했을 때 FOUT 현상이 발생했습니다. 사용자들이 처음 진입하여 보게 되는 화면에서 FOUT 현상이 나타나면 텍스트가 깜빡이면서 시각적으로 거슬릴 수 있습니다. 따라서 사용자 경험을 향상시키기 위해 로컬에 저장된 폰트를 프리로딩하고 font-display 속성을 사용하기로 했습니다. 현재 페이지에서 중요하게 사용되는 두 가지 폰트를 link 태그를 통해 프리로딩하고, 동시에 font-display 속성값을 swap으로 설정했습니다. @font-face { font-family: 'KIMMBold'; src: url('.. 2025. 1. 13. [LEARN-JS] Array method - 기존 배열 변경 유무에 따라 나누기 Array method를 사용할 때 기존 배열이 되는것과 새로운 배열이 반환되는 것(기존 배열 변경 X)이 왜 중요한가?기존 배열을 의도치 않게 변경되는 것을 방지하거나, 특정 작업을 수행할 때 의도적으로 배열을 수정하고자 할 수 있기 때문. 기존 배열 변경 O기존 배열이 변경되는 method들을 사용했을때 shallow copy를 해 다른 변수에 할당해 놓았다면 그 변수에 할당한 배열도 변경된다(같은 메모리 주소를 참조하고 있기 때문).만약, 독립된 복사된 배열을 원한다면 deep copy를 사용해야 한다. 1. fill2. pop 3. push4. reverse5. shift6. unshift7. splice8. sort9. copyWithin 기존 배열 변경 X새로운 배열이나 값을 반환하거나 원본.. 2024. 8. 12. [LEARN-JS] Array javascript의 string method를 더 잘 알아보기 위해 직접 구현후 테스트코드를 짰다.이 기록은 구현 중 알게 된 것을 모아둔 것이다.https://github.com/rami0617/learn-js GitHub - rami0617/learn-js: To study javascript, I implement the methods myself by referring to the MDN documentation.To study javascript, I implement the methods myself by referring to the MDN documentation. - rami0617/learn-jsgithub.comcall method1. 'this'값을 명시적으로 설정하고 원하는 문맥.. 2024. 8. 6. [LEARN-JS] String, Jest javascript의 string method를 더 잘 알아보기 위해 직접 구현후 테스트코드를 짰다.이 기록은 구현 중 알게 된 것을 모아둔 것이다.https://github.com/rami0617/learn-js GitHub - rami0617/learn-js: To study javascript, I implement the methods myself by referring to the MDN documentation.To study javascript, I implement the methods myself by referring to the MDN documentation. - rami0617/learn-jsgithub.com 1. concat method 1) concat을 사용하는것보다 할당.. 2024. 7. 23. 이전 1 2 3 4 ··· 24 다음
