[프로젝트 회고] thisisnevercode

윤창현·2021년 10월 23일
Project-LogReactWeCodenode.jsthisisnevercode개발일지위코드풀스텍2기프로젝트
4

Project-Log

목록 보기
8/17
post-thumbnail

함께해서 행복했던 thisisnevercode

🌇 프로젝트 소개

  • 우리 팀은 thisisneverthat 이라는 서울을 기반으로 활동하는 스트리트 웨어 브랜드를 바탕으로 팀 프로젝트를 진행하였다.
    thisisneverthat.보러가기!

깔끔한 인터페이스에 다양한 기능을 갖춘 웹사이트로 팀 내에서 좋은 도전이
될 것 같은 생각에 시작부터 설레었다.😊

팀은 thisisnevercode 디네코. 라는 이름으로 프로젝트의 시작을 알렸고
생각 이상의 팀워크를 발휘하며 시작부터 알찬 회의를 통해 신호탄을쏘았다.✨

🏃🏻 뿌듯한 결과물

🎢 역할 및 사용된 기술

Frontend, Backend 두 분야를 팀원 모두가 함께 진행하기에
먼저 각 분야에서 진행할 업무를 분담했다.

FrontEnd - React, React Router, Sass, Git & GitHub
BackEnd - Node.js, MySQL, Bcrypt, JWT, Git & GitHub를 기반으로

FE에서는 로그인/회원가입 레이아웃 구현과 BE에서는 카테고리 API 구현을 맡았다.

🔥 치열하고 찬란했던 우리를 되돌아보며

  • 이렇게 각자 업무를 분담하고 인원을 3명, 2명으로 나누어 Front, Back 초기세팅을 시작했고 필자는 Front 초기 세팅을 담당하는 3명 중 1명으로서 CRA를 통해 팀 초기 세팅을 성공적으로 마무리했다. 이 과정에서 직접 초기 세팅을 경험할 수 있었고 초반부터 자신감을 쌓으며 시작했다.🙌

💥 FRONTEND

  • 드디어 프로젝트가 시작되었고 첫 주는 프론트 파트를 구현하는 주로써
    팀원끼리 서로의 진도를 체크하고 궁금증, 애로사항을 공유하며 원활한 소통과
    피드백을 통해서 보다 탄탄한 뼈대를 만들어 갈 수 있었다고 생각한다.🪨

로그인 페이지에서의 목표!
- 정확한 형식의 Validation 로직 구현
- 버튼 배치 및 호버 기능 구현(추가)

회원가입 페이지에서의 목표!
- 세분화된 Validation 로직 구현
- validation status 표시 기능(추가)
- 로그인 페이지로 이동할 수 있는 버튼 구현
- 이용약관 동의 기능 구현(선택, 필수, 전체동의 추가 구현)

위의 목표를 보았을 때 결국 중요한 점은 사용자 입장에서 확실하게 알 수 있는
Validation 로직과 깔끔하고 간결한 UI라는 것을 느낄 수 있었다.

그렇기에 하나의 페이지에서 가장 중요한 부분이 사용자의 회원가입/로그인이라고 생각하며 더 정확하게, 신중한 마음으로 책임감을 느끼며 코드를 작성하기 시작했다.

  • 가장 많이 고민했던 부분은 사용자가 로그인/회원가입을 진행함에 있어서
    불편함이 없고, 본인의 실수를 바로 확인이 가능하게끔 하는 부분이었다.

  • 단순한 클론 코딩이 아닌 직접 생각하고 구현해 보는 프로젝트를 진행하는 우리 팀의 입장에서 볼 때 생각보다 단순한 레이아웃으로 구현되어 있는 회원가입 페이지에 input 타입 추가, 이용약관 동의 기능을 추가로 구현하기로 했다.

  • 각 input 창에 알맞은 validation 로직을 구현하고 비밀번호 박스에서는
    삼항연산자를 통해서 input의 type을 바꿔 사용자가 본인이 친 비밀번호를 직접 확인이 가능하게 해주는 기능을 넣어주기도 하였다.

시간은 언제나 흐르기 마련이고 그렇게 프론트기간을 마무리하는 날이 다가왔고
마지막까지 코드를 다시 보고 팀원들에게 피드백과 Peer-Reivew를
받아 가며 간결하고 알찬 코드가 나올 수 있도록 노력하였다.

💥 BACKEND

필자는 기존에 하나의 카테고리 테이블에 메인 카테고리와 서브 카테고리를 함께 데이터에 담아서 API 로직을 구현했는데, 멘토 리뷰를 통해서 두 개의 카테고리 테이블을 나누고 따로 데이터를 넣어야 하는 상황에 직면했다. 거기에 우리 팀은 각자 마이그레이션, 프리즈마를 수정한 상태여서 결국에는 다시 새롭게 초기 세팅을 시작하는 단계로 돌아갈 수밖에 없었다.

Front 단계에서 각자 맡은 업무에 열중하면서 크나큰 무리 없이 진행이 되었는데,
Back 단계에서는 생각하지 못한 다양한 장애물을 만나기 시작했다.

그러나 어려운 상황이 닥칠수록 팀원들은 서로 모여 더 많은 토의와 프로젝트 진행 방향에 대해서 이야기를 나누며 상황을 해결해나갔고 백엔드 부분 역시 잘 마무리할 수 있었다.

🌊 '소통' 이 무엇이냐 물으면, '성장통' 이라 답할 것이다.

  • 프로젝트 기간 동안 정말 많은 것을 배우고 느꼈다.
    과거의 나보다 조금은 더 성장한 모습,
    더 깊게 생각하고 개발자의 관점에서 프로젝트를 바라보는 시선,
    편하게 사용하던 작은 기술들이 개발자에겐 엄청난 노력이 담긴 결과물이라는 것,
    단순 코드를 치는 것이 아니라 일상에서의 문제를 해결하고
    삶을 더욱 편리하게 하는 직업이 개발자라는 것도 느꼈다.

  • 그중에서 가장 중요하게 생각하고 많이 배운 부분은 바로 '소통'이었다.

  • 로그인/회원가입 API를 담당하는 백엔드 개발 동기 분과 정말 많은 소통을 나누었다.
    가끔은 교육이 되고, 가끔은 토론이 되며, 서로를 이해하고 공감해가는 그 순간이 너무 소중하고 뜻깊은 발전으로 남게 되었다.

  • 필자는 군 장교 생활을 경험하며 소통의 중요성을 누구보다 뼈저리게 느끼고
    어느 정도 자신감도 가지고 있는 상태였지만, 이번 프로젝트를 통해서
    소통의 깊이와 넓이에 대해 다시 생각해 보게 되었다.

  • 프로젝트를 진행하면서 나만의 코드, 나만의 프로젝트가 없다는 것을 느꼈다.
    서로의 코드에 대해서 다들 이해할 수 있도록 간결하고 명확한,
    나의 코드가 아닌 우리의 코드를 작성    해야 하고
    마치 군대에서의 전우조와 같이 코드를 작성할 때
    나의 의도와 생각을 자주 공유하면 할수록 팀워크와 프로젝트의 효율이
    높아진다는 점    을 배울 수 있는 소중한 시간이었다.

아무리 뛰어난 실력을 가진 개발자일지라도 소통하는 방법이 없다면
그 무엇도 빛을 제대로 발휘하지 못한다는 것을 느낄 수 있었다.

📸 기록하고 싶은 코드

🎞 로그인

handleSignIn = () => { //로그인 버튼을 눌렀을 때 진행되는 validation 함수
    const { email, password } = this.state;
    if (email === '') {
      return alert('이메일을 입력해주세요'); //이메일 값 validation
    } else if (password === '') {
      return alert('비밀번호를 입력해주세요'); //비밀번호 값 validation
    }

    fetch(`${API_ENDPOINT}/account/login`, { // 빈값을 확인 후에 서버로 데이터 전송
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email,
        password,
      }),
      credentials: 'include',
    })
      .then(res => {
        return res.json();
      })
      .then(data => {
        if (data.status === 'FAILED') {
          alert('이메일이나 비밀번호를 확인해주세요'); // 틀린 user 정보 validation
        } else if (data.status === 'SUCCESS_LOGIN') {
          alert('로그인에 성공하였습니다');
          this.goToList();
        }
      });
  };

changeIcon = () => {
    this.setState({
      showPw: !this.state.showPw,
    });
  };
           //render 밑의 코드 
           <div className='passwordContainer'>
              <input
                className='passwordInput'
                type={showPw ? 'text' : 'password'}// 삼항연산자를 통한 input 타입 변화
                placeholder='비밀번호'
                name='password'
                onChange={this.handleInput}
              />
              <div className='onEye' onClick={this.changeIcon}>
                {showPw ? <FaEyeSlash /> : <FaEye />}// 아이콘을 누름과 동시에 password input 타입 동시 변화
              </div>
            </div>

  • 로그인 화면을 진행하면서 fetch를 통한 서버와의 데이터 연결과 비밀번호를 사용자에게 보여주게 하는 아이콘과 input 타입의 변경 부분에서 많은 고민과 시간을 보냈기에 기록하고 싶다.
    fetch를 통해 주고받는 alert 창은 프론트가 아니라 백에서 해주는 거라는 어처구니없는 생각을 했었던 시간이 있었기에 더욱 기억에 남는다.
    또한, 반응형 구현을 처음으로 시도했고 많은 수정사항이 없는 로그인 페이지였음에도 앞으로 반응형을 구현할 때 더 완벽하게 해낼 수 있을 것 같은 자신감을 얻은 기능 구현이었다.

🎞 회원가입

checkedSignUp = () => {
    const {
      name,
      email,
      password,
      address,
      isUseAgreeChecked,
      isInformationAgreeChecked,
      isMyselfAgreeChecked,
    } = this.state;

    const correctName = /^[가-힣]{2,4}$/;
    const correctEmail =
      /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
    const correctPassword =
      /^.*(?=^.{5,12}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;
    const checkName = !name.match(correctName) || name === '';
    const checkEmail = !email.match(correctEmail) || email === '';
    const checkPassword = !password.match(correctPassword) || password === '';
                     
    if (checkName) {     // 변수를 활용한 정규표현식 적용
      return alert('이름을 입력해주세요');
    } else if (checkEmail) {
      return alert('이메일을 입력해주세요');
    } else if (checkPassword) {
      return alert('비밀번호를 입력해주세요');
    } else if (address === '') {
      return alert('주소를 입력해주세요');
    } else if (          // 필수 체크박스 validation 
      !isUseAgreeChecked &&
      !isInformationAgreeChecked &&
      !isMyselfAgreeChecked
    ) {
      return alert('필수 동의버튼을 눌러주세요');
    }          // 각각의 input창에 정규표현식이 담긴 validaiton 적용

    fetch(`${API_ENDPOINT}/account/register`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name,
        email,
        password,
        address,
      }),
    })
      .then(res => {
        return res.json();
      })
      .then(data => {
        console.log(data);
        if (data.status === 'FAILED') {
          alert('중복된 이메일입니다');
        } else if (data.status === 'SUCCESS_SIGNUP') {
          alert('회원가입에 성공하였습니다');
          this.goToSignIn();
        }
      });
  };

clickCheckbox = event => {     // 동의 체크박스 함수 
    const { name, checked } = event.target;
    this.setState({
      [name]: checked,
    });

    if (name === 'isAllAgreeChecked') { //전체동의 박스 클릭 시 전체선택, 전체해제
      if (checked) {
        this.setState({
          isAllAgreeChecked: true,
          isUseAgreeChecked: true,
          isInformationAgreeChecked: true,
          isMarketingAgreeChecked: true,
          isMyselfAgreeChecked: true,
        });
      } else {
        this.setState({
          isAllAgreeChecked: false,
          isUseAgreeChecked: false,
          isInformationAgreeChecked: false,
          isMarketingAgreeChecked: false,
          isMyselfAgreeChecked: false,
        });
      }
    }

    if ( //전체선택상태에서 하나의 박스라도 해제시 전체동의 클릭도 동시에 해제 
      name === 'isUseAgreeChecked' ||
      name === 'isInformationAgreeChecked' ||
      name === 'isMarketingAgreeChecked' ||
      name === 'isMyselfAgreeChecked'
    ) {
      if (checked) {
        this.setState({
          isAllAgreeChecked: false,
        });
      } else {
        this.setState({
          isAllAgreeChecked: false,
        });
      }
    }
  };

  • 회원가입 validation은 로그인보다 더욱 상세하고 정확하게 구현하기 위해서 많이 고민했다. 사용자의 입장에서 회원가입을 진행하면서 어떻게 해야 잘못된 형식으로 입력했고 무엇이 틀렸는지 바로 확인이 가능하도록 하는 부분을 많이 신경 쓴 코드이기에 기록하고 싶고,
    동의 체크박스 함수는 많이 서투르고 어려워했던 함수이자 코드여서 기록으로 남겨두려 한다. 이 부분 역시 사용자가 사용하는 동안 불편함, 실수를 최소화시키는 부분에 많은 고민을 했던 코드이다.

개발자가 되기 위해 도전을 시작했고 좋은 사람들과 함께한 첫걸음과 지금의 첫 결과물을 만들 수 있게 되었다. 누구나 공부하고 시작할 수는 있어도 아무나 될 수는 없는 멋진 개발자가 되기 위한 길을 걷고 있는 지금, 이 프로젝트는 나에게 더 간절한 동기부여와 함께하는 이들의 소중함을 일깨워준 값진 시간이었다고 생각한다. 힘든 순간, 값진 순간, 성장할 수 있는 순간을 함께해 준 디네코 팀원들에게 감사하며 프로젝트 회고를 마치겠다.📷

profile
윤창현
긍정적 영향을 전하며 함께하고 싶은 개발자를 그린다.
이전 포스트

Project-Log 7. 백엔드 프로젝트

다음 포스트

[프로젝트 회고] We Hotel

2개의 댓글

comment-user-thumbnail
김태규
2021년 10월 23일

창현님~
군장교 출신다운 멋진 회고록 잘읽고 갑니다~
2차 프로젝트도 화이팅!

1개의 답글