수작노트

이전 글에서는 웹 UI 개선 이후 앱(WebView)에서 발생한 UI 충돌 문제와, 그 문제를 인식하게 된 배경을 회고 중심으로 정리했습니다. 궁금하시면 아래의 링크에서 확인해보실 수 있어요! [모아동] 웹에서는 괜찮았는데 앱에서는 깨졌다 - WebView와 앱 버전의 문제모아동은 웹 서비스지만, React Native 기반 앱에서도 WebView를 통해 주요 화면을 함께 사용하고 있습니다.특히 동아리 상세페이지부터는 웹뷰를 그대로 공유하는 구조입니다. 저는 웹을 주로 개발suhyun113.tistory.com이번 글에서는 그 문제를 해결하기 위해 실제로 적용했던 웹뷰 라우트 분리 설계와 그 구현 방식에 대해 정리해보았습니다. 하나의 라우트, 서로 다른 버전의 사용자모아동은 웹 서비스이지만, React..

모아동은 웹 서비스지만, React Native 기반 앱에서도 WebView를 통해 주요 화면을 함께 사용하고 있습니다.특히 동아리 상세페이지부터는 웹뷰를 그대로 공유하는 구조입니다. 저는 웹을 주로 개발하고 있어서 앱쪽은 잘 모르는 상태였습니다. 그래서 제대로 생각을 못 했던 것 같습니다.웹 상세페이지의 UI 개선을 마친 후, 웹은 릴리즈를 했습니다.앱에서도 이후 업데이트를 통해 변경된 UI가 적용될 것이라 막연히 생각했던게 잘못된 생각이었습니다.웹 배포 이후, 이상이 없는지 확인해보기 위해 앱 화면을 들어가서 보고 팀원들과 이야기하며 시작되었죠... 웹에서는 괜찮았는데, 앱에서는 깨졌다...웹 릴리즈 이후, 앱 화면에서 상세페이지 UI를 확인해보고 있었습니다. 그리고 아래와 같은 화면을 저는 보게되..

이전 글에서 모아동 동아리 상세페이지의 활동사진 탭 전환 시 이미지 로딩 지연 문제를 구조적으로 개선했었습니다!탭 클릭 시 컴포넌트를 새로 마운트하지 않고, 미리 마운트한 상태에서 display만 전환하도록 바꾼 방식 덕분에 체감 UX는 확실히 좋아진 것을 확인할 수 있었어요! 다만, 단순히 좋아졌다로 끝나기 보다 수치적으로 설명할 수 있다면 훨씬 객관적인 증명이 될 것 같았습니다.코드 리뷰를 통해서도 Lighthouse 기준으로 LCP before/after 수치를 한 번 측정해서 비교해보는게 개선 효과를 수치적으로 보여줄 수 있을 것 같다는 좋은 조언을 받았습니다! 처음 들어봤는데, 저도 이 작업을 좀 더 수치적으로 설명하고 싶었기 때문에 너무 좋은 조언이었고 바로 시도해보기로 했습니다!다만,,, 이..

작년 8월부터 합류하여 개발하고 있던 모아동 프로젝트에서 이번에 이미지 최적화 작업을 시도하게 되었습니다이 프로젝트는 현재 아래의 링크를 통해 확인해볼 수 있습니다! 모아동모아 동아리! 부경대학교 모든 동아리를 한눈에!www.moadong.com부경대학교 학생들을 위해 에브리타임에서 일일히 찾아봐야하는 번거로움을 줄이고자 동아리를 한눈에 볼 수 있는 웹 사이트를 만들게 되었습니다! 현재 Android 및 Ios에서 앱도 출시되어 있어 확인해볼 수 있습니다!이번 2026년 1학기 신입생들이 많이 사용해주길 바라며 방학인 지금,사용자를 고려하여 각종 버그를 고치고 리펙토링하고 있습니다!오늘의 개발 내용모아동 프로젝트의 동아리 상세페이지에는 아래의 이미지와 같이 소개 내용 / 활동 사진으로 총 두 개의 탭이 ..

저는 React 개발을 위해 팀에서 사용하는 Styled-Components에 대해 공부하게 되었습니다. CSS는 프로젝트가 커질수록 관리하기 어려운 경우가 많습니다.전역으로 스타일이 흩어져 있거나, 클래스명이 충돌하거나, 재사용하기 힘든 문제가 자주 발생합니다. 이런 문제들을 해결하기 위해 등장한 개념이 CSS-in-JS입니다.이번 글에서는 이 개념을 간단히 소개하고, 그 중에서도 많이 쓰이는 라이브러리인 Styled-Components에 대해 알아보겠습니다. CSS-in-JSCSS를 자바스크립트 파일 안에서 작성하는 방식 이 방식을 사용하면 스타일과 컴포넌트를 하나의 단위로 묶을 수 있어서, 유지보수성과 재사용성이 높아집니다.또한 전역 네임스페이스 문제를 피할 수 있고, props나 state와 같..