경계선 지능인을 위한 인지기능 개선 앱
경계선 지능인의 인지기능 개선을 위해, 상황 대처 학습, 카드 뒤집기, 숨은 과일 찾기 등의 서비스를 제공하는 사이트입니다
2024 S.T.A.C 장려상(SK플레닛상)을 수상했습니다
(팀원) 김규민(React Native), 신희성(React Native), 오윤찬(Spring Boot, AI), 한태영(Spring Boot)
계기
저는 전에 "케이크를 자르지 못하는 아이들"이란 책을 읽은 적이 있습니다. 책에서는 각종 범죄를 저지른 경계선 지능아동을 관리하는 관리소의 관리자분이 경계선 지능인이 어떤 사각지대에 놓여있고, 어떠한 문제가 있는지 알려주는 책입니다. 이 책에서는 코그니션(인지기능 개선) 트레이닝을 통해 인지기능을 개선할 수 있다는 얘기를 듣고 이 앱을 기획하게 되었습니다
기술스택
문제해결
- CSS 깨짐 현상
- 증상: APK 실행 시 레이아웃이 들쑥날쑥하고 마진이 의도한 대로 적용되지 않았습니다
- 원인: React Native 스타일에 문자열 '10px' 형식으로 마진 값을 입력해 발생했습니다
- 해결: 모든 margin: '10px' → margin: 10(숫자) 로 수정하여 스타일 정상화했습니다
- Axios 통신 오류 (Barrer 미사용)
- 증상: API 경로를 .env로 관리하며 URL을 정확히 지정했음에도, APK 빌드 후 첫 번째 Axios 요청이 계속 실패했습니다
- 원인: 일반적으로 토큰 기반 인증에서는 HTTP 헤더에 Authorization: Bearer token 형식을 사용해야 합니다. 하지만 초기 구현 시, 헤더 이름을 authorize_token으로 잘못 지정하였고, 언더바(_)를 사용하는 비표준 형식 때문에 서버에서 이를 올바른 인증 헤더로 인식하지 못했습니다.
- 해결: Axios 요청 헤더를 다음과 같이 수정하여 표준 형식인 Authorization: Bearer
을 사용하도록 변경함. json headers: { Authorization: `Bearer ${token}` }수정 후 백엔드 서버에서 정상적으로 토큰을 인식하고, 인증 오류 없이 데이터가 성공적으로 수신됨.