[Project] 💼겟원티드 프로젝트

👉프로젝트 소개

2차 프로젝트로 원티드 사이트를 모티프로 개발자를 위한 채용정보 웹서비스의 기능들을 구현해보았다. 이번 2차 프로젝트는 클래스형 컴포넌트가 아니라 함수형 컴포넌트와 HOOK을 이용하여 리액트를 더 능숙하게 써볼 수 있는 기회였다.

모티프로 한 원티드 사이트에서 프로젝트 기간으로 잡았던 2주라는 기간에 맞춰서 로그인부터 이력서 작성 입사지원까지 기본적인 웹서비스에 필요한 기능들로 우선 필수 구현 사항으로 목표를 잡았다.

기간 및 팀원

2021.04.26 ~ 2021.05.07 까지 2주 간
프론트 3명,백엔드 3명 총 6명

🎡SCRUM 방식으로 소통한 과정

우서 먼저 scrum 방식으로 기능과 개선점에 대해 우선순위를 부여하며 진행했다.이번 프로젝트에서는 매일 회의마다 내가 서기가 되어서 회의록을 기록했다. 그때 그때 트렐로에 회의록을 추가해서 역할 분담을 쉽게 확인할 수 있었던 것 같다.

우선순위 따라 필수 구현 사항과 추가 구현 사항을 나누었고 팀원들과 트렐로를 이용하여 todo 리스트를 세분화 하여 시작했다. 트렐로를 보면서 매일 아침 20분 정도 데일리 미팅을 하며 Done 오늘 할일 진행 사항에 방해가 되는 요소 Bloker를 공유하며 소통했다.
API 엔드 포인트도 트렐로에 공유해두어서 수월하게 키값과 API 주소 등 소통 할 수 있었다.

🛠️기술스택

frontend

🤠MY ROLE

2차 프로젝트에서는 회원가입과 로그인을 담당했다.
쉬울 것이라고 생각했는데 생각보다 공을 드렸고 그 만큼 기본기를 다 질수 있었다.

Login
일반 로그인/ 카카오 로그인 기능 구현

• 이메일 회원가입 여부에 따른 페이지 연결
• 소셜로그인 가입 메일 중복 체크 알림 기능
• 조건부 렌더링을 통한 컴포넌트 변경
• uselocation을 이용하여 state에 이메일 값 전달
• 로그인 성공시 로컬스토리지에 토큰 저장

+ 실제 이메일로 비밀번호 재설정 기능 구현

Signup
회원가입 페이지

• 조건부 렌더링을 통한 모달창 구현
• map 함수를 이용하여 input 값 관리
• 회원가입 버튼 활성화

✨결과 화면✨

1.카카오톡 소셜 로그인

처음에 어렵게만 느꼈던 카카오톡 소셜로그인은 생각보다 코딩작업은 간단했다. 다만, OAuth 개념을 이해하는 데 시간이 꽤 걸렸다.

https://opentutorials.org/course/3405
처음에 생활 코딩을 통해서 도움을 받았고,
카카오 로그인 공식문서를 보면서 이해해 나갔다.

먼저, 카카오 개발자 웹에서 내 어플리케이션을 만든 다음 Redirect URI 등록하고, JavaScript SDK 적용했다.

Kakao.Auth.login 함수를 이용하여 카카오 사용자 토큰을 확인하여, 백엔드 서버로 전달한다.백엔드 서버에서 받아온 새로운 토큰 로컬스토리지에 저장한다.
+테스트를 위해 연결 끊기 기능 추가했다.

2.일반 회원가입 / 로그인

• 이메일에 특수문자 @가 포함 되어야 올바른 이메일 조건으로 추가하였고, 동적으로 바로바로 체크 되도록 border와 메세지로 올바른 이메일이 아니라는 것을 스타일컴포넌트의 props를 이용하여 적용했다.
  

모든 값이 비워있지 않고, 회원가입 버튼 활성화 조건은 핸드폰 번호는 12자리 이상 (-포함하기 때문), 비밀번호 재확인이 일치해야 활성화되도록 했다.

백엔드 서버에 로그인 정보를 확인 할 때 이메일값도 같이 보내주어야 하기때문에 로그인 이메일 값을 history로 보내고 location으로 받아서 보내주었다.

3. 비밀번호 변경

컴포넌트를 삼항연산자를 이용해서 비밀번호 변경 하는 컴포넌트로 바꿔주었다. 비밀번호 변경을 클릭했을 때 state 값을 boolean으로 false에서 기존 state값에 !(부정하여) true 로 만들어주었다.

짜잔 실제 메일로 임시 비밀번호가 발급 된다.

✏️프로젝트 리뷰

1차 프로젝트와 달라진점

에러와 충돌 어려움에 의연해지기🧐

(에러가 나면, 응~🙃 그래 내가 잘못했구나^^)

1차 프로젝트 때는 충돌 하나하나에도 마음이 흔들렸고 기능이 잘 구현 되지 않으면 금방 짜증이 밀려오곤 했다.

그런데 이제 그것도 익숙해 지니 그러려니 하는 맷집이 생기게 되었다. 충돌과 에러에 어느새 당황하지 않고 태연해진 나를 보면서 어느덧 성장하고 있다는 생각이 들었다!

앞으로도 개발을 하면서 나는 수많은 에러와 어려움을 겪을 것이고, 그만큼 성장할 수 있겠다는 생각이 들었던 프로젝트였다.

새로운 환경에 쫄지말기

처음에 함수형 컴포넌트와 styled component를 쓰는 것이 정말 어색했고 괜히 겁부터 먹었다. 지금 보면 참 별것 아닌데 말이다..! 그래서 공식문서를 잘 활용하면서 새로운 것에 겁먹지 말자는 것을 알게되었다.

---

아쉬운 점이 나를 발전시킨다.

2차 프로젝트 때는 백엔드와의 소통에서 어려움을 조금 겪었던 것 같다. 필수구현 사항과 추가구현 사항에 대해 협의가 중간 중간에 잘 안이루어졌던 것이 문제였다.

프로젝트를 마무리 2일 전에 그래도 잘 협의가 되어서 소셜 로그인 부분은 축소 하기로 했다.그래서 팀원이 먼저 말하지 않아도 나도 적극적으로 일의 과정을 체크해 나가야 겠다는 생각이 들었다!

필터링 기능과 페이지네이션 기능을 2차 프로젝트에서 구현 해보고 싶었는데 기회가 되지 않았던 것이 아쉬웠다! 기업 협업이 끝나고 나서 꼭 개인적으로라도 기능을 구현해봐야겠다 다짐했다.

함께 고생한 팀원들 같이 많이 배우고 성장할수 있어서 소중한 시간이였다. 초반에 1차 프로젝트가 끝나고 부담감이 있었어서 멘탈이 흔들렸었는데, 주변에서 배려해주고 이해해주어서 잘 해낼 수 있었던 것 같다.

나도 주변 사람들에게 긍정적인 에너지를 주고 더욱 함께 하고 싶은 개발자가 되어야 겠다고 다짐하게 되었다!🤩👨‍💻