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