1차 프로젝트로 프론트엔드 2명, 백엔드3명이 함께 5명이 한팀으로 오설록을 클론코딩 하였다. 한 달동안 개인적으로 공부하다가 처음으로 팀 프로젝트를 하여서 두려움 반 떨림 반에 감정을 동시에 느끼고 있었다. 거기다 프론트가 적어서 걱정을 많이하였지만 팀원분들이 격려를 많이 해주셔서 무사히 1차 프로젝트를 끝낼 수 있었다.
작업기간
2021.07.05 - 2021.07.16기술스택
- HTML
- CSS
- JavaScript
- React
- SASS
- Git
Project Tool
- Trello
내가 맡은 구현
- Nav bar 컴포넌트 동적라우팅 적용
- 메인 페이지 레이아웃
- 메인 페이지 슬라이드
- 메인 페이지 인기상품 슬라이드
- 로그인 기능
- 회원가입 기능
.gif)
React를 이용해 Carousel 기능을 처음 구현해봤는데 단순한 슬라이더라 생각했던 게 오산이었다. 이미지만 슬라이더가 아닌 텍스트가 포함된 전체 슬라이더다 보니 픽셀로 계산했던 처음에는 이미지가 중간중간 잘리는 상황이 발생하였다. 쉽게 px이 아닌 vw로 전체를 설정해주니 간단하게 전체가 넘어가는데 이것저것 해보면서 배우는 게 최고!
.gif)
이것도 Carousel 기능이지만 전체가 아닌 이미지 단위로 넘어가는 게 아니라 일정 크기가 정해진 상태에서 넘어가야 해서 메인 슬라이더와 반대로 px로 계산을 해주었고 hover 되었을 때 이미지를 추가해주었다.
그리고 로그인 / 회원가입 기능을 구현했는데. westagram때 해봤던 기능이라 비슷할 거로 생각했지만! 프로젝트의 목표는 더욱 더 효율적인 코드를 사용하는 것이 목표라고 하신 멘토님 말씀을 듣고 피드백을 받고 코드가 수정되었다.
nameCheck = e => {
this.setState({ userName: e.target.value });
if (e.target.value.length === 8) {
this.setState({ nameCheck: true }, () => this.handleButton());
}
};회원가입에 필요한 조건이 이름, 전화번호, 아이디, 비밀번호, 생일이였는데 이 조건들을 한 곳에서 쓰다보니 코드가 비효율적으로 길어졌다. 그래서 검사하는 파일을 새로운 파일로 만들고 import 해준 뒤
doValidation = () => {
const inputValues = Object.entries(this.state); // key,value 배열 반환
const validArray = inputValues.map(([key, value]) => { // map
return validationFunction[key](value);
});
return validArray.every(el => el); //every -> 배열 안의 모든 요소가
//유효성 검사를 통과했는지 테스트하고 Boolean 값으로 반환
};이렇게 유효성 검사를 해주고 새로 함수를 만들어주니 코드가 정말 효율적으로 짧아졌다..
Project Review
처음에 1차 프로젝트를 진행하고 일주일이 지나고 나서 우왕좌왕하면서 속도가 너무 늦는 거 같아 팀원들한테 미안하고 불안했지만, 프로젝트는 기능구현의 목표보다는 팀원들과 협업하면서 서로 회의하고 문제점을 발견하고 개선하는 점에서 배워가는 게 크다는 멘토님의 말씀을 듣고 시선을 돌려보니 서로 어려운 점을 해결하고 으쌰으쌰 해가는 모습이 눈에 들어왔다... 팀원들과 함께해서 긍정적인 분위기 속에서 진행할 수 있었던 것 같다!
