이메일 빌더 애플리케이션을 개발하는 중 이상한 문제가 발생했습니다. Fast Refresh가 실행된 후 (코드를 수정하고 저장할 때마다 발생) 이메일 블록들이 화면에서 완전히 사라지는 현상이 일어났습니다

GitAnimals 프로젝트를 진행하면서 한 가지 고민이 있었습니다. 이 서비스는 깃허브 커밋을 통해 포인트를 얻고 그 포인트로 펫을 뽑아 키우는 서비스인데요, 일회용성 접근이 아닌 사용자 참여가 지속적으로 이루어지도록 하고싶었어요.

😧 또 아이콘 추가 작업이네...

최근 프로젝트에서 웹사이트 메인 페이지에 GIF 대신 동영상을 넣어야 하는 요구사항이 있었어요.

팀의 업무 효율을 위해 시작한 이메일 템플릿 빌더 프로젝트 제작기 📧

작년에는 크게 커뮤니티 활동을 하지 않았던 것 같은데, 막상 돌아보니 생각보다 많은 일들이 있었네요.

Figma에서 WebP Export 기능이 없어 겪었던 불편함을 직접 해결하고자 플러그인을 개발한 경험을 공유해요.

GitHub Issue를 활용한 피드백 시스템을 운영하면서 예상치 못한 문제가 발생했습니다. 처음에는 모든 게 잘 돌아가는 것처럼 보였는데, 어느 날 로그를 확인하다가 이상한 점을 발견했죠.

다른 서비스간 로그인 연동 기능에서 특별한 요구사항이 있었습니다. 서비스를 이탈하면, 실패 상태를 다른 서비스에 API로 알려줘야 했죠. 단순히 생각했을 때는 `unload` 이벤트에 API를 호출하면 될 것 같았지만... 실제로는 그렇게 간단하지 않았습니다 🤔

SVG를 최적화하고, 최적화한 SVG를 이용하여 sprite를 생성하는 방법

React 17에서 18로 버전을 업그레이드하면서 예상치 못한 라우팅 문제가 발생했습니다.

제가 만든 스크립트의 전체적인 흐름은 이래요: 어떤 sprite SVG를 만들지 선택해요. 선택한 키에 따라 sprite map 정보를 가져와요. SVG 리스트 데이터로 sprite SVG를 생성해요. 생성된 sprite SVG를 파일로 저장해요. 스크립트 사용 예시는 아래와 같아요: 이 명령어를 실행하면 스크립트가 동작하여 countryCode....

나는 지금까지 어떻게 살았지 🤔

최근에 Sprite SVG라는 기술을 이용해서 웹 성능을 최적화해봤어요.

"이 버그 좀 고쳐주세요!", "이런 기능이 있으면 좋겠어요!" GitAnimals 서비스를 운영하다 보니 이런 피드백들이 종종 들어오곤 했어요.

코드를 실행하면 useEffect가 한 번만 실행될 것으로 예상하게 됩니다. 하지만 실제로 콘솔을 확인해보면, useEffect 실행이 두 번 출력되는 것을 볼 수 있습니다. 왜 이런 일이 발생하는 걸까요?

요구사항 : 앱 환경을 고려해 화면을 이탈하거나, 백그라운드에서도 타이머의 시간이 없어지면 안 됩니다.

요구사항 : 뒤로가기 버튼 클릭, 또는 뒤로가기 동작 (브라우저 동작)이 일어나면, 정말 끝내시겠습니다?라는 모달이 뜨게 됩니다.

10MM 서비스는 "하루 10분으로 시작하는 습관 만들기"입니다.이 "하루 10분"을 측정하기 위해 스톱워치 기능이 필요했습니다.

⏰ 하루 10분을 투자해서 나를 변화시킬 수 있다면?!