[Project] 1차 프로젝트 weKEA Front-end

---

1. 프로젝트

• wecode 38기 1차 프로젝트
  • 스웨덴의 가구 브랜드 iKEA cloning project
  • 개발 인원: 프론트엔드 3명, 백엔드 3명
  • 개발기간 : 2022/10/17 ~ 2022/10/27

 

• 적용기술
  
  • Front-End : Javascript, React.js, sass, React Router, Create React App
  • Back-End : Node.js, Express, MySQL, EC2, RDS, S3, PostMan
  • common : Git, GitHub, AWS. ESLint. Prettier
  • 협업툴 : Notion, Slack, Trello 

 

• 기능구현
  
  • Detail Page,,Cart,, Wishlist,, Nav Bar
  • Main Page,, List Page,, Footer,, Purchase History
  • Login,, Sign up,, My page,, Alert Modal

---

2. 나의 작업

Signup page

0

• 유효성 검사 (이메일, 비밀번호, 휴대폰, 생일 정규식 표현을 변수에 담아 조건식에 활용)
• 유효성 여부에 의한 레이아웃 변화

 

Login page

0

• 유효성 검사를 실행해 조건을 통과할 경우 로그인 버튼활성화 (이메일과 비밀번호 정규식 표현을 변수에 담아 조건식에 활용)
• 유효성 여부에 의한 레이아웃 변화
• 회원가입이 안된 이메일과 비밀번호 일 경우 "가입하지 않은 아이디이거나, 잘못된 비밀번호입니다" 가 포함된 모달이 mount됨.

 

 

 

Mypage

0

• 로그인 성공 시 유저 정보를 받아와 이름과 포인트를 표시

---

3. 기억에 남는 코드

const [lastName, setLastName] = useState("")
const [firstName, setFirstName] = useState("")
const [birthday, setBirthday] = useState("")
const [phoneNumber, setPhoneNumber] = useState("")
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")

const userLastName = e => {setLastName(e.target.value)}
const userFirstName = e => {setFirstName (e.target.value)}
const userBirthday = e = > {setBirthday (e.target.value)}
const userPhoneNumber = e => {setPhoneNumber (e.target.value)}
const userEmail = e => {setEmail (e.target.value)}
const userPassword = e => {setPassword (e.target.value)}


				▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ 


const [userInfo, setUserInfo] = useState({
    lastName: "",
    firstName: "",
    birthday: "",
    phoneNumber: "",
    email: "",
    password: "",
  });
const userInfoHander = e => {
    const { name, value } = e.target; 
    setUserInfo({ ...userInfo, [name]: value }); 
  };

• 로그인과 회원가입을 하면서 구조분해할당을 사용하지 않고 로직을 짤때는 여러개에 State을 사용하였는데 구조분해할당을 사용하여 한개의 State 안에 반복되는 코드를 객체안에 넣어 사용하였습니다.  이런식으로 반복되는 코드를 하나의 State로 사용하면 관리하기가 좋고 코드가 길어지는거 방지할 수 있었습니다.

const birthdayRegEx =
    /^(19[0-9][0-9]|20\d{2})-(0[0-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
  // 년 자리에는 19나 20으로 시작하여 뒤에 숫자는 0~9까지 숫자 중 두개를 선택
  // 월 자리에는 첫번째 자리는 0으로 시작 할 경우에 뒷자리 숫자를  0~9까지 숫자 중 하나를 선택하고 1로 시작 할 경우에는 뒷자리가 0~2까지 숫자를 선택
  // 일 자리에는 첫번째 자리가 1로 시작 할 경우에 뒷자리 숫자를 1~9 안의 숫자를 선택하고 첫번째 자리가 1~2 안의 숫자를 선택할 경우 뒷자리 숫자를 0~9 안의 숫자를 선택하고 첫번째 자리가 3 일 경우에는 뒷자리가 0~1 안의 숫자를 선택

  const phonenumberRegEx = /^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}/;
  // 앞자리 숫자는 2~3개, 두번째 자리는 숫자는 3~4개, 세번째 자리는 숫자 4개로 고정하고 가능하며 숫자는 0~9까지 사용가능

  const emailRegex =
    /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
  // @ 전후로 숫자 영어 대소문자 -_사용 가능하고 .이후 2~3개 영어 대소문자 사용가능

  const pwRegex =
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/;
  // 영어 대소문자 숫자 특수문자 각각 한개를 포함하여 8자리 이상 사용가능

• 로그인과 회원가입을 할 때 정규표현식을 사용하여 유효성 검사를 하고 유효성 검사 조건이 맞으면 백엔드와 통신해서 회원가입 하였습니다. 회원가입한 정보와 로그인 할때 이메일, 비밀번호가 다를 경우 모달을 띄우게 하였습니다.

---

4. 느낀점

•  팀워크 
  • 처음으로 팀 프로젝트를 하면서 팀들과의 호흡과 소통이 중요하다는걸 알게 되었습니다.

 

• 작업에 사용했던 툴 
  • git  - 팀 단위로 작업을 하면서 각자의 브랜치에서 작업을 해야되는데 다른 브랜치로 이동하지 않고 한 브랜치에서 작업도 해보고master에서만 브랜치를 생성해야되는데 다른 브랜치에서 브랜치를 생성하여 작업도 해보면서 이번 프로젝트로 실수를 많이 했지만 git을 배울수 있는 기회였다고 생각합니다.
  • trello - 팀들의 진행속도와 나의 상태를 한눈에 알아볼 수 있었습니다.
  • slack - 소통할 때 진짜 많이 사용되었고 github와 연동하여 쓰기 좋았습니다.

---

5. 소감

코딩이라는 단어도 모르던 저의 막막했던 1차 프로젝트가 끝이 났습니다. 백엔드 & 프론트엔드를 결정했던게 얼마전인데 1차 프로젝트가 끝나고 생각하니까 아쉬움이 많이 남는거 같습니다.

내가 맡은 티켓만 빨리 만들어야 겠다는 생각만으로 앞만 보고 달려가다보니까 팀원과의 소통을 잘 못했던거 같아 2차 프로젝트에는 trello를 잘 사용하여 팀끼리 어떤 티켓이 진행되고 있는지 확인 하면서 팀원과 소통을  잘 해야겠다고 생각했습니다