사이트 : http://act99.shop/
깃헙 : https://github.com/YJ-my/sparta-w1-tastyseoul
실행영상 : https://www.youtube.com/watch?v=nFsTWzaaYOA

프로젝트 필수 조건

• Jinja2 템플릿 엔진을 이용한 서버사이드 렌더링 (어떤 장점이 있을까?)
• JWT 인증 방식으로 로그인 구현하기 (쿠키/세션 방식에 비해 어떤 장점이 있을까?)

내가 구현한 것

• 메인화면 레이아웃 구성
• 메인화면 css 일부
• 검색기능

검색기능 코드

        function filter() {
            let search = document.getElementById("input-post").value.toLowerCase();
            let card = document.getElementsByClassName("card");

          
            for (let i = 0; i < card.length; i++) {
                cardtitle = card[i].getElementsByClassName("card-title");
                cardtext = card[i].getElementsByClassName("card-text");
              
              /*만약 cardtitle값(식당이름)과 cardtext값(식당위치)이 
              검색창에 입력한 값과 일치하는게 있으면 화면을 보이고 아니면 화면에서 숨겨라*/
                if (cardtitle[0].innerHTML.toLowerCase().indexOf(search) != -1 ||
                    cardtext[0].innerHTML.toLowerCase().indexOf(search) != -1
                ) {
                    card[i].style.display = ""
                } else {
                    card[i].style.display = "none"
                }
            }
        }

indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환함. 일치하는 값이 없으면 -1을 반환함.

오류해결

bootstrap에서 가져온 게시물카드가 계속 세로로만 생기고
줄바꿈이 안돼서 고민이였는데 다른 조 트러블 슈팅을 구경하다가 나와 같은 고민을 했던 사람이 있다는걸 알았다.

1. 카드가 가로로 끊임없이 붙여짐(줄바뀜 안됨)

• 부모 자식태그를 설정해주고 부모div에 position값을 relative로 주고 width 설정 후
  자식 div에 display값을 inline-block을 주니까 해결되었다

그 외 우리조가 겪었었던 문제

• jwt decode error:
  해결 : pyjwt 2.0 이상부턴 버전패치로 인코드 시 자동으로 string 전환 / decode('utf-8') 삭제

• css stack 문제 (아이템 stack 상단 하단 문제) :
  해결: z-index로 해결

• git branch pull 사용시 크러쉬 문제:
  해결: develp branch 만든 후 풀 요청으로 종합

• python 라이브러리 정상작동 x
  해결: app.py 코드 오른쪽 버튼 누른 후 run (가상환경으로 실행) / 폴더자체에서 실행x

• git clone 시 DB 에러
  해결: 코딩 과정에서 DB가 변화했기 때문에 mongoDB에 있는 DB 삭제 후 다시 실행

• jwt 실행되지 않음
  해결 : pyjwt 설치 / 재설치

• 상세 페이지 내용 변경 후 뒤로가기 눌렀을 때, DB 정보는 변했으나, 새로고침 하기 전까지
  변한 정보가 렌더링 되지 않음
  
  해결 : 강제 리로드
  window.onpageshow = function (event) {
  if (event.persisted) {
  document.location.reload();
  }
  };

TIP

LottleFiles

https://lottiefiles.com/
조원 덕분에 새롭게 알게된 사이트인데 애니메이션 효과를 가져 올 수 있는 사이트다.
다만 배경이 투명이 아닌것도 있어서 잘 골라서 써야한다.
그리고 html에서 작성해서 쓰는 방법이랑 파일을 다운로드 받아서 쓰는 방법이 있는데 파일을 다운로드 받아서 사용하는게 좋음 => 왜냐면 html방법으로 쓰면 가끔씩 버벅거릴 때가 있음

브런치 이름은 기능별로!

팀원들과 협업 할 때, 각자 이름으로 브런치를 만들었는데 이름이 아니라 기능별로 지어서 만드는게 좋다고 하셨다.

method별로 브라우저와의 관계, 기능을 잘 아는게 중요해서 이것을 복습하는것이 중요

이슈에 해결한 문제점, 겪었던 문제점을 적는게 중요!

github에 앞으로 트러블 슈팅을 할 때 마다 이슈칸에 적어두는게 좋다고 하셨다.

아쉬운점

• 백엔드쪽은 손도 못댔음
  백엔드쪽에선 아무것도 구현해내지 못했다.
  4주차 강의를 2배속으로 빠르게 훑어보면 잘 하실 수 있을거라고 팀원분이 그러셔서 강의를 봤는데도 솔직히 이해가 잘 안갔다.
  코드리뷰할때도 팀원분들이 되게 열심히 설명해주셨는데 솔직히 이해가 안가는게 반 이상이였다......
  난 아직도 jinja2를 어떻게 쓰는지 잘 모르고 JWT 인증 방식으로 로그인을 어떻게 구현하는지 모른다....

=> 프로젝트 끝나고 강의를 다시 찬찬히 들으면서 보충중이다.

• GIT 사용법 미숙
  협업하면서 git, github를 제대로 써보게됐는데 너무 어려웠다..
  얘때문에 프로젝트 첫날에 진도를 못나가서 애먹었다.
  git강의도 날잡고 제대로 들어야겠다고 생각했다.

• 모바일 반응형으로 제작됐지만 모바일 반응형이 아님
  막상 모바일로 들어가면 이상하게 나온다.
  홍철없는 홍철팀이 돼버렸다.

• 검색기능이 완벽하지 않음
  예를들어 마포구 서교동에 있는 맛집을 알고싶어서 서교동이라고 치면,
  가게 위치가 서교라고 적혀져 있는 게시글이 안뜨고 '서교동' 세글자 다 적혀있어야 게시글이 뜬다.
  좀 더 완벽하게 만들고 싶었는데 나의 실력 한계로 구현하지 못했다.