dev.JELEE

※ 개인 프로젝트 문서 정리 중 모르거나 명확하게 알지 못하는 용어들이 있어서 정리해본다.1. 계층 구조의 구분: 3-Tier과 Backend Layering계층 구조(Tier Architecture)와 계층 분리(Layering)은 서로 다른 범주다.구분용어대상 목적물리적 계층3-Tier (3계층 구조)서로 다른 물리적/논리적 서버에 위치하는 주요 구성 요소시스템 전체의 확장성, 분산, 네트워크 분리논리적 계층Backend Layering단일 서버(Spring Boot) 내에서 논리적 역할에 따라 코드를 분류유지보수, 관심사 분리, 테스트 용이성 예시:3-Tier: React(프레젠테이션/클라이언트 Tier) - Spring Boot (애플리케이션/비즈니스 Tier) - MySQL (데이터 Tier)로..

[ 작업한 내용 ]# Frontend1. 리뷰 내역 페이지에서 리뷰 전체 목록 조회 API 연결// 리뷰 전체 apiconst fetchBookReview = async (page, size) => { setLoading(true); setError(null); try { const response = await axios.get( `http://localhost:8080/api/v1/user/me/reviews`, { params: { page: page, size: size, }, withCredentials: true, headers: { Accept: "applicatio..

[ 작업한 내용 ]# Frontend1. 리뷰작성 유무 체크- 리뷰작성이 되었다면 수정하기 버튼이 화면에 출력이 되고, 리뷰작성이 안 되었다면 작성하기 버튼이 화면에 출력이 된다. 리뷰작성: {item.reviewWritten != true ? ( 미작성 | handleClick(item.id, "reviewCreate")} >작성하기 > ) : ( 작성 | handleClick(item.id, "reviewUpdate")} >수정하기 > ) }2. 리..

[ 작업한 내용 ]# Frontend1. 대출 연장 api 연결- 대출연장은 1회만 가능. 대출연장 유무를 체크하여 0회 또는 1회로 표시.대출연장: {item.extended != true ? "0" : "1"}회 - 도서 대출 연장 버튼 클릭 시 해당 id를 대출 연장 api 함수로 전달하여 실행. // 도서 대출 연장 apiconst updateExtended = async (loanId) => { try { const response = await axios.patch( `http://localhost:8080/api/v1/user/me/loans/${loanId}/extend`, {}, { withCredentials: true, he..

[ 작업한 내용 ]# Frontend1. 도서 대출 연장 유무 및 버튼- 대출 연장 버튼 UI 틀만 구현대출연장: 0회연장하기# Backend1. 사용자 도서 대출 연장 api 구현- controller, service, dto, messages.properteis, LoanErrorCode// controller@PatchMapping("/loans/{loanId}/extend")public ResponseEntity extendLoan( @PathVariable("loanId") Long loanId, @AuthenticationPrincipal User user) { // 서비스로직 UserLoanExtendedResDTO responseDTO = userLoanService.exte..

[ 작업한 내용 ]# Frontend1. 도서 대출 전체 조회 기능 구현- 마이페이지에서 대출 내역 탭 메뉴를 클릭하면 해당 페이지로 이동하고 도서 대출 전체 목록이 화면에 출력된다. 이때 출력되는 데이터의 개수는 1페이지 당 5개의 데이터가 출력 된다.- 도서 전체 조회 API를 호출하여 응답 결과를 각 위치에 맞게 출력한다.const fetchBookLoans = async (page, size) => { setLoading(true); setError(null); try { const response = await axios.get( "http://localhost:8080/api/v1/user/me/loans", { params: { pag..

[ 작업한 내용 ]# Frontend1. 비밀번호 수정 기능 구현- input 태그 속성에서 title, content, placeholder에 각각 들어갈 메시지 구분const modalData = { dialogEmail: { title: "이메일 수정", content: "새로운 이메일 주소를 입력해주세요.", placeholder: "새 이메일 입력", }, dialogPw: { title: "비밀번호 수정", content: "새로운 비밀번호를 입력해주세요.", placeholderOri: "새 비밀번호 입력", placeholderRe: "새 비밀번호 확인 입력", }} - 비밀 번호 수정 버튼 클릭시 api 호출하고 patch로 요청하고 결과 응답..

[ 작업한 내용 ]# Frontend1. 이메일 수정 기능 구현- api 사용하여 입력한 이메일을 DB로 전송 후 응답 결과 받기.const updateEmail = async () => { try { const response = await axios.patch( "http://localhost:8080/api/v1/user/me/email", { email: value }, { withCredentials: true }, ); console.log(response.data.data) setData(response.data.data); } catch (error) { console.log("Error: ", error); setError(e..

[ 작업한 내용 ]# Frontend1. 마이페이지 생성- MyPage.jsx 생성- App.jsx에 MyPage Route 설정- Header.jsx에 마이페이지 메뉴 클릭시 /mypage로 이동하도록 설정2. 탭 메뉴 구성- 마이페이지는 개인정보, 대출내역, 리뷰내역 메뉴를 3개로 구성하였고 탭 메뉴 형식으로 구분했다.- 탭 메뉴로 구성한 이유는 대출내역과 리뷰내역 페이지를 별도로 한페이지로 만들지 않기 위함이다.3. 개인정보 데이터 화면에 출력- 로그인한 사용자의 기본 정보인 username, email만 화면에 출력하고 password는 고정으로 **** 별 4개로 표시했다.- 이메일과 비밀번호는 우측에 수정 버튼을 두어 이메일 주소와 비밀번호를 변경할 수 있도록 개발할 예정이다.- 하단에는 회원..

[ 작업한 내용 ]# Frontend1. 로그인 후 Header가 사라지는 버그 수정- loading이 true면 null 값을 반환하도록 작성되어 있어서 Header가 사라졌었다. 그래서 삭제해주었다. // if (loading) { // return null // } 2. 도서 상세페이지에서 리뷰 목록 조회- 도서 상세페이지로 이동하면 해당 도서의 리뷰 전체 목록을 보여주는 기능 추가-> 페이징 기능 추가 필요3. 로그인 후 새로고침 시 사용자 정보가 사라지는 버그 수정- 로그인 후 cookie를 확인하면 JWT는 그대로 있는데 로그인한 정보를 불러오지 못하였다.- 원인은 호출한 api에서 응답받은 데이터를 set을 사용하여 해당 데이터를 저장해주어야하는데 그러하지 않았다.