[TIL] Todo 프론트

VSCode

 

React 환경 생성을 위해, npm install -g yarn 설치를 하는 도중 

yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없다는 문구와 함께 오류가 발생

about_Execution_Policies을 참고하라는데, 보안관련 해서 안된다는 말로서,

관리자 권한으로 powershell에서 Set-ExecutionPolicy Unrestricted을 입력 후, 확인을 위해 ExcutionPolicy를 입력하면 Unrestricted가 나오는 지 확인

 

이제 다시 yarn -v 혹은 yarn --version 으로 되는 지 확인하여 버전이 나온다면 이제 시작이다.

yarn create react-app todo-frontend(프로젝트명)

 

axios : 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

yarn start 입력하게 되면 브라우저가 열리는데, 개발자 모드도 열게되면 오류와 직면하게 된다.

CORS poliycy 정책에 의해서 막혔다라고 뜨며, 이 문구가 뜨지 않더라도 GET http://localhost:8080/todo net::ERR_FAILED 라는 문구는 있을텐데 해결을 해보자면 백엔드와 프론트엔드의 주소가 다르면서 생긴 이슈이다.

이러한 것은 백엔드에서 처리를 해주면 되는데, 

 

IntelliJ 로 넘어와서, 아래와 같이 만들어주면 된다.

WebMvcConfigurer interface 상속, addCorsMappings()를 override
addMapping : CORS를 적용할 URL패턴을 정의, 홈페이지를 렌더링하고, 간단한 사이트 URL 리디렉션을 수행
allowedOrigins : 자원 공유를 허락할 Origin
allowedMethods : 허용할 HTTP method 지정

 

VSCode

axios : GET, PUT, POST, DELETE 백엔드의 자료를 핸들링
axios.then : 핸들링 과정에서 성공이라면 코드를 실행
axios.catch : 핸들링 과정에서 실패라면 코드를 실행

코드 관련된 해설은 그 전에 이미 react를 공부하면서 사용했던 것이기 때문에 생략한다.

 

 

---

<결과물>

 

참고 : 해당 블로그는 여기를 따라 하면 만든 코드입니다.