배경

• Form태그를 사용할때, 어떨때는 onClick, 어떨때는 onSubmit을 쓰기떄문에 차이를 간단하게 찾아보았다.

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를 설정해준다. 정확하게는 아직 모르겠다.

느낀점

• 예전이였으면 Axios에서 에러나는걸 찾는데 한참 걸렸을텐데 이제는 디버깅도 점점 익숙해져서 에러 메세지를 정확하게 봤다. 에러메세지에 CORS와 관련된 메세지가 정확하게 출력됬기때문에 CORS란 무엇인지 찾아보고 해결할 수 있었다.