회사에서 매 배포를 할 때마다 업데이트 내용을 보여주는 공지사항 팝업을 만들어 달라는 요청이 들어왔다. 일단 해당 팝업의 조건은 다음과 같았다.사용자가 로그인을 한 후 7일 동안만 유지되고, 그 이후로는 사라진다.만약 사용자가 해당 팝업을 클릭하면 공지사항 페이지가 새
회사의 새 프로젝트에 답글 읽기 기능을 추가하면서 다음과 같은 요구 사항을 만족하는 코드를 작성해야 하는 경우가 생겼다. 만약 해당 답글을 아직 읽지 않았다면, 해당 답글은 새 답글이다. 새 답글을 읽음 처리 해 주기 위해서는 해당 답글을 클릭하면 된다. 따라서 각각의
크게 두 가지 경우를 생각해 보았다. 첫번째는 팝업을 보여주는 쿠키를 만드는 경우이고, 두번째는 팝업을 보여주지 않는 쿠키를 만드는 경우이다. 밑에 나름대로 정리해 보았는데, 보면 알겠지만 두 방법 모두 문제점을 가지고 있었다.SHOW_UPDATE_MODAL 쿠키해당
이 기능을 구현하면서 흥미로웠던 점은 데이터를 로컬에서 저장하는 방식을 사용해야 한다는 것이었다. 그렇기 때문에 쿠키를 이용해 구현하였던 것이었다. 그런데 우리가 아는 로컬 데이터 저장 방식은 또 있다. 바로 로컬 스토리지와 세션 스토리지가 그것이다. 쿠키 대신 이런
::after와 같은 CSS 의사 요소들은 인라인 svg 요소에 적용시킬 수 없는가?
디바이스 너비에 따른 이미지 최적화
Push Notification이란?
Push Notification 구현하기
전역적으로 로딩 스피너를 관리하자.
자바스크립트로 CSV 다운로드 기능 구현해보기
회사의 일본 지사에서 연락이 왔다. 이번에 새로 개인정보 처리 방침이 수정되면서 안내 모달을 만들었는데, 일부 일본어 한자(신자체)들이 한국에서만 사용되는 한국 한자로 변환되어 보여지고 있다는 것이었다. 단적인 예로 안내 모달 내의 문구에서 사용된 뜻 정(情) 한자가
지금까지는 Pretendard 폰트를 사용한다고만 했지, 이 폰트를 어떻게 외부로부터 가져올지는 구현하지 않았다. Pretendard와 같은 외부 웹 폰트를 클라이언트로 가져오는 방식을 살펴보자. @font-face 여러 유형의 웹 폰트 파일 사용하기 실제로 외부
사용자가 textarea를 모두 다 읽었는지 검사하기
WebSocket API란 무엇이고 왜 실시간 통신에서 HTTP 대신 사용하면 좋은가.
만약 WebSocket이 원인 미상의 사고로 인해 연결이 끊어진다면?
AWS Cognito를 사용해 어플리케이션 사용자 인증을 간편하게 해 보자.
모달을 편리하게 사용하기 위해 프로미스를 사용해 보자.
로컬 스토리지에 저장된 기존 데이터의 형식을 깔끔하게 바꾸기
로띠를 사용하는 로직에서 메모리 누수가 발생하였다.
브라우저에서 오디오 자동재생을 막는다고..?
다크 모드 기능을 만들어보자.
기본적인 오디오 용어와 미디어 스트림에 대해 알아보자
음성 녹음에 사용할 API와 라이브러리를 선별해보자.