CHOP!

로고구글, 네이버, 애플 로그인 (아이콘)회원가입 버튼아이디/비밀번호 찾기 버튼아이디/비밀번호 틀릴시 오류메시지 (Toast 메시지)captcha(선택사항 - 매크로 방지)닉네임 입력 필드넥슨 Open api key 입력 필드넥슨 Open api key 발급하러 가기w

🚀 어떻게 시작되었나?2024년 8월 1일, 나는 코틀린을 사용해 안드로이드 개발을 하고 있었다. 하지만 단순한 기능을 구현하는 수준이었고, 앞으로 어떤 길을 가야 할지 고민이 많던 시기였다.그러던 어느 날, 같이 게임을 하던 지인에게 흥미로운 제안을 받았다.💬 "

이번 프로젝트에서 styled-components를 사용한 이유는 CSS와 JS를 결합하여 더 효율적인 코드 관리와 유지보수를 이루기 위해서였다. 코드가 점점 커지고 복잡해짐에 따라 컴포넌트화된 스타일링이 필요했기 때문이다. 스타일과 구조가 분리된 전통적인 방식에서 벗

프로젝트 초기 단계에서 사용자들이 앱 내에서 손쉽게 이동할 수 있도록 네비게이션 바를 구현해야 했다. 여러 화면을 오가는 앱의 특성상, 직관적이고 사용하기 쉬운 네비게이션 바는 매우 중요한 부분이었기 때문에, 이를 잘 구현하는 것이 핵심이었다.이번에는 하단 네비게이션

🔍 프로젝트 협업 & 관리Chop은 단순한 개인 프로젝트가 아닌 팀 단위의 협업이 중요한 서비스였기 때문에, 체계적인 작업 관리를 위해 Confluence와 Jira를 사용했어요.📝 Confluence – 문서화 및 공유 (기획 및 개발 회의)🎯 Jira – 애자

Slick Slider를 활용한 메인 배너 구성팀원이 디자인한 거래 게시글 페이지로 이동 기능PWA 환경에서 모바일 비율 고정하기 (페이스북 참고)기본적으로 react-slick을 활용해서 슬라이더를 구성했다. Banner.tsx에서 설정을 지정하고, 각 슬라이드는 B

이번에는 기능 구현보다도 Git 브랜치 히스토리가 꼬인 경험과 그걸 정리한 과정을 회고해보려고 한다. 협업하면서 누구나 한 번쯤 겪게 되는 상황이고, 같은 실수를 반복하지 않기 위해서..Git 커밋 그래프를 보다가 아래와 같은 현상을 발견했다.같은 커밋 메시지가 여러

이번에는 유저 프로필 화면을 만들었다. 주요 목표는 간단하면서도 직관적인 유저 정보 표시, 그리고 추후 편집 가능한 구조로 확장 가능성을 확보하는 것이었다.구현 범위는 다음과 같다:프로필 카드 및 아이콘 영역 구성거래 정보 요약 (후기, 재거래 희망률, 평균 응답 시간

이번에는 만든 프로필 화면을 모바일 뷰에서 확인하다가텍스트가 겹치고 버튼이 깨지는 문제를 발견했다.간단해 보였지만, 스타일 하나하나 뜯어보면서 직접 수정해야 해결할 수 있었다.모바일 화면에서 확인했을 때:프로필 상단의 딜하숍 텍스트가 프로필 이미지나 아이콘과 겹침프로필

개발 초반에는 주로 목업 데이터로 UI만 빠르게 구성해왔지만,이제는 실제 서버와 통신해서 유저 데이터를 받아오고, 상태에 따라 화면이 바뀌도록 만들어야 한다.우리는 Swagger로 정의된 REST API를 기준으로 개발을 시작했고,처음엔 당연히 axios.get(),

1부에서는 kepler-http 구조와 fetcher가 어떤 식으로 동작하는지 설명했다.2부에서는 이 구조가 실제로 컴포넌트에서 어떻게 사용되는지를"프로필 이미지 업로드" 예제를 중심으로 보여주겠다.ProfileContainer 컴포넌트에서는유저가 프로필 이미지를 선택

이 시점부터는 Figma로 기획된 디자인을 실제로 구현하면서,단순히 화면만 보여주는 걸 넘어서 실제 데이터를 불러오고,업로드하고, 상태에 따라 화면이 반응하는 구조를 설계하게 됐다.처음에는 단순한 텍스트만 있는 UI였지만,Figma를 참고해서 프로필 이미지, 이름, 전

이전까지 메인 페이지는 단순히 컴포넌트만 배치된 구조였다. 하지만 이제는 실제 데이터를 불러오고, Figma 기반의 UI 기획을 바탕으로 구성도 훨씬 풍부해졌다. 이번 포스트에서는 그 변화의 흐름과 고민했던 부분, 그리고 구조적으로 어떻게 구성했는지를 정리해본다.

처음에는 각 컴포넌트를 position: absolute로 하나씩 올려서 배치했다.속도는 빨랐지만, 구조가 조금씩 무너지는 게 보이기 시작했다.컴포넌트를 하나 추가하거나 위치를 바꾸면, 기존 top/left 값을 전부 다시 조정해야 함구성 요소 간의 관계가 전혀 없고,

이전까지는 단순히 나의 프로필과 거래 통계 정도만 보여주는 구조였지만, 이번에는 더 많은 소셜적 정보를 보여주기 위해 팔로잉/팔로워 리스트를 추가했다. 또한 숫자 포맷, 응답 시간 표시, 전투력 표현 등에서 유틸 함수 분리 및 포맷 정화도 함께 진행했다.ProfileD

기존에는 사용자가 직접 이미지를 업로드해서 프로필 이미지로 등록하는 방식이었지만, 이제는 서버에서 메인 캐릭터 정보를 기준으로 자동으로 이미지를 제공하는 구조로 전환했다. 이 전환은 단순한 기능 변경이 아니라, UX와 유지보수 관점에서도 큰 이점을 가져왔다.초기에는 사

이번에는 게시글에서 해당 유저의 프로필로 이동해 거래 상황을 확인하고, 바로 대화를 시작할 수 있도록 하는 TradeProfile 기능을 구현했다. 단순한 프로필 화면이 아니라, 거래 전용 프로필 뷰를 만드는 작업이었고, 거래 담당 팀원과의 협업을 통해 PostBloc

기존에는 Profile.tsx 컴포넌트 내부에서 Wing을 통해 데이터를 바로 요청하고, 그 결과를 받아서 렌더링하는 방식으로 구성되어 있었다. 하지만 이 방식은 렌더링 타이밍이 비동기 요청에 묶이는 구조였기 때문에, 프로필 화면이 표시되기까지 시간이 오래 걸리는 문제

이번에는 전체적인 CSS 구조를 정비하면서 UI 컴포넌트들이 서로 겹치는 문제를 해결했다. 특히 WorldSelect와 BottomNav가 겹쳐 클릭이 어렵거나 잘리는 현상이 발생해, 화면 비율, 위치 지정, 동적 높이 설정까지 포함한 근본적인 개선 작업이 필요했다.W

이번에는 두 가지 기능을 새롭게 추가했다:다른 사용자의 프로필을 간편하게 확인할 수 있는 FollowProfile자주 쓰는 문장을 등록하고 한글 자음 기준으로 정렬해서 볼 수 있는 Shortcut 기능단순히 UI만 구성한 게 아니라, 실제 API 연동부터 정렬 로직,