ch4md0m/market-project

👋 안녕하세요 Frontend Delveloper 노기훈입니다.
📝 글쓰기를 좋아하고 정보 공유를 중요하게 생각합니다.
🔥 새로운 기술에 대한 호기심과 성장에 대한 열망이 강합니다.

🛠️ Tech Stack

🚀 Follow me

📈 My Github Stats

market-project's Issues

admin 페이지를 리펙토링 한다.

구현할 기능

• admin 페이지 레이아웃 수정.
• tailwind css 적용.

상세 작업 내용

• 기존 컴포넌트 tailwind css 적용.

jwt에 refreshToken 기능을 추가한다.

구현할 기능

jwt에 refreshToken 기능을 추가한다.

상세 작업 내용

• jwt 인증 방식에 refreshToken을 추가(redis 기반).
• 클라이언트에서 로그인 유지하는 방법 리팩토링.

ProductSlice 상태 관리 리팩토링한다.

구현할 기능

productSlice를 사용하는 컴포넌트의 상태 관리 리팩토링

상세 작업 내용

• 관리자 페이지 상품 추가, 삭제 기능에서 잘못 사용되고 있는 redux 코드 수정.
• 변수명 수정.

웹팩 설정을 수정한다.

구현할 기능

웹팩 설정을 수정한다.

상세 작업 내용

• 웹팩에서 Polyfill 설정을 babel/plugin-transform-runtime로 변경
• @types 라이브러리 devDependencies로 이동
• build된 JS 파일들 js 폴더로 묶기
• css loader 적용
• splitChunks 적용

useSelector 최적화

useSelector 무분별한 구조 분해 할당으로 인해 불필요한 렌더링이 발생함.

상품목록 필터 기능을 리팩토링한다.

구현할 기능

상품목록 필터 기능을 리팩토링한다.

상세 작업 내용

• 필터를 클릭하고 적용버튼을 클릭해야 필터가 적용되는데, 이를 필터를 클릭하면 바로 필터가 적용될 수 있도록 변경.
• useSelector 최적화.

Auth 관련 기능을 리팩토링한다.

구현할 기능

로그인 유지 관련한 기능을 리팩토링.

상세 작업 내용

• 페이지 새로고침시, Protected routes에서 전역 상태 값이 초기화되면서 메인페이지로 이동되는 오류 수정.
• storeUserInfo 폴더 위치 변경 및 기능 수정. (hooks가 아닌데 커스텀 훅처럼 사용하고 있음.)
• 가독성을 위해 unwrapResult를 unwrap()으로 변경.
• 사용자 정보 업데이트 후 쿠키 재발급 기능 추가.
• 로고 폰트 삭제.

상품 리뷰 기능을 수정한다.

구현할 기능

상품 리뷰 기능을 수정한다.

상세 작업 내용

• 상품 리뷰 component가 상품 페이지에 있는데 주문목록에서 작성할 수 있도록 변경.
• 현재 로그인만 하면 리뷰를 작성할 수 있음 -> 상품을 구매한 사용자가 작성할 수 있도록 변경.
• 리뷰를 작성했다면 리뷰 등록 버튼이 display 되지 않도록 구현.

webpack, babel 등 개발환경을 수정한다.

구현할 기능

webpack, babel, eslint, prettier, typescript 설정을 수정한다.

상세 작업 내용

• eslint 관련 라이브러리 추가 및 설정 파일 수정 (현재 제대로 설치되어 있지 않고 적용되어 있지 않음)
• babel, typescript 설정 파일 수정 (loader, preset 관련 설정이 정확하지 않음)

user 페이지를 리펙토링 한다.

구현할 기능

• user 페이지 레이아웃 수정.
• tailwind css 적용.
• 주문 확인 페이지 수정.
• 주문 확인 페이지 상품 preview 수정.

상세 작업 내용

• 주문 확인 상세 페이지 리뷰 컴포넌트 모달 적용.
• 기존 컴포넌트 tailwind css 적용.
• user 페이지 레이아웃 조건부로 사용하도록 변경.

상품 상세 페이지, 결제 페이지를 리팩토링 한다.

구현할 기능

• 상품 상세 페이지, 결제 페이지 tailwind 적용.
• 장바구니 페이지 tailwind 적용.
• 바로 결제 기능 추가.

상세 작업 내용

• 상품 상세 페이지, 결제 페이지, 장바구니 페이지 tailwind 적용.
• 현재 장바구니 담기 기능만 구현되어 있는데, 상품페이지에서 바로 결제 페이지로 넘어갈 수 있도록 구현.
• 상품 수량을 input으로 입력할 수 있도록 변경.

webpack splitChunks 설정을 수정한다.

구현할 기능

webpack의 splitChunks 설정 수정.

상세 작업 내용

• splitChunks 설정을 모듈별로 chunk 이름을 생성.
• 공통 컴포넌트 chunk 분리.
• 배포모드(webpack.prod.js) devtool 변경.
• package.json에 sideEffects 추가.
• 웹페이지 title 변경.

webpack code splitting을 적용한다.

구현할 기능

빌드 속도 향상, 용량 축소를 위해 최적화 작업을 진행

상세 작업 내용

• webpack code splitting 수정
• dynamic import 구문 수정(webpack 주석 추가)
• lodash 용량 줄이기 위해 tree shaking 설정 및 적
• webpack 재빌드 속도 향상을 위해 caching 적용

react-bootstrap을 tailwind-css로 변경한다.

구현할 기능

기존 react-bootstrap으로 구현되어 있던 css를 tailwind-css로 변경.

전체적인 코드 리팩토링을 한다.

구현할 기능

전체적인 코드 리팩토링을 한다.

상세 작업 내용

• protected routes 수정
• 상품관리 페이지 나오면 카테고리, 속성 초기화 되는 부분 수정
• 상품 추가, 수정 페이지 컴포넌트 합치기(중복됨)
• 필터기능 useSelector 최적화(누락됨)
• 가격 필터 debounce 적용
• 결제 페이지 사용자 주소 정보 불러오기 전에 로딩 스피너 추가
• 로그아웃 하며 유저정보 reset되도록 수정