▶︎ 팀명 : HHYYY (훈훈한연들)
▶︎ 개발기간 : 2021.10.04 ~ 2021.10.15
▶︎ 개발 인원
Front-End 3명 : 박미연, 박세연, 윤수연
Back-End 2명 : 김지훈, 박치훈
▶︎ 적용 기술 및 구현 기능
Front-End : React, SASS, JSX
Back-End : Django, Python, MySQL, jwt, bcypt, AWS RDS, AWS EC2
Common : Git, Github, Slack, Trello, Postman
▶︎ 나의 기술
- 헤더 레이아웃 구현
- mouse hover 시, navigation bar 툴팁 창 및 user page (로그인, 회원가입 등) 툴팁 창이 뜨도록 구현
- Nav 돋보기 아이콘 클릭 시 Search Modal 구현
- 장바구니 레이아웃 구현
- 회원과 비회원을 토큰값으로 구분하여, 회원인 경우 장바구니에 담은 물건을 수량 그대로 옮겨와 장바구니 페이지 결과에 보이게 함
- 회원이 아닌 경우, 빈 장바구니만 보이게 함
로그인 레이아웃 구현- 로그인 유효성 검사 (아이디 @과 . 포함, 비밀번호 8자 이상 및 특수문자 포함, 조건에 충족하지 않으면 버튼 비활성화)
- 로그인 버튼 클릭시 유효성 검사 후 메인으로 이동
- 로그인 후 백엔드로부터 토큰값을 받아 유지되게 함
▶︎ 기억하고 싶은 코드
검색창에서 검색을 하고 검색결과페이지에서 서버로부터 데이터를 받아 화면에 렌더
검색창페이지
handleSearchResult = () => {
const { searchWord } = this.state;
if (searchWord.length > 0) {
this.props.history.push(`/search-result?q=${searchWord}`);
this.setState({
searchWord: '',
});
}
};onClick event로 페이지이동할 수 있도록 구현했는데, url 주소에 협의된 데이터를 파라미터를 통해 전달하는 쿼리스트링을 이용한 것이다.
검색결과페이지
componentDidMount = () => {
fetch(`${API.SEARCH}${this.props.location.search.split('=')[1]}`)
.then(response => response.json())
.then(result => {
this.setState({
products_list: result.products_list,
products_count: result.products_count,
});
});
};
componentDidUpdate(prevProps) {
if (
this.props.location.search.split('=')[1] !==
prevProps.location.search.split('=')[1]
) {
fetch(`${API.SEARCH}${this.props.location.search.split('=')[1]}`)
.then(response => response.json())
.then(result => {
this.setState({
products_list: result.products_list,
products_count: result.products_count,
});
});
}
}componentDidUpdate 함수를 통해 검색어가 바뀔 때마다 재렌더링을 하는 것이다. 이때, if 문으로 조건을 걸어야 무한루프에서 벗어날 수 있다.
무한루프가 일어나는 이유는 setState로 계속 재렌더가 되는 것이다.
그렇기에현재 검색어와 이전 검색어와 다른 경우라는 조건으로 무한루트에서 빠져나와야 한다.
fetch 주소에 split를 적용한 이유는 검색만 축출되는 것이 아니라 쿼리스트링시작점부터 전달되기 때문에 서버에서는 검색어만 인식할 수 없어 정확한 주소를 위해 적용했다.
▶︎ 아쉬움
장바구니를 담당하게 되었을 때 구현하고 싶었던 사항이 많았다.
- 빈장바구니, 상품있을 때의 장바구니 구현
- 상품추가
- 장바구니에서 상품수량이 수정되면 서버에 전달하여 업데이트 된 정보 가져오기
- 상품삭제
여기서 내가 구현한 것을 1,2 번까지였다.
백엔드 치훈님이 상품수량수정되면 수량,가격 수정된 데이터를 전달 해 주는 것까지 준비해 두셨는데 내가 기능구현을 못해서 할 수 없었던 부분이었다.
이때 나는 장바구니의 기능을 더 추가구현할 지, 검색결과페이지를 마무리할 지 고민했었다.
검색결과페이지를 맡은 팀원이 다른페이지의 기능구현 중이라 검색결과페이지의 마무리가 남았기 때문이다.
장바구니는 기본적으로 담아지고 주문완료페이지로 넘어가는 것까지 했기 때문에 검색결과페이지를 마무리 짓는 쪽으로 결정했다.
왜냐면 백엔드에서도 검색결과까지 API를 만들었고, 프론트에서도 검색결과페이지 레이아웃도 만들었는데 기능이 없는 파일로 만들기가 싫었다.
다행히도 백엔드 팀원분들 프론트 팀원분들도 이해해 주셨고, 검색결과페이지까지 잘 마무리 할 수 있었다.
그렇지만 역시 내가 구현하고 싶었던 부분이 아쉬움이 남고 기대했을 팀원들에게 보여주지 못해서 안타까운 것이 아쉬움의 한부분이다.
그리고 제일 아쉬움의 큰 부분은 우리의 프로젝트가 끝남에 따라 팀원들과 헤어지는 부분이다.
진짜 이런말을 하게 될 줄 몰랐는데...
우리팀의 한명한명 모두가 즐겁게 프로젝트를 했고, 정말 영혼을 불태우면서 했기에 더 아쉬움이 큰 것 같다.
물론 모두 본인들이 한 실수가 떠올라 미안한 마음들이 있을 수도 있겠지만 나에겐 실수보다는 배울 수 있던 계기라고 생각한다.
▶︎ 마무리
나의 첫 팀 "HHYYY(훈훈한 연들)"
치훈님, 지훈님, 수연님, 미연님!
너무나도 감사한 팀원분들!!
우선, 백엔드 팀원분들이 빠르게 API를 구축하셔서 3-4일만에 통신을 시작했고 서버도 만드셔서 고정된 url 주소를 사용할 수 있었다.
그리고 굳이 백엔드 팀원분들에게 계속 찾아가며, 서버 열어달라고 귀찮게 하지 않아도 됐었다..ㅋㅋㅋ
찾아갈 때마다 장난도 치고 해서 더 친해질 수 있었던 것 같다.
그리고 서로 모르는 용어가 있다보니 오해가 생길 수도 있는 부분인데 이해도 해주시고 배려도 해주셔서 너무나도 감사한 부분이다.
프론트팀원들!
너무나도 착한엔젤들...🧚🏻👼🏻😇
서로 으쌰으쌰하고 각자 맡은 것도 벅찰텐데, 서로 물어볼 때마다 도와주고 알려주려고 같이 붙잡으며 코드쳤다.
어쩜 이렇게 하나같이 좋은분들이었는지 덕분에 너무나도 감사하게 프로젝트를 잘 맞췄다.
물론 우리 팀원분들 뿐만 아니라 25기 전체에도 감사한 부분이 모르는 부분에 대해 물어보면 친절히 다들 잘 알려주시고, 나 또한 내가 적용한 부분에 대해 알려드리면서 복습할 수 있는 계기가 되서 너무 좋았다.
새롭게 만날 팀원분들이 누굴지 기대가 되고 얼마나 또 성장이 될 지 너무 궁금하다.
이번 프로젝트를 통해 2달도 안된 내가 한 부분을 맡아 잘 마무리 한 것에도 감탄스럽고 스스로 대견하다..ㅎㅎ
앞으로의 2주동안 또 얼마나 성장할지 기대된다.!
내일이 바로 또 2차프로젝트를 시작하는 날이다.
부담감이 전보다 더 밀려오는 기분이다.
이번에 혹시 또 장바구니를 맡게 된다면 꼭!!!! 상품삭제, 수정까지 가능한 페이지로 만들 수 있도록 발전하길 미래의 나에게 부탁한다.🙇🏻
우리모두 빠띵빠띵!
