히스토리

프로젝트 기간 동안 한 것 정리하는 글

 

Back-end	로그인인증	회원CRUD	추천 북마크 시스템	OPENAPI 요청
Finished	6/14~6/18	6/9~6/11	6/9~6/24	6/10~6/11

Front-end	로그인	회원가입	마이페이지	(관리자) 회원목록	정보 리스트	정보 세부	메인 (북마크기반 추천)
Finished	6/14~6/16	6/14~6/17	6/22	6/22	6/14~6/16	6/14~6/16	6/24

 

6월 8일

GitHub 사용법 익히기: 깃허브와 이클립스 연동 및 pull / push

OpenApi 란 무엇인가... 이해하기

설계 북마크 구조 설계, Member와 Bookmark 필요한 테이블 entity 명세

 

6월 9일

기획 기획서 작성, 추가 기능 생각 - 글 작성 시 태그 기능, 아이디 찾기, 여행지 추천

생각 로그인 토큰? 세션? 뭘 사용하지?

설계 OPENAPI에서 가져오는 정보는 그대로 front-end로 보내고 거기서 처리하기로 함

개발

Member Entity, Service, Controller 구현 (로그인 제외)

Bookmark Entity, Service, Controller 구현 - 엔티티 구조 조금 변경함

 

6월 10일

생각

- DB에서 객체를 가져오는 것과 (Select * ~) 일부 필드만 가져오는 것(Select A, B ~) 당연히 후자가 나을 것 같은데, 객체 크기가 작다면 어느 정도의 트래픽부터 디비 서버가 부담스러운 걸까?

- 프런트엔드 없이 테스트하려니까 백엔드 Controller로 직접 요청을 보내야 함. Method가 public이라서 그런가 모두 접근 가능한데 일부 method는 관리자만 사용해야 한다. 관리자임을 확인하는 부분을 컨트롤러에 구현해야 할까? 아니면 다른 방법이 있을까

- RESTController에서 값 반환할 때, 리스트나 맵 같은 객체 사용해서 데이터만 넘겨줬다. 근데 이런 방법은 지양해야 한다고 함. Model이나  ModelMap에서 view를 명시하지 않고 (왜냐하면 화면 전환을 백엔드에서 해줄 필요 없이 프런트에서 처리하니까) 반환하면 되는 건가?

개발

오픈 API 요청, 처리하는 클래스 구현. 공통부분 method 추출까지 했는데 제대로 한 건지 모르겠다.

문제

- API 타입별 요청은 값 제대로 받아오는데, 지역별 요청은 가져오는 item이 없다... 요청이 잘못된 것 같은데 

- 아이디 굳이 만들어야 하나 싶어서 이메일 로그인하게 했는데, 아이디 찾기나 중복 아이디 체크 구현할 때 get으로 보냈더니 이메일 구조 때문에 (특수문자...) url 읽다가 에러 생김... 아이디 필드 추가하는 것보단 이메일 같은 데이터를 post로 보내게 해야겠지?

- NativeSQL 사용법 제대로 숙지하고 쓰자...

 

6월 11일

해결

- 지역 데이터 받아오는 데 문제 없음. 변수 설정 잘못한 단순한 실수!

- 이메일 POST로 받아오니까 웹 데이터 전송에는 전혀 문제 없다. 다만 JPA 구조 효율성 생각해봐야...

- NativeSQL 대신 Querydsl 사용하기로 했다. JPQL이나 NativeSQL은 SQL문을 직접 작성하는 쪽인데 Mybatis에서 했던 방식이기도 하고 컴파일 시점에서 sql 오류 확인하기가 어렵다는 단점이 있다. 둘 다 코드지향적이고 빌더느낌이지만 Criteria보다 QueryDSL이 직관적이라고 해서 후자를 사용함. 물론 가장 큰 이유는 새로운 걸 해보고 싶어서!

이슈

- Vue에서 프런트엔드 처리해야하는데 UI적용부터 말썽이다. Vue의 철학 이해하고 라우터 설계 해보기

- 관리자 기능 추가해야 함

- 로그인 토큰 구현 관련해서...

 

6월 14일

기획?

- 구체적이고 자잘한 기능들 정리해야 겠다.

개발

- 로그인, 회원 가입: 프런트엔드 기초 개발

- 여행지 리스트, 여행지 자세한 목록 : 프런트엔드 기초 개발

- 로그인 토큰: 백엔드 구현

이슈

- 프런트에서 Json 객체를 Vue.js로 어떻게 읽는 지 모르겠다...

- Vue.js에서 HTML 페이지 Body 태그 안에 들어가는 JS를 인식하게 만드려면 어떻게 하지?

 

6월 16일

해결

- 여행지 json 객체 읽는 방법 알아냈다 ㅜㅜ 직관적이고 간단한건데 기초가 부족했다. API에서 문자열 형태로 보내준 데이터를 파싱해서 사용하면 되는 거였음

- JWT도 이해했다. 서버의 토큰 발급 > 클라이언트: 쿠키에 저장 > 클라이언트: 쿠키에서 꺼내서 헤더에 넣어준 후 요청 전송

  코드만 제대로 봐도 알 수 있는건데 왜 그저께 이해를 못 했을까

남은 일

- 새 기능은 마이페이지 구현(&북마크), 관리자의 회원 관리가 남았다.

- 필수적인데 어려운 것은 클라이언트 토큰 필터링(페이지 접근 제어), 서버 토큰 필터링(데이터 접근 권한 확인)

- 필수적인 것은 회원 가입 입력값 검증, 여행지 목록 리스트화, 제공하는 정보 조절하기

- 추가적인 것은 초기화면에 추천 여행지 띄우는 것(북마크 기반): 이건 다음 주에 해도 되겠다.

 

6월 17일

피곤해서 그냥 자려고했는데 써야겠다.

이슈

- Java에서 생성한 JWT를 Vue로 보내서 Cookie에 저장, Vue에서 요청 헤더에 JWT를 넣고 Java로 보내줬다. 근데 검증하면 유효하지 않은 토큰이라고 뜬다. 왜? 인코딩문제인가? 글자만보면 identical한데 다른 문제가 있는 듯. 망했다

- 오류 체크와 프론트엔드에 보내줄 메시지 정제하는 게 필요하다. 상용화한다고 생각하고 자잘한 부분 고치자.

개발

- 필터와 인터셉터의 개념을 알았다. 로그인 인증은 인터셉터가 더 적합한 것 같아 그걸 사용하기로 했다.

- 유효성 검증 스크립트 다 짰다. 토큰인증보다 훨씬 낫다...아...

- 공지사항 게시판 백엔드 구현했다. 일반 게시판보다 기능이 없어서 사실 별 거 없다. 인증만 해결하면...

- 검색 게시판도 끝냈다. 그냥 openapi 데이터 불러오는 게 끝이라...

 

6월 18일

해결

- JWT 토큰을 헤더에 넣어야 하는데, 코드를 잘못 써서 그냥 요청해버렸다. 서버에서는 요청의 헤더가 아닌 쿠키에 존재하는 값을 사용해서 그런 것이었다. 요청 보낼때마다 쿠키에 저장된 값을 가져와서 헤더에 추가해주기로 했다. 따로 스크립트를 빼는 게 객체지향적이니까 나중에 리팩토링하기!

 

6월 22일

개발

- 마이페이지: 회원 정보 조회, 수정 및 삭제

- 관리자: 회원 정보 조회 및 삭제

- 접근 제어 구현... 근데 모래성 수준이라 의미 없음

이슈

- 북마크 문제: JPA 테이블 외래키 관련... 쇼핑몰 예제 보고 해결하기

 

6월 24일

개발

- 북마크 문제 해결! Entity 클래스 외래키 설정 수정하고, Custom Repository 따로 만들어서 쿼리dsl을 손봤다. 만들어진 파일(클래스)이 많아서 복잡해보이지만 구조화되기는 했다. 프론트엔드까지 마무리했다!

- 검색 페이지 디자인 적용

- 메인 페이지 기능 구현 완료: 북마크 수가 많은 순서대로 (일단 상위 3개만) 메인 페이지에 보여주기로 했다. queryDSL에서 count()에 대한 orderby 구현한다고 애먹었다

남은 일

- 회원 가입 디자인 적용

- 메인 페이지 디자인 적용

- 테스트 해야할 것 같은데 기획을 대충 했더니...

- 최종 보고서

- 이미지 첨부 가능한 커뮤니티 게시판 내가 만들어야 하나?

 

6월 29일

한 일

- 디자인 모두 적용

- PR 자료 완성

수정 필요

- 이미지 첨부 가능한 커뮤니티 게시판

- 관리자의 유저리스트 확인: 사용자VO 생성하여 처리하도록 수정하기. cuz 외래키 Json 파싱할 때 에러남