Front

[Web Font] 웹 폰트를 사용하여 페이지 로딩 속도 개선

프로젝트를 마무리 짓고, 여러 사람들의 피드백을 받던 도중 사이트 속도 개선이 필요할 것 같다는 얘기를 듣게 되었다. 문제가 무엇일까 화면을 뜯어보던 중, 4.7mb 달하는 폰트가 눈에 가장 먼저 들어오게 되었다. 요즘 시대에 4.7mb가 무슨 문제일까 생각할 수도 있겠지만 매 번 페이지를 들어갈 때마다 4.7mb를 다운로드하고 있는 그 상황을 경험한다면 유쾌할 수 없을 거라고 생각한다. 현재 폰트를 불러오는 방식은 로컬 스토리지에 폰트를 저장하고 불러오고 있었다. 프로젝트 내부에 폴더를 만들고 폰트를 저장하여 불러오는 형식이었다. 현재 @font-face { font-family: 'beanpoleM'; src: local('beanpoleM'), url('../fonts/beanpoleM.otf') ..

[Java Script] 파일 미리보기 URL.createObjectURL과 FileReader의 차이와 선택.

이미지 미리 보기를 구현할 때 가장 많이 사용하는 것이 URL.createObjectURL과 FileReader 두 가지 방법이 존재한다고 한다. 각 방법들은 장, 단점이 존재하므로 어떤 상황에 사용할 것인지 개발자가 의도를 가지고 사용해야 하는 것 같다. 미리 보기 예시 URL.createObjectURL 특징 동기적으로 실행 해시와 함께 URL을 반환하고 문서가 언로드 이벤트(예: 문서 닫기)를 트리거하거나 실행할 때까지 메모리에 개체를 저장합니다 장점 비교적 코드가 간단할 수 있다. 파일을 읽지 않아도 되기 때문에 빠른 성능을 제공할 수 있다. 단점 메모리 누수가 발생할 수 있어 대용량 파일에는 적합하지 않다. 파일 시스템에서 로드되는 것이 아니므로 오프라인 환경에서는 작동하지 않는다. 예제 con..

[BootStrap] Modal창 띄우기

Jsp - html × 비밀번호를 입력하세요 비밀번호 Close Save changes 1. 상단, class = "modal fade"가 있는 영역에 모달을 불러올 id를 하나 추가합니다. 2. 부분에 팝업창이 생성되었을 때 표기되는 제목을 작성합니다. 3. 부분에 내용을 입력합니다. data-dismiss Jsp - js $("#버튼ID").on("click", function(){ console.log("테스트 버튼 클릭"); // 모달창 띄우기 $("#delButton").modal("show"); }); 1. #버튼 ID 부분에 모달을 띄울 버튼(또는 텍스트, 이미지 등) ID(또는 class 등등)를 작성합니다. 2. 해당 버튼(또는 텍스트, 이미지 등)을 클릭하였을 경우 모달 창이 생성될 수..