반응형 Language/Java & JavaScript5 React / Spring, 데이터를 효율적으로 관리 및 불러오기 오늘은 효율적으로 코드 관리하는 방법을 기록해 보겠다.(전체적인 뜻과 흐름은 이전 포스팅에 나름 자세히 적어놨으니 생략) 예시로 로그인 한 회원 정보를 아래와 같이 fetch 절로 서버 데이터를 불러 왔었다.export const callGetMemberAPI = ({memberId}) => { const memberRequestURL = `http://localhost:8080/api/v1/member/${memberId}`; return async (dispatch, getState) => { const result = await fetch(memberRequestURL,{ method : 'GET', headers: { .. 2025. 2. 20. React / Spring, 서버에서 받은 jwt 토큰 정보 프론트에서 유지 시키기 오늘도 일단 해결한 내용을 복습겸 적어 보겠다. 해결하기 전 기록은 없으니 이렇게라도 적어두기. 일단 전체적인 흐름은[1. 로그인 → 2. 서버로 데이터 전송 → 3. JWT 토큰 및 기타 데이터 반환 → 4. 프론트에서 받아서 decoding(토큰 복호화) → 5. 토큰 데이터를 이용하여 프론트에서 사용하기] 순서이다. 오늘 문제가 됐던 건, 4~5 번 사이에서 발생되었다.로그인 하면 토큰이 반환되고, 메인 화면으로 이동하는데 그때 토큰은 들어 있지만, 새로고침을 하는 순간 토큰 정보가 없어지는 문제였다. const onClickLoginHandler = async () => { const isLoginSuccess = await dispatch(callLoginAPI({ form .. 2025. 2. 19. Spring Security / jwt 구현 후, React-Redux 환경, 로그인 연결 복습 Spring Security / jwt 토큰을 이용한 '로그인'을 postman으로 검증 후, 바로 프론트 단과 연결하였다. React 환경으로 작업을 하는데, 수많은(코드 복호화 안 됨, 응답 못함 등등...) 에러가 있었지만.... 당시엔 수정하느냐고 기록을 하지 못하였다. 그리하여 오늘은 복습 겸 어떤식으로 구성했는지 남겨보려고 한다.일단 서버에서 인증 성공 후 토큰을 생성을 위한 onAuthenticationSuccess 메소드에서 프론트에 넘겨줄 값을 담아준다.@Configurationpublic class CustomAuthSuccessHandler extends SavedRequestAwareAuthenticationSuccessHandler { @Override public vo.. 2025. 2. 18. (Spring) fetch 절을 이용한 데이터 보내기 (GET / POST) 오늘도 공부한 내용을 까먹지 않기 위해 기록하기. 지금은 연장 근무 신청 시, 작성 모달창이 뜨고 제출하기 누르면 서버(db)로 보내지는 것 까지 됐다.(쿼리문은 로그인과 연동해야 하기에 수정 해야함. 일단 잘 동작한다.) 최초 작성을 위한 모달창이 뜰 때 fetch로 서버에 있는 데이터를 가져와야 하고,반대로 제출 버튼을 누를 때 fetch로 서버에 보내야 한다. 추가로 서버로 보내진 데이터가 제대로 insert / update 등 transaction 됐는지에 따라 얼러트 문구를 띄우기 위해다시 js로 정보를 보내야 한다. 나중에 코드가 길어질 걸 대비해, 주석을 꼼꼼하게 달아 놓는다. 아 서론이 길었지만, 오늘 포스팅 하는 이유는 다시 서버로 보낼 때 method 방식에 대해 기록 목적?이다.결.. 2024. 12. 22. 스프링 / java → javascript 데이터 전송 방법 근태관련 캘린더를 연동하고, db와 연동하여 데이터를 노출시켰다.(fetch 절을 이용하여 백쪽의 데이터를 받아서 가공)js 쪽으로 데이터만 넘겨주면 되므로 Controller에서 @ResponseBody 어노테이션을 사용했고,Map으로 묶어서 보내줬다. 이전에는 map이 단순히 key와 value로 돼있으므로 어디든 데이터를 보내기에 가장 좋은 녀석이라고 생각했다.하지만 이것저것 찾아본 결과, js 로 데이터를 보낼 때엔 굳이 굳이 맵 형식을 안 써도 되고, map으로 보내봤자, 무시된다고 하더라 (고맙다 ai)(실제로 map으로 묶어 보내든, 그냥 값을 return 하든 데이터는 모두 잘 출력됨)나름 찾아본 거 까먹지 않으려, 깨알 주석으로 달아놨다. 이와 같이 고냥 return으로 조회한 결과.. 2024. 12. 19. 이전 1 다음 반응형
