flask 서버, ajax, mongoDB 이용해서 마이나이키 페이지 만들기
(사이트에 이용한 사진 출처 - 나이키 공식홈페이지)
📅 기간 : 2020.10.31 ~ 11.01
📖 상품 불러오기
home 한 페이지에 상품 전체를 보여준다.
이렇게 각 상품 카테고리 시작될때 <h1> 태그로 카테고리 나타내준다.
네비게이션 바의 상품 카테고리 누르면 각각 <h1> 태그 위치로 이동하도록 했다.
📌 서버
@app.route('/api/home', methods=['GET'])
def showHome():
shoes = list(db.shoes.find({}, {'_id': 0}))
jacket = list(db.clothes_jacket.find({}, {'_id': 0}))
hoodie = list(db.clothes_hood.find({}, {'_id': 0}))
pants = list(db.clothes_pants.find({}, {'_id': 0}))
top = list(db.clothes_top.find({}, {'_id': 0}))
equipment = list(db.equip.find({}, {'_id': 0}))
return jsonify({'result': 'success', 'shoes': shoes, 'jacket': jacket, 'hoodie': hoodie, 'pants': pants, 'top': top,
'equipment': equipment})상품 분류별로 보여줘야해서 분류별로 따로 받아왔다.
db에서 카테고리값을 주는 식으로 하면 컬렉션 하나로 만들 수 있었을듯
📌 클라이언트
function showProducts() {
$('.container').empty();
$.ajax({
type: 'GET',
url: '/api/home',
data: {},
success: function (response) {
if (response['result'] === 'success') {
let shoes = response['shoes'];
let temp_shoes = `<h2><a id="Shoes">Shoes</a></h2>
<div class="card-columns Shoes">`;
$('.container').append(temp_shoes);
for (let i = 0; i < shoes.length; i++) {
let name = shoes[i]['name'];
let img = shoes[i]['img'];
let price = shoes[i]['price'];
let url = shoes[i]['url'];
makeCard(name, img, price, url, `Shoes`);
}상품을 한 화면에 다 보여주는데 각 카테고리 위에 h1 태그 만들어주기 위해
카테고리마다 temp_xxxx 추가해서 카드 만들기 전에 추가해줬다.
카테고리 6개를 만드려니 코드가 엄청 지저분해졌는데 카테고리도 변수로 받아서 for문 돌렸으면 훨씬 간단했을 것 같다. 그 부분이 계속 아쉽다😭
📌 기억에 남는 것
부트스트랩 card-columns 사용했더니 내용물 크기에 따라 카드 높낮이가 들쭉날쭉해지는 참사 발생😱
card 사용 예제를 찾아봤는데 다들 반듯반듯.. 나만.. 못하는건가.......
찾아보니 max-height를 주고, overflow: auto; 하면 내용물 넘치는 경우에만 스크롤이 생긴다고 한다.
근데 스크롤이 너무 안예뻐서 찾아보니
.card::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera*/
}크롬 , 사파리, 오페라 브라우저에서는 위의 코드로 스크롤바를 안보이게 할 수 있었다.
나의 집착이 결국 반듯반듯한 카드들을 만들었다.😁
저 들쭉날쭉한게 아침에 눈뜨자마자 생각날 정도로 눈앞에 계속 아른거렸다.
프론트엔 되게 너그러운 편이라고 생각했는데 전혀 아닌듯하다.
📖 카트 불러오기
카트는 카트 페이지를 따로 만들었다.
layout은 index.html과 같으니까 flask의 템플릿 기능을 사용하면 된다.
만들 당시엔 몰라서 그냥 복붙했는데 다음엔 템플릿 써보기!
카트 불러오는 것은 홈 화면에서 전체 상품 불러오는 것과 같다.
불러오는 collection만 다르다.
📖 카트에 저장, 삭제하기
📌 저장
전체 상품 화면에서 장바구니 버튼이 눌린 상품의 이름을 전달한다.
별도의 변수 만들지 않고, card 만들 당시 버튼 onclick에 설정해준 함수의 인자를 템플릿 리터럴을 이용해 상품 이름으로 작성했다.
상품이름 받아서 all에서 찾아 cart collection에 insert_one
📌 삭제
카트 페이지에서 삭제 버튼 눌린 상품의 이름을 전달한다.
삭제도 템플릿 리터럴 이용해 작성했다.
상품이름 받아서 cart에서 delete_one
📖 검색하기, 불러오기
검색에서 제일 많이 힘들었다.
검색어를 상품명에 포함하고 있는 애들을 찾아 걔들만 보여주면되는데,
서버에선 상품명에 포함하고 있는 애들 찾기, 클라이언트에선 걔들만 보여주기 이거 둘다 로직이 도무지 떠오르지 않았다.
find로는 이름이 완전 일치하는 것만 해봐서 포함의 경우 어떻게 해야할지, 찾아보니 정규표현식을 사용한다고하는데 정규표현식안에 변수를 넣으니 또 에러가 났다😱
또 검색까지는 구현 성공했는데, 걔네만 보여주려하니 페이지가 자꾸 새로고침되면서 전체 상품보여주는 함수가 호출되버리는게 문제..
계속 고생하다가 결국 문제점을 찾아서 고쳤다.😁
코드 틀은 다 똑같으니 기억에 남는 부분만 작성해야겠다.
📌 서버
db.search.drop()
name = request.form['name_give']
temp = list(db.all.find({}, {'_id': 0}))
for one in temp:
if name in one['name']:
db.search.insert_one(one)문제의 검색 api...
검색어(name)을 받아서 저걸 find에 정규표현식으로 넣었더니 변수라 그런지 계속 에러가 났다. 그래서 결국은 for문으로 하나씩 확인하는 걸로..
전체 상품 받아와서 이름에 검색어를 포함하고 있으면 검색결과 collection에 넣어준다.
그리고 함수 호출될 때, 맨처음에 검색결과 collection 비워준다.
📌 클라이언트
검색결과로 나온 collection으로 카드 만들어서 보여주려했는데,
index.html에 구현하니 페이지가 자동으로 새로고침되면서
$(fucntion(){});에서 호출하는 전체상품보여주기 함수가 실행되버림..
페이지를 따로 만들어야겠다 싶어서 search.html 만들고 거기서 cart 처럼 따로 만들었는데 이것도 계속 머리에서 떠나지 않아 괴로웠다.
그래도 그냥 둬야지 .. 했는데 다른 거 찾아보다가
form 태그는 가급적 div 태그로 바꿔라. form안의 버튼은 눌렀을때 기본적으로 페이지가 새로고침되어 다른 기능과 문제를 유발할 수 있다.
라는 글을 봤다.
그랬다ㅠㅠㅠㅠㅠㅠㅠㅠ 검색창이 form 태그 안에 input, button으로 구성되어있고 이 button놈이 문제를 일으킨거였다ㅠㅠㅠㅠㅠ
이 글 보자마자 바로 form을 div로 바꾸고 실행해보니 새로고침이 안되더라
진짜 짜릿 그자체......
바로 search.html 삭제해버리고 index.html로 병합했다.
역시 계속 생각하고 찾아보다보면 해결이 된다😎
백팩을 검색하면 페이지 새로고침없이 이렇게 예쁘게 나온다ㅎㅎㅎㅎㅎㅎㅎㅎㅎ
없으면 없다고도 알려준다ㅎㅎㅎㅎ
검색어를 입력하고 검색하기 버튼을 누르면 검색을 수행하는 함수가 실행되고, 검색이 성공하면 검색결과를 보여주는 함수가 실행되도록 구현했다.
🖐🏻 후기
어제는 만들어놓고 아쉬운 점이 너무 많았다.
1. db를 하나로 만들지 않고 다 따로 만들어서 코드를 지저분하게 한것
2. 카드가 들쭉날쭉한 것
3. 검색 페이지가 따로 있는 것 (다른 사람은 잘 못느끼겠지만 나는 정말 마음이 불편했다😔)
이렇게 아쉬웠는데 글쓰고나서도 계속 생각하다보니 2,3번은 해결됐다.
프로그래밍은 안되는 부분 계속 파다보면 결국은 된다. 너무 좋다😍
1번은 이번 페이지에서는 그냥 두고, 다음 프로젝트만들때 적용해봐야겠다.
최대한 깨끗한 코드를 목표로!
