Web (5) 썸네일형 리스트형 API란? API는 Application Programming Interface의 약자로 애플리케이션은 고유한 기능을 가진 모든 소프트웨어를 나타낸다.인터페이스는 두 애플리케이션 간의 서비스 계약으로 요청과 응답을 사용하여 서로 통신하는 방법을 정의한다. 즉, API는 서버-클라이언트 혹은 서버-서버나 클라이언트-클라이언트 간의 소통 방법(어떤 프로토콜이 어떤 기능을 하고, 어떤 정보를 주고 받을 지)을 정의해놓은 인터페이스라고 할 수 있다. API의 종류 - Partner APISOAP API : 단순 객체 프로토콜을 사용. XML을 사용하며 과거에 많이 사용되었으나 유연성이 떨어짐.RPC API : 원격 프로시저 호출. 클라이언트가 서버에서 함수 등을 완료하면 서버가 출력을 다시 전송.Websocket A.. [Spring+React] Session으로 사용자 정보 관리하기 로그인 후 사용자 정보를 다른 페이지까지 유지해야 할 때, JWT, Cookie, Session 등의 방법이 있으며, 이번 포스팅에서는 Session에 대해 다루려고 한다. 저번 포스팅에서 UserContext를 이용해서 사용자 정보를 유지하는 방법에 대해 작성했다. UserProvider로 update한 변수가 한 페이지 이동은 연동이 되는데, 새로고침을 하거나 또 다른 페이지로 이동하면 변수가 초기화되었다... 다른 방법을 찾던 중 Session을 인증을 간단하게 하면 빠르게 구현 가능하다고 정글러분께서 추천해주셔서 세션으로 구현을 시작했다. 세션 인증 과정을 간단하게 설명하자면 아래와 같다. (F)로그인 요청 -> (B)가입 여부 확인 후, 세션 setting -> (F)SessionStorage .. [React] 동기와 비동기 / async와 await 동기/비동기 기준이 헷갈려서 고생했다. axios.get()으로 데이터를 받아오고, 이 데이터를 기반으로 html 요소를 생성하는 중인데 동기식으로 처리하기 위해 async&await을 사용함에도 계속 변수에 null값 밖에 들어가지 않는 상태였다... 기존 코드는 아래와 같다. const getAllPost = async () => { const res = await axios.get('/main'); items = res.data; } useEffect(() => { getAllPost(); }, []); console.log(items); (items ? keys = Object.keys(items) : console.log("items is null")) 분명 위에서 기다리라고 했는데! 계속 아래.. [Spring] CORS 설정으로 오류 해결 Access to XMLHttpRequest at 'http://localhost:8080/login' (redirected from 'http://localhost:3000/login/welcome') from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 이런 오류가 발생해서 프론트->서버로 데이터 전달이 불가능했다. 여러 해결책을 찾아봤는데 프록시 설정은 이미 되어 있었고, 저 C.. [Spring+React] 리액트에서 보낸 json 스프링에서 받기 스프링 부트 - Backend 리액트 - Frontend 로그인 기능을 위해 form에 작성한 유저 정보를 스프링 서버로 전송하는 작업을 하고 있다. form의 정보를 작성하는 내용에 따라 변경시키는 건 useState를 사용하고 있다. 스프링도 리액트도 완전 처음 쓰는 프레임워크라서 영...모르겠다 싶었는데 여러 블로그를 보다보니 감이 잡힌다. useState 선언 const [userid, setId] = useState(''); const [password, setPW] = useState(''); 앞은 사용할 변수명, 뒤는 변수값 변경에 사용할 함수명이다. useState()안에 작성하는 매개변수는 초기화하는 값. 정확하지는 않은데, 변수 정의와 사용할 함수가 같은 scope 안에 있어야 작동한다.. 이전 1 다음
