728x90 반응형 React.js4 proxy와 비동기 메이플스토리 api를 활용하여 프로젝트를 준비하고 있던 도중, 문제가 발생하면서 해당 문제를 해결하면서 알게된 React.js에 대해서와 Proxy에 대해서 정리해봤습니다. ※ 프론트를 주로 하는게 아니다 보니 의미만 이해해주시면 감사합니다. 메이플스토리 api를 활용해서 데이터를 긁어오고자 하였으나, CORS오류가 발생하였습니다. 제가 개발하는 서버의 주소는 localhost:3000인데, 메이플스토리 api의 첫 주소는 public.api.nexon.com 이였습니다. 그러다보니 CORS오류가 발생하여 해결방안을 찾아보다가 Proxy에 대해 알게 되었습니다. const submitData = (e) => { e.preventDefault(); fetch( "https://public.api.nexon.. 2023. 1. 25. ES6에 대하여 React.js학습을 진행하다보면 예전에 JS를 학습할 때와는 다르게 var을 사용하지 않고 주로 const를 사용하는 것을 볼 수 있습니다. 또한 function의 문법이 예전과 다른다는 것도 볼 수 있죠 ES5에서 왜 ES6로 쓰냐 라고 하시면 소스코드가 같은 결과를 출력하는 데 좀 더 깔끔해지기 때문? 이라고 하면 될거 같습니다. 예를 들면(자바) POINT라는 클래스에 x와 y를 int로 선언해서 사용하면서 POINT만 선언해주면 되는 것을 x에 값, y의 값들이 모여있는 배열 2개를 만들어서 사용하는 방식 and 등이 있습니다. function print(){ return '안녕하세요' + name + '입니다.'; } console.log(print(lms0806)) 이것을 function p.. 2021. 11. 17. Springboot + React.js를 쓸 경우 Spring boot와 JSP or html로 프로젝트를 할 경우 기본적인 ajax 통신을 이용하여 프로젝트를 진행할 수 있습니다. 그러나, React.js를 이용할 경우 1개의 서버가 아닌 2개의 서버를 사용하여 기존 세션 통신을 이용하여 프로젝트를 진행할 수 없는 문제가 발생합니다. 기존 세션을 이용하여 개발을 진행할 경우 값을 React.js에서 넘겨주고 Spring boot가 받아 Spring 서버의 세션에만 값을 저장하기 때문에 React.js에서는 로그인 정보를 가져올 수, 로그인되었을 때의 반응을 할 수 없게 됩니다. 그럴 경우 JWT(Json Web Token)을 이용하면 간단하게 연결할 수 있습니다. 여기서 JWT란 Json Web Token으로 세션에 저장한 값을 한번 더 저장을 합니다.. 2021. 11. 16. React.js와 Node.js(기본) 가장먼저 Node.js에 대하여 이야기하자면 기본적인 Node.js를 배워보고자 하면 이 사이트를 추천합니다. https://opentutorials.org/course/3332 WEB2 - Node.js - 생활코딩 수업소개 이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다. 수업대상 예를들어 1억개의 페이지로 이루어진 웹사 opentutorials.org 생활코딩 Node.js인데 Html과 JS의 기본? 정도만 알고 있다면 재미있게 학습을 진행할 수 있습니다. 따라하다가 안되는 경우 소스코드도 제공되니 따라서 해보시면 됩니다. 다음으로 React.js에 대해 알아보자면 React.js는 facebook의 .. 2021. 11. 15. 이전 1 다음 728x90 반응형
