HANSOT 홈페이지

Studying/Proj 과정 2022. 9. 4. 05:23

메뉴 상세 화면

Content

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
.header {
  grid-area: header;
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
  font-size: 35px;
}

/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header' 
    'left left right right right right' ;
  /* grid-column-gap: 10px; - if you want gap between the columns */
} 

.left,
.right {
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Style the left column */
.left {
  grid-area: left;
}

/* Style the right column */
.right {
  grid-area: right;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header header header header header header' 
      'left left left left left left' 
      'right right right right right right' ;
  }
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="header">
    <h2>Header</h2>
  </div>
  
  <div class="left" style="background-color:#aaa;">Column</div>
  <div class="right" style="background-color:#ccc;">Column</div>
  
</div>

</body>
</html>

DB 설계

mySQL: 아래 웹 사이트 참고

Oracle 데이터 타입: https://coding-factory.tistory.com/416
mySQL 데이터 타입: http://www.incodom.kr/DB_-_%EB%8D%B0%EC%9D%B4%ED%84%B0_%ED%83%80%EC%9E%85/MYSQL

[클론코딩 - HANSOT] DB설계.md

0.00MB

서버 연결

1. 아래 웹사이트 참고해서 server 구성

2. json을 가져왔을 때 UI에 잘 나타나는지 확인

참고: https://dori-coding.tistory.com/entry/React-React%EC%97%90%EC%84%9C%EC%9D%98-Ajax-%EC%9A%94%EC%B2%AD-%EB%B0%A9%EB%B2%95-axios-%EC%84%A4%EC%B9%98

데이터 파일 category.js / menu.js 생성

MenuList.js 에서 메뉴 불러오기

import { Route, Routes } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { useEffect, useState } from "react";
import "../stylesheets/menu_list.css";
import categoryData from '../data/category.js'
import menuData from '../data/menu.js';

function MenuList() {
  let [categoryList, setCategory] = useState(categoryData);
  let [menuList, setMenu] = useState(menuData);

  useEffect(() =>{
    
  }, []);

  return (
    <div className="MenuList">
      <div className="content">
        <p>신메뉴/행사</p>
        <h2>신메뉴</h2>
        <br/>
        <div className="w3-row-padding">
          {menuList.map((menu, idx)=>(
            <Link to="/menu/menu_view" key={idx}>
              <div key={menu.menu_id} name="menu_item" className="w3-third w3-container w3-margin-bottom">
              <img src={menu.img_url}/>
                <div className="w3-container">
                  <p><b>{menu.name}</b></p>
                  <p>{menu.price}</p>
                </div>
              </div>
            </Link>
          ))}
          </div>
          
        {/* Second Photo Grid 
        <div name="menu_item" className="w3-row-padding">
          <div className="w3-third w3-container w3-margin-bottom">
            <img src="/images/new04.jpg"/>
            <div className="w3-container">
              <p><b>오리지널 치즈 닭갈비덮밥</b></p>
              <p>5,9900원</p>
            </div>
          </div>
        </div>*/}
      </div>
    </div>
  );
}

export default MenuList;

일단 이렇게 하면 불러오긴 불러와지는데, 1열에 3개씩 w3-row-padding 을 지정하지 못함. 일단 시간이 없으니까 패스ㅜㅜ

폼 데이터 처리

form-data 파싱을 위한 패키지 설치
- npm install body-parser
- npm install multer

=> 회원가입을 입력하고,데이터를 날릴 때 서버에서 body-parser와 multer가 없으면 데이터가 제대로 수신 되지 않음.

설치한 패키지를 server.js에 적용

const bodyParser = require("body-parser");
const multer = require("multer");
const form_data = multer();

/* 미들웨어 설정 */
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}));
app.use(form_data.array());

사용자가 입력한 로그인 폼의 데이터를 조회하기 위한 post 예시

app.post("/login", function(req, res) {
	const {name, age} = req.body; /* form Data는 body에 있음 */
    if(name != null && age != null) {
    	return res.send("name: " + name + "," + "age: " + age);
        } else {
        res.status(400).send("bad request");
        }
});

쿠키와 세션

쿠키

설치: npm install cookie-parser
- 요청된 쿠키를 쉽게 추출할 수 있도록 도와주는 미들웨어
쿠키 생성: res.cookie('쿠키이름', '쿠키값', '옵션객체');

server.js

const bodyParser = require("body-parser");
const multer = require("multer");
const form_data = multer();

const cookieParser = require("cookie-parser");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(form_data.array());
app.use(express.json());
app.use(cookieParser());

쿠키 생성 예시

router.post("/", function (req, res) {
  const { name, age } = req.body;
  console.log("login post request");
  res.cookie("username", name);
  res.redirect("/member/mypage");
});

쿠키 조회 예시 (클라이언트가 서버에 request 할 때, 쿠키 여부를 확인한 후 이전 기록(인증 등)을 파악한다 - 이 사용자는 이전에 로그인을 해서 인증을 파악한 사용자구나. 이렇게)

router.get("/mypage", function (req, res) {
  console.log(req.cookies);
  if (!req.cookies.username) res.redirect("/api/login"); /* 쿠키 정보가 없다면 로그인으로 이동 */
  else res.render("mypage", req.cookies); /* 쿠키 정보가 있다면 마이페이지로 이동 */

});

- 여러 개의 쿠키 조회: cookies

- else 부분은 우리 구현에서 사실 필요 없음. 이 쿠키에 대한 조회 결과를 client에게 넘겨야 한다(client side rendering에서는). redirect나 render는 server side rendering 을 의미하므로 필요x.

쿠키제거

- clearCookie / maxAge(유효기간) 둘 중 원하는 것 선택 사용

router.get("/logout", (req, res) => {
  res.clearCookie("username"); 
  //res.cookie("username", "", { maxAge: 0 });
  res.render("login");
});

세션

보안 상의 이유로 쿠키보다 선호

설치: npm install express-session memorystore
- memorystore: 세션을 메모리에 저장할 수 있게 도와주는 미들웨어
express-session 으로 만든 session을 저장하는 세 가지 storage
1. 파일에 저장
2. DB에 저장
3. Memory에 저장(우리 프로젝트의 경우 해당 선택)

개발을 위한 MemoryStore의 사용은 문제될 것이 없지만 production 환경에서 MemoryStore의 사용은 적절하지 않으며 복수 서버 상에서의 Session data 공유도 MemoryStore에서는 불가능(jwt 토큰 참조)
production 환경에서는 Redis, MongoDB를 사용하여 영속적 Session data 관리하는 것이 일반적

세션 적용

server.js

const session = require("express-session"); // 세션 만들기
const memorystore = require("memorystore"); // 메모리 만들기
const memoryStore = memorystore(session); // 메모리 안에 세션 넣어서 memoryStore 만들기
//const MemoryStore = require('memorystore')(session); // 위 두 줄을 한 줄로 작성 가능

// 세션의 최대 유효기간 (로그인 유효기간)
const maxAge = 1000 * 60 * 5; //Specifies the number (in milliseconds)

/* 세션 설정 */
const sessionObj = {
  secret: "se",
  resave: false,
  saveUninitialized: true,
  store: new MemoryStore({ checkPeriod: maxAge }),
  cookie: {
    maxAge: maxAge,
  },
};

// 최종적으로 mySession 안에 설정한 세션 넣고 use
const mySession = session(sessionObj);
app.use(mySession);

세션 적용

router.get("/", fuction(req, res){
	console.log(req.session);
    return res.render("login");
});

/* 세션에 값 저장 */
router.post("/", function(req, res){
	const {name, age} = req.body;
    console.log("login post request");
    const sess = req.session;
    sess.username = "kim" // 서버에 저장되는 값
    res.redirect("/member/mypage");
});

Git에서 Everything up to change 만 뜨고 업데이트 되지 않았을 때 : https://velog.io/@max-sum/GitGithub-not-workingeverything-up-to-date-but
브랜치 병합: https://backlog.com/git-tutorial/kr/stepup/stepup2_4.html
- └▶ 브랜치를 feature/UI인 상태로 계속 커밋, push 해왔다.

'Studying > Proj 과정' 카테고리의 다른 글

디자인 시스템 구축하기 (0)	2023.05.25
프로젝트 요구사항 분석&플래닝 연습하기 (0)	2023.05.12
[WebKIT640] 부트캠프 웹킷640 자체 홈페이지 (0)	2022.10.24
냉장고를 부탁해! (0)	2022.10.03
도서관 홈페이지 만들기 (0)	2022.08.22

ABOUT ME

i'm done i'm done

메뉴 상세 화면

Content

DB 설계

mySQL: 아래 웹 사이트 참고

서버 연결

1. 아래 웹사이트 참고해서 server 구성

2. json을 가져왔을 때 UI에 잘 나타나는지 확인

폼 데이터 처리

쿠키와 세션

쿠키

세션

세션 적용

세션 적용

'Studying > Proj 과정' 카테고리의 다른 글

티스토리툴바