[UPDATE] 사용자가이드 및 APIKEY 숨기기 리드미 업데이트

README.md

@@ -1,23 +1,68 @@
 # OurToDo
 
-ToDO, Bookmark, Weather Info 등을 제공하는 웹어플리케이션
+### ToDO, Bookmark, Weather Info 등을 제공하는 웹어플리케이션
 
-## 기술스택
+<br>
+OurToDo는 PC, 크롬을 기준으로 제작되었습니다.
+
+현재 모바일과 익스플로러는 지원하지 않습니다.
+<br>
+<br>
+
+### 개발진
+
+- 프론트 : 장효택 | 서버 : 장효택 | 디자인 : 장효택 | 기획 : 장효택 | 후원 : 장효택 | 배포 : 장효택
+
+---
+
+# 사용자 가이드
+
+## 즐겨찾기 추가 및 새 탭 설정법 (크롬기준)
+
+---
+
+### 즐겨찾기 추가
+
+1. 주소창 우측에 별표시를 누른다
 
-- html, css, js, nodejs, ejs, aws, route53, mysql
+### 즐겨찾기 보기
 
-- crypto를 통해 로그인 보안처리
+1. 오른쪽 상단에서 : 버튼 클릭 후, 북마크를 클릭한다.
+2. 북마크바 표시를 누른다. ( 단축키 : 컨트롤+쉬프트+B )
 
-## 기능설명
+---
+
+### 새 탭 설정법
+
+1. https://fervors.tistory.com/103 링크 참조
+2. 설정 url을 http://ourtodo.site 로 한다.
+
+---
+
+## 로그인 및 회원가입
 
 - 회원가입과 로그인을 거쳐 사용한다.
+- auto login을 통해 자동로그인 가능.
+
+---
 
 ## To-Do-List
 
 - To-Do-List 추가 : 하단 Write here 에 타이핑 후 엔터키를 통해 리스트 업.
 - To-Do-List 삭제 : 리스트 옆 엑스박스 클릭으로 삭제.
 
+---
+
 ## Bookmark
 
 - Bookmark 추가 : To-Do-List와 동일하게 URL과 TITLE 작성 후 엔터. 단, 둘다 작성되어야 리스트 업 가능.
-- Bookmark 삭제 : 리스트옆 휴지통 모양을 클릭하여 삭제.
+- Bookmark 삭제 : 리스트 옆 휴지통 모양을 클릭하여 삭제.
+
+---
+
+## 기술스택
+
+- 프론트 : html css js
+- 서버 : nodejs, ejs
+- db : mysql
+- 배포 : aws, 가비아, route53

myapp/middleware/AutoLogin.js

@@ -1,15 +1,20 @@
 const LoginCookie = require("../model/LoginCookie");
 
 const autoLogin = async (req, res, next) => {
+  // 로그인 쿠키가 없다면 return
   if (!req.cookies.login_cookie) return next();
-  // 로그인쿠키 있나 확인하고 있으면 db체크후 사용자면 로그인 처리
 
+  /*
+  1. db에 최근 자동 로그인 쿠키와 사용자가 들고 있는 쿠키가 같지 않다면 도난 당한것.
+  2. db 최근 쿠키와 사용자 쿠키가 같다면 db에 로그인 쿠키를 지우고
+  3. 새롭게 로그인 쿠키를 발급받아 쿠키 유효기간을 연장, db에 최근 쿠키로 갈아끼운다.
+  4. 로그인 세션을 부여하여 로그인 작업 완료.
+  */
   try {
     const cookie = JSON.parse(req.cookies.login_cookie);
     const checkCookie = await LoginCookie.checkCookie(cookie);
     await LoginCookie.deleteToDB(checkCookie.cookie_user_id);
     if (checkCookie.result) {
-      // 세션받기 그리고 db삭제하고 다시 넣기, 쿠키도 다시
       const cookieData = await LoginCookie.setCookie(
         checkCookie.cookie_user_id,
         res

myapp/middleware/cookieMiddle.js

@@ -1,3 +1,4 @@
+// 사용자가 요청을 보낼 때마다, 로그인 세션을 새로 갱신하여 연장한다.
 const cookieMiddle = (req, res, next) => {
   if (req.cookies["connect.sid"]) {
     res.cookie("connect.sid", req.cookies["connect.sid"], {

myapp/model/APIKEY.js

@@ -0,0 +1,7 @@
+class APIKEY {
+  static getKey() {
+    return process.env.API_KEY;
+  }
+}
+
+module.exports = APIKEY;

myapp/model/User.js

@@ -9,9 +9,10 @@ class User {
 
   async login() {
     try {
+      // 해당하는 id가 존재하는지 체크
       const userInfo = await UserStorage.getInfo(this.body.body.id);
-      // 아이디 비번 비교처리
 
+      // 사용자 salt를 통해 똑같이 암호화를 하여 해쉬 값 비교를 한다. 이를 가지고 패스워드 체크
       const hashPsw = await UserStorage.hashPsw(
         this.body.body.password,
         userInfo.user_salt
@@ -20,21 +21,20 @@ class User {
         return { result: false, msg: "비밀번호가 다릅니다." };
       }
 
-      // 'auto-login' == 'on' 이면 자동로그인되게
+      // 'auto-login' == 'on' 이면 로그인 쿠키 발행
       if (this.body.body["auto-login"] == "true") {
-        // 로그인 쿠키 발행
         const cookieData = await LoginCookie.setCookie(
           this.body.body.id,
           this.res
         );
         await LoginCookie.saveToDB(cookieData);
       }
 
+      // 로그인 세션 발행
       this.body.session.authenticate = true;
       this.body.session.userName = userInfo.user_name;
       this.body.session.userId = userInfo.user_id;
 
-      // 정상처리 객체
       return {
         result: true,
         msg: userInfo.user_name,
@@ -47,7 +47,7 @@ class User {
 
   logout() {
     return new Promise((resolve, reject) => {
-      // 세션도 없애고 로그인 쿠키도 없애야함.
+      // 세션과 로그인 쿠키 삭제
       this.body.session.destroy(() => {
         this.body.session;
       });
@@ -57,11 +57,13 @@ class User {
   }
 
   async register() {
-    // 일단 아이디가 존재하는지 체크
-    // 비번 같나 체크
-    // 통과하면 디비에 셋
     const data = this.body;
     try {
+      /*
+      1. 아이디 존재여부 판단
+      2. 비밀번호 일치여부 판단
+      3. 해쉬를 통해 salt와 암호화된 비밀번호 저장
+      */
       const info = await UserStorage.getInfo(data.id);
       return { result: false, msg: "아이디가 이미 존재합니다." };
     } catch (error) {
@@ -73,7 +75,6 @@ class User {
       data["salt"] = hashPsw.salt;
 
       const setInfo = await UserStorage.setInfo(data);
-      // 삽입 성공시 반환
       if (setInfo) return { result: true, msg: data.name };
     }
   }

myapp/model/UserStorage.js

@@ -5,10 +5,9 @@ class UserStorage {
   static getInfo(id) {
     return new Promise((resolve, reject) => {
       db.query("SELECT * FROM user WHERE user_id = ?", [id], (err, data) => {
-        // 아이디 존재하지 않으면
         if (data[0] == undefined) {
           return reject(`아이디가 존재하지 않습니다.`);
-        } // 아이디 존재하면
+        }
         return resolve(data[0]);
       });
     });

myapp/public/css/index.css

@@ -22,11 +22,12 @@
   color: white;
 }
 
-#start-button {
+.start-button {
+  margin: 0 20px;
   color: white;
   background-color: rgb(172, 172, 172);
   border-radius: 15px;
-  font-size: 35px;
+  font-size: 32px;
   width: 150px;
   height: 50px;
   color: #fff;
@@ -38,12 +39,12 @@
   outline: none;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.15);
 }
-#start-button:hover {
+.start-button:hover {
   background: #4c504f;
   color: #ffffff;
 }
-#start-button:before,
-#start-button:after {
+.start-button:before,
+.start-button:after {
   content: "";
   position: absolute;
   top: 0;
@@ -53,16 +54,20 @@
   background: #4c504f;
   transition: 400ms ease all;
 }
-#start-button:after {
+.start-button:after {
   right: inherit;
   top: inherit;
   left: 15px;
   bottom: 0;
 }
-#start-button:hover:before,
-#start-button:hover:after {
+.start-button:hover:before,
+.start-button:hover:after {
   width: 80%;
   transition: 800ms ease all;
 }
 
+#start-guide {
+  font-size: 30px;
+}
+
 /*  */

myapp/public/javascripts/DB_todo.js

@@ -1,3 +1,5 @@
+const parentBox = document.querySelector(".toDo-CB");
+
 $(".todoForm").submit((e) => {
   e.preventDefault();
   if (!$("#todo-input").val()) {
@@ -41,8 +43,6 @@ async function displayTodo() {
   }
 }
 
-const parentBox = document.querySelector(".toDo-CB");
-
 function makeBox(text, id) {
   const CONTENTBOX_TAG = document.createElement("div");
   const CONTENT_TAG = document.createElement("div");

myapp/public/javascripts/index.js

@@ -1,5 +1,8 @@
-const button = document.getElementById("start-button");
-button.addEventListener("click", (e) => {
-  console.log("123");
+const startButton = document.getElementById("start-button");
+startButton.addEventListener("click", (e) => {
   location.href = "/user/login";
 });
+const guitdeButton = document.getElementById("start-guide");
+guitdeButton.addEventListener("click", (e) => {
+  location.href = "https://github.com/HyoTaek-Jang/Our-To-Do";
+});

myapp/public/javascripts/weather.js

@@ -1,38 +1,25 @@
 const COORDS = "coords";
-const API_KEY = "0acc42e3154c1df24d2fedeaeddae0e2";
 const todayTemp = document.querySelector(".today-temp");
 const todayIcon = document.querySelector(".today-icon");
 const tmrTemp = document.querySelector(".tmr-temp");
 const tmrIcon = document.querySelector(".tmr-icon");
 
-// 날씨 정보 https://openweathermap.org/weather-conditions#Weather-Condition-Codes-2
-// https://openweathermap.org/api/one-call-api#history
-function getWeather(lat, lon) {
-  /*
+function getKEY() {
+  return new Promise((resolve) => {
     $.ajax({
-    url: `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&
-    exclude=&appid=${API_KEY}&units=metric`,
-    dataType: "json",
-    success: (json) => {
-      console.log(json);
-      const weatherData = {
-        currentTemp: json.current.temp,
-        currentWeather: json.current.weather[0].icon,
-        tmrTempMax: json.daily[0].temp.max,
-        tmrTempMin: json.daily[0].temp.min,
-        tmrWeather: json.daily[0].weather[0].icon,
-      };
-
-      todayTemp.innerHTML = `${weatherData.currentTemp}`;
-      tmrTemp.innerHTML = `${Math.round(weatherData.tmrTempMax)} / ${Math.round(
-        weatherData.tmrTempMin
-      )}`;
-
-      askForWeatherIcon(todayIcon, weatherData.currentWeather);
-      askForWeatherIcon(tmrIcon, weatherData.tmrWeather);
-    },
+      url: "/main/weather",
+      type: "POST",
+      dataType: "text",
+      success: (key) => {
+        resolve(key);
+      },
+    });
   });
-  */
+}
+// 날씨 정보 https://openweathermap.org/weather-conditions#Weather-Condition-Codes-2
+// https://openweathermap.org/api/one-call-api#history
+async function getWeather(lat, lon) {
+  const API_KEY = await getKEY();
   fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&
     exclude=&appid=${API_KEY}&units=metric`)
     .then(function (response) {

myapp/routes/ctrl/home.js

@@ -1,6 +1,7 @@
 const User = require("../../model/User");
 const Todo = require("../../model/Todo");
 const Bookmark = require("../../model/Bookmark");
+const APIKEY = require("../../model/APIKEY");
 
 module.exports = {
   output: {
@@ -33,19 +34,15 @@ module.exports = {
   process: {
     login: async (req, res) => {
       const user = new User(req, res);
-      // 로그인 결과 받기
       const loginResult = await user.login();
 
       if (loginResult.result == true) {
-        //로그인 성공
         req.session.save(() => res.json(loginResult));
       } else {
-        // 실패
         res.json(loginResult);
       }
     },
     logout: async (req, res) => {
-      // 디비 login_cookie삭제
       const user = new User(req, res);
       await user.logout();
 
@@ -79,5 +76,8 @@ module.exports = {
       await bookmark.delBookmark();
       res.json("good");
     },
+    getAPIKEY: (req, res) => {
+      return res.send(APIKEY.getKey());
+    },
   },
 };

myapp/routes/main.js

@@ -13,4 +13,6 @@ router.post("/bookmark", ctrl.process.addBookmark);
 router.get("/bookmark", ctrl.output.getBookmark);
 router.delete("/bookmark", ctrl.process.delBookmark);
 
+router.post("/weather", ctrl.process.getAPIKEY);
+
 module.exports = router;

myapp/views/index.ejs

@@ -24,8 +24,10 @@
           <p>이 페이지를 즐겨찾기나 NewTap으로 지정 후, 편리하게</p>
           <p>'ToDoList', 'Bookmark', 'Weather information'을 이용해보세요!</p>
         </div>
-
-        <button id="start-button">Start</button>
+        <div class="flex">
+          <button class="start-button" id="start-guide">Guide</button>
+          <button class="start-button" id="start-button">Start</button>
+        </div>
       </div>
     </div>
   </body>

myapp/views/login.ejs

@@ -23,7 +23,7 @@
       <p class="main-title">
         <a href="/">
           <img src="/image/homeicon.png" width="90px" alt="" />
-          Our-To-DO</a
+          Our-To-Do</a
         >
       </p>
       <div class="login-page">