React Native로 앱 개발을 진행하다면 가장 먼저 마주하는 선택지인 CLI VS Expo.Expo를 사용하면 CLI를 사용할 때보다 빠른 개발이 가능해보였다.QR코드로 진행하는 앱 테스트부터 복잡한 네이티브 설정 없이 앱 개발 시작이 가능하단 점 등.. 하지만 기술 스택 정의를 진행하며 CLI를 선택할 수 밖에 없는 이유가 존재했다. 1️⃣ React Native CLI를 선택한 이유1) 프로젝트 요구사항에 expo가 맞지 않았다.Beyond Meet는 WebRTC 기반 1:1 영상 통화가 메인 기능이었다.기능 구현을 위한 라이브러리로는 아래와 같다.{ "react-native-agora": "^4.x", // WebRTC 영상 통화 "@react-native-firebase..

근무 당시 팀원이 개발했었던 서비스 특정 모달의 "오늘 그만보기"를 클릭 시,모달이 24시간동안 보여지지 않도록 처리할 때 Date 객체를 그대로 사용했었는데추가 기능 구현 시 이 부분이 문제가 되어졌었다.(24시간에 맞지 않게 모달이 활성화되어지는 문제가 발생!) 결론만 말하자면 기존 expires 속성 대신 max_Age 속성을 사용하도록 변경해 처리했다. 문제가 발생했던 부분document.cookie = `today_close=${new Date()}; expires=${date-fns기반의날짜}; path=/;`;해당 코드를 살펴봤을 때, expires가 문제가 되었다.1) 절대 시간을 GMT 형식으로 지정하며 파싱 오류 가능성이 있었다(cookie-octet 규칙을 위반)2) expires 속..

업무 도중 리다이렉트의 status code와 캐싱이 연관된 문제가 발생하였고,그에 대해 내용을 정리해야겠다는 생각이 들었습니다. 1) 서비스에서 url을 en에서 ko로 변경해도 en으로 고정이 된다?서비스에서는 언어 속성인 locale을 url 파라미터를 통해 보여줬으며, 만약 url 파라미터에 값이 없다면기본 값으로 ‘en’이 할당되어지고 쿠키를 통해 사용자 언어 속성을 저장하는 로직이 middleware에 설정되어 있었습니다. 그런데 이해가 안되는 부분이 있었는데요.서비스에 진입 후, en으로 설정되어있는 url을 ko로 바꿔도 콘텐츠는 영문으로 보여지는 문제가 발생하곤 했습니다.???왜?? url과 쿠키도 ko인데 어째서 영문(en) 콘텐츠가 나타날까요.. 2) 리다이렉트 status code가..

현재 개발 중인 프로젝트에서 적용 중인 폰트는 pretendard로, woff2를 사용 중인데요.미약하게나마 한번 더 최적화가 가능해보였습니다.프로젝트 내에서 사용하는 폰트의 스타일은 3개 정도였고, pretendard의모든 폰트 파일을 로드해서 사용할 필요는 없어보였던 것이 이유였습니다. 따라서, 필요한 글자만 포함시키는 subset font 적용을 팀 내 제안했고모두의 동의를 얻어 필요한 서브셋 폰트만 프로젝트에 적용했습니다. prod 환경 기준, 2009.8KiB -> 788.1KiB로 60% 정도 파일 사이즈가 감소되었는데요.드라마틱한 성능 개선에 아니지만 작은 성능 개선을 하나씩 진행하는 것이 목표였습니다. 더 나아가 실사용 문자 기반 서브셋 폰트를 사용할 수도 있었는데요.프로젝트에 새로운 ..

당시의 문제(@tanstack/react-table, @tanstack/react-query, next.js 14v 기반의 프로젝트에서 발생한 문제입니다.) 유저의 서비스 내 결제 내역을 보여주는 "크레딧"이라는 페이지에서동료가 작성한 테이블 관련 로직을 점검해보던 도중, 예상치 못한 성능 문제를 발견했는데요. table과 연관이 있는 비즈니스 로직에서 테이블 데이터를 콘솔로 확인해 보니로그가 끊임없이 발생하고 있었습니다. 무한 렌더링이 발생하면서 브라우저는 동작하지 않았어요. // 문제 발생 코드const useCreditTable = (columns: ColumnDef[]) => { const { offset } = useCreditPagination(); const { data: creditH..

프론트엔드 개발자 커뮤니티 활동 후 모임을 잘 이끌어가주신 분 중 한 분인 OO님과귀갓길에 현재 서비스에서 tanstack-table을 사용한 UI를 개발 중이라고 말했더니자신도 tanstack-table을 사용한 UI를 개발했었고, 타 기업 인터뷰 당시 tanstack-table사용 이유에 대해 질문을 받았지만 제대로 답을 못해 아쉬움이 남았었다고 말씀하셨는데요. 이어서 저에게 왜 tanstack-table을 사용하셨냐고 질문을 해주셨고tanstack-table을 사용하게 되면 결론적으로 편하다를 말씀드린 후, 뒤이어 2개의 추가 내용을 덧붙였습니다. 1) Headless UI의 특성을 살려 빠른 개발을 진행할 수 있어 보였기 때문.기본적인 기능을 모두 제공해주지만 디자인은 커스텀이 가능하므로 디자인은..

2025.02.03 - [그날의 배움] - 사내 코드에 openapi generator를 적용해보자. 위의 처음 OAS 적용 이후 계속 프로젝트가 진행되며, 일정 시점부터 프론트엔드 진영에서참고해야 하는 swagger 문서가 1개에서 2개로 증가했어요. 기존 프로젝트의 OAS 설정에서는하나의 yaml/json만을 이용해 generate 하고 있었기에 다수의 yaml과 json을하나의 파일로 통합해 사용하기 위한 방법이 필요했는데요. 물론 하나의 파일로 통합하지 않고 기존 방식으로도 OAS를 진행할 수 있겠지만이럴 경우 상당한 번거로움이 발생합니다.하나의 yaml에 대한 타입 파일 생성 후, package.json에서 다른 yaml을 선택하여또 다른 타입 파일 생성을 반복해야 하고, 파일 생성에 따른 추가..

항상 컴포넌트가 포함된 스타일 라이브러리만 쓰다가, 동료 개발자가 외주에서TanStack Table을 썼다는 이야기를 듣고 “뭐가 다르지?” 궁금해서 정리해봤습니다. Headless UI와 Component UI의 차이1️⃣ Component UI의 장단점저를 포함한 다른 개발자 분들도 잘 알고 있는 대부분의 UI 라이브러리입니다.버튼, 모달, 드롭다운 등이 디자인되어 있고, 기본적인 동작(클릭, 열기/닫기 등)도 포함되어 있습니다.속성(props)을 추가하거나 테마를 수정하여 커스터마이징이 가능해요! 하지만 디자인이나 동작을 개발자 마음대로 변경하지 못합니다.드롭다운의 애니메이션을 예시로 들어보자면, 기본적인 transition은 설정 가능하지만복잡한 keyframes을 설정하는 것은 불가능해요. 예시..