iOS에서 화면 캡처를 막고 싶었다 iOS에서 민감한 정보를 다루는 앱이라면, 화면 캡처나 녹화를 막는 기능은 필수입니다. React Native 환경에서 이 기능을 구현하고자 했던 우리는 하나의 라이브러리를 발견하게 되죠. react-native-capture-protection 문제는, 공식문서에 나온 그대로 따라 했는데도 전혀 동작하지 않았...

왜 파인튜닝을 하게 되었는지 저는 PECSPERT 팀에 합류하며 AI 문장 완성 기능을 개발하였습니다. 문장 완성 기능은 사용자가 조합한 단어카드를 완전한 문장으로 고쳐주는 역할을 합니다. 저는 이 기능을 개발하기 위해 OpenAI의 gpt-4o-2024-08-06 모델을 활용해 기능에 맞는 프롬프트를 설계하여 기능 구현을 완성했으나, 결과 ...

프록시 서버를 만든 이유 PECSPERT 팀에서 자폐 스펙트럼 아동을 위한 AI 문장 완성 기능을 개발하며 OpenAI API를 활용하고 있습니다. 초기에는 프론트엔드에서 직접 API를 호출하려 했지만, 보안상의 위험을 발견했습니다. API 키가 클라이언트 측에서 노출될 경우 악의적인 사용으로 이어질 수 있고, 부적절한 요금 청구가 발생할 가능성도...

인증 시스템 개선 경험 이전 프로젝트에서는 클라이언트가 인증 토큰을 LocalStorage에 저장하고 매 요청마다 백엔드에 전송하는 방식을 사용했습니다. 하지만 이 방식은 보안성과 유지보수성 측면에서 여러 문제를 드러냈습니다. 보안 취약성: LocalStorage에 저장된 토큰이 XSS 공격에 노출될 위험 토큰 갱신의 복잡성: 클라이언트...

디자인 시안에서 정해진 커스텀 스타일이 있었지만, 기본 input 요소(checkbox, radio)로는 이를 구현할 수 없었습니다. 네이티브 요소 대신 커스텀 디자인을 적용하면서도 웹 접근성을 지키기 위해 WAI-ARIA 패턴을 도입한 공통 컴포넌트를 설계했습니다. 목표는 다음과 같았습니다. 스크린 리더와 키보드 사용자도 동등하게 사용할 ...

배경과 목표 단순히 컴포넌트를 만드는 데 그치지 않고, 기획 단계부터 웹 접근성과 개발자 경험을 동시에 개선하고자 했습니다. 기존 프로젝트에서는 컴포넌트가 여기저기 흩어져 위치 파악이 어렵고, 재사용성과 유지보수성이 떨어지는 문제가 있었습니다. 이를 해결하기 위해 아토믹 디자인(Atomic Design)을 변형한 구조를 제안하고, 접근성과 효율성을 모...

이 글은 react-hook-form: "^7.54.2" 버전을 기반으로 작성되었습니다. 기존 문제점과 개선 목표 이전 프로젝트에서 회원가입 폼을 구현할 때, 상태 관리와 UI 로직이 뒤섞여 가독성과 유지보수성이 떨어졌습니다. 예를 들어, 아래처럼 useState와 이벤트 핸들러로 직접 관리하던 방식은 몇 가지 불편함을 초래했습니다. // r...

배경과 문제 상황 서비스에서 사용자가 그룹을 생성하고 관리할 수 있게 설계했지만, 권한 제어가 없어 비관리자가 생성, 수정, 삭제 작업을 수행할 수 있는 보안 취약점이 있었습니다. 이를 해결하기 위해 isAdmin 값으로 관리자 권한을 판단하고, UI와 로직을 분리해 보안과 유지보수성을 동시에 강화하고자 했습니다. 개선 목표 isAdmin으로...

지금껏 코드를 작성하면서 브라우저 성능에 대해서 인지를 하고 있었지만, 개선할 수 있는 코드를 작성해본 적이 없었다. 이번 기회에 useMemo를 사용해 검색 결과를 필터링하는 함수를 최적화하는 과정을 공유해보려고 한다. 그 전에 useMemo가 무엇인지 핵심만 간단하게 알아보자. UseMemo란? 계산량이 많은 작업의 결과를 memoiz...

사실 별건 아니지만, 기능을 구현할 때 무작정 자바스크립트로 작성하는 것이 당연하다고 생각했던 나는, 이번에 Next.js, Typescript로 진행한 미션에서 반응형에 따라 보여지는 컴포넌트 개수와 관련된 기능 요구사항을 페이지 너비에 기반한 resize 이벤트로 구현했다. 기능은 잘 동작했지만, 페이지 너비를 줄일 때마다 버벅거림이 느껴졌다. ...