==========flow chart==================
디렉토리 구조 파악하기

index.html(전체적인 그림을 그려주는 역할)
<%-include("header.ejs")%>
<%-include(pageName)%>
화면에 뿌려주는 역할을 한다. 그리고 해당 경로에 대한 이동은 라우터에서 담당하게 되는데 총 2개로 구성 되어있다.

• index.js는
  • 도서관리시스템
  • 로그인
  • 조인으로 구성이 되어 있으며ㅑ

해당 경로에 대한 path를 어디서 찾냐? 라는 물음에 app.js에서 찾을 수 있다.

이렇게 우리가 처음에 설계한 / 부분 디렉토리의 범위를 정해주는 부분이 app.js에서 진행된다.

// 라우트 코드를 로딩하는 코드
app.use('/', indexRouter);
//'/'와 관련된 라우트는 routes폴더의 index파일에 설정된 라우트 함수를 통해 처리됨
app.use('/users', usersRouter);

정리하면, app.js가 마지막에 실행되는 것이 아니라 초기에 세팅을(설계) 이와 같이 한 것이다.

그렇기 떄문에 이 부분은 routes와 의존관계를 갖는다.

그 routes는 다른 ejs에 접근하는 역할을 하며

그걸 화면에 뿌려주는 역할이 index.html이다.

말 그대로 routes는 중개자 역할을 진행하고 있다.

Test Case 1) 홈 - 로그인 로직

Test Case 2) 홈 - 회원가입 로직

Test Case 3) 홈 - 회원가입 - 로그인 로직 - 홈

Test Case 4) 구글로그인 - 로그아웃 로직

Test Case 5) 회원가입 - 로그인 - 로그아웃 로직

우선 총 이렇게 5가지로 구성되어 있다.

Test Case 1) 로그인 로직을 살펴보자.

로그인엔

• frm(form)에 대한 이벤트처리(로그인)

• googlelogin에 대한 이벤트처리가 존재한다.(구글연동로그인)

• frm(form)에 대한 이벤트처리(로그인)같은 경우 form을 submit한다.
  --> 해당 부분 더 공부 해야함
  -Get 방식과 Post 방식이 있지만 Post방식을 사용한 이유는 보안 상 Get 방식은 쿼리스트링이 노출되기 때문에 로그인에 적합하지 않다고 판단했다.

• User는 아이디와 비밀번호를 입력하면 해당 부분을

(form객체안)
let email = $(frm.email).val();
      //사용자가 화면에 입력한 비번 담기
      let password = $(frm.password).val();

으로 읽어온다.

읽어들인 아이디와 비밀번호를 네트워크로 보내고 signInWithEmailAndPassword함수를 이용해 로그인 정보를 저장한다.

여기서 signInWithEmailAndPassword은 파이어베이스에서 제공하는 함수다.

여기까지 동작을 살펴보면, 사용자가 양식을 작성하면 signInWithEmailAndPassword메소드를 호출해서 파이어베이스에 아이디와 비밀번호 값을 넘긴다.

그렇게 되면 여기까지 사용자(입력) - 파이어베이스(저장) 까지 된 것이다

다음은 어떻게 정보가 로컬스토리지에 저장되는가? 라는 질문엔

      localStorage.setItem("uid",`${user.uid}`)
      localStorage.setItem("email",`${user.email}`)

해당 코드로 인해서 로컬스토리지에 저장된다.

Test Case 2) 홈-로그인

• 홈페이지에 들어가면 라우터는

router.get('/', function(req, res, next) {
  res.render('index', { title: '도서관리시스템' , pageName:"home.ejs"});
});

이 상태로 세팅되어 있다. / 경로에 대한 HTTP GET 요청이 들어올 때 function(req, res, next)이 실행된다.

여기서 HTTP GET 요청이 들어올 때 라는 말은 메인페이지에서 새로고침만 눌러도 GET

GET / 304 2.921 ms - -
GET /stylesheets/style.css 304 0.743 ms - -
GET /images/header01.png 304 0.989 ms - -
GET /images/header02.png 304 1.412 ms - -
GET /images/header03.png 304 1.125 ms - -
GET /images/header04.png 304 1.421 ms - -

이렇게 파싱되는 것을 볼 수 있다. Get요청이 들어올 떄 해당 부분이 렌더링 되는 것을 볼 수 있다. index는 index.html이다

HOME에서 - Login 들어가면 (router)

router.get('/', function(req, res, next) {
  res.render('index', { title: '도서관리시스템' , pageName:"home.ejs"});
});

로 들어간다.

자, 정리..

1. 홈페이지에서 로그인 누르면

• 로그인 태그가 가지고 있는 url를 "클라이언트" 가 href="/login"로 이동하고

• 라우터가 해당 클라이언트의 url정보를 받고 index.ejs에 pageName:"home.ejs"를 렌더링한다.

• 그렇게 되면 index.ejs에서 home.ejs 파일을 읽어 들이고 브라우저에 파싱하게된다.

2. 로그인 페이지에 이동해서 회원가입을 진행하면, 사용자가 값을 넣는다. (id/pw) 그 값을 사용자(클라이언트)가 클릭(회원등록)하면 자바스크립트 이벤트 함수가 클릭을 감지하여 구글 파이어베이스에 저장한다. 이 때, form 을 통해 사용자의 입력을 서버에 전송한다. (submit)

3. 회원가입 후 로그인 시

회원가입을 진행하고 로그인 시 해당 정보는 로컬스토리지에 저장되어 있다. (파이어베이스에서도 저장 되어 있음)

그렇다면 로그인 시 이벤트처리를 (frm)를 진행한다. 그렇게 되면 $(frm).on("submit", function(e){} 이 부분에서 스크립트 처리가 되고 사용자의 정보(아이디/패스워드)를 읽어들임 -> signInWithEmailAndPassword에
auth : 사용자의 정보(구글파이어베이스)
email : 사용자가 입력한 이메일
password : 사용자가 입력한 패스워드

를 파라미터로 갖는 signInWithEmailAndPassword
(이메일과 비밀번호를 사용하여 로그인을 시도하는 함수)
함수를 호출하여 정보에 대한 처리를 진행한다.

그러면 이 정보를 가지고 맞다면(then) --> window.location.href = "/"로 초기화면으로 돌아간다. 이 떄도, 라우터가 해당 부분을 처리하며 기존의 localhost:3000/login으로 되어 있던 url이 --> localhost:3000/으로 이동한다.

이 떄 url이 변경되었기 떄문에 -> 라우터를 호출하고 --> 라우터는 해당 url에 맞는 경로를 설정하여 index.html에 파싱한다.

Stringify & JSON.parse
https://velog.io/@rkio/Javascript-%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B0%84-%EC%A0%95%EB%B3%B4-%EC%A0%84%EB%8B%AC-%EB%B0%A9%EB%B2%95-localStorage-sessionStorage

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

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

• 나는 회원가입에 들어가면 게시판 부분이 안 보이게 수정하고 싶다.

내가 생각한 아이디어는 토글의 원리다. 켜져있으면 끄자. 근데 그건 하나의 태그만 가능 한 것 아닌가?

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

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

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

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

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

처음 방향성

form 객체에 대한 이슈가 아닐까?

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

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

오류 발생

1. 메인페이지로 돌아와야된다. 근데 태그를 쓰면 투터치가 되는데 button에서 사용자의 값을 갖고 다시 메인창으로 돌아오려면 어떤 것을 해야 될까?

2. 그리고 로그인 창 --> 페이지 분리하자.