yunwoo-yu/openmarket

👨‍💻 오픈마켓 | react 개인 프로젝트

안녕하세요 👋 주니어 프론트엔드 개발자 유윤우 입니다. 😄

email ✉ : [email protected]

Blog 🎞

Stack 📚

openmarket's Issues

[LoadingSpinner] 로딩스피너 Skeleton UI 로 리팩토링

• 예정

[Error] 로그인 이후 헤더에 토큰이 필요한 페이지 진입

문제점

• 로그인 이후 새로고침 없이 장바구니 페이지를 들어가면 헤더에 토큰을 인식하지 못하는 문제 발생
• 로컬스토리지에는 정상적으로 토큰이 들어가 있음을 확인

문제발생 코드 & 이미지

해결 방안

• axios의 api 호출 함수의 instance 설정이 문제였다.
  
• 헤더에 localStorage에 저장되어 있는 토큰을 미리 넣어뒀었고 api 호출 함수를 실행하면 localStorage에 받아온 토큰값을 넣어주는 형태.
• 따라서 네트워크 탭을 확인 해 보면 요청 헤더에는 null이 들어있음을 확인 할 수 있다.

• 문제점을 파악해 보자면 리액트의 실행 순서 관련 이였는데 현재의 순서를 표현해보자면 이렇다.
• 페이지 진입 -> js 파싱 -> axios accessInstance 생성 -> 로컬 스토리지 setItem -> api 요청 (이 때 accessInstance는 이미 생성이 되어있고 localstorage에 있는 토큰이 따로 헤더에 담기지 않음) -> 새로 고침 -> 다시 js 파싱이 시작 -> accessInstance 생성 -> 이 시점에는 로컬 스토리지에 토큰이 있음이 확인되어 헤더에 담김
• 문제점 해결을 위해 axios의 인터셉터 기능을 활용하여 request 요청을 말 그대로 중간에 가로채서 header의 Authorization 값을 localStorage에 담긴 토큰값으로 변경해 주었다.
  

[Error] 회원가입 유효성 검사

문제점

• 객체로 회원가입 input값들을 useState에 넣어 관리하고 있던 중 유효성 검사를 위한 정규표현식에 값을 넣어 반영했으나 즉시 업데이트 되지 않는 문제점 발생

문제 발생 코드 & 이미지

• 회원가입 api 요청 시 필요한 모든 input value를 객체에 할당.

• 전역에 정규표현식 테스트 코드 작성

• onChange 함수로 변경값을 감지하고 setValues 업데이트
• 업데이트 이후 현재 선택된 target에 유효성검사가 통과 했는지 확인하고 통과하지 못하면 Error객체가 담긴 State에 메세지 업데이트

해결방안

• useState의 setState는 비동기로 동작한다.
• 기존에 useState의 값을 그대로 사용했었다. 그래서 한박자씩 밀렸었던것.
• 해결법은 state값을 직접 끌어다 쓰는게 아닌 event.target 값으로 변경.

• 유효성을 검사 하는 정규표현식을 함수로 분리해주고

• onChange 함수에 event.target값을 이용해 각각의 이름에 맞는 에러메세지 생성.

개선할 점

• 조건문이 너무 난잡해 보인다. 더 클린한 코드를 작성할 방법이 없는지?
• 마찬가지로 onChange 함수의 조건문까지 난잡해지는 상황이 발생. 리팩토링이 필요해보인다.

[Bug] window.location.pathname에 따른 장바구니 아이콘 변경

문제점

• 현 pathname에 따라 '/cart'일 경우의 장바구니 아이콘과 아닐 경우의 아이콘을 조건부 렌더링 하는 도중 생긴 문제
• 페이지 이동이 이루어져도 window.location.pathname이 즉각 업데이트 되지 않으므로 아이콘 변경이 이루어지지 않음.

문제 발생 코드 & 이미지

• 카트 아이콘을 클릭해 장바구니 페이지로 이동 시 Cart2의 이미지를 불러와야 하는데 새로고침 하지 않는 이상 변경되지않음.

해결 방안

• react-router에서 제공해주는 useLocation 훅을 이용해서 해결.
• 제공되는 hooks를 조금 더 꼼꼼히 살펴보도록 하기.

[Auth] 로그인, 회원가입 인증 관련 기능구현

목적

• 로그인 및 회원가입 기능 구현

기능

• 로그인 페이지 레이아웃
• 회원가입 페이지 레이아웃
• JWT 토큰 받아서 로컬스토리지 저장
• 판매자, 구매자 로그인 유효성 검사 및 기능 구현
• 판매자, 구매자 회원가입 유효성 검사 및 기능 구현
• 토큰 여부에 따른 레이아웃 구성 변경

구현 도중 생긴 문제 사항

#4 회원가입 유효성 검사 에러(미해결)
#3 window.location.pathname 장바구니 아이콘 문제 (해결)

[Error] 인증되지 않은 회원의 상품 상세 페이지 접근 시 장바구니 리스트 접근 문제

문제점

상품의 상세페이지에 진입 시 장바구니를 확인하여 같은 상품이 현재 장바군에 있는지 확인하는 로직을 구현했으나
장바구니의 접근을 위한 인증 토큰이 없을 경우는 장바구니에 대한 접근을 막아야 하는데
react-qurey의 useQuery는 함수의 최상단에 두어야 함으로 조건식을 사용할 수 없어서 지속적인 api 요청을 보냄.

문제발생 코드 & 이미지

해결 방안