분류 전체보기151 React 8 : PUT 메소드 이후 게시글 이동시 수정전 게시글이 불러와진다. (비동기 처리 주의) 현재 id번호에 맞게 한 개 게시글을 GET메소드를 통해 가져오고 있다. 현재 quiz객체 안에 replies 배열이 있는데, replies배열을 포함한 quiz객체와 replies객체를 따로 다루고 있어 개선이 필요해보인다. 수정 페이지로 넘어갈때 기존 quiz객체 넘겨주기 수정버튼을 눌렀을 때, navigate가 실행된다. 이때 state로 quiz를 넘겨준다. 넘겨받은 state를 통해 기존의 상태에서 수정할 수 있게 초기값을 세팅했다. 이제 이렇게 수정후에 수정하기 버튼을 누르면 PUT메소드가 동작하고 navigate를 통해 다시 기존 게시글로 이동하도록 되어있다. 문제점 : 수정 전 게시글이 가져와진다. 서버에는 분명히 수정이 완료되었는데, 퀴즈페이지를 이동하며 처음 가져온 퀴즈객체는 수정전이다.. 2023. 11. 2. 연관관계를 설정하기 위해 필요한 id값을 알고 있다면 객체를 굳이 select할 필요가 있나? (쿼리 줄이기, getReferenceById) 고민기존 구현 사항Reply객체를 생성하기 위해 필요한 외래키는 User, Quiz이다.User : @AuthenticationPrincipal 을 통해 이미 가져온 User객체를 바로 활용 가능하다.Quiz : PathVariable을 통해 Id값은 이미 알고 있는 상황. 고민점위 코드처럼 퀴즈 객체를 불러와서 Reply에 넣어줘야 연관관계가 적용이 될텐데, 이후 Quiz객체는 사용되는 곳이 없다.실제로 위 코드대로 Reply를 Create하는 api를 실행해보면 실행된 쿼리는 아래와 같다. 이는 이미 알고있는 id값을 이용해 굳이 퀴즈 객체를 가져와 id 값만 쓰는 느낌이다.Quiz객체가 존재하는 지 체크를 해주는 의미가 있다한들, Select 쿼리가 낭비되는 느낌이다. 개선 점getOne메소.. 2023. 10. 24. 개인프로젝트 - 하하하 3 : 기본적인 보안. 쿠키, 로컬스토리지. + 리액트 렌더링 방식 1. 로그인 상태 유지 완료사항 유저정보를 로컬스토리지에 저장하여 헤더에 활용하는 등 이후에도 활용 예상. jwt를 쿠키로 저장해둠. (Access / Refresh) 고민하는 점 jwt vs Session 자체도 현재 의견이 많이 갈리는 듯하다. jwt를 쿠키 혹은 로컬스토리지에 저장하는 지도 의견이 많이 갈린다. 각각의 장단점이 다 있어보인다. jwt를 쿠키에 저장하고 RefreshToken을 httpOnly로 xss공격으로부터 기본적인 방어가 되어보이긴 하지만 이 역시도 완벽치는 않다. 우선은 jwt를 쿠키에 저장하고 RefreshToken을 rotation하는 방식으로 우선 개선해보려 한다. 2. 리액트 렌더링 App.js에 로컬스토리지로 부터 recoil atom에 값을 추가하는 코드를 useE.. 2023. 10. 23. 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. 이전 1 ··· 5 6 7 8 9 10 11 ··· 26 다음
