**1차 개발기간 : 2023.11.4 ~ 2023.11.14

• 도서관리프로그램 구현

로그인	회원가입
로그인 - (아이디/비밀번호검사)	회원가입- 파이어베이스연동
로그인 - 성공	회원가입- 유효성검사
소셜-카카오로그인	소셜-구글로그인

검색	책 내용-가격 및 할인가
페이지네이션	포스트맨 사용

게시판-list	게시판-글쓰기
게시판 - 글쓰기(완료)	게시판 - 글쓰기(취소)
게시판 - 상세보기	게시판 - 수정
게시판 - 수정 후 반영	게시판 - 수정 후 목록
게시판 - 삭제	게시판 - 삭제 후 목록
게시판 - 조회수[list목록-상세조회]+ 새로고침 방어	게시판 - 조회수[list목록-상세조회] + 새로고침 방어
게시판 - 조회수[url접근-list목록]+ 새로고침 방어	게시판 - 조회수[url접근-list목록] + 새로고침 방어
게시판 - 페이징처리1	게시판 - 페이징처리2

• 회원가입, 로그인,로그아웃 2개의 기능 구현
• 로그인 시 로컬스토리지 및 구글파이어베이스(인증)에 저장 되어 있는 ID/Paswword 가져와서 정보가 맞으면 로그인 성공, 틀리면 로그인 실패
• RESTful API을 이용하여 카카오 및 구글 소셜로그인 구현, nickname(카카오), email(구글) 가져와서 로컬스토리지에 저장 -> (게시판 작성 시 필요)

• 모든 필드을 충족 후 회원가입 가능 구현(유효성 검사)
• 회원가입 시 ID/Password/Nickname 로컬스토리지 및 구글파이어베이스(인증)에 저장.

• RESTful API 카카오(도서)를 이용하고, Postman을 통해서 {Key : Value} 값 매핑
• 책이름을 입력하고/Enter 누르면 사용자에게 가격, 할인가격, 책 상태(판매,절판) 제공
• 할인가(빨간색), 책 상태(초록색)으로 제공
• 페이지 당 책 내용 20개씩 제공

• 글쓰기(Create),읽기(Read),수정(Update),삭제(Delete) CRUD 구현
• 로컬스토리지를 이용하여 상태 값 관리 (세션 및 쿠키 이용 X)
• index 쿼리스트링으로 페이지 값 부여 및 객체 관리
• 게시판 게시글 3개로 제한 및 페이지네이션 구현

• NodeJS
• npm install express-generator -g

$ git clone https://github.com/Ohsaam/bookSideProject.git
$ cd bookSideProject

bookSideProject
├─ .vscode
│  └─ settings.json
├─ app.js
├─ bin
│  └─ www
├─ package-lock.json
├─ package.json
├─ public
│  ├─ images
│  │  ├─ header01.png
│  │  ├─ header02.png
│  │  ├─ header03.png
│  │  ├─ header04.png
│  │  └─ loading.gif
│  ├─ javascripts
│  │  ├─ authLogic.js
│  │  ├─ board.js
│  │  └─ firebase.js
│  └─ stylesheets
│     └─ style.css
├─ routes
│  ├─ index.js
│  └─ users.js
└─ views
   ├─ auth
   │  ├─ join.ejs
   │  └─ login.ejs
   ├─ board
   │  ├─ board.ejs
   │  ├─ modify.ejs
   │  ├─ read.ejs
   │  └─ write.ejs
   ├─ book
   │  └─ bookList.ejs
   ├─ error.ejs
   ├─ footer.ejs
   ├─ header.ejs
   ├─ home.ejs
   ├─ index.ejs
   └─ users
      ├─ cart.ejs
      └─ mypage.ejs

우선 제일 아쉬운 부분이 기존에 진행했던 깃헙 레포지토리를 private로 바꿨다. 그 이유는 내 API Key를 노출 시켰기 때문이다. 참.. 처음에 env. 파일 설정을 하고 API키를 부여하는지 프로젝트가 마무리 될 쯤 알게됐다. 회사였으면 정말 큰일 날 뻔 했다. 이렇게 또 하나 배웠다. 보안상 이슈가 제일 중요한 부분인데 이 부분을 신경쓰지 못했다니.. 정말 쪽팔리고 부끄럽다

회원가입 시 해당 타이틀이 계속 보인다.

이 말은 지금 토글 처리를 해야된다. --> 아니면 페이지 구성 요소를 바꿔야 하는가?

나는 회원가입에 들어가면 게시판 부분이 안 보이게 수정하고 싶다. 내가 생각한 아이디어는 토글의 원리다. 켜져있으면 끄자. 근데 그건 하나의 태그만 가능 한 것 아닌가?

로그인 시 --> 해당 부분들이 보이게 구현해보자.

어차피 email을 갖고 있지 않을테니 해당 부분을 활용해 회원가입 페이지 이동 시 bookList가 노출되지 않도록 수정해보자.

if(localStorage.getItem('email')) //localStorage에 getItem('item')을 갖고 있다면, == 사용자가 이메일을 입력 했을 때, 
{
  $('#login, #logout, #mypage, #cart').toggle(); // 토글 버튼을 활성화 시킨다.
}

이런식으로는 구현이 안 될까? --> Nope

인덱스.ejs도 수정 했는데 잘 안된다.. 뭐가 문제인거지? CSS와는 방향성이 맞지 않음 만약에 컨트롤 한다면 index.html같은데 뭐가 잘못된거지 ?

전체 flow chart 재분석 후 --> index.html의 렌더링 문제로 routers 경로를 바꿨음

<div class="row my-5">
  <div class="col">
    <%-include("book/bookList.ejs")%>
<%-include("auth/join.ejs")%>
  </div>
</div>

처음엔 으로 구현 되어 있었는데

<div class="row my-5">
  <div class="col">
    <%-include("book/bookList.ejs")%>
  </div>
</div>

으로 수정 해결완료

처음 방향성 form 객체에 대한 이슈가 아닐까?

: form객체에 대한 method 소통 방식을 post가 아닌 get으로 구동 시 404 에러가 발생하지 않는다.

하지만 get방식은 보안이슈로 인해 가급적 사용하지 않는 것이 좋다.. 하필이면 로그인 창에서 get 방식은 최악이다.

라우터 경로 확인 --> 이상 무 app.js 경로 확인 --> 이상 무 form 전송 방식에 이슈가 있는 것으로 추정 --> 태그를 바꿔보자. (get) 전송 방식은 구현이 되지만 404 가 뜨진 않지만 회원 페이지가 넘어가지 않는다. form 페이지를 계속 써야 되는 것인가?

로컬스토러지는 사용자가 회원가입해서 잘 갖고 있는 상태로 로그인창으로 리다이렉션한다. 개발자도구에서도 확인 했지만 문제 없었다. --> 구글 파이어베이스에도 잘 저장 되어 있는 것을 알 수 있다. 뭐가 문제인거지?

[원인]: firebase 연동 오류로 값을 읽어들이지 못하는 문제가 발생했던 것

[해결] 프로젝트 새로 만들어서 토큰 값 받고 다시 구현 --> 로그인 시 404 안 뜸