Front-End9 React 8 : PUT 메소드 이후 게시글 이동시 수정전 게시글이 불러와진다. (비동기 처리 주의) 현재 id번호에 맞게 한 개 게시글을 GET메소드를 통해 가져오고 있다. 현재 quiz객체 안에 replies 배열이 있는데, replies배열을 포함한 quiz객체와 replies객체를 따로 다루고 있어 개선이 필요해보인다. 수정 페이지로 넘어갈때 기존 quiz객체 넘겨주기 수정버튼을 눌렀을 때, navigate가 실행된다. 이때 state로 quiz를 넘겨준다. 넘겨받은 state를 통해 기존의 상태에서 수정할 수 있게 초기값을 세팅했다. 이제 이렇게 수정후에 수정하기 버튼을 누르면 PUT메소드가 동작하고 navigate를 통해 다시 기존 게시글로 이동하도록 되어있다. 문제점 : 수정 전 게시글이 가져와진다. 서버에는 분명히 수정이 완료되었는데, 퀴즈페이지를 이동하며 처음 가져온 퀴즈객체는 수정전이다.. 2023. 11. 2. React 7 : 조건부 렌더링 (로그인/로그아웃 버튼) 처음에는 로그인 버튼을, 로그인 이후에는 로그아웃 버튼을 보여주고 싶다. 이렇게 조건에 따라서 화면에 렌더링해주는 것을 조건부 렌더링이라고 말하는 듯 하다. 몇가지 사용되는 방법이 있는데, 우선 두가지만 사용했다. 1. && 연산자로 If를 인라인으로 표현하기 isLogin이 true인 경우에만 해당 내용이 표시된다. 2. 변수값을 조건에 맞게 할당 이렇게 isLogin에 따라 삼항연산자로 값을 나눴다. 그런 뒤에 return안에 { 변수 } 형태로 넣어줬다. 결과 로그인 전 로그인 후 2023. 10. 19. React 6 : 카카오 소셜 로그인 구현하며 겪은 허무한 오류 (spring) 기존에 Spring 서버 내에서 카카오 소셜 로그인을 했었다. 하지만 이번에 React를 통해 프론트서버를 구현했고, 이에 따라 몇가지 변동이 생겼다. 위처럼 맞춰서 코드를 변경하던 도중 역시나 오류가 등장한다. 일단 카카오 로그인 버튼을 눌러서 인가코드를 받아오는 것은 무리없이 되는 것처럼 보인다. GET 메소드에 쿼리스트링 형태로 값도 잘 들어갔고 해당 페이지도 잘 뜬다. 여기서 동의하고 계속하기를 누르면 적어둔 RedirectURI로 인가코드와 함께 GET요청이 리다이렉트 된다. 문제발견 이 때 오류가 발생한다. 받아온 인가코드로 백엔드 서버로 GET요청이 갔는데 이것이 403 된다. 이 부분을 프론트에서 확인해보면 아래 코드에서 문제가 난 것으로 보인다. 우선 리다이렉트 URI로 오면 LoginR.. 2023. 10. 18. React 5 : 유저전용 페이지 발견한 문제 백에서 지정해준 인증인가가 필요한 URL은 서버로 요청을 날렸을 때 유효하다. 지금 필요한 건 로그인되어 있지 않은 상태에서 접근 불가능한 페이지를 설정해야한다. 보완해야할 점 1. 클라이언트에서 로그인이 필요한 페이지로 접근 시 로그인페이지로 리다이렉션 2. 로그인 후 로그인이 필요한 페이지로 접근했으나 이후 서버로의 요청시 로그인이 필요한 경우 로그인 페이지로 리다이렉션 퀴즈 등록하기 요청은 인증인가가 필요하다. 따라서 로그인 되지 않은 상태에서 버튼을 눌렀을 시 loginPage로 이동시키게 하고 싶은데 리다이렉션이 제대로 되지 않는다. Axios에러를 보면 리다이렉션이 아닌 해당 url로 get메소드를 보낸다. url로 get메소드 보내는 것도 리다이렉션처럼 동작하지 않나..? +의문.. 2023. 10. 7. Axios 사용해서 응답으로 쿠키가 받아지지 않을 때 (withCredentials) 문제 Axios를 이용해 쿠키에 토큰값을 응답으로 전달받는 POST메소드를 보냈을 때, 쿠키에 토큰값이 전달되지 않는 문제 axios를 통해 로그인 POST메소드를 요청하고 그 결과를 콘솔에 찍었다. HttpServletResponse에 쿠키를 담아서 보냈다. Postman으로 요청했을 때는 Set-Cookie가 잘 담겨온 모습. 개발자 도구로 확인했을 때, header나 다른부분을 봐도 cookie가 들어오지 않는다. 해결방법 withCredentials : true 옵션 클라이언트 - 서버 사이의 다른 오리진으로 인해 CORS를 허용하게 설정을 해준 경우라도, 기본적으로 Cross-Site에 대해서 별도의 옵션 설정없이는 Credential을 전달하진 않는다고 한다. 그래서 아래처럼 설정을 해줬다. .. 2023. 10. 7. React 4 : [React-Router-Dom, NotFound페이지, Header 표시하기] React-Router-Dom? 컴포넌트 단위로 싱글페이지에서 렌더링하는 방식인 리액트. 지정된 url에서 정해진 컴포넌트를 렌더링할 수 있게 하는 방식으로 주소별 페이징을 해준다. 설치법 > npm i react-router-dom 해당 디렉토리에서 npm사용시 위처럼 설치해주면 끝. 세팅법 import {BrowserRouter, Route, Routes} from "react-router-dom"; app.js에 적용시켜줬다. 우선 임포트를 위처럼 해준다. function App() { return ( ... 순으로 라우팅을 적용할 컴포넌트들을 추가해준다. 설정 기본적으로 path="URI 주소" element={ 해당 컴포넌트 } 의 형식이다. "/" : Origin뒤에 아무것도 없을 때 (주로 .. 2023. 9. 28. 이전 1 2 다음
