검색 기능은 백엔드에서 처리하는 것보다 프론트에서 filter 메소드를 활용해 간단하게 구현하기로 팀원들과 서로 이야기를 나누었고, 따라서, 리뷰 목록에서 검색 기능을 구현한 과정을 적어보려 한다.  검색어를 입력할 수 있는 input 창은 공동 컴포넌트로 독립적으로 구현했으며,해당 컴포넌트로 필요한 검색어를 props로 전달해 검색이 가능하도록 해주었다. Search searchOpt={"검색할 제목을 입력하세요."} search={SearchValue} />   사용자가 입력한 검색어에 따라 리뷰 목록을 filter를 이용해 필터링해준 후,리뷰 제목을 기준으로 검색 기능이 작동하도록 코드를 작성했다.  reviewArr.filter: reviewArr 상태에서 제목(rev_title)이 검색어를 포함..

리뷰 목록 페이지는 table 형태로 작성된 모든 리뷰를 사용자가 확인할 수 있게 구현했다. 특히,프로젝트의 목적이라고할 수 있는 리뷰 인증 여부 또한 목록에서 확인이 가능하도록 구현했다.  처음에는 인증된 리뷰만 사용자가 볼 수 있도록 하려고 했으나,리뷰 커뮤니티인데 인증이 실시간으로 이루어지지 않아 사용자가 리뷰를 보지 못하게 되는 불편함을 덜고자모든 리뷰 목록을 보여주되 인증 여부를 추가로 표시하는 것으로 UI를 수정해 개발을 진행했다.   리뷰 목록 데이터를 연결하는 과정에서는 관리자 계정과 일반 사용자 계정을 분리해주어야 했기에if - else 문을 사용해 상황을 나눠주었다. 일반 사용자 계정일 시 GET 요청으로 리뷰 목록만을 불러와 상태관리되고 있는 배열에 저장해주고,관리자 계정일 시 GET..

리뷰를 작성할 수 있도록 글 쓰기 페이지를 구현했는데,리뷰 이미지를 넣고, 글을 강조할 수 있는 꾸밈 요소를 구현하기 위해 React-Quill 라이브러리를 활용하기로 결정했다. 글을 작성할 수 있는 라이브러리 중 가장 많이 활용되고 있는 라이브러리이기 때문에 React-Quill을 활용하기로 결정했고,React-Quill 의 꾸밈요소는 필요한 요소들로만 편집이 가능하기 때문에 편리하다는 것이 장점이다.   먼저 리스렌즈 리뷰 작성에는 이미지 업로드와, 글씨 크기, bold, underline 조정이 필요했기 때문에 toolbar를 편집해 필요한 요소들만 넣어주었다. const modules = {    toolbar: {      container: [        ["image"],        [{..

메인 페이지는 가전 구독 리뷰 커뮤니티인 만큼 렌탈 가능한 가전 제품과해당 제품에 대한 리뷰를 한눈에 볼 수 있도록 Swiper 배너를 이용해 메인 화면을 구성했다.  리뷰 또한 swiper를 이용해 다양한 리뷰를 확인할 수 있도록 구현했다. 메인페이지에서 맡은 역할은 서버에서 데이터를 불러와 프론트 페이지와 연결하는 부분이었다.  가장 먼저 useEffect를 활용해 컴포넌트가 마운트 될 떄 axios 요청으로 서버에서 제품 데이터와 리뷰 데이터를 불러올 수 있도록 했다. 서버에서 가져온 데이터들은 useState를 이용해 배열로 저장해두었으며,TypeScript를 활용하기 때문에 외부 ts파일에 활용할 데이터의 타입부터 먼저 정의해주었고, 정의해둔 타입을 불러와 배열의 타입도 지정해주었다. const..

리스렌즈 프로젝트는 가전 구독 리뷰를 주제로 리액트, 타입스크립트를 활용한 프로젝트이다.  타입을 효율적으로 관리하고 컴파일 과정에서 타입 오류를 잡아 코드의 안정성을 높이기 위해 타입스크립트를 선택해서 프로젝트를 진행하게 되었다.  가장 먼저 구현한 컴포넌트와 페이지인 헤더, 로그인, 회원가입 페이지에 대해 설명하려 한다.  1. 헤더 컴포넌트 헤더 컴포넌트를 구현하면서 가장 신경을 많이 쓴 부분은 웹, 모바일 레이아웃 변경과 메뉴 토글이었다.  특히나 레이아웃은 잘못 구현한다면 사용자가 페이지를 이용함에 있어서 불편함을 느끼는 것으로 직결되기 때문에 반응형 레이아웃을 구성하고자 했다. 웹 환경에서는 한눈에 메뉴 이동 navigation을 확인할 수 있도록 nav bar 형태로 만들어주었고,모바일 환경..

검색 기능은 구현하는 데 마지막까지 힘들게 했던 기능 중 하나이다. 로직은 오류가 없어보이는 데 계속해서 검색을 실행하는 로직 자체가 작동을 안해서 원인을 찾는 데 매우 오래걸렸다.  정작 로직이 실행되지 않는 원인은 매우 간단한 부분에서의 오류 때문이었다....정말...단지...Key event 속성 이름 값이 잘못되었기 때문이었다. 검색을 실행하기 위해 'Enter' Key event를 이벤트 리스너로 설정해주었다.이 과정에서 처음에 keyup 이라는 속성 값을 사용했지만 keyup 속성이 현재 존재하지 않는 속성 값이었기 때문에 로직 자체가 실행이 안되는 것임을 발견하게 됐다.따라서 이벤트 속성 값을 keydown으로 변경해주었고,이후로는 검색 로직이 정상적으로 작동하는 것을 확인할 수 있었다.if..

마이페이지에서는 사용자 본인이 주문한 상품 내역, 고객 지원 페이지에서 문의한 내역을 확인할 수 있으며,회원 탈퇴도 가능하도록 페이지를 구현했다. 주문 내역에서는 주문 취소, 주문 교환, 배송지 변경 기능도 이용할 수 있다.   1. 주문 내역 확인 마이페이지 경로로 서버에 axios GET 요청을 보내 유저 정보와 일치하는 주문 내역을 데이터 베이스에서 SELECT 문을 통해 추출하고, 주문 정보를 클라이언트 측으로 전달하면 데이터를 받은 클라이언트 측에서 1. 데이터가 존재하지 않으면 => '주문내역이 없습니다' 메세지 전달2. 데이터가 존재하면 => 주문번호, 주문 날짜 & 시간, 배송지, 주문 가격, 결제 수단 순서로 데이터를 불러오도록 설정했다. 주문 데이터를 순회하며 각 주문 정보를 HTML로..

인터넷에서 글을 적는 데 어려움을 느끼는 사용자를 위해 전화 문의가 가능하도록 정보를 먼저 안내한 후 최소한의 내용 수집으로 문의가 가능하게끔 페이지를 구현했다.  고객 지원 페이지를 구현하면서 고민을 많이 했던 부분은 무분별한 반복 문의글 작성에 대한 대처였다. 고객 지원을 악용하여 보복성이나 방해성으로 같은 내용의 문의를 계속해서 작성하는 것을 방지하고,최소 고객의 문의 내용에 대한 설명을 수집하기 위해 데이터 베이스에서 문의 내용을  primary key로 설정해 중복을 허용하지 않도록 설정했다.  따라서, 입력 내용이 동일한 경우 동일한 문의 내역이 존재한다는 메세지를 클라이언트 측에 전달하도록 코드를 작성해주었다. axios.post('/customer', {        username,   ..

구매하기 기능은 구매하기로 이동할 수 있는 버튼이 여러개였기 때문에 작성해야할 코드가 많아 구현하는 데 까다로웠던 부분이기도 했다. 상품의 정보를 어떻게 해서 가져오고, 주문 페이지에서 어떤 방식으로 데이터를 렌더링하고, 주문 정보를 어떤 형식으로 저장할지 많은 부분에 대해 고민해 구현하려 노력했다.  최종적으로 로컬 스토리지를 사용해 주문할 상품의 데이터를 저장하고 구매하기 페이지에서 상품 정보를 불러오도록 코드를 구현했다.  구매하기는 총 2가지 방법으로 가능하다.첫째, 각 상품 페이지에서 상품 별로 바로 구매하기둘째, 장바구니에서 선택 상품 또는 전체 상품 구매하기  각각의 방법에 대해 설명해보려 한다.   1. 상품 페이지에서 개별로 구매하기 구매하기 버튼을 누르면 상품 인덱스를 clikedInd..

쇼핑몰에 필수적인 기능 중 하나인 장바구니 기능은 구현하기 위해 로컬스토리지를 사용했다.또한 상품을 추가하고, 장바구니에서 보여주며 수량 조정, 삭제 등 세부적인 기능들을 구현하기 위해 신경을 많이 쓴 부분이기도 하다.   1. 장바구니 상품 추가 상품을 장바구니에 추가 버튼을 누르면 해당 상품의 인덱스와 수량을 로컬스토리지에 저장하도록 코드를 작성했다. 먼저, 로컬스토리지를 정의한 후 상품 인덱스로 장바구니에 추가하는 상품들을 관리해 수량을 추가할 수 있도록 했다.상품이 정상적으로 추가되면 완료 메세지로 사용자가 확인할 수 있도록 구현했다.let basket = JSON.parse(localStorage.getItem('basket') || '[]');if (productIndex !== -1) {  ..