항해99 7주차(2021.4.12-4.18) WIL : 미니프로젝트에서 성장하기.

이번 미니프로젝트(주제 : 중고제품 거래사이트. 사이트 이름은 항해마켓) 첫주에는 페이지에 공통으로 들어가는 헤더를 만들고, 회원가입/로그인을 구현했다.

1. 헤더

조장님이 예쁘게 그려준 와이어프레임에 나온대로 뷰를 작성했다.

메인페이지 와이어프레임과 상단의 헤더. 헤더는 모든 페이지에서 같은 모양이다

와이어프레임대로 구현한 헤더는 아래와 같다.

좀 투박한게 흠이지만 이건 짬이 모자라서 그런듯. 그러니 css는 계속 배우도록 하자.

2. 로그인/회원가입 구현

뷰를 만드는 것은 당연히 해야 하는 일이지만, 더 중요한건 클론코딩에서 이해한 것을 더 발전시켜서 리덕스 모듈 코드를 작성하고 이것을 이용해서 백엔드와 통신(요청-응답)하는것이다. 이것을 해야 서버에 데이터를 저장하고 가져올 수 있고 로그인/회원가입도 할 수 있다. 이번주에는 클론코딩때 어깨너머로 배운 axios 사용법과 리덕스 사용원리와 코드 작성법을 이용해 로그인/회원가입을 구현하고 말겠다는 목표를 세웠고 다행히 성취했다!

 

아래 이미지들은 회원가입/로그인, 로그인 상태 유지/로그아웃을 가능하게 한 리덕스의 미들웨어 코드들이다. 

회원가입용 미들웨어 코드의 일부

로그인용 미들웨어 코드의 일부

로그인때 받은 토큰 유무로 로그인 유지여부 체크하기 함수 코드

토큰을 이용하는 상태라면 이렇게 세상 간단한 로그아웃 코드를 만들 수 있다. 

이렇게 코드를 보니 쉬워보이지만, 이 코드를 짜기 위해서 나름 고생을 많이 했다. 다른팀이 잘하는 사람들 코드를 참고해서 로그인/회원가입 코드를 짰다는 걸 듣고, 나도 모르는게 많으니 참고를 해야겠다 결심했다. 그래서 리액트 탑티어님들의 깃의 로그인/회원가입 코드들을 눈이 빠져라 들여다 보면서 분석하고, 같은 조를 한 적이 없어서 잘 알지 못하고 지나가면서 인사한게 전부인 능력자님에게도 도움 요청을 해서 조언을 듣기도 했다. 이렇게 노력하다보니 조금씩 이해가 되고, 그렇게 짠 코드로 백엔드 분이랑 테스를 하면서 하나씩 되게 했다. 마침내 로그인/회원가입이 성공했다고 안내창에도 나오고 개발자도구에도 예쁘게 데이터가 나올 때 얼마나 기쁘던지!  

 

일이 되게 하는것도 기뻤다. 하지만 쌩판 모르는 상태에서 의미없는 노력을 하기보다 배워서 이해하면서 일이 되게 하는 의미있는 존버를 해야 결과가 온다는 것을 체험한 것이 더 기쁘고 뿌듯했다.