분류 전체보기152 React 5 : 유저전용 페이지 발견한 문제 백에서 지정해준 인증인가가 필요한 URL은 서버로 요청을 날렸을 때 유효하다. 지금 필요한 건 로그인되어 있지 않은 상태에서 접근 불가능한 페이지를 설정해야한다. 보완해야할 점 1. 클라이언트에서 로그인이 필요한 페이지로 접근 시 로그인페이지로 리다이렉션 2. 로그인 후 로그인이 필요한 페이지로 접근했으나 이후 서버로의 요청시 로그인이 필요한 경우 로그인 페이지로 리다이렉션 퀴즈 등록하기 요청은 인증인가가 필요하다. 따라서 로그인 되지 않은 상태에서 버튼을 눌렀을 시 loginPage로 이동시키게 하고 싶은데 리다이렉션이 제대로 되지 않는다. Axios에러를 보면 리다이렉션이 아닌 해당 url로 get메소드를 보낸다. url로 get메소드 보내는 것도 리다이렉션처럼 동작하지 않나..? +의문.. 2023. 10. 7. 개인프로젝트 - 하하하 2 : 로그인 후 상태관리에 대한 고민 완료사항 회원가입기능 구현 완료 로그인 후 토큰값을 클라이언트에 쿠키로 저장 고민하는 점 - 로그인 된 상태를 전역적으로 어떻게 관리하는 것이 효율적일지 - 헤더바에 로그인 상태 표시하는 동작 구현 - 쿠키에 담겨있으니 이후 인증인가가 필요한 요청시에는 withCredential이 알아서 실려가는게 맞을지 - 'OO님 안녕하세요' 같은 문구를 위해선 로그인 시에 단순히 토큰만 가져오는 게 아니라 유저정보를 일부 가져와야하는 것이 맞을지. 기존 로직에 대한 변경이 필요할지 2023. 10. 7. Axios 사용해서 응답으로 쿠키가 받아지지 않을 때 (withCredentials) 문제 Axios를 이용해 쿠키에 토큰값을 응답으로 전달받는 POST메소드를 보냈을 때, 쿠키에 토큰값이 전달되지 않는 문제 axios를 통해 로그인 POST메소드를 요청하고 그 결과를 콘솔에 찍었다. HttpServletResponse에 쿠키를 담아서 보냈다. Postman으로 요청했을 때는 Set-Cookie가 잘 담겨온 모습. 개발자 도구로 확인했을 때, header나 다른부분을 봐도 cookie가 들어오지 않는다. 해결방법 withCredentials : true 옵션 클라이언트 - 서버 사이의 다른 오리진으로 인해 CORS를 허용하게 설정을 해준 경우라도, 기본적으로 Cross-Site에 대해서 별도의 옵션 설정없이는 Credential을 전달하진 않는다고 한다. 그래서 아래처럼 설정을 해줬다. .. 2023. 10. 7. 개인프로젝트 - 하하하 1 : 단순 CRUD부터 애자일하게 변경한 것 프론트엔드를 함께 구현하려고 하니 기본적인 CRUD에서부터 시간이 오래 걸린다. 그래서 완전 처음의 init브랜치에서 User정보와 로그인, 인증/인가 까지 구현하는 방식에서 다 덜어내고 기본 Quiz Entity의 CRUD만 구성하기로 했다. 현재 상황 라우팅, No CSS onClick동작하게만 구현 기본 CRUD 구현 느낀 점 - 프론트도 처음부터 차근히 하려니 더디지만 그동안 궁금했던 것들을 정면승부하는 느낌이라 좋다. 이제 유저정보와 이를 기반으로 인증/인가 구현 및 토큰관리 권한 설정등을 진행하려한다. 클라이언트 단에서 로그인 정보를 매 화면마다 어떻게 표현해야할지 아직 감이 오질 않는다. - 유저정보를 배제하고 먼저 기초적인 도메인부터 시작하길 잘한 듯 하다. - 테스트코드를 어떻.. 2023. 10. 4. 개인프로젝트 - 하하하 0 : 앞으로의 계획 개인프로젝트에 대한 필요성 배운 것을 다시 복습해볼 필요. : 아직까지는 배웠던 것을 다시해보려할 때 더듬더듬하게 된다. 반복숙달하는 과정을 거치며 기존에는 보이지 않았던 개선점들을 찾아보고자 한다. 실제 서비스를 운영해보며 마주하게될 다양한 트러블과 피드백의 중요성. : 이게 가장 크다. 그동안 파트를 나눠서 개발했던 팀프로젝트로 내가 직접 구현하지 못했던 기능도 많다. 그리고 실제 배포까지 해보고 가능하다면 실제 이용자들로부터 피드백 혹은 서버운영하게되며 겪게 될 케이스들을 마주하고 싶다. 퀴즈형 드립 게시판을 하려는 이유? 1. 정말로 사용자들을 끌어모으고 싶어서 가장 기본적인 게시판에 퀴즈를 맞추는 서비스를 추가해보는 것을 목표로 했다. 2. 플랫폼 사이트에서 도전해볼 법한 기본적인 기능들이 충분.. 2023. 10. 4. 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 ··· 6 7 8 9 10 11 12 ··· 26 다음
