Text Me!와 프론트엔드 대장정
1.공통 컴포넌트를 만들 때 가장 중요한 요소
첫째, 도메인 컨텍스트로부터 분리돼야 한다. 둘째, 디자인 변경 사항에 유연하게 대응해야 한다.
2.form의 도메인 컨텍스트 관리에 대한 고민
클래스로 input들의 attributes와 validation을 관리해보자
3.복잡한 스타일의 input 컴포넌트 재사용하기
Text Me!는 귀여운 디자인이 포함된 방명록 서비스이다. 이전에 form 도메인 컨텍스트를 관리하여 공통 컴포넌트를 만드는 법에 대해 공유한 적이 있는데, 이것은 로그인/회원가입 페이지처럼 정형화된 페이지에 적합한 방식이라, 편지 작성 컴포넌트에 적용하는 건 미뤄두
4.인증과 인가를 안전하게 처리하기 (Refresh Token Rotation)
Refresh Token Refresh Token은 Access Token을 재발급할 때 사용하는 키이다. Access Token이 긴 만료 시간을 가지게 되면, 탈취당하여 악의적인 공격에 사용될 수 있다. 따라서 Access Token의 만료 기간을 짧게 유지하고,
5.이미지가 많은 웹 사이트 성능 개선하기
Lighthouse 10 FCP(First Contentful Paint) 10% 사용자가 페이지에 처음 도착한 시점부터 페이지 콘텐츠 일부가 화면에 렌더링된 시점까지의 시간 '콘텐츠'는 텍스트, 이미지(배경 이미지 포함), ` 요소 또는 흰색이 아닌 ` 요소를 의미
6.웹 접근성을 고려한 input checkbox 마크업
배경 Text Me! 소셜 로그인 약관 페이지를 개발하며 체크박스를 사용했다. HTML에서 제공하는 input 요소를 그대로 사용해도 되지만, UI의 통일성을 위해 SVG 아이콘을 사용했다. display: none을 사용하여 input 태그를 숨기면 다음과 같이
7.비동기 confirm 모달 만들기 (with Zustand)
Text Me! 이벤트 페이지 개발 중, 1인 당 최대 3개의 편지를 열람할 수 있도록 제한하는 요구사항이 생겼다. 서비스 안내 페이지가 존재하긴 하지만 3개의 편지를 무심코 눌렀다가 더 이상 편지를 열 수 없다는 것을 알게 되면 사용자가 당황할 것이라 생각해서 편지를
8.OAuth 2.0 시스템 프론트엔드 개발기 - 1. PKCE
PKCE를 적용한 OAuth 2.0 시스템 구현
9.OAuth 2.0 시스템 프론트엔드 개발기 - 2. 컴포넌트 라이브러리 제작과 배포
약 세 달 전부터 개발했던 OAuth 2.0 시스템 라이브러리를 배포해서 서비스하게 됐다. 실제로 단국대학교 총학생회와 제휴를 통해 진행한 Text Me! 이벤트 버전에서 해당 라이브러리를 적용했고, 결과적으로 회원수가 기존의 일반 회원가입 대비 46.5% 증가했다.