React

• react를 이용해서 회원가입 컴포넌트를 만들고있다.

• input태그를 통해 입력 받으면 onChange 메서드를 호출해서 해당 값을 변경해줘야한다.

  • <input value={this.state.email} onChange={this.handleEmail} id="email" type="text" placeholder="Email" />
    
    handleEmail = (event) => {
        this.setState({email: event.target.value})
        console.log(`handleChange called. value is changed ${this.state.email}`);
    }
    

  • 이렇게 input태그에서 값이 변경될대마다 handleEmail 이벤트를 호출해서, state.email값을 변경해준다.

form onSubmit vs button onclick

<form onSubmit={this.handleSubmit}>
  <button onClick={this.signBtnClicked} type="button">Sign In</button>
</form>

• form에서 데이터를 담아서 전달하는데 onSubmit하고 button의 onClick하고의 차이를 몰라서 찾아봤다.
• 브라우저마다 차이가 있지만 몇몇 브라우저의 경우 onClick을 했을때 내부적으로 onSubmit을 호출하는 경우가 있다. 그렇기 때문에 최대한 많은 부분을 수용하려면 onSubmit을 사용하자.
• onSubmit의 경우 호출하면 페이지를 새로고침하는 효과가 있다.
• button의 type을 submit으로 하면 onSubmit을 호출한다.

Axios CORS

• axios를 통해 클라이언트에서 서버로 호출을 했을때, CORS문제가 발생했다.

• CORS는 도메인이 다른경우 발생한다. 보통 로컬에서 개발을 하더라도 클라이언트, 서버가 localhost로 호스트는 같지만, 포트번호를 다르게 한다. 포트가 다르면 다른 주소로 취급한다.

• 해결법

  • app.use(cors({
      origin: true,
      credential: true,
    }))
    

  • express모듈에 npm i cors 명령어를 통해 cors모듈을 설치한다.

  • 미들웨어에서 cors를 사용한다고 설정. origin:true는 프론트엔드 도메인 주소가 자동으로 Access-Control-Allow-Origin에 들어가게 된다.

  • credential:true는 Access-Control-Allow-Credentials를 설정해준다. 정확하게는 아직 모르겠다.

  느낀점

  • 간만에 프론트 개발을 해봤다. 단순 컴포넌트만 만들고 동작만 시키던것을 이제는 나름대로 차이를 이해하려고 했다. onClick과 onSubmit 둘 다 똑같은줄 알았는데, 레퍼런스를 보면서 다른점을 알게되었고. CORS문제에 대해서 듣기도하고 해법도 알고있었는데, 개발하면서 문제가 발생하고 알고있는 해결책을 적용해보니까 보람을 느꼈다. 예전에는 에러메시지를 제대로 읽지 않았는데, 이제는 에러메세지를 명확하게 보니까 빠른시간에 문제를 해결할 수 있었다.