Front-End/React8 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. 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. TIL 230814 : 리액트를 접해보기 3 (useEffect) 지난 시간에 언급한 프론트 특강은 자바 스프링 과정을 배우는 입장에서 프론트를 손쉽게 구현하기 위해 ChatGPT를 활용하는 프로세스를 맛보여줬었다. jwt인증정보 확인하는 코드를 물어봤다. useEffect..? 처음보는 개념에 그냥 복붙할 수 없고 알고 써야 잠자리가 편하기 때문에 useEffect가 뭔지 정리해본다. useEffect? 일단 이 기능을 한 줄로 말하면 특정 조건시 실행해주는 조건문 같은 그런 기능? 기본 구조는 아래와 같다. //기본 구조 useEffect(실행 함수(), [변경시 실행될 변수]) //예시 const [info, setInfo] = setState('초기값') useEffect(()=>{ console.log('useEffect에 지정된 함수가 실행됐습니다.') },.. 2023. 8. 17. 이전 1 2 다음
