1차 프로젝트 : 이솝

wonkeunC·2021년 5월 23일

팀 이름 : WeSop

Frontend : 최원근, 김휘성, 김도은
Backend : 양미화, 문성호

👊 인트로

Wecode 부트캠프에서의 시간이 어느덧 한달이라는 시간이 지났다.
정신없이 발 빠르게 커리큘럼을 소화하며 기대하던 1차 프로젝트를 시작하게 되었다.
처음에는 내가 과연 팀원들과 함께 소통하며 웹페이지 하나를 구현할 수 있을까라는 막연한 기대감 속에 두려움이 앞섰다.
우리는 첫 프로젝트를 위한 회의를 가졌고 모두 처음인 만큼 많은 서로의 의견과 대화를 통해 프로젝트에 대한 애정을 쏟아냈다.
물론 처음인 만큼 놓친 부분도 많았다. 대표적으로 구현해야 할 기능에 대한 난이도를 파악하지 못해서 맡은 기능을 예상 기간 안에 끝내지 못하는 경우도 종종 있었다.
트렐로를 사용하여 회의 내용과 코드 구현 상황 전체적인 팀원들의 상황을 파악할 수 있었고, Standing up 시간을 통해 아침마다 오늘 해야 할 일과 상황을 나누는 시간도 가졌다.

작업 할 component 나누기

프로젝트에 뛰어 들기 전에 우리 팀은 Component를 나누어서 작업을 하기로 하였다. 보통 페이지 별로 한명씩 담당하여 작업하는 것을 봐왔지만 이번 방법은 나에게 신선한 부분이였다.
각자 작업할 Component를 정하기 위해 회의 시간을 가졌다. 나를 포함하여 다들 자신이 어디까지 구현할 수 있을지 알 수 없었다. 고민의 시간 끝에 한명씩 입을 열기 시작하였다. 나는 로그인과 회원가입 제품 사용법 상세페이지를 맡기로 하였다.

구현 및 적용 사항

로그인, 회원가입, 사용법_상세페이지 레이아웃 UI 구현
UI 애니메이션 적용하여 생동감 표현 ( :focus-within, @keyframes )
백앤드와 JWT 통신, (회원인증, 정보교류) access_Token
로컬 스토리지,세션 스토리지, 쿠키 사용

구현한 회원가입

구현한 로그인

구현하고 싶었던 기능 :

close 버튼을 눌렀을때 로그인 창이 꺼지는 기능 구현.
조건에 따라 class scss 변경 (지금 경우는 onClick 했을때)
태그 안에는 class가 2개 들어갈 수 있음.

Validation : 회원가입 오류 경고문 설정 및 유효성 검사

validation 유효성 검사

유효성 검사 코드를 작성할 때 정규 표현식을 사용해서 코드를 구현해야 하나 아니면 내가 직접 연산자와 조건을 통해 코드를 구현해야 하나 두 가지 방법 중 어떤 방식으로 구현할지 고민이 많이 되었다.
사실 정규 표현식을 사용하면 사이트에 사용 예시가 잘 나와있어서 구현하기 쉽다.
하지만 내가 직접 유효성 검사 코드를 작성해 보는 것은 어떨까라는 생각이 스치게 되었는데 그렇게 하나씩 코드를 작성해 보았다.

그렇게 나는 내가 구현한 유효성 검사 코드를 발표하였다. 다른 팀의 인원들은 정규 표현식 방법을 모두 사용했을 때 나는 사실 불안했다. 어? 다들 정규 표현식으로 작성했네..? 나의 방법이 혹시 틀린 방법이었을까 나는 두려움에 떨었다.. 하지만 멘토님께서 나의 코드를 보시고 칭찬을 아끼지 않으셨다. 이렇게 처음에 직접 해보려는 마음이 중요하다고 말씀해 주셨다.
사실 지금 보면 별것 아닌 코드이다. 그렇지만 그 당시에 시도 해보려는 나의 마음에 칭찬해주고 싶다..

서버 오류메세지에 대한 메세지 출력

Main.js

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      login: true, // 로그인 = true
    };
  }
  // this.state = { login : true } 안에 true, false를 나타내주는 state값을 생성해준다. 

// 창을 닫아주는 기능을 위해 함수 offLogin() 을 생성한다.
  offLogin = () => {
    setTimeout(() => {
      this.setState({ login: false });        
      //offLogin() 함수가 실행되면 this.state={}안에 true 로 던 login 값이 false가 된다.      
    }, 200);
  };

  render() {
    return (
    // this.state.login이 true이면 <Login /> 컴포넌트에 offLogin() 함수를 
    사용할 수 있도록 전달한다.
      <div>{this.state.login ? <Login offLogin={this.offLogin} /> : null}</div>
    );
  }
}

Login.js

Login.js 에서 

1. this.state = { close : ''}; <- state에 빈 string 값을 가기고 있는 close 를 생성한다.
2. <form className="LoginForm" > <- "LoginForm" 원래 기존의 className.
3. <form className="LoginForm" + this.state.close> === "LoginForm" + ""
즉 아무런 값이 없고 여전히 "LoginForm"인 상태이다.
4. <button> 속성 안에 onClick ={() => { this.props.offLogin()}} <- Main.js  안에 있는  
함수를 props를 통해 가져온다.
5. <button> 속성 안에 this.setState({ close : "offLoginPage"}) <- setState으로 state값
close : "" 를 변경시키는데 button을 누르면 close: "offLoginPage" 로 변경되며,
6. <form className={"LoginForm" "offLoginPage"}> <- <form>은 두개의 className을 갖게된다

즉! <form> 태그는 scss의 두가지 class를 사용할 수 있게된다.

Login.scss

위의 close 버튼 코드를 보완하였다.

🧩 창 열었을 때 애니메이션 실행하기

this.state = { animation : "onLogin" } 에 창이 화면에 나타났을 때 기본적으로 애니메이션 효과를 갖게 한다.

"onLogin"을 작성한다. 애니메이션 효과를 정의해 준다.

해당 창(modalBody)에 className을 하나 더 부여한다. "onLogin"

🧩 창이 열린 후 animation 값 지워주기

componentDidMount()

componentDidMount()를 이용할 것이다. (같은 값이 반복되지 않도록 한다)

값을 호출해서 state에 저장하면 계속해서 render가 또 작동된다.
따라서, componentDidMount가 필요하다.

"최초에 한 번만 하면 된다."를 작동하려면
componentDidMount()를 쓰면 된다.
componentDidMount() 안에서 this.setState({ })를 사용하게 된다면 추가적인 rendring이 발생하고 브라우저가 화면을 갱신하기 전에 작업이 이루어진다. 즉 render() 가 두 번 호출 되지만 사용자는 그 중간 과정을 확인할 수 없다.

창 (className = "modalBody")을 열었을 때 modalBody 는 "onLogin" 이라는 클래스를 하나 더 갖게 된다, 즉

<div className={"modalBody", "onLogin"}>

그렇기 때문에 창이 열린 후 "onLogin" class를 지워 줄 필요가 있다.

this.setState({ animation: ' ' })
 
-> <div className={"modalBody" + ' '}>
 
-> <div className="modalBody"> 
 원래 className 값만 갖게 된다.

🧩 창 닫을 때 애니메이션 실행하기

창이 닫힐 때에 대한 애니메이션을 추가한다

닫기 버튼을 눌렀을때 animation 에 "offLoginPage" 클래스를 넣어준다.

<div className={"modalBody" + this.state.animation}>
  
->  <div className={"modalBody", "offLoginPage"}> 
  닫기 버튼을 누르면 offLoginPage를 갖게 된다.

input 사용자 데이터 저장

객체 안에 값을 꺼내려면 obj["string"], 즉 [ ]에 string 값이 들어와야 한다.
하지만 [name] <- 이렇게 표현해 준 것이 이상해서 name이 무슨 종류인지

console.log(typeof name)  을 해보았다.

결과는 아래 사진과 같다.

name은 string이기 때문에 [" "] 따옴표를 붙여줄 필요가 없다.

구현한 사용법 상세페이지

1차 프로젝트 회고

첫 프로젝트 이솝 웹 사이트를 진행하면서 처음 접해보는 기능들과 UI를 구현해야 할 때마다 과연 내가 할 수 있을까라는 의문점을 품은 채로 진행하였다. 물론 구현을 시작하기 전에도 무엇을 먼저 시작해야 할지도 큰 고민거리였다. 하지만 매일 아침마다 진행하는 Standing Up Meeting을 통해서 그날 내가 맡아서 해야 할 것들을 정리하고 팀원들과 얘기를 나누다 보니 무엇을 먼저 시작하고 어떻게 시작할 것인지가 명확해져갔다. 개발자로서 코드를 치며 개발을 하는 것도 중요하다 하지만 원활한 진행과 좋은 결과물을 만들기 위해서는 팀원들과 끊임없이 소통하며 웹 사이클을 전반적으로 이해하며 내가 지금 무엇을 하고 또 무엇을 해야 하는지를 명확히 해야 한다는 것을 느꼈다. 처음으로 팀원들과 함께 결과물을 만들어낸 프로젝트인 만큼 팀원들의 소중함과 함께하는 개발자로서 어떠한 역량을 갖춰야 하는지 좀 더 구체적으로 배웠던 시간이었다.

wonkeunC

개발자로 일어서는 일기

다음 포스트