프로젝트/✍️ [전공자들] (16) 썸네일형 리스트형 [전공자들 16] 1차 완성, 그리고 리팩토링과 신규기능개발 계획 지난 3월, 실 개발기간 약 2개월을 거쳐 프로젝트를 1차 마무리했다. GitHub - binunu/majors_backend: 1인프로젝트 '전공자들' 백엔드(spring-boot)1인프로젝트 '전공자들' 백엔드(spring-boot). Contribute to binunu/majors_backend development by creating an account on GitHub.github.com 하지만, 나에겐 세가지 숙제가 남아있다. 1. 배포 및 업데이트 자동화- Docker 잘 만든 프로젝트를 주변에 자랑하기 위해 AWS를 사용해 배포할 것이다. 또, 새로운 기능을 개발하고, 업데이트를 진행하기 위해 CI/CD를 구현해 보기로 했다. 그 과정에서 도커를 사용해 볼 수 있으면 꼭 사용해 .. [전공자들 15] 날짜데이터를 어떻게 관리할 것인가 프로젝트 마무리만 남겨두고, 여러 사정으로 거의 세달만에 진행하게 되었다. 마무리단계에 접어들면서 남은 부분 중 하나는 바로 날짜와 관련된 것이었는데 회원가입일, 글/댓글 작성일 등의 날짜데이터를 어떻게 저장할 지가 고민이었다. 먼저, 화면상으로 나타내고 싶었던 날짜 형식은 이런 yyyy-MM-dd HH:mm 형식이었다. 내가 선택할 수 있는 방법은 두가지였는데 1. 게시글을 생성할 때 백엔드에서 생성일을 추가하는 방법(문자열 저장) 2. 데이터베이스에 저장될 때 자동으로 생성일을 주입하는 방법(날짜형식 저장) 첫 번째 방법은 백엔드 코드상으로 처리하는 방법인데 java.time.LocalDateTime 클래스를 사용해서 해당 일자를 가져온 후 java.time.format.DateTimeFormatte.. [전공자들 14] 리스트 가져오기(with pagination) 게시글 리스트를 가져오기 위해서 페이지네이션 기능을 구현해야 했다. 다양한 라이브러리가 있지만, 디자인이 마음에 안들기도 하고 공부도 할 겸 직접 만들었다. 버튼 구상 먼저 페이지네이션의 기본 버튼과 기능을 구상했다. - 페이지네이션의 범위는 기본 8페이지씩, 한 페이지당 게시글 10개씩 출력. - 각 범위별 시작 페이지와 끝 페이지(시작페이지+7)를 지정 (startPage :1, endPage: 8), (startPage:9, endPage:16) - 게시글 전체가 몇 페이지인지 받아와서 만약 끝페이지로 지정한 번호보다 전체페이지가 작으면 끝페이지를 전체페이지로 지정. (예를 들어, 총 19페이지가 나온다면, 가장 마지막 페이지네이션 범위는 17~19 가 될 것임) 1. 숫자버튼 : 누른 버튼의 번호.. [전공자들 13] 좋아요/싫어요 구현하기 (mongodb/react/spring) 이전에 만들었던 스크랩, 댓글공감 기능은 토글형식으로 한 버튼을 끄고 켜고 하는 느낌이었다면, 좋아요/싫어요는 두 버튼이 서로 연관되어 있으니까 기능을 만들기 전에 생각해 볼 점들이 있었다. 생각해야할 것들 🤔 좋아요/싫어요를 어떤 형태로 저장할까? 일단 게시글의 db구조는 다음과 같다. { _id: ObjectId("657d07e7073cbe0ef10edb90"), title: '제목', content: '내용', writer: { 작성자정보객체 }, goods: [], bads: [], ⋮ } 방법 1 : 게시글의 좋아요 목록을 문자열 리스트로 저장하는 방법.(유저 이메일 리스트) 현재 유저의 이메일을 받아와서 현재 유저가 목록에 있으면 지우고, 없으면 추가하는 방식(완전제거) 장점 : 구현이 단순.. [전공자들 12] 댓글/답글 기능 만들기 (spring/mongodb 내장객체) 일단, 화면설계를 조금 수정했다. 원래 @태그를 사용해보고 싶었는데, NoSql로 어떻게 db에 넣어야 할 지, 그리고 @이름을 어떻게 인식해서 댓글/답글로 구분해야할 지 고민하다가 결국 없애버렸다. 그래서 그냥 연한 회색처리로 댓글/답글을 구분하기로 했음. article구조 //Article @Getter @Setter @ToString @NoArgsConstructor @Document(collection = "article") public class Article { @Id private String id; private String title; private String content; private MemberProfileDto writer; private String boardType; pri.. [전공자들 11] 로그인 상태관리(useContext) 아이디와 비밀번호를 받아 서버에서 사용자 검증을 한 후 토큰을 발급받는 기능은 완성을 했다. 이제 프론트에서 어디에 저장할 지, 어떻게 로그인 상태를 관리할 지 고민을 해야 했다. 발급받은 토큰을 프론트에 저장하는 방법으로는 로컬 스토리지와 쿠키 중에서 고민을 하다가 로컬 스토리지에 저장을 했다. 하지만 생각을 해보면 쿠키는 데이터가 영구저장되지 않기 때문에 만료일을 설정하거나, 설정하지 않는다면 세션처럼 브라우저가 종료되면 데이터가 지워진다. 반면 로컬스토리지는 직접 지우지 않는 한 영구적으로 저장되므로, 로그아웃 버튼을 누르지 않고 그냥 브라우저를 종료시킨다면 계속해서 로그인 상태가 남아있지 않을까 하는 생각이 들었다. 그래서 먼저 프로젝트를 완성을 시킨 후, 리팩토링하는 시점에서 토큰을 쿠키에 저장.. [전공자들 10] JWT 이해하기(로그인, 토큰발급, 요청보내기) 목차 1. JWT 기본구조 2. 로그인요청 후 토큰발급까지의 흐름 3. 발급된 토큰으로 요청을 전송하고 처리하는 흐름 1. JWT 기본구조 xxxxxxxxx.xxxxxxxxxxx.xxxxxxxxxx JWT는 '.'으로 나뉘어진 세 개의 부분으로 구성된다 왼쪽부터 각각 헤더,페이로드, 서명이라고 함 - 헤더 : 토큰의 종류("JWT"), 암호화 방식(어떤 알고리즘을 사용해 서명을 암호화했는지) 등을 담음 - 페이로드 : 사용자 정보(계정, 역할 등) 및 토큰 설정 정보(유효기간 등) - 서명 : 헤더와 페이로드를 조합한 내용을 담음 JWT요약정리 헤더와 페이로드는 단순 인코딩만 되어있기 때문에 탈취하여 내용을 열어보고 조작하기가 쉬움 그래서 서버만 가지고 있는 시크릿 키를 사용해 헤더와 페이로드의 내용을 .. [전공자들 9] 회원가입 기능구현 (이메일 인증, 중복체크) 회원가입 구현 시 백엔드 처리 순서 1. 이메일 중복확인 2. 이메일 인증 3. 닉네임 중복확인 4. 데이터베이스에 저장 1. 이메일 중복확인 + 닉네임 중복확인 - 프론트에서 요청 보내기 axiosURL.post('/member/email/exists', {email:email}) .then(res => { if (res.data) { setOnAuthEmail(true) setPassEmail(true) sendEmail() } else { setPassEmail(false) setOnAuthEmail(false) } }).catch(error => { console.log(error) }) 중복확인은 단순 조회지만 이메일은 개인정보이기 때문에 그냥 post처리. RequestBody에 이메일 실어서.. 이전 1 2 다음
