react, typeScript를 활용한 클론 프로젝트를 진행했습니다.
react를 사용한 홈페이지 구조를 갖춘 프로젝트는 처음이었기에 시간은 다소 사용되었지만 대략적인 프로젝트 진행과정과 구조, 네트워크 통신 등 많은 부분을 학습할 수 있었던 시간이었습니다.
https://github.com/seongEun95/cheonjiam
GitHub - seongEun95/cheonjiam
Contribute to seongEun95/cheonjiam development by creating an account on GitHub.
github.com
1. 새롭게 경험한 점
1) 공통 컴포넌트 분리하기
- 웹사이트에서 모든 페이지에 사용되는 영역인 Header, Navigation, Footer를 컴포넌트로 만들어 모든페이지에서 사용할 수 있도록 했다.
- 본 사이트가 제품을 판매하는 사이트이므로 하나의 제품 컴포넌트를 만들어 여러 페이지에서 사용할 수 있도록 컴포넌트 제작 했다.
* 어려웠던 점
- 기존 회사에서 작업할 때에는 컴포넌트 분리라는 개념이 없었기에 구조화하는 단계가 없이 바로 코드를 작성하는 과정을 진행되었었다. 그래서 그 습관으로 인해 리액트 라이브러리를 사용함에도 컴포넌트 설계를 하기도전에 코드부터 작성하는 과오를 경험했다. 이번 프로젝트를 통해 컴포넌트에 대한 생각과 고민의 과정을 거쳤고 다음 프로젝트에서는 무작정 코드부터 작성하는 것이 아닌 재사용될 컴포넌트를 먼저 구상을 하고 코드 작성을 진행해야겠다고 생각했다.
2) 네트워크 통신
- 네트워크 통신을 위해 axios 라이브러리를 사용하여 통신했다.
- 프론트엔드에서 임시로 만든 목업데이터 또는 jsonPlaceHolder의 가짜 데이터가 아닌 실제 사이트 제품 api를 받아 데이터를 직접 화면에 렌더할 수 있어서 의미가 있었다.
- 회원가입 시 POST방식으로 email과 password를 전달하며 이때 비밀번호의 경우 보안을 위해 해시 알고리즘인 SHA256을 사용하여 서버로 전달하였다.
- 로그인 시 POST방식으로 이메일과 비밀번호를 전달하였고 그 결과 값인 access token과 refresh token을 로컬스토리지에 저장하여 인증과 인가를 구현할 수 있었다.
- 인증과 인가에 대한 개념은 별도로 노션에 정리하여 학습을 진행했다.
(https://jumbled-carrot-837.notion.site/04ae1803da8740c493129532a155862b?pvs=4)
- 로그인과 회원가입하는 과정에서 통신 오류 발생 시 catch에서 에러 메시지를 확인하여 각각의 메시지에 따라 사용자에게 팝업으로 오류내용에 대해 안내를 진행했다.
- 유저가 입력하는 값들(이메일, 비밀번호)은 클라이언트에서 유효성 검사하는 과정을 넣었다. 유효성 검사는 정규표현식을 사용하여 입력값이 틀렸다면 입력 인풋창 아래에 메시지를 넣어 유저에게 올바른 값을 입력할 수 있도록 안내하였다.
* 어려웠던 점
- 실제 프론트엔드와 벡엔드 통신에 대한 경험이 적다보니 머리에 개념 잡기가 힘들었고 코드를 작성하는 것도 익숙하지 않아 검색에 도움을 많이 받았습니다. 이번에 포스트맨으로 미리 테스트를 해보고 실제 axios라이브러리를 통해 통신을 해보면서 실제 업무에서도 이런식으로 하겠구나를 간접적으로 경험해볼 수 있었습니다.
3) UI 구현
- 사이트 내 가격의 범위를 슬라이더로 구현하는 부분이 어려웠던 부분이었다. 처음에 drop, drag 이벤트로 구현했으나 잔상이 남는 치명적인 오류가 있어 완성하지 못했다. 멘토님의 도움을 받아 해결점을 찾을 수 있었으나 굉장히 난이도가 높게 느껴졌다.
- 메인페이지의 이미지 슬라이드는 react-mulit-carousel 라이브러리를 사용하여 쉽게 구현할 수 있었다.
- 메인페이지 슬라이드 아래 제품 슬라이드는 라이브러리 사용하지 않고 클릭이벤트와 css의 transform translate 속성을 이용하여 직접 만들어보는 경험을 할 수 있었다.
4) 전역상태관리
- 리액트 전역상태관리는 redux-toolkit을 사용하여 진행했다. 제품을 판매하는 사이트이다보니 장바구니에 대한 부분을 전역상태로 관리하여 어느 페이지에서든 장바구니 기능을 사용할 수 있도록 하였다.
* 어려웠던 점
- 아직 redux에 대해 익숙하지 않아 많은 검색을 통해 찾아보며 진행하였다. 그리고 같은 제품을 담았을 때는 제품의 숫자만 추가되고 장바구니 페이지 내에서도 체크된 제품에 대해서만 가격을 적용하는 등의 세세한 기능들이 많아서 까다로웠던 작업이었다.
2. 앞으로 해야할 점
- 코드를 작성하기 전 컴포넌트 설계를 먼저 진행하고 실제 페이지를 구성할 때에는 조립하는 식으로 진행해야한다.
- 벡엔드와 통신하는 과정이 익숙하지는 않기에 좀 더 많은 프로젝트를 통해 능숙하게 할 수 있도록 연습해야한다.
- 전역상태관리도 어떤 데이터를 전역으로 관리할 것인지를 결정할 수 있는 판단과 좀 더 익숙하게 사용할 수 있도록 연습해야한다.