본문 바로가기
카테고리 없음

[엘리스 SW Engineer 트랙 7기] 웹 프로젝트 2주차 - 세 번째 학습 정리 -

by 띵코딩 2023. 11. 19.

 

 

 

진행한 사항

개발한 기능
이번 프로젝트에서 제가 맡은 마지막 개발 사항인 관리자 페이지를 구현하였습니다. 먼저 관리자 페이지에는 상품 정보를 관리하는 탭과 주문 정보를 관리하는 탭으로 나뉩니다. 상품 정보 관리 탭에서는 상품을 추가, 삭제, 수정이 가능합니다. API 호출을 통해 DB에 저장된 상품 목록을 조회가능하도록 하였습니다. 기본적으로 상품 아이디, 정보, 가격 등이 표시되도록 구현하였습니다.

상품 추가 버튼을 누를 경우 상품 추가 UI로 넘어가게 됩니다. 상품의 이미지와, 이름, 가격은 필수로 적어주어야 하는 부분입니다. 상품 추가하기 버튼을 누를 경우, API 호출을 통해 상품에 대한 정보를 검증 후 목록에 추가될 수 있도록 구현하였습니다.

상품 수정 버튼을 누를 경우 상품 추가 UI가 뜨게 되면서 수정 버튼을 눌렀던 상품에 대한 정보가 미리 입력되어있도록 설정하였습니다. 미리 입력된 정보 수정 후 수정하기 버튼을 누를 경우 API 호출을 통해 상품에 대한 정보가 변경되도록 구현하였습니다.
주문 정보 관리 탭에서는 사용자 주문 정보를 삭제할 수 있고, 배송 상태를 변경할 수 있습니다. 배송 상태는 select 태그를 사용하여 option을 선택할 수 있도록 하였고, option 수정 후 수정 버튼을 누를 경우 정보가 바뀌는 것을 확인할 수 있습니다. 상품 정보 위에 checkbox를 선택한 후 주문 삭제 버튼을 누를 경우 주문 정보가 삭제되는 것을 확인 할 수 있습니다.

진행 중 겪었던 이슈
상품을 추가하거나 수정할 때 post요청을 통해 FormData로 정보를 넘기는 부분에서 router에서의 데이터 타입과 타입정보가 맞지 않아 오류가 발생했었습니다. 이 부분을 빠르게 캐치하지 못하여 많이 헤맸던 기억이 있습니다.
다행히 백엔드 파트 팀원분에게 도움을 요청하여 문제된 부분을 잘 해결하였습니다.

진행할 사항
모든 페이지가 거의 다 완성단계 상태이고, 이제 다른 팀원들과의 코드 상호작용 후 발표자료를 준비할 예정입니다.

느낀점
2주간의 프로젝트를 마무리하면서.. 협업의 중요성에 대해 알게되었고, 제 자신이 아직 얼마나 부족한 지에 대해서도 깨닫게되었습니다. 그리고 저희 팀을 봐주셨던 현업 코치님들 덕분에 많은 것을 배우고 큰 동기부여가 되었던 시간이였습니다.
최종적으로 프로젝트를 어느정도 완성하긴 했지만, 아직 많이 미흡한 부분이 있기에 좀 더 보완하여 제 포트폴리오에 한 부분이 될 수 있도록 노력할 예정입니다. 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript