[위코드] TIL(Today I am Learned) -(49)(3차 기업프로젝트 후기)

youtu.be/zHjC3nC_7ls

 

팀명 : anser

팀원 : 신영재, 송수호, 이지윤

 

프론트엔드 3명

신영재, 송수호, 이지윤

 

프로젝트 github

github.com/limo-sum/anser

limo-sum/anser

레포소유한 팀원이 해당 기업에서 현직으로 일하는 직원인지라 해당 깃레포를 private로 변경하는 바람에

새로운 레포를 파서 다시 링크를 달고자 한다.

github.com/kasumil/anser-intern

kasumil/anser-intern

 

기술 스택

• React.js
• React Router

[FOOTER]

• 마우스 Hover시 textunderline 구현

[회원가입]

• 입력 값에 따른 길이 조건등에 따라서 해당 validator내용 구현
• email-validator 라이브러리를 이용한 이메일 입력값 유효성 검사 구현.
• fetch를 이용한 목업 데이터를 가지고, map함수로 선택목록 구현.
• 세션스토리지에 저장된 phone_number와 인증번호를 백엔드에 보내 이를 확인할 수 있도록 기능 구현
• (회원가입시 휴대폰 인증번호는 제가 만들지 않아 무시하셔야 하는 부분입니다.)
• 단지 세션스토리지에 저장하고 이를 읽는 코드는 제가 만들었습니다.

[CRSP 내 Step1, 4]

• datepicker 사용(한글번역 구현).
• axios를 이용한 백엔드 통신
• 세션스토리지에 저장된 step1, 2, 3의 값을 4에서 인식하여 이를 백엔드에 요청하고,
  해당 백엔드에서 응답하는 파일 주소에 접근하여 해당 파일을 다운로드 하는 기능을 구현.

[후기]

다운로드 기능은 핵심적인 기능이자 어려운 기능이었습니다.

스택오버플로우에서도 해당 자료를 찾기도 어려웠습니다.

이를 위해서 filesaver라는 라이브러리도 사용해보았고, 여러 시도도 해봤습니다.

하지만, 결국은 아주 옛날 코드로 해결이 되었습니다.

        const down = res.data.data.download;(구조분해)
        let a = document.createElement("a");
        a.href = down;
        a.download = down;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);

무엇보다도 백엔드쪽에서 잘못주기도하였고, 해당 주소로 접근이 못했던 저의 실수도 있었지만,

아무튼 기능구현에 성공했다는 것에 만족합니다.

 

회원가입시에 validation 기능을 구현하기 위해서 인자를 넘기는 방법 등

이 부분에서 멘토님에게 조건 작성하는 부분을 배우는 등 여러가지를 배운 경험이었습니다.

이전까지만해도 useEffect를 함수내에서 작성해야한다길래 꼭 버튼호출하는 것 안에서 작성해야한다고 알았습니다.

함수 내라는 것은 함수형 컴포넌트를 의미했던 것인데 말이죠.

  //밸리데이션 확인용
  useEffect(() => {
    const emailValid = validator;
    const isEmailDetector = emailValid.validate(userInfo.email);
    const isEmail = userInfo.email.length === 0;
    const isPassword = userInfo.password.length < 5;
    const isPasswordValid = userInfo.password === userInfo.password_check;
    if (isEmailDetector) {
      setHonest("first");
    } else if (!isEmailDetector) {
      if (isEmail) {
        setHonest("third");
      } else {
        setHonest("second");
      }
    }
    if (isPassword) {
      setDefine("one");
    } else if (isPasswordValid) {
      setDefine("two");
    } else {
      setDefine("three");
    }
  }, [userInfo]);

// 본문 내용
<ValidationBox>
	<SpanName honest={honest === "third"}>
    	기관 이메일 주소를 입력해주세요
	</SpanName>
	<SpanName honest={honest === "second"}>
		유효한 이메일주소가 아닙니다.
	</SpanName>
	<SpanName color="#5CB85C" honest={honest === "first"}>
		유효한 이메일주소입니다.
	</SpanName>
</ValidationBox>
  
  // styled-component 부분
  const SpanName = styled.span`
  display: ${(props) =>
    props.honest || props.define
      ? "block"
      : "none"};
  align-items: center;
  margin-bottom: 0;
  padding: 0.375rem 0.75rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  line-height: 1.5;
  background-color: ${(props) => props.color || "#c5093b"};
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  border-color: ${(props) => props.color || "#c5093b"};
  z-index: 5;
`;

[아쉬웠던 점]

코드가 점점 복잡해지고, 거대해지면서 저는 항상 주석으로 해당 내용에 기능 이름을 써놨는데,

다른 팀원들은 그렇지 않아서 코드 보기가 좀 힘들었던 부분이 아쉬웠던 기억이 있습니다.

그리고 팀원들끼리 코드 리팩토링을 하는데, 서로간의 리팩토링 양식이 달라서 마음에 들지 않지만

이를 요구대로 맞춰줬는데, 또 다른 팀원은 다른 방식으로 구현하는 것보고 좀 통일 했으면 좋겠다는 생각도 들었습니다.

 

[ 축하의 말 ]

이번 프로젝트 진행하면서 취업이 된 팀원들에게 축하한다는 말과

프로젝트 진행동안 고생했다는 말을 전하고 싶습니다.
모두들 원하는 바 성취해서 잘 되시길 바랍니다.

이상입니다. •ܫ• 

 

Adios Amigo!

나중에 인연이 된다면 Adios가 아니라 Hasta pronto라고 말하고 싶네요.

그럼 이만~ (づ｡◕‿‿◕｡)づ