Semogong Demo 개발 일지

By 박승일
Project SpringBoot
Semogong Demo 개발 일지

세모공(세상의 모든 공부) - TIL(Today I Learned) 공유 서비스



DEMO Version (Before Release)

<220325>

  • 공부중 click
    1. 공부중 처음 클릭 (사용자의 현재상태가 완료인경우)
      • 시간 list에 클릭시간 저장 (post의 첫번째 시간)
      • 해당 시간을 ex) “공부 click 시간” ~ 로 표현 및 공부중 출력
      • 새로운 포스팅 시작.
    2. 휴식 후 공부중 클릭 (사용자의 현재상태가 휴식중인경우)
      • 시간 list에 클릭시간 저장 (post의 세번째 시간)
      • 해당 시간을 ex) [13:00 ~ 15:00] [“공부 click 시간” ~] 로 표현 및 공부중 출력
      • 작성중인 포스팅 표출
    3. 공부중 공부 클릭 (사용자의 현재상태가 완료인경우)
      • 이미 공부중이십니다! 경고
  • 휴식중 click
    1. 공부 도중 휴식중 클릭 (사용자의 현재상태가 공부중인 경우)
      • 시간 list에 클릭시간 저장 (post의 두번째 시간)
      • 해당 시간을 ex) [13:00 ~ “휴식 click 시간”] 로 표현 및 휴식중 출력
    2. 휴식 중 or 완료 상태에서 클릭 (사용자의 현재상태가 휴식 중, 완료 인 경우)
      • 아직 공부를 시작하지 않았습니다! 경고
  • 공부완료 click
    1. 공부 도중 완료 클릭 (사용자의 현재상태가 공부중 or 휴식중인경우)
      • 시간 list에 클릭시간 저장 (post의 마지막 시간)
      • 해당 시간을 ex) [13:00 ~ “완료 click 시간”] 로 표현 및 완료 출력
    2. 휴식 중 완료 클릭 (사용자의 현재상태가 휴식중인경우)
      • 시간 list에 클릭시간 저장 X
      • 휴식 클릭 시간 그대로 공부 완료로 변경
    3. 완료인 상태에서 클릭
      • 아직 공부를 시작하지 않았습니다! 경고
  • 수정필요
    1. Date가 아닌 Time으로
    2. 공부완료 상태에서 다시 공부중으로 변경하고 싶다면
      • 이때 공부중 클릭하고 게시글 저장을 안하면 어떻게 할지도 처리해야됨.
      • 그날 기록된 공부 게시글이 있는 상태에서 공부완료 -> 공부중으로 변경할 때 처리 필요. (그날 공부완료가 있으면 그냥 이어서 공부중으로 하든지…)
    3. 공부중 클릭했을 때의 시간으로 time 저장

<220326>

  • 로그인 기능 구현 - Spring Security -> 구글링을 통해 노베이스로 한 거라 나중에 학습 후 수정 필요
    1. 로그인
      • Member Entity에 login에 필요한 loginId, password, role 추가
      • login 시 authoriazation을 확인할 객체인 MyUserDetail 추가
    2. 회원가입
      • 글 작성 기능 수정
        • origin -> 원래는 로그인된 아이디로 글 작성이 아니라 회원을 선택하는 방향으로 진행했었음
        • now -> 지금은 로그인 기능을 통해 현재 로그인된 회원으로 글 작성 가능

<220327>

  1. 정보수정 기능 개발
    • 정보수정을 통해 회원 정보를 수정
    • Entity 변경 감지를 통해 수정
  2. 글 작성 기능 개발
    • 현재 작성 페이지를 마크다운으로 작성할 수 있도록 변경
    • 작성된 글을 확인할 수 있도록 설정 - 수정 필요
    • 글을 수정할 수 있도록 설정 필요
    • 글에 멤버정보도 가져올 수 있도록 (API에서 배운것대로 fetch join 사용해 보기)

<220328>

  1. 프론트 개발
    • home.html 위주로 개선 (post들은 노션과 비슷하게, profile은 우리가 계획한대로)
      • 프로필 개선
      • 작성된 Post들을 나열해줄 때 최대한 노션과 비슷하게 보이도록
  2. 시간 저장 개선
    • CreateTime 도 따로 String으로 저장해서 보여줄 때 원하는 스타일로 보여줄 수 있도록 설정
    • 공부시간은 보이기 깔끔하도록 “HH:mm” 형식으로 String List로 저장 (List -> List) - 수정 필요 부분
    • 기능 추가 필요 (기획했던 기능들)
    • 프론트적인 부분 개선 필요

<220329>

  1. Time Stamp 기능 개선
    • [19:00 ~ 21:00] [22:00 ~ ] 이런식으로 구간으로 나누어서 표현할 수 있도록 개선 % 추후 개발 계획
    • 게시글 페이징 16개씩.. → 페이징 기능 도입
    • 게시글 모달로 표현
    • 게시글 접근할 때 바로 edit할 수 있도록.
    • 게시글마다 댓글 달 수 있도록.
    • 팔로우 기능 추가
    • 오른쪽 profile 바 하단 기능들 추가
      1. 현재 작성 중인 글 띄우기
      2. 모든 멤버 상태 띄우기 → 가입 멤버가 많아질 시 팔로우 팔로잉 기능 도입

<220401>

  1. init Data 설정 추가
    • Demo 버전에선 임시로 4명의 회원이 생성된 상태로 시작하게 끔 설정 (Test 버전에서만 사용. Release 시 삭제 예정)
  2. 게시글 기능 추가
    • 게시글 모달로 표현
    • 게시글 페이징 (limit 12) - 수정 필요
      1. 게시글 접근할 때 바로 edit할 수 있도록. (해당 사용자라면,)
      2. 게시글마다 댓글 달 수 있도록.
      3. post에서 member state를 매번 받아오는 것이 아닌, post에 member state가 저장되게 끔. -> postForm으로 가능할 듯
        • 작성완료 순간에 Member의 모든 정보를 그냥 Post에다가 넣어버리기
        • Or 상태가 바뀔때마다 Post에다가 저장하기
      4. TimeStamp 수정 가능하도록
      1. 모달로 뜬 화면 자체에서 스크롤 가능하도록
      2. 모달 화면 좀 이쁘게. (추후 노션마냥 바로 그 조회 페이지에서 수정가능하도록 설정)
      3. 메인 화면에서의 Post 들이 나오는게 좀 이상함 수정 필요

<220404>

  1. 댓글 기능
    • 게시물 마다 로그인된 계정으로 댓글을 달 수 있도록 설정
    • Comment Entity 추가. → Post와 ManyToOne 관계, Post가 삭제될 때 같이 삭제될 수 있도록 설정

<220409>

  1. 모달 Front 일부 수정
    • scroll 추가, text 정리, 댓글 입력 창 수정
    • 수정 필요 : 댓글 기록 등 전체적인 front는 계속 수정해야 됨
  2. post state 변경
    • 기존 : 작성 완료된 post가 member를 참조하고 있기에 지난 글이여도 state가 현재 member state로 떠서 end로 떠야 되는게 studying or breaking 으로 떴었음. 즉, member의 연관관계를 계속 가지고 있었음. → 끊어야됨
    • 수정 : 아예 post Entity에 state를 저장할 수 있도록 변경.
      • post가 생성 되면 무조건 post state는 end
      • member state에 따라 변경되는 post state는 member의 가장 최근 post만을 불러와서 실행.
      • 즉, 이전 post들은 end로 저장된 상태로 끝나는 것. → PostDto를 통해 End가 눌려지는 시점에 바로 post state에 저장. 나머지는 그냥 member의 값을 가져옴.
        • 수정 필요
      1. Post Edit 기능. (TimeStamp도 수정할 수 있도록), Post 이미지 삽입, Post delete.
      2. Member 이미지 삽입.
      3. Studying 누르고 post하지 않고 뒤로 나가면 생기는 오류 잡기 -> 그냥 Studying 누르는 순간 빈 Post를 생성해버리고 이를 수정하는 느낌으로 가는게 좋을 듯
      4. Modal 재로딩 부분
      5. Notion 마냥 modal 자체에서 edit, 등 할 수 있도록!

<220410>

  1. Post Edit 기능 구현
    • PostEditDto를 통해 view로 보내고 받음.
    • 보낼 때 : new PostEditDto(post, member) 생성자 를 통해 모든 정보를 보일 수 있도록 설정
      • 즉, PostDto 안에 post 와 member 정보를 모두 담아서 보내는 것

    • 받을 때 : PostEditDto를 통해 받음

  • 수정 필요
    1. post/new 를 post/edit으로 -> 3번과 관련된 수정 o
    2. Post, Member 이미지 삽입. 객체 삭제 기능
    3. Studying 누르고 post하지 않고 뒤로 나가면 생기는 오류 잡기 -> 그냥 Studying 누르는 순간 빈 Post를 생성해버리고 이를 수정하는 느낌으로 가는게 좋을 듯 o
    4. Modal 재로딩 부분
    5. Notion 마냥 modal 자체에서 edit, 등 할 수 있도록!

<220411> - <220413>

  1. Member Edit
    • 회원가입 시 작성하지 않는 ‘이미지’, ‘링크’ 등을 edit 화면에서 추가할 수 있도록 설정
      • 링크
        • 링크를 화면내에서 + 버튼을 눌르면 추가하고 x 버튼을 누르면 삭제할 수 있도록 설정
        • 여기서 중요한 점은 그 링크 자체가 독립된 list로 Controller와 viewtemplate이 주고 받는 것이 아닌, Object(Entity)안의 list인 점이 까다로웠음.
        • 변경 감지와 추가 삭제를 해야 하기에 해당 Object 안의 list를 독립적으로 빼서 따로 만들어 준 채로 하기에는 번거롭고 비효율적인 것을 인지.
        • 객체안의 list로 보내줘서 객체안의 list 그대로 받아오자!
      • 이미지 업로드
        • Demo 버전에선 이미지를 업로드 하면 로컬에 저장하고 불러올 때도 로컬에서 불러옴. 
            @ResponseBody
  @GetMapping("/images")
  public Resource showImage(@RequestParam("filename") String filename) throws MalformedURLException {
  String rootPath = {이미지 저장경로};
  return new UrlResource( "file:" + rootPath + filename);
  }
  2. Post Edit
    • Member와 동일하게 작업. - 수정 필요
    • DB 연결을 AWS로 설정하고
    • 이미지 등 파일을 저장하는 storage는 AWS의 S3로 설정

<220414>

  1. 전반적인 오류 수정
    • Login 시 생기는 오류 처리 → CustomAuthFailerHandler 를 통해 로그인시 발생하는 오류 처리
    • 인증 (post edit, member edit, commit delete 접근) 과정에서 필요한 id 값을 각 DTO에 추가
    • 이미지가 없는 상태의 member나 post에 default 이미지 할당
  2. 수정된 Front merge 작업
    • 협업자가 작성한 Front를 Back과 연결하기 위한 merge 작업 실시

<220415>

  1. 기능 추가
    • All Members 기능 추가
      • 모든 멤버들의 공부상태 (Studying, Breaking, End) 를 확인할 수 있도록 설정
      • 추후 서비스 이용자가 증가하면 팔로우, 팔로잉 기능을 추가하여 팔로우 한 사람들에 대해서만 확인하도록 설정 예정
  2. 본격적인 서비스 배포 준비
    • DB연결을 AWS의 mysql로 설정
      • application.yml의 jpa 설정 수정
    • Storage를 로컬이 아닌 AWS S3에 연결
      • 이미지가 업로드 되면 인증된 client를 통해 S3에 저장
      • 저장된 URL을 받아와 image에 원본이미지이름, 저장URL을 저장 하는 방식으로 진행
      • viewTemplate은 그 image에 저장된 URL을 통해 image를 보여줌
  3. 서비스 배포
    • DEMO 버전 종료.
    • 본격적인 출시 이전에 직접 배포하며 기능 개선, 추가 / 오류 수정 작업을 거칠 예정
    • Github Repo를 통해 버전 관리, Issue를 통해 기능 오류,개선,추가 토의 진행.