| 서론안녕하세요! 팡일입니다. 이번 글에서는 Flutter로 앱을 개발하면서 탭 전환 방식을 스와이프 기반으로 개선한 과정을 소개해드리려고 합니다. 기존에는 하단 탭 버튼을 눌러야만 화면이 전환되었지만, 많은 사용자들은 이미 다양한 앱에서 좌우 스와이프를 통해 화면을 넘기는 경험에 익숙합니다. 그렇다면 우리 앱의 탭 UI도 스와이프를 지원한다면 훨씬 더 자연스럽고 직관적인 사용 경험을 제공할 수 있지 않을까요? 그 고민에서 출발해 Flutter의 PageView를 MainTabPage에 적용했고, 기존의 클릭 방식보다 훨씬 유려한 전환을 구현할 수 있었습니다. 이 글에서는 기존 구조가 어떠했는지, PageView를 도입하면 어떤 장점이 있는지, 그리고 실제 코드 기준으로 어떻게 적용했는지를 차근차근 정..

| 서론안녕하세요, 팡일입니다. Flutter 프로젝트를 진행하다 보면 가장 먼저 커스터마이징하고 싶은 요소 중 하나가 앱 아이콘입니다. 최근 Blridge 프로젝트의 iOS 아이콘을 변경하면서 예상하지 못한 검정 테두리 문제를 겪게 되었고, 이를 해결하는 과정에서 배운 점을 정리해보고자 합니다. 저는 flutter_launcher_icons 패키지를 사용하는 방식을 중심으로 아이콘을 적용했습니다. 다만, 필요에 따라 Xcode에서 직접 교체하는 방법도 함께 소개드리겠습니다. | iOS 앱 아이콘이 까다로운 이유iOS는 앱 아이콘 이미지 파일을 그대로 사용하는 것이 아니라, 다음과 같은 처리를 자동으로 적용합니다.자동 라운드 코너(둥근 모서리)자동 그림자(Shadow)마스킹 처리이 때문에 PNG 파..

| 서론안녕하세요 팡일입니다. 오늘은 관리자 페이지에 사용되는 대시보드 페이지의 리팩토링에 대해서 다뤄보려고 합니다. 처음에는 간단한 통계 정보를 보여주기 위해 빠르게 구현했던 페이지가, 어느새 데이터 페칭, 데이터 가공, 차트 렌더링, UI 마크업 등 너무 많은 책임을 한 파일에 떠안고 있었습니다. 이대로는 앞으로 기능을 추가하거나 코드를 수정하기가 매우 어렵겠다는 판단을 내릴 수밖에 없었습니다. 이 포스트에서는 제가 해당 Svelte 페이지를 어떻게 분석하고, 어떤 원칙을 가지고 리팩토링을 진행했으며, 그 결과 코드가 어떻게 더 건강하게 변화했는지에 대한 여정을 공유하고자 합니다. | 문제 인식: 거대 컴포넌트의 그림자 (As-Is)리팩토링 전, /routes/(private)/manage/+p..

| 서론안녕하세요 팡일입니다. 어느덧 6주라는 시간 동안 우아한테크코스 8기 프리코스가 마무리 되고, '포수타'가 진행되었는데요? 사실 '포수타'가 어떤걸 의미하는지 검색해봤지만,, 결국 찾지 못했지만,, (알고보니, 포수타는 '포비와의 수다 타임'의 줄임말이라고 합니다!) 아무튼! 지원자 분들과 포비님과 함께 Q&A를 가지면서 토크 세션이 진행되었습니다. 이번 글에서는 포수타에서 언급된 질문들과 답변들을 정리해보려고 합니다. | 질문 모음Q1. 코딩테스트는 기존과 같은 방식인가요? 전체적인 진행 방식은 기존과 거의 동일하다.다만 오픈 미션이 추가되면서 일부 변동은 있을 수 있음.진행 시간: 오후 1시 ~ 오후 6시→ 약 5시간 동안 프로그래밍 요구사항(난이도는 프리코스 3주차 수준) 을 구현한다...

| 서론안녕하세요, 팡일입니다! 어느새 21일차, 길다면 길고 짧다면 짧았던 우아한테크코스 8기 프리코스 오픈미션의 마지막 날이 찾아왔습니다. 처음 시작할 때만 해도 ‘3주라는 시간이 이렇게 빨리 지나갈까?’ 싶었는데, 매일 고민하고 기록하고 기능을 만든 흔적들이 쌓여 보니 시간이 참 빠르게 흘렀다는 걸 실감하게 되네요. 오늘은 마무리인 만큼, 단순히 기능 개발을 넘어서 지난 21일 동안 제가 어떤 도전을 했고 어떤 변화가 있었는지, 그리고 오픈미션이 제게 어떤 의미로 남았는지를 차분히 돌아보는 시간을 가져보려고 합니다. | 오늘 한 일1) 오픈 미션배포 사이트 최종 점검코드 구조 및 제거할 부분 확인최종 제출용 Notion 마무리최종 제출하기 | 어려웠던 점 & 배운 점기존까지는 어려웠던 점과 ..

| 서론안녕하세요 팡일입니다! 오늘은 우아한테크코스 8기 프리코스의 오픈미션 2일차 포스팅입니다. 오늘은 진행한 점들에 대해서 기록하고 공유하려고 합니다! | 오늘 한 일1) 기타v2.0.0에 들어갈 기능 정리하기2) 오픈미션최종 회고 작성하기 (티스토리)기술 블로그 작성 글들 썸네일 정리하기최종 제출용 Notion 제작하기제출용 소감문 작성하기 | 어려웠던 점 & 배운 점1) 무탈하게 작성해온 회고, 오늘따라 어렵네..오늘은 기능 개발이나 버그 수정 같은 실질적인 개발 작업보다는, 지금까지의 과정을 되돌아보고 이를 회고로 정리하는 데 시간을 집중했습니다. 그동안 작성해왔던 여러 포스팅을 하나하나 다시 살펴보고, 썸네일을 추가하거나 오탈자를 바로잡고, 표현이나 형식의 통일성이 부족했던 부분을 수정..

| 서론안녕하세요 팡일입니다! 오늘은 우아한테크코스 8기 프리코스의 오픈미션 19일차 포스팅입니다. 오늘은 진행한 점들에 대해서 기록하고 공유하려고 합니다! | 오늘 한 일1) 기타미리보기 (OG) 개선하기도메인 구입하고 배포하기피드백을 받을 수 있는 통로 만들기2) 리스트 페이지카테고리 별 필터 추가하기회고 글 특정 개수만 불러올 수 있는 기능 추가하기더 불러오기 기능 추가하기3) 공유 페이지로그인한 상태에 대한 header, Options 개선하기4) 관리자 페이지피드백 받은 사항 볼 수 있는 창구 만들기5) 오픈미션제출물 정리하기 | 어려웠던 점 & 배운 점 1) 안정성을 우선한 페이지네이션 구현: 무한 스크롤에서 ‘더 불러오기’ 버튼으로 (1) 어려웠던 점 : Firestore의 커서 기반..

| 서론 – 도메인도 샀는데 왜 미리보기가 안 뜨지?안녕하세요 팡일입니다. 드디어 re-log 프로젝트의 공식 도메인을 구매했습니다! 구매한 도메인을 무사히 연결한 뒤에, 프로젝트 re-log를 배포하고 나서 SNS에 공유 기능을 눌러봤습니다. 카카오톡, 디스코드, 슬랙, 페이스북 등 대부분의 서비스가 링크 미리보기를 지원하잖아요? 그런데…아무것도 뜨지 않았습니다. 제목도, 이미지도, 설명도 전혀 로딩되지 않는 비어 있는 카드만 나타났습니다. “도메인도 샀고, Firebase Hosting에도 성공적으로 배포했는데… 왜 아무것도 안 보이지?”이 문제를 파고들기 시작했고, 결국 OG(Open Graph)의 존재를 알게 되었습니다. | OG란 무엇인가?OG(Open Graph)는 SNS나 메신저가 웹페..

| 서론안녕하세요 팡일입니다! 오늘은 우아한테크코스 8기 프리코스의 오픈미션 18일차 포스팅입니다. 오늘은 진행한 점들에 대해서 기록하고 공유하려고 합니다! | 오늘 한 일1) QAQA 진행하기받은 QA 정리하기2) 리스트 페이지내용 검색 기능 고민하기3) 작성 페이지마크다운 에디터 가이드라인 고민하기감정 커스텀에 대해서 고민하기글 별 카테고리 추가에 대해서 고민하기마크다운 XSS 취약점 해결4) 로그인 페이지비밀번호 찾기 기능 고민하기5) List 페이지회고 카드에 카테고리까지 추가6) Detail/Share 페이지카테고리 항목 추가카테고리, 감정 항목이 0개인 경우에 대한 문구 추가 | 어려웠던 점 & 배운 점1) 점진적 기능 개발과 리팩터링의 중요성 (1) 어려웠던 점: ‘카테고리’ 기능은 ..

| DOMPurify로 XSS 취약점 완벽히 해결하기안녕하세요 팡일입니다. 현재 제작중인 회고 서비스, 'Relog'에서 발견한 취약점 중 하나를 개선한 이야기를 공유해보려고 합니다. 이전에는 임시 주석을 달아서 해결하려고 했지만, 이 부분으로 해결할 수 없는 문제점들이 있었습니다. 이를 조금 더 설명해보면, 웹 서비스에서 “사용자가 입력한 내용을 HTML로 렌더링한다”는 것은 생각보다 위험한 일입니다. 특히 마크다운(markdown)을 HTML로 변환해 보여주는 기능은 겉보기엔 단순하지만, 잘못 구성하면 곧바로 XSS 취약점으로 이어질 수 있습니다. 바로 이 부분에서 보안상의 심각한 문제가 숨어 있다는 것을 발견했습니다. 사용자 회고 내용을 마크다운으로 렌더링하는 과정이 아무런 보호 없이 그대로 노출되..