프로젝트/세컨핸드 (8) 썸네일형 리스트형 [Trouble Shooting] UUID를 사용한 고유한 키 값 사용 문제정의 - 프로젝트에서 상품 정보를 수정했을 때, 수정(작성)페이지에서 선택된 지역을 설정하는 기능을 수정하고 있었고 개발자 도구에서 전혀 예상하지 못한 경고를 발견했다. - 애플리케이션은 정상적으로 동작하고 있었기 때문에, 개발자 도구에서의 경고는 당황스러웠고 찾아보니, 동일한 키를 가진 요소가 있다는 의미였다. - 리액트에서 map과 같이 반복문을 사용할 때는 고유한 key 값을 사용해야하는 것은 알고 있었고, 이를 코드에 적용했었는데 어느 부분에서 발생한 에러인지 확인해보니 DB에서 받아온 상품의 이미지를 map을 통해 렌더링을 하고 있는 부분이었다. - 먼저 상품의 이미지를 렌더링하는 코드는 위와 같다. images 배열을 map으로 통해 렌더링하면서 각 요소들의 key 값으로는 image의 n.. [Trouble Shooting] 사용자 디바이스에 따른 다수의 이미지 조회 방법 문제정의 - 프로젝트의 기획에는 상품의 조회(상세페이지)에서 상품의 이미지가 1개 이상인 경우, 모바일 기기의 슬라이드 기능으로 다수의 이미지를 조회할 수 있게 되어있었다. - 하지만, 모바일 기기가 아닌 웹에서 접근시에는 다수의 이미지를 조회할 수 있는 기능이 누락되어 있었고, 이에 사용자의 디바이스에 따라 다수의 이미지 조회 방법을 다르게 구현하는 작업이 필요했다. - 해당 작업을 위해서는 먼저 사용자의 디바이스를 조회해야했고, 기존 슬라이드 기능 외에 추가로 캐러셀 기능 구현이 필요했다. 시도한 방법 및 해결방안 1. 사용자의 디바이스 조회 ⭕️ - 사용자의 디바이스 조회는 window.navigator의 userAgent 속성을 사용했다. - userAgent는 HTTP 요청을 보내는 디바이스와 .. [기능 구현] 동적 portal 만들기 portal이란? - 리액트(React)에서 portal은 컴포넌트 트리 내에서 다른 위치로 자식 요소를 렌더링할 수 있는 기능이다. portal은 주로 모달 창, 팝오버, 툴팁과 같은 오버레이 컴포넌트를 구현하거나, 외부 DOM 요소에 컴포넌트를 렌더링할 때 사용된다. - portal을 사용하면 자식 요소는 DOM 트리의 지정된 위치로 이동되지만, 해당 자식 컴포넌트는 여전히 컴포넌트 트리의 일부로 유지된다. - portal을 사용하면 컴포넌트가 렌더링되는 위치와 실제로 화면에 표시되는 위치를 분리할 수 있으며, 레이아웃, 스타일링, 이벤트 처리 및 zIndex 관리를 보다 쉽게 할 수 있게 해준다. - portal은 보통 모달창을 구현할 때, 많이 사용된다. - 프로젝트에서도 모달창을 구현할 때, p.. [기능 구현] 커스텀 훅(Custom Hook)을 사용하여 비동기 로딩 및 에러 상태 처리 - 프로젝트를 진행하면서 React 커스텀 훅에 대해서 알게 되었고, 팀 동료 스눕과 함께 프로젝트에서 사용할 커스텀 훅을 만들어보기로 했다. React 커스텀 훅이란?- React 커스텀 훅이란, React의 기본 훅(Hook)을 조합하여 사용자 정의 로직을 재사용하기 위한 매커니즘이다.- 즉, 자신만의 커스텀 훅을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있으며, 컴포넌트에서 사용하고 싶은 값들을 반환해주면 된다.- 커스텀 훅은 use 라는 키워드로 시작하는 파일을 만들고 그 안에 함수를 작성한다.- 커스텀 훅의 장점은 재사용성(비슷한 로직을 여러 컴포넌트에서 반복적으로 사용해야 할 때, 커스텀 훅을 만들어 코드를 재사용할 수 있음)과 복잡한 컴포넌트 로직을 외부로 분리하여 관리할 수 있어.. [기능 구현] OAuth를 통한 로그인 기능 구현 - 지역 기반 중고거래 사이트를 만드는 프로젝트에서 로그인 기능을 구현해야했고, 팀원들과 상의 결과 자체 로그인과 github OAuth 로그인 두 가지를 사용하기로 했다. - 이 글에서는 OAuth에 대한 간단한 설명과 실제 프로젝트에서 github OAuth 로그인을 구현한 부분에 대해 설명하겠다. OAuth(Open Authorization)란? - OAuth는 권한 부여를 위한 공개된 인증 프로토콜(접근 권한을 위임하는 개방형 표준 프로토콜), 제3자 애플리케이션에 대한 보안 인증 및 권한 부여 프로토콜이다. - 쉽게 설명해서 애플리케이션(Client)에서 별도의 회원가입 없이 사용자(Resource owner)를 대신하여 리소스 서버(Resource server)에서 제공하는 자원에 대한 접근 .. [Trouble Shooting] 상품 수정 등록 후 뒤로가기 경로 문제 - 세컨핸드 프로젝트를 수정하면서 겪은 고민과 문제 해결에 대해서 기록해보고자 한다. - 먼저 아래 두 개의 영상을 보면 사용자 입장에서 불편함을 느낄 수 있다고 생각한다. 홈화면 - 상품상세 - 상품수정 판매내역 - 상품상세 - 상품수정 - 프로젝트의 로직은 아래와 같다. 1. 홈화면 또는 판매내역에서 상품을 선택했을 때, 해당 상품의 상세페이지로 이동을 한다. 2. 만약 내가 등록한 상품이라면 상품 게시글을 수정할 수 있고, 수정 완료가 되면 해당 상품의 상세페이지로 이동한다. - 이때, 위의 두 개의 영상에서 확인할 수 있듯이 상품의 수정 완료를 하고 해당 상품의 상세 페이지로 이동했을 때, 뒤로가기 버튼을 클릭하면 상품의 상세페이지의 진입점(홈화면 또는 판매내역)이 아닌 다시 상품 수정 페이지로 .. [Trouble Shooting] 상품 수정시 이미지 파일 처리 문제정의 - 프로젝트에서 상품을 최초 등록할 시에는 상품의 이미지 파일의 처리를 위해 상품의 정보(제목, 가격, 이미지 등)를 formData 객체로 만들어 전송했고, 해당 상품의 조회(상세페이지), 수정(작성페이지)에서는 DB에서 상품의 이미지 url을 받아 화면에 표시했다. - 문제가 발생한 부분은 상품의 수정(작성페이지)에서 상품의 정보를 수정한 후 수정 완료를 했을 때, 프론트에서 가지고 있는 정보는 상품 이미지의 url 뿐이었기 때문에 비동기 통신 오류가 발생했다. - 오류의 이유는, 상품의 작성 및 수정은 상품의 정보를 모두 formData로 만들어서 전송을 해야했고, url만 가지고 있는 상품의 이미지를 다시 formData 객체로 만드는 작업이 필요했다. - 오류 해결을 위해 백엔드 동료와.. [Trouble Shooting] 지역 설정 기능 구현 과정에서 겪은 문제 - 중고거래 프로젝트에서 선택된 지역을 기반으로 해당 지역에 등록된 상품을 보여주거나 사용자가 상품을 등록할 때 지역을 선택하는 기능의 구현이 필요했고, 사용자의 위치를 기반으로 주변 법정동을 검색하는 로직을 작성했다. - 최초에는 지역을 6개만 DB에 저장하고 진행했지만, 사용자의 위치기반으로 지역을 설정하고 검색하는 방법에 대해서 시도해보고 싶다는 생각이 들었다. 시도한 방법 1. 사용자의 위치(위도, 경도)를 기준으로 외부 지도 API를 통해 사용자 근방의 행정기관(각 행정구역마다 동사무소, 읍사무소 등은 꼭 한개씩 있을 것이라고 판단)을 찾고 해당 행정기관의 주소를 찾는다. 2. 행정기관의 주소들을 이용해 중복이 없는 법정동 주소를 찾는다. 3. 사용자 주변의 법정동 주소들을 API 요청을 통해 .. 이전 1 다음
