개발 카테고리 글

[자바스크립트] 한 번만 실행되는 Event Listener

가끔 onclick, onerror 등의 이벤트가 한 번만 실행돼야 할 때가 있습니다. 가령 이미지에 에러가 있을 때 그 이미지를 다른 이미지로 교체하는 함수를 만들었을 때, 교체된 이미지에도 에러가 있다면 여러분은 콘솔에 찍히는 어마어마한 양의 404 에러를 보실 수 있을 겁니다.잡렉은 덤이고요. 다행히도, 위와 비슷한 상황을 예방할 수 있도록 이벤트 리스너가 한 번만 작동하게 할 수 있는 간단한 방법이

[자바스크립트] 스와이프 방향 알아내기

제 블로그에서 드로워를 열거나, 홈 화면 슬라이더를 넘길 때 사용 중인 스와이프 감지 스크립트입니다. 굉장히 단순한 구조지만, 간단한 사용엔 크게 무리가 없습니다.

191024 블로그 제작일지

사파리 업데이트 테스트용 아이폰이 생겨서 사파리 업데이트를 열심히 하는 중입니다.솔직히 브라우저가 너무 구려서 내다 버리고 싶은 마음은 굴뚝 같은데, IE보단 나으니 일단 참고 업데이트하는 중입니다. 근데 진짜 제대로 작동 안 하는 기능이 너무 많습니다…transform도 이상하게 작동하는 게 꽤 보이고, scroll-behavior는 작동을 하지도 않고, 그래디언트도 제대로 못 그리고…이게 브라우접니까 캐시 헤더 추가 귀찮아서 미루던 작업을 이제야

사파리 그래디언트 오류 수정하기

애플의 사파리(Safari) 브라우저에서 그래디언트를 넣을 때, 다른 색은 괜찮지만, 투명(transparent)색을 그래디언트에 추가하면 그래디언트가 망가지는 오류가 있습니다. 사파리를 제외한 브라우저 대부분에선 위아래 전부 아래와 같은 색의 그래디언트가 들어가는데, 사파리는 transparent를 넣으면 검은색을 잔뜩 끼얹어버립니다.

Lazy Load 업데이트

(스크롤바에 집중해서 보시면 확인이 더 쉽습니다.) 개인적으로 마음에 들진 않는 기능이라 업데이트를 꺼리고 있었는데, 주변에 lazy load가 뭔지 설명하고 어떠냐 물어보니 전부 호평이더라고요.사실 서버 부하도 줄일 수 있고 로딩 속도의 향상도 가능해서 나름 괜찮은 스크립트인 건 맞으니, 한 번 시험 삼아 업데이트해봤습니다. 이미지 로딩을 시작하는 타이밍을 조금 앞당기니 그리 거슬리는 수준은 아니네요. 스크롤바나 스크롤 인디케이터가

191016 블로그 제작일지

모바일 전용 업데이트 스와이프 기능을 업데이트했습니다. 아무래도 모바일에선 버튼 터치보단 스와이프가 훨씬 직관적인 것 같더라고요.저도 본능적으로 슬라이더를 넘기거나 드로워를 열려고 스와이프를 하기도 하고요. 홈 화면에 있는 슬라이더를 스와이프 하면 이전, 다음 슬라이더로 넘어가고, 화면 왼쪽 끝에서 오른쪽, 오른쪽 끝에서 왼쪽으로 스와이프 하면 양측 드로워 - 삼선 메뉴나 프로필 사진 누르면 열리는 것 - 가 열립니다.

티스토리에서 Lazy Load 사용하기

Lazy Load(레이지 로드)란? 오프스크린 이미지(사용자가 보고 있는 화면에 보이지 않는 이미지)를 로딩하지 않고 있다가, 사용자가 스크롤을 움직여서 해당 이미지가 보여야 할 시점에 이미지를 로딩하는 기술입니다. 완벽하게 작동하기 위해선 서버사이드에서 이미지의 경로를 삽입하지 않거나, loading="lazy"란 옵션을 줘야 하기 때문에, 티스토리에선 완벽하게 작동하기 힘듭니다. 투명 이미지 업로드 이미지에 오류가 발생하면 티스토리에서 위 이미지를 집어넣습니다.굳이 로딩하지 않아도 될

[wip] 티스토리 스킨

Summer Nights ver.2에서 큰 틀만 가져오고 싹 갈아엎어서 만들었던 12번째 스킨입니다.해당 스킨의 레이아웃을 거의 그대로 빌려와 다듬은 게 지금 제가 사용 중인 워드프레스 테마고요. 반 년이 넘게 머리를 굴려도 이 틀에서 벗어나지 않는 걸 보면, 아마 제 취향들이 점철된 테마가 이게 아닐까 싶어 혼자 사용 중이던 티스토리 스킨도 배포용 버전을 준비하는 중입니다. 일단 지금은 스크립트를

191006 TWICE New Tab 제작 일지

크롬 익스텐션을 웹 앱으로 옮기는 과정도 포함되어 있습니다. 자료 구조 일단 제일 먼저, 크롬에서 제공해주는 동기화 저장소 (chrome.storage.sync)를 이용할 수 없으니, 로컬 저장소에 모든 자료를 저장하도록 해야 합니다. 기존에 사용하던 방식입니다. 크롬 저장소에서 데이터를 받는 게 생각보다 느려서, 레이아웃을 그릴 때 필요한 옵션들은 전부 로컬 저장소에 저장해두고, 이름, 할 일 목록, D-day등의 정보는 크롬 저장소에