전체 글151 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. 개인프로젝트 - 하하하 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 ··· 7 8 9 10 11 12 13 ··· 31 다음
