로그인,회원가입,비밀번호 찾기 모듈 구축 완료

추가 기능인 시간표기능, 중고거래 기능이 추가된다면 시간이 좀 더 걸리겠지만 대략적인 계획표이다.

 

회원가입 모듈은 팀원분이, 로그인 모듈과 비밀번호 찾기 모듈, 컴포넌트 분리는 모두 내 담당이였다.

처음에 메인 부분인 App.js 부분에서 개발을 하다보니 메인 부분임에도 코드 길이가 200줄을 훨씬 넘어 극악의 가독성과 유지보수성을 보여줬다. 그래서 로그인 부분은 LoginForm, 비밀번호 찾기 부분은 PasswordResetPage 등 컴포넌트 기능을 활용해 나누었다.

그 결과 메인 App.js 부분에선 import로 갖고오고 Router로 읽어왔기 때문에 전체 코드를 30줄이내로 할 수 있어 가독성과 유지보수성을 높일 수 있게 되었다.당연히 코드 재활용성도 높아졌다.

 

 

이번 컴포넌트를 활용해서 개발하는 도중 문제점이 발생 했다.

컴포넌트 분리 시 메인 로그인 페이지가 작동하지 않는 문제점 발생한 것이다.

⚬문제가 생긴 예상 원인은 react-router-dom이 내부에 설치되어지지 않기 때문이라 판단했다.

⚬해결방안1. npm install react-router-dom 재설치(이미 시도완료)

⚬해결방안2. npm install react-router-dom 수동설치(이미 시도완료)

⚬해결방안3. 새로운 프로젝트 생성 후 재시도(이미 시도완료)

⚬해결방안4. 기존에 사용중이였던 Visual Code를 사용하지 않고 https://stackblitz.com/?starters=frontend 프레임워크 사용

해결방안 4번에 가기전에 해결되어 다행이다.

 

회원가입 기능은 다른 팀원이

로그인모듈, 비밀번호 찾기 기능은 내가 개발했고, 컴포넌트 분리도 내가 했다.

아직 코드가 완전히 합쳐진 것은 아니지만 아래 사진들은 개발 완료된 사진이다.

 

 

본격적인 앱 개발을 시작하기 앞서 Figma라는 UI 디자인 툴로 대략적인 UI를 구상해놓았었다.

구상 후에 서로 링크를 공유해 생각을 나눴었다.(이땐 미쳐 각 팀의 생각이 달랐던 것을 눈치채지 못했다.)

하지만 회원가입 기능을 구현하고 나서 백엔드 팀과 생각이 달랐던 것을 알게되었다.

(회원가입 구현했던 팀원분이 수정한다고 한다)

팀 프로젝트라 소통이 정말 중요하다고 생각이 들었다.