search

JEoN-Ha / Senior-Project

4학년 졸업작품
MIT License
1 stars 3 forks source link

Router code에 관하여 #87

Closed fora22 closed 3 years ago

fora22 commented 3 years ago

쉬울 줄 알았던 Router code 가 이렇게 오래 걸릴 줄 몰랐네...

계속 Router 짜면서 Swagger 가 변경되야하는 필요성이 느껴짐. 지금은 아예 swagger 보지 않고 짜고 있는데 문제가 많음;; 즉 우리의 Swagger 설계가 부족했던 것 같음. 그래서 Front 담당과 이야기를 나누면서 고칠려고 해서 PR을 발행함.

현재 insert부터 문제가 있는 것이 서버 로직이 정해져 있지 않음. 혼자서 결정하기 힘듬. 그래서 논의 사항이 필요할 때마다 review 를 남길테니 의견을 말해주기 바람. 또한 기존 azure 용량이 다 되서 가족 아이디를 통해 서버를 구하려고 함 -> 아직 테스트를 못해봄

fora22 commented 3 years ago

일단 급한 논의 사항은

만약 User A가 장바구니에 '싸이버거 2개, 콜라 1개'를 담고 웹을 나가버림. 그리고 다시 돌아와서 장바구니에 '빅맥 1개, 사이다 1개'를 담으려고 하면 기존 '싸이버거 2개, 콜라 1개'를 기억하고 있다 표시할 것인지? 아니면 지울것인지?

  1. 기억하고 있다면 웹에 접속 할 때 DB에서 OrderState 1인 것이 있으면 가져와서 장바구니에 담겨 있어야 함. 계속 check해주는 api 호출을 해야함
  2. 지운다면 서버 입장에서 웹에서 나갔다는 것을 확인할 방법이 없음. 웹에서 확인할 방법이 있다면 나갔을 때 지워주는 api가 필요함
dkfma4915 commented 3 years ago

1번 기억하고 있다가 더 맞을 것 같아! 다른 쇼핑몰 사이트들도 로그인한 상태에서 장바구니에 담아두면 계속 기억해두니까!

fora22 commented 3 years ago

@dkfma4915 최종 Update 했습니다. fetch.js에 있는걸로 Front에 배치해주세요. fetch.js랑 router.js로 보면 됩니다. 이해 안되는 부분 있으면(사소한 거라도) Review comment 해주세요.

dkfma4915 commented 3 years ago

코드 배치 이런식으로 하는거 맞는지 봐줄 수 있어?! 중간에 코드 넘 길어져서 배치한 부분만 잘라온거! Sign up 버튼 누를 때 fetch되도록 했는데 맞는건가??

import React, { Component } from 'react';
import store from '../store';
import "./Component.css";

const jeonhaUrl = 'http://localhost:4000'

class SignUpContent extends Component {
    state = {
        ID:null,PW:null,PW_check:null,
        name:null,phoneNum:null,carNum1:null,carNum2:null,
        PW_state:store.getState().PW_state
    }
    constructor(props){
        super(props);
        store.subscribe(function () {
            this.setState({PW_state:store.getState().PW_state});           
        }.bind(this));
    }

    componentWillUnmount() {
        console.log('componentWillUnmount');
      }

    render() {

    const bodySignUp = JSON.stringify({
        userWebId: this.state.ID,
        userName: this.state.name,
        pw: this.state.PW,
        phoneNum: this.state.phoneNum,
        carId: this.state.carNum1
    });
      return (
        <div className="SignUp">
            <h2>JEoN-Ha 회원가입</h2>
            이름<br></br>
            <input type="text" name="name" placeholder="이름을 입력해주세요."
                size="30"
                name={this.state.name}
                onChange={function (e) {
                    this.setState({name:e.target.value});                    
                }.bind(this)}></input><br></br>
            ID<br></br>
            <input type="text" name="ID" placeholder="아이디를 입력해주세요."
                size="30"
                ID={this.state.ID}
                onChange={function (e) {
                    this.setState({ID:e.target.value});                    
                }.bind(this)}></input><br></br>
            Password<br></br>
            <input style={btnStyle}
                type="button" value="Sign up" onClick={function(){
                this.props.onClickSignUp(this.state.name,this.state.ID,
                this.state.PW_state,this.state.carNum1)
                fetch(jeonhaUrl + '/signUp', {
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: bodySignUp
                })
                    .then(res => {
                        if (res.status == 200) {
                            // 정상 작동
                            console.log('Success!');
                        } else if (res.status == 400) {
                            // 실패시
                            console.log('Failed!');
                        }
                        return res.json();
                    })
                    .then(data => {
                        // 아이디 중복, 패스워드 중복, 그 외 에러
                        const overlapId = data.id;
                        const overlapPw = data.pw;
                        const errorDB = data.db;

                        // 확인을 위한 console.log
                        // console.log(overlapId, overlapPw, errorDB);
                    })
                }.bind(this)}></input>
        </div>
      );
    }
  }

  export default SignUpContent;
kiJiyeon commented 3 years ago

예쓰 맞아!!!

dkfma4915 commented 3 years ago

예쓰 맞아!!!

  • ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ파일이름 똑같아서 container에 있는거에다가 붙여서 에러떴었어 ㅋㅋㅋㅋㅋㅋㅋㅋ@dkfma4915

오오 좋아 그럼 다른 것도 이런식으로 하면 되겠군!!!! 감사!!

dkfma4915 commented 3 years ago

질문이 생겼어!!

  1. order, paying 이 두가지가 왜 따로 있어??
    • front에 장바구니 창에서 결제하기누르기 = paying
    • front에 결제 창에서 결제하기 누르기 = order 이게 맞아?!
  2. 장바구니에 담은 메뉴 정보들을 불러오는 라우터 코드는 어떤거야? 내가 지금 못찾고 있는건가..
    • 결제 내역 불러오는 라우터 코드도 필요할 것 같아!
  3. getMenuData 라우터 코드에서 allMenuData 라는 변수에 리스트 형태로 모든 메뉴의 정보를 front에 보내주는게 맞는거지?
fora22 commented 3 years ago
  1. order, paying 이 두가지가 왜 따로 있어??
    • front에 장바구니 창에서 결제하기누르기 = paying
    • front에 결제 창에서 결제하기 누르기 = order 이게 맞아?!

order 은 front에서 '결제하기' 누른거고, paying은 결제 완료 상황을 고려한건데 중복된다 판단되면 합쳐도 괜찮을 것 같네!

의견바람!

fora22 commented 3 years ago
  1. 장바구니에 담은 메뉴 정보들을 불러오는 라우터 코드는 어떤거야? 내가 지금 못찾고 있는건가..
  • 결제 내역 불러오는 라우터 코드도 필요할 것 같아!

맞네, 장바구니 불러오는 것도 필요하겠다. 확인!

결제 내역은 사용자의 결제한거 전부? 아니면 방금 결제한 정보?

  1. getMenuData 라우터 코드에서 allMenuData 라는 변수에 리스트 형태로 모든 메뉴의 정보를 front에 보내주는게 맞는거지?

조금 정확히 말하자면 라우터에선 res(리스폰: 응답)에 menu라는 속성으로 모든 메뉴 정보를 보내주고, front에서 allMenuData 변수에 모든 메뉴 정보를 담는거야! 형태는 리스트 안에 객체 여러개가 있는 형태!

[{}, {}, {}, ...]

dkfma4915 commented 3 years ago
  1. order, paying 이 두가지가 왜 따로 있어??
  • front에 장바구니 창에서 결제하기누르기 = paying
  • front에 결제 창에서 결제하기 누르기 = order 이게 맞아?!

order 은 front에서 '결제하기' 누른거고, paying은 결제 완료 상황을 고려한건데 중복된다 판단되면 합쳐도 괜찮을 것 같네!

의견바람!

그럼 합치는게 더 좋을 것 같아!

dkfma4915 commented 3 years ago
  1. 장바구니에 담은 메뉴 정보들을 불러오는 라우터 코드는 어떤거야? 내가 지금 못찾고 있는건가..
  • 결제 내역 불러오는 라우터 코드도 필요할 것 같아!

맞네, 장바구니 불러오는 것도 필요하겠다. 확인!

결제 내역은 사용자의 결제한거 전부? 아니면 방금 결제한 정보?

결제했던 내역 전부!

fora22 commented 3 years ago

코드 배치 이런식으로 하는거 맞는지 봐줄 수 있어?! 중간에 코드 넘 길어져서 배치한 부분만 잘라온거! Sign up 버튼 누를 때 fetch되도록 했는데 맞는건가??

import React, { Component } from 'react';
import store from '../store';
import "./Component.css";

const jeonhaUrl = 'http://localhost:4000'

class SignUpContent extends Component {
    state = {
        ID:null,PW:null,PW_check:null,
        name:null,phoneNum:null,carNum1:null,carNum2:null,
        PW_state:store.getState().PW_state
    }
    constructor(props){
        super(props);
        store.subscribe(function () {
            this.setState({PW_state:store.getState().PW_state});           
        }.bind(this));
    }

    componentWillUnmount() {
        console.log('componentWillUnmount');
      }

    render() {

    const bodySignUp = JSON.stringify({
        userWebId: this.state.ID,
        userName: this.state.name,
        pw: this.state.PW,
        phoneNum: this.state.phoneNum,
        carId: this.state.carNum1
    });
      return (
        <div className="SignUp">
            <h2>JEoN-Ha 회원가입</h2>
            이름<br></br>
            <input type="text" name="name" placeholder="이름을 입력해주세요."
                size="30"
                name={this.state.name}
                onChange={function (e) {
                    this.setState({name:e.target.value});                    
                }.bind(this)}></input><br></br>
            ID<br></br>
            <input type="text" name="ID" placeholder="아이디를 입력해주세요."
                size="30"
                ID={this.state.ID}
                onChange={function (e) {
                    this.setState({ID:e.target.value});                    
                }.bind(this)}></input><br></br>
            Password<br></br>
            <input style={btnStyle}
                type="button" value="Sign up" onClick={function(){
                this.props.onClickSignUp(this.state.name,this.state.ID,
                this.state.PW_state,this.state.carNum1)
                fetch(jeonhaUrl + '/signUp', {
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: bodySignUp
                })
                    .then(res => {
                        if (res.status == 200) {
                            // 정상 작동
                            console.log('Success!');
                        } else if (res.status == 400) {
                            // 실패시
                            console.log('Failed!');
                        }
                        return res.json();
                    })
                    .then(data => {
                        // 아이디 중복, 패스워드 중복, 그 외 에러
                        const overlapId = data.id;
                        const overlapPw = data.pw;
                        const errorDB = data.db;

                        // 확인을 위한 console.log
                        // console.log(overlapId, overlapPw, errorDB);
                    })
                }.bind(this)}></input>
        </div>
      );
    }
  }

  export default SignUpContent;

그리고 fetch 이렇게 직접 넣는것 보단 함수 하나를 만들어서 parameter 로 body를 주고 return 값을 되돌려 받는게 이후에 수정이나 유지/보수에 좋을 것 같아! @dkfma4915

dkfma4915 commented 3 years ago

그리고 fetch 이렇게 직접 넣는것 보단 함수 하나를 만들어서 parameter 로 body를 주고 return 값을 되돌려 받는게 이후에 수정이나 유지/보수에 좋을 것 같아! @dkfma4915

오케이 확인!

fora22 commented 3 years ago

@dkfma4915 수정사항 반영했고 getOrder 추가했슴!!

order 와 paying은 합쳤고, order부터 밑에 있는 것들은 에러 유무에 관해서 true, false 를 좀 손봐서 다시 입력해야 함

즉 order 밑에 있는 api들은 지금 커밋한 내용으로 다시 붙여넣기 바람!!

dkfma4915 commented 3 years ago

질문

getBasket api 에서는 장바구니 내역을 담아오는 변수는 어떤것..?!

fora22 commented 3 years ago

질문

getBasket api 에서는 장바구니 내역을 담아오는 변수는 어떤것..?!

  • getOrder 에서는 orderHistory, getMenuData에서는 allMenuData에 각각 담아온다고 생각했는데 getBasket에서는 안보여서!

제일 중요한 게 안올라갔네 Update 했음!! 확인부탁!

앞으로 할 일!

서버 연결해서 동작 잘 되는지 확인해보기

updateFromBasket api를 제외하고 라우터 코드 배치는 다 했어! 그래서 front에 원하는대로 잘 뜨는지 확인해보고 싶은데 우리 다음 오프라인 미팅(3월 3일)때 해볼 수 있을까?! 그래야 수정할 부분이 생길 것 같음!

확인은 찬성인데 지금 지연이쪽에서 동시 실행(Front, Back) 성공 여부에 따라서 테스트 할 수 있는지 알 수 있을 것 같음!

@kiJiyeon 진행상황 알려주기 바람!!

kiJiyeon commented 3 years ago

image 일단은 getMenuData했을 때, success 출력됨! 웹소켓 오류 뜨는것만 해결하면될것같아 @fora22 @dkfma4915

dkfma4915 commented 3 years ago 
getBasketData = (_body) => {
        fetch(this.state.jeonhaUrl + '/getBasket', {
            method: "post",
            headers: {
                "Content-Type": "application/json"
            },
            body:_body,

        }).then(res => {
            if (res.status === 200) {
                // 정상 작동
                console.log('Success!');
            } else if (res.status === 400) {
                // 실패시
                console.log('Failed!');
            }
            return res.json();
        }).then(data => {
            const allBasket = data.basket;
            console.log(allBasket);
            const getMenuIsError = data.isError;
            const whatIsError = data.explainError;
            //this.state.basketData = allBasket;
            let _basketData = []
            for (let i = 0; i < allBasket.length; i++) {
            _basketData.push({
                id: allBasket[i].BasketId,
                nameKorea: allBasket[i].FoodNameKor, // 메뉴 이름 불러와야할 곳
                price: allBasket[i].Price, // 메뉴 가격 불러와야할 곳
                count: allBasket[i].BasketMenuCount
            })
            }
            this.setState({
            basketData: _basketData,
            isLoading: true
            })
            //this.state.basketData = 
            // 확인을 위한 console.log
            // if (getMenuIsError) {
            //     console.log(whatIsError);
            // }
        })
    }

장바구니 내역 불러오기 수정중인데, Baskettable에 있는 BasketMenuNo와 같은 menuboard의 FoodNameKor, Price를 어떻게 불러와??! 외래키..?로 연결되어있는건 아는데 router.js에서 수정해야하나해서 해보려다가 실패.. @fora22

fora22 commented 3 years ago 

 let _basketData = []
    for (let i = 0; i < allBasket.length; i++) {
    _basketData.push({
        id: allBasket[i].BasketId,
        nameKorea: allBasket[i].FoodNameKor, // 메뉴 이름 불러와야할 곳
        price: allBasket[i].Price, // 메뉴 가격 불러와야할 곳
        count: allBasket[i].BasketMenuCount
    })
    }

여기서 가져온거 아니야??

fora22 commented 3 years ago

내 생각엔 이 PR 은 닫고 새로 PR 올리는 것도 괜찮을 듯! (왜냐면 Router code 는 일단 완성됐는데 아직 수정할게 남았으니 Approve 가 안되기 때문에..!)

dkfma4915 commented 3 years ago

여기서 가져온거 아니야??

노노 그 Baskettable에는 메뉴이름하고 가격이 없잖아 menuboard에 있는 메뉴이름하고 가격을 가져와야하는데!!

dkfma4915 commented 3 years ago

내 생각엔 이 PR 은 닫고 새로 PR 올리는 것도 괜찮을 듯! (왜냐면 Router code 는 일단 완성됐는데 아직 수정할게 남았으니 Approve 가 안되기 때문에..!)

일단 Approve해놨고 이 얘기 다음부터는 새로 PR올릴게!

fora22 commented 3 years ago

여기서 가져온거 아니야??

노노 그 Baskettable에는 메뉴이름하고 가격이 없잖아 menuboard에 있는 메뉴이름하고 가격을 가져와야하는데!!

MenuNo가 있으니 그걸 sql Code 로 불러오면 되지

예를 들어 MenuNo가 1이면

select * from Menu where menuno = 1 이렇게!