[Node.js - login ] 1. 프로젝트 폴더 구조와 통신 흐름도

1. 폴더 구조

├─app
│  ├─bin
│  │  └─www.js ─ app.listen()이 있는 서버의 시작점
│  │
│  ├─logs
│  │  └─access.log ─ winston 미들웨어에서 표시하는 활동 로그가 저장되는 곳
│  │
│  ├─node_modules ─ 해당 프로젝트에서 사용하고 있는 모듈들이 설치되어 있는 곳
│  │ 
│  ├─app.js ─ 앱의 전체적인 세탕을 하는 곳
│  │
│  ├─package-lock.json ─ app을 실행시키기 위해서 필요한 패키지에 대해서 자세히 설명되어 있는 파일
│  │
│  ├─package.json ─ app을 실행시키기 위해서 필요한 패키지가 나열된 파일
│  │
│  └─src
│  │  └─config
│  │      └─db.js ─ node.js와 연동되는 DB 환경변수가 있는 곳
│  │      └─log.js ─ log와 관련된 모듈를 변수로 선언하는 곳
│  │      └─logger.js ─winton 로그 모듈의 환경 설정을 하는 곳
│  │
│  │  └─models
│  │      └─User.js ─ user와 관련된 데이터를 조작하는 곳
│  │      └─UserStorage.js ─ user data가 저장되어 있는 곳
│  │
│  │  └─public
│  │       └─css─home
│  │  			  └─login.css ─ login, register css 파일
│  │       └─js─home
│  │  			  └─login.js ─ login event 처리를 하는 곳
│  │  			  └─register.js ─ register event 처리를 하는 곳
│  │
│  │  └─routes─home
│  │  			└─home.ctrl.js ─ MVC 패턴 중 C(controller) 처리가 일어나는 곳
│  │  		    └─index.js ─ router
│  │
│  │  └─views─home
│  │  			└─login.ejs ─ login Template
│  │  		    └─index.ejs ─ index Template
│  │  		    └─register.ejs ─ register Template

---

2. HTTP 통신 흐름도

nodejs-login 흐름도

1) GET index

1. client에서 /로 GET 요청
2. www.js에서 실행한 서버의 port로 client 요청이 들어옴
3. index.js router에서 GET / 요청에 대해서 라우팅을 해줌
4. home.ctrl.js의 output.home 함수에서 views.home.index.ejs 를 res.render() 하라고 client에 던져줌

2) GET login

1. client에서 /login으로 GET 요청
2. www.js에서 실행한 서버의 port로 client 요청이 들어옴
3. index.js router에서 GET /login 요청에 대해서 라우팅을 해줌
4. home.ctrl.js의 output.home 함수에서 views.home.login.ejs 를 res.render() 하라고 client에 던져줌

3) POST login

1. GET /login을 통해서 login.ejs 페이지를 client가 받음
2. login.ejs 페이지에서 client가 로그인 버튼을 클릭
3. login button 클릭에 대한 event가 일어남
4. event callback 함수가 click event를 POST 요청으로 fetch 해줌
5. router에서 POST 요청에 대해서 ctrl.process.login으로 라우팅 해줌
6. ctrl.process.login에서 User.js 접근하여 User 객체 생성 및 login 절차를 User.js에 요청
7. User.js에서 UserStorage.js에 필요한 정보를 요청하고 데이터를 받음
8. login 절차에 대한 반환값을 home.ctrl.js에 전달
9. home.ctrl.js에서 response값을 login.js에 전달
10. login.js에서 response값을 client에 전달