1차 프로젝트 회고

HYUK·2023년 2월 19일
1

react

목록 보기
4/15

1. 프로젝트 안내

1-1 개요

  • 오설록 웹페이지를 기반으로한 이커머스 사이트 기능구현 및 디자인 구현

1-2 담당페이지

  • login, signup, footer, payment 페이지

1-3 적용기술

  • React.js, sass, HTML, JavaScript
  • 협업 및 일정관리 : Git, GitHub, Slack, Trello, Notion, figma

2. 구현페이지 안내

2-1 로그인 & 회원가입 페이지

1). 회원가입 페이지

2). 로그인 페이지

  • 유효성 검사시 정규식을 활용하여 유효성 검사를 진행하였다.

  • 회원가입시 필수정보사항이 모두 입력이 되면 로그인 버튼이 활성화 되도록 구현하였다.

  • 회원가입시 안내되는 약관부분에 대해서 text내용이 많기 때문에 회원가입 페이지를 컴팩트하게 구성하기 위해서 모달창으로 따로 구현하였다.

  • 체크박스 선택시 선택사항, 필수사항에 따라서 체크박스의 상태가 달라지게 구현하였다.

2-1-1 구현중 어려웠던 부분과 새롭게 배운부분

  • 사용자 관점에서의 페이지 구성및 에러 핸들링
    프로젝트 이전에는 과제에서 요구한대로 로그인페이지를 만드는것에 그쳣고 요구사항에 대한 구현만 하면된다는 생각에 여러가지 에러 부분에 대해서 생각은 하지 않았다. 그러나 이번 프로젝트의 경우 로그인, 회원가입시 모든 조건들에 대해서 백앤드 팀원과함께 논의하며 만들면서 생각이든것이 입력조건이나 여러가지 부분에서 사전에 미리 통제하지 않으면 에러가 생길 수 있는 경우가 많다는것을 알게 되었다. 또한 레이아웃 구성시 단순히 보기좋게만 구성하는것을 넘어서 사용자 관점에서 어떻게하면 더 사용하기 편할지, 가독성이 좋을지에 대해서 고민도 많이 해볼 수 있는 기회가 되었던것 같다.

  • 비슷한 관심사의 state를 묶어서관리
    코드작성 과정에 있어서 많은 state값들이 있었었는데 이것들중 비슷한 관심사를 가진 함수와 state는 묶어서 관리가 가능한것을 새롭게 알게되었다. 처음에는 어색하고 눈에도 잘 익지도 않았지만 여러 state들을 묶어보며 리팩토링 해보니, 코드작성량 및 가독성에 있어서 여러 이점이 있다는것에 배울 수 있었다.

  • 사고과정의 세분화
    회원가입 페이지에서 체크박스 기능 구현시 체크항목에 따라서 전체선택이 되거나 혹은 어떠한 체크박스는 어느 경우에는 체크가 자동으로 빠지게 만들어야하는 부분이 있었는데 이부분에 있어서 다시한번 사고과정을 조금 더 작은 단위로 해볼 수 있는 기회가 되었던것 같다.

  • api주소 관리
    그동안 fetch함수 코드를 작성하면 api주소 관리부분에 대해서는 생각하지 못하고 있었는데 이번 코드리뷰를 통해서 새롭게 생각할 수 있게되는 기회가 되었다. api주소를 컴포넌트에 그대로 작성하면 서버정보가 노출이된다는점, 서버 주소는 바뀔 수 있다는점, 그렇게되면 모든 전역에 있는 fetch를 찾아다니면서 바꿔줘야한다. 이러한 수고스러움을 덜기 위해서 config.js 파일을 만들어 api를 따로 관리하는 방법으로 수정하면 더욱 더 좋을것 같다.

1). footer 페이지

  • 상수데이터를 이용하여 반복되는 데이터들을 따로 관리를 해 주었다.

  • 중첩라우팅과 아울렛을 이용하여 login, signup페이지에서는 노출되지 않게 하였다.

2-2-1 구현중 어려웠던 부분과 새롭게 배운부분

  • 상수데이터 관리
    footer 페이지의 경우 크게 어려움이 없었던 페이지 였으나 처음에 잠시 고민을 했던게 어디까지 상수데이터로 관리를 해주면될까에 대한 고민을 하게되었고, 비슷한것들이 반복되는것에 대해서 상수데이터를 관리해주면 좋겠다는 답을 얻을 수 있었다.

  • 중첩라우팅과 아울렛
    footer와 nav의 경우 login, signup 페이지에서는 나오지 않아서 어떻게하면 따로 관리를 할 수 있을까 고민이였는데 멘토님께서 중첩라우팅과 아울렛으로 해결 해 보라하셨고 이번 기회를 통해 중첩라우팅과 아울렛에 대해서 새롭게 알 수 있었다.

2-3 결제 페이지

  • 신청자 정보가 상품 수신자와 같은경우 button클릭시 수신자 정보가 input창에 저장되게 구현

  • 1차 프로젝트의 경우 외부 api를 이용하지 않아서 주소관련 데이터를 따로 먹데이터로 만들어 주소검색창의 기능을 구현 해 보았다.

2-3-1 구현중 어려웠던 부분과 새롭게 배운부분

  • 데이터의 단방향성
    결제페이지에서 가장 어려웠던 부분은 주소 검색창을 구현하는 부분이 가장 어려웠었다. 주소검색창의 경우 모달창 기능으로 만들었고 그 주소 검색결과를 다시 모달로 띄워주는 형식으로 만들어 보았다. 주소를 검색하는 기능까지는 만들었는데 검색된 주소 데이터를 다시 역으로 부모 컴포넌트까지 가져오는게 너무 어려웠다. 데이터의 단방향성이라는 부분을 무시하고 넘겨줄 수 있는 방법은 없을까하며 정말 많은시간을 고민한것 같고 각고에 끝에 찾아낸것이 함수를 전달하는 방법으로 방법을 찾을 수 있었다.

3. KPT

3-1 Keep

  • 팀원들과의 협동
    keep부분에 있어서는 이번이 첫 프로젝트이다보니 만족스러운 부분보다는 아쉬운 부분이 상당부분이였지만, 그래도 기억에 남고 만족스러웠던 부분은 한 팀원의 문제를 개인의 문제로만 보지 않고 다같이 협동해서 해쳐나가려 했던 자세가 만족스러웠다. 물론 100%해결하지 못한부분도 있었다. 그러나 우리는 모두 협업을 하는관계이고 이러한 부분에 있어서 쉽게 간과해서는 안된다고 생각한다.

3-2 Problem

  • 업무분담
    업무분담에 있어서 전략적이지 못했던 부분이 아쉬웠다. 아무래도 모두 처음이다보니 주먹구구식의 업무분담이 이루어지지 않았나 싶다. 처음 분담받은 페이지가 끝나면 다음페이지도 연관성이 있게끔 연결이되면 좋았을텐데 이부분에 있어서 디테일함이 조금은 부족했던것 같다.

  • 팀원과의 소통
    시작전에도 소통이 중요하다는것은 여러번 듣고 충분히 인지하고 시작하였으나, 첫 프로젝트이다보니 어느부분에 있어서 중요하게 소통해야하는지 포커스를 잡기 어려웠다. 한가지 절실히 느낀것이 백앤드와 프론트앤드가 어떻게 데이터를 주고받을것인지 확실한 상의가 있어야하고 그래야 시행착오를 확실히 줄일 수 있다는것을 알았다. 그리고 초기세팅에 있어서 단순히 세팅만하고 컨벤션이나 여러 디테일한 부분에 대해서 상의가 부족했던점이 아쉬웠다. 또한 업무진행상황이 어느정도 되고있고 그러한 부분에 대해서 지속적이고 원할한 소통이 필요하다는것또한 느낄 수 있었다.

  • 시간분배
    시간분배는 이번뿐만이 아니라 지금까지 회사생활 해오면서도 느껴왔듯이 효율적인 시간분배를 해야 가장 효율적인 결과물을 만들어낼 수 있다는건 당연히 알고 있었고 이번에도 그렇게 만들기 위해 노력하려 했으나, 현제 나의 실력으로 배정 받은 페이지를 언제까지 완성할 수 있을지 쉽게 가늠하기가 어려웠다. 그러다보니 일단 무조건 실력이 닿는대까지 빨리만들자라는 생각으로 임하게 되면서 몸도 정신도 쉽게 지쳐버렸던것 같다. 앞으로 계속해서 경험을 쌓아가며 효율적으로 시간분배를 할 수있게 해야겠다.

3-3 Try

  • 효율적인 업무를 위한 지속적인 소통
    이번 첫 프로젝트에서 어떠한 부분에 있어서 지속적인 소통을해야하며 어떻게 해야 효율적으로 결과물을 얻을수 있는지에 대해서 느꼇고 다음 프로젝트에서고 미팅시나 프로젝트 진행 중간에도 계속적으로 인지하고 노력해야겠다.

  • 전략적인 업무분담을 통한 효율성 극대화
    다음 프로젝트이 경우 페이지별로 상세하게 정리하여 어떠한식으로 업무를 분담하면좋을지 더 고민하며 전략적으로 반영해야겠다.

4. 느낀점 및 회고정리

먼저 서두에 시작하고싶은 말은 여러가지로 아쉬운 부분이 많았다는 점이다. 위에서 KPT 회고를 하였지만 KPT내용 말고도 기술적인 부분이라던지 더 세세하게 보면 변수명 하나 짓는것까지 아쉬운부분이 많았다. 또한 생각한대로 잘 풀리지 않아 혼자서도 자책하고 고민에 많이 빠지곤 했었다. 그래도 무언가 하나하나 페이지가 만들어가지고 백엔드와 통신했을때 정상적으로 모든것이 작동되었을때는 너무나 기분이좋았고 뭔가 결과물에 step by step으로 나아가는 기분이 들었다.
이번 프로젝트의 코드리뷰 및 결과물을 통해 다시한번 반영해야될 부분과 개선점에 대해서 생각하고 고민해 봐야될것 같다.
아직도 배워야할게 너무 많고 따라가기 벅찬 모습에 가끔은 좌절하는경우도 있지만 그래도 한달전에는 리액트의 '리'자도 모르던 내가 이렇게 무언가를 만들고 팀원들과 같이 해나갈수 있다는거에 그래도 조금은 더뎌도 성장하고 있구나 하는 생각을 하며 내자신을 조금이나마 독려해보고 싶다.

profile
step by step

0개의 댓글