07/28(수) 대학생 스파르타 코딩 불꽃반_백엔드 짜기

1. DB 에 open api 정보저장

처음엔 그래도, 페이지 업로드 할때마다, api정보를 새로 가져오는 것으로 도전을 해보려 했으나 실제로

만들어보니 로딩 시간이 너무 오래걸리는 현상 발생. 그래서 아쉽지만, 내 코딩의 수월성을 위해, 우선적으로 db에 저장해두고, 그 데이터를 가져다 쓰는 것으로 하기로 바꿨다.

json 형태로 가져와서 , 값들 다 지정해줘서 for문 돌려서 db에 저장

그래도, 그 페이지 업로드 할때마다 혹은 백엔드 개발자가 원할떄, 혹은 시간주기별로 디비 업데이트 할려면 어떻게 해야할지를 대강은 알게 됐다. db 리무브 하는 것 넣고, app.py 랑 index.html에도 db 업데이트용 api 만들고 등등

2. 웹 기획서엔 안써놨던 첫번째 구현기능( 구선택, 시설 유형 선택 에서 선택지 업데이트 하기)

 

셀렉트 박스에 들어갈 선택지를 디비로 부터 가져와야 했다. 서울에 있는 모든 구가 다 시설이 있는게 아니고 경기도 도 있었기에! 

그래서 디비에 있는 것중에, 중복되지 않은 값만 가져오는 거 어렵게 찾았다. 더 쉬운 방법이 있는데 서치엔 어려운 것들만 나오더라구..ㅎ? distinct 통해서 해결, 

 

백엔드 코드

@app.route('/name', methods=['GET'])
def nameupdate():
areanm = db.phylist.distinct("areanm")
minclassnm = db.phylist.distinct("minclassnm")
return jsonify({'result': 'success', 'areanm': areanm, 'minclassnm':minclassnm})

 

프론트

for문을 두개 만들어서, 각각의 셀렉트 박스에 어펜드 하기!  temp_html을 뭘로잡아야 하나 헷갈렸는데 그래도 잘 잡아 나갔고,  option value 값도 for문에 따라 계속 변경하게 만들어준게 잘한짓인듯! 좀 더 타인이 보기에 완성도 있어보이는? 

 

3. 조건에 맞는 검색결과 띄우기

백엔드: 프론트에서 보내준 검색조건에 부합하는 데이터들을 db에서 뽑아서 좋아요 역순으로 정렬한뒤 프론트에 보내주기!

 

백엔드 짤때 어려웠던 지점은 저 내림차순 정렬하는 것과, 앤드 조건 만드는 것!

 

앤드 조건 만드는 것도 구글링에서 어렵게 찾다가 and쿼리도 보고 했는데, 알고보니 그냥 두게 나열하면 된다는 것 알게 되었고, 

data 변수 자체가 dict로 받아져서 이전에 썼던것처럼 발로 sort를 못 붙인다는 거 알고, 

리스트안 딕트였나를 정렬하는거 찾다가 저 람다 이용하는 방법 알게 됐지. 그리고 -붙이면 내림차순으로 된다는 것.!

람다는 예전에 써봐서 확실한 원리가 기억이 나진 않는데 뭐, 해결했으면 됐지!

프론트엔드:

1) 함수 인자를 어떻게 불러올것인가에 대한 고민( areanm, minclassnm)

셀렉트 박스 에서 선택된 값을 불러오는 걸 구글링 통해 찾음. 근데 val로 했더니 계속 안되어서, 대체 뭘받아오길래 하면서 시간을 길게 끌었다. 결국에 val로 하면 내가 지정해준 숫자가 나온다는 거 알게 됐고, .text로 변경 했다. 

완벽하게 짜기전에 console.log등으로 대체 뭘 받아오는지 확인 필요하다는 것 알게됨.

2) cards box empty의 위치?

아예 버튼 누르자 마자, post 이런요청 하기도 전에, empty가 될 필요성이 있따고 느꼈다. 

3)physical 받아왔을때 if/else 문 할때 빈 배열일 경우 를 어떻게 타이핑 해야하는지

처음에 그냥 파이썬 처럼 생각하고 ==[] 했는데 안되길래 이 방법 말고 구글링을 했떠니 저런방법이 있길래,

자바스크립트에서 배열 처리하는 거

4) 리로드 할필요가 없다. samesite 쿠키문제

리로드를 맨 마지막에 넣었더니, 계속 안됐다. 콘솔창엔 samesite관련 문제가 뜨길래 그것때문인줄 알고 엄청 구글링했네. 덕분에 크롬에서의 쿠키 관련 여러 문제, 한 사이트에서 다른 사이트로 이동할떄의 문제 등에 대해서 알게됨.

근데 단순히 생각하면, 리로드 하면 다시 초기 화면으로 돌아가니까 안되는 거였다는 거...

 

 

 

4. 좋아요 기능

백엔드: 백엔드는 기존 무비스타와 유사

 

프론트 엔드:

리로드를 마지막에 넣어버리면, 내가 보고있던 송파구 풋살장이 아닌 첫페이지로 가버리는 문제

좋아요 누른후 알러트 뜨고, 내가 원래 보고 있던 페이지가 리로드 되려면, 저렇게 함수 호출을 하면 됨(조건 검색 함수)

 

5. 앞으로 남은 구현, 미해결 부분

0) 첫페이지 너무 횡한가(전체 중 좋아요수 top 9 보여주기)(했다.)

1) if 문 써가지고, 특정조건 선택 안한경우 처리하는 거! 백엔드에서 받아야함.

둘다 안했을 경우에꺼도 만들기

1) 카드 배치 횡으로 못하나

2) (욕심 낸다면) 리뷰 쓰고 디비에 저장 하기

리뷰쓰는 페이지, 보는 페이지 같이 해버리면

리뷰버튼 누르면 아예 새로운 페이지 나와야하고, 빈 html 파일인데 그게 또 백엔드랑 소통하면서 onclick된 대상의 제목값을 백에 넘겨서 백이 또 그 빈 html에 리뷰데이터 다시 보내줘야하네

 

따로 하면

리뷰쓰고 디비에 저장은 팝업띄워서 해야하고

리뷰보는페이지도 결국 위랑 똑같네. 

결국에 팝업 만들바에 새페이지 하나 만드는게 낫겠다.

빈 ㅗhtml에 리뷰 쓰는 칸 가져오고( 예전에 만든 그걸로) 

2) aws 연결