**1차 개발기간 : 2023.11.4 ~ 2023.11.14
![](https://private-user-images.githubusercontent.com/96507825/282683214-0bd3b5e5-ef73-43f5-becd-7cb213411a19.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzA3MjIsIm5iZiI6MTcyNTk3MDQyMiwicGF0aCI6Ii85NjUwNzgyNS8yODI2ODMyMTQtMGJkM2I1ZTUtZWY3My00M2Y1LWJlY2QtN2NiMjEzNDExYTE5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEyMTM0MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVlMjgwNGE3MWIwYzYzMWI0ZDJlZjNhYzkyZmZhZjMxYWM0YmM5MDc4MjMxY2YwYjQ3N2QzNjAxNzczNmI3MDUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.OUKRqL0RhedEoYhUQBg_KMILUFPm2txoaMwAaIKH1-A)
로그인 | 회원가입 |
---|---|
로그인 - (아이디/비밀번호검사) | 회원가입- 파이어베이스연동 |
로그인 - 성공 | 회원가입- 유효성검사 |
소셜-카카오로그인 | 소셜-구글로그인 |
검색 | 책 내용-가격 및 할인가 |
---|---|
페이지네이션 | 포스트맨 사용 |
- 회원가입, 로그인,로그아웃 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
![](https://private-user-images.githubusercontent.com/96507825/282711967-8e163d8b-51f7-4a77-8114-a830af13c5f0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzA3MjIsIm5iZiI6MTcyNTk3MDQyMiwicGF0aCI6Ii85NjUwNzgyNS8yODI3MTE5NjctOGUxNjNkOGItNTFmNy00YTc3LTgxMTQtYTgzMGFmMTNjNWYwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEyMTM0MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ0MTViYjlkOGQxN2RkYzQzOGY1NDA3ZTIwYmQyYWMwYTYxYWM4OWU3NGEwMTg1YzcyM2E0ZTIyZTkyYzEyY2EmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.EPRkA_cQbRQrhVYWy04ZvUH8T8fzIMZy21hQcO2DaEs)
![](https://private-user-images.githubusercontent.com/96507825/282712068-c895c482-4338-48d2-b016-9cf48ec00921.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzA3MjIsIm5iZiI6MTcyNTk3MDQyMiwicGF0aCI6Ii85NjUwNzgyNS8yODI3MTIwNjgtYzg5NWM0ODItNDMzOC00OGQyLWIwMTYtOWNmNDhlYzAwOTIxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEyMTM0MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTFiZDliZmFhZDU5NTQ2NWFlNjE4ODE0NzI2YTU3MjM1OGY3ZWI4ODNmYWFjMmE0YmIwZDNiMTQ1ZDY4NzZiMGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.AzGQ_H39KiGwdEonTIA7Rw_Wgs7MTcxC0eJ5SoSPNPo)
우선 제일 아쉬운 부분이 기존에 진행했던 깃헙 레포지토리를 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 안 뜸