아고라에 올리려고 확인버튼 직전까지 작성한 내용
--------------- 여기서부터 복사하세요 ---------------
운영 체제: 예) macOS
노드 버전(node -v): v15.14.0
현재 어떤 스프린트를 진행 중이고, 어떤 문제에 부딪혔나요?
섹션3_관계형데이터베이스_im-sprint-cmarket-database 스프린트 중
서버/ 모델 / index.js 코드를 작성하고
테스트 통과 후,
잘 되었는지 확인하고자 클라이언트를 실행시키고
상품을 몇개 담은 뒤, 주문하기 버튼을 누르거나 주문 내역을 클릭해보면
아래 사진과 같은 에러가 납니다
안 되는 부분을 해결하기 위해서 구체적으로 어떤 노력을 했나요?
- 1 우선 에러가 slice 할 게 undefined라고 해서,
서버에서 제가 잘못된 형태로 데이터를 보내나 싶어서 직접 브라우저에localhost:4000/users/1/orders처서 나오는 형태도 확인해보고
- 2 서버를 끊고 다시 연결해보기도 하고, mysql에서 직접 테이블에 레코드들이 잘 찍히는지 확인도 해보고, (클라에서 주문한 데로 레코드는 잘 들어간 것 같아요)
-3 마지막으로 레퍼런스코드와 직접 비교해가면서 최대한 레퍼런스 코드와 비슷하게 수정도 해보았습니다
사실 제 코드를 아예 싹 주석처리하고 레퍼런스 코드를 붙여넣기 하고 실행하면 주문내역이 잘 나옵니다 😅😭
(그래서 창두개 띄워놓고 레퍼런스코드랑 제 코드랑 훑어가면서 레퍼런스와 다른 부분을 고쳐보기도 했습니다
하지만 여전히 제 코드로 실행하면 같은 에러가 뜹니다)
어떠한 부분에서 이해가 안 되었나요?
도저히 어디서 차이가 나서 저런 에러가 뜨는건지 원인을 모르겠네요.. 너무 궁금합니다ㅠㅠ
에러 코드를 붙여넣기 해 주세요.
에러가 출력된 곳에서, 이유라고 생각하는 부분을 열 줄 이내로 붙여넣기 해 주세요. (잘 모르겠으면 에러라고 생각하는 곳을 넣어주세요)
//models/index.js 파일입니다
const db = require("../db");
module.exports = {
orders: {
get: (userId, callback) => {
// TODO: 해당 유저가 작성한 모든 주문을 가져오는 함수를 작성하세요
// users/:userId/orders GET요청
// 해당 유저아이디의 모든 주문을 db에서 가져와서, callback (result) 해줌
// id, image, name, order_quantity, price, total_price 컬럼 순서
const query = `SELECT o.id, o.created_At, o.total_price, i.name, i.price, i.image, oi.order_quantity
FROM orders AS o
INNER JOIN order_items AS oi ON o.id = oi.order_id
INNER JOIN items As i ON oi.item_id = i.id
WHERE (o.user_id = ?)`;
const params = [userId];
db.query(query, params, (err, result) => {
//console.log(result)
callback(err, result);
});
},
post: (userId, orders, totalPrice, callback) => {
// TODO: 해당 유저의 주문 요청을 데이터베이스에 생성하는 함수를 작성하세요
// users/:userID/orders/new -> 클라이언트 post 요청
// orders 테이블을 채워줌 -> 생성된 orders.id 이용해서, 다시 쿼리로 order_items.order_id 를 앞에 id 값 이용해서 채워줌
const firstQuery = `INSERT INTO orders (user_id, total_price) VALUES (?, ?)`;
const params = [userId, totalPrice];
db.query(firstQuery, params, (err, result) => {
if (result) {
const secondQuery = `INSERT INTO order_items (order_id, item_id, order_quantity) VALUES ?`; // id, order_id(insertID), item_id, order_quantity
const params = orders.map((obj) => [
result.insertId,
obj.itemId,
obj.quantity,
]);
return db.query(secondQuery, [params], (err, result) => {
callback(err, result);
});
}
callback(err, null);
});
},
},
items: {
get: (callback) => {
// TODO: Cmarket의 모든 상품을 가져오는 함수를 작성하세요
// db 모든상품을 mysql 모듈을 써서, 결과로 보내줘야됨.
// callback(err, result);
const query = "SELECT * FROM items";
db.query(query, (err, result) => {
callback(err, result);
});
},
},
};
검색했던 링크가 있다면 첨부해 주세요.
리액트 에러코드 자체를 복붙 검색해보기도 했습니다만,
레퍼런스 코드로 잘 작동이 되는 걸 보면 저의 코드 안에 문제가 있다는 것 같아서, 찾아본 결과들은 해당사항은 없는 것 같아요ㅠ;;;
https://twittercommunity.com/t/cannot-read-property-slice-of-undefined-error-when-trying-to-embed-timeline/157402
도대체 어디가 잘못된걸까요? @_@ 눈알빠져라 찾아봤는데...도저히 모르겠네요ㅠㅠㅠㅠ
도와주세요~😭🙏
올리기 전에 한번만 더 확인해야지 하고 POST: 쪽 sql 쿼리문을 다시 살펴봄
비교하기 위해 변수에 레퍼런스 코드를 넣고 db.query()에 각각 넣어서 실행해봄
get: (userId, callback) => {
const query = `SELECT o.id, o.created_at, o.total_price, i.name, i.price, i.image, oi.order_quantity
FROM orders AS o
INNER JOIN order_items AS oi ON o.id = oi.order_id
INNER JOIN items As i ON i.id = oi.item_id
WHERE (o.user_id = ?)`;
const referQuery = `SELECT orders.id, orders.created_at, orders.total_price, items.name, items.price, items.image, order_items.order_quantity
FROM items
INNER JOIN order_items ON (order_items.item_id = items.id)
INNER JOIN orders ON (orders.id = order_items.order_id)
WHERE (orders.user_id = ?)`;
const params = [userId];
db.query(query, params, (err, result) => {
//console.log(result)
callback(err, result);
});처음에는 테이블 조인 순서가 다르나 싶었으나,
아무리 생각해도, 어차피 이너조인인데 테이블 합치는 순서가 뭔 상관? 하고
mysql에 각 쿼리를 직접 쳐봄
아니 둘다 값이 똑같은데 왜 내 것(위)만 에러가 나는겨 하고 쳐다보다가,(즉 이너조인 순서는 상관없음, 레코드가 같으니까)
으아닛!!!!!!!! 유일하게 다른점?!
찾았는가?!!!! 그렇다면, 당신은 매의눈! 몽골의후예, 슈퍼컴퓨터..ㅠ
내건
created_At
레퍼코드는created_at
🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯 이걸로 몇시간을 ㅎㅎㅎㅎ
mysql은 대소문자를 구분하지 않지만, 클라이언트 node는 아니란다^^ 하하하하하
SELECT 테이블이름-당신이 화면에 보여주고 싶은 그 어떠한 형태 FROM 테이블
db.query()의 결과값 result도 고대로 내가 넣은 컬럼명을 사용해서 클라이언트에 보내주게 된다
결론
단 저 한 글자 대소문자의 차이로 에러가 나고
그 에러원인을 찾으려고 몇시간을 생쇼한걸 생각해보니,
실제 현업에서 몇천줄의 코드에서 이보다 더 한 경우가 얼마나 많을까 싶...
이래서 프로젝트 할 때 백엔드/프론트엔드 협업, 스키마 공유, 응답/요청 형태 맞추는게
엄~~~~청 매우 아주 중요하겠구나 하는 교훈을 얻었다...ㅎㅎ
어쨌든 아고라 안올리고 마지막에 인내를 발휘하여 한번더 후벼파서
내스스로 에러 원인 찾아낸거는 뿌듯하다..허허 하지만 정말 허무한 이유다 ㅠㅠ
클라이언트 사이드가 내가 작성한게 아니라 이미 있는 코드라 정확히 인지 하지 못했기 때문일까? (하지만 과연 모든 코드를 내가 100프로 작성할 일이 얼마나 있겠는가...남이 쓴 코드에서도 요런 원인을 잘 찾아내는게 실력이겠지...ㅠ)
