[Chapter 1] 웹개발 미니 프로젝트(W1) - 매일점심 2일차

오늘은 각자 만든 기능들을 합쳤다!

그 과정에서 오류 오류 또 오류를 겪으면서 1차 멘탈붕괴가 왔고

중간 멘토링을 받았는데 멘토링 내용에 따라 조금 수정을 하면서 2차 멘탈붕괴가 왔고

마지막으로 과제 필수 조건중 하나인 jinja2를 적용하면서 강의를 봤는데도 이해가 안되는 그 막막함에 3차 멘탈붕괴가 왔다.

 

그래도 조원들과 하나씩 트러블들을 해결해나가면서 해결될때마다 해결하면서 쌓인 스트레스가 한방에 날라갈만큼 엄청난 카타르시스가 있었다!!!! 이게 개발의 즐거움이구나하고 또 느꼈다

---

중간 멘토링

좋아요 기능, 로그인 유지, 유저에게 권한부여, 유저가 사진을 직접 업로드한 기능을 빼고 프로젝트 완성에 더 포커싱을 하라는 조언을 들었다. 유저가 사진 업로드하는 부분은 상세페이지 제작을 맡으신 조원분이 열심히 찾아보셨었는데 멘토님이 하시는 말씀으로는 이 기능을 구현하려면 AWS의 기능에 대해 더 공부해야한다고 했다. 프로젝트 기간이 4일도 채 안되다보니 조언대로 해당 기능들은 빼고 대신 유저가 이미지 주소를 입력하게끔 바꾸기로 하였다.

 

---

오늘 구현한 기능

메인페이지, 상세페이지, 로그인페이지, 모달페이지 각각 개발한 것 하나로 붙이기 

trouble / solution
1. 메인페이지에 로그인페이지를 붙였는데 로그인페이지만 정상적으로 작동하고 메인페이지나 상세페이지로 이동하면 404에러가 났다
404에러는 서버에러라고 알고있어서 app.py 파일을 열심히 봤는데 

app = Flask(__name__)
app.config["TEMPLATES_AUTO_RELOAD"] = True
# app.config['UPLOAD_FOLDER'] = "./static/profile_pics"​

이 부분이 두번 선언되어 있었다. 나머지 하나를 지우니까 정상작동!

2. 글쓰기 버튼을 누르고 들어가면 바로 작성이 완료되었습니다라는 alert가 나왔다.
detail.html의 맨위에 선언되었던 

$(document).ready(function() {
            saveDetail();
        });

 을 없애주니까 정상작동 되었다.

alert가 saveDetail function안에 들어있는데 saveDetail을 상세페이지 불러오자마자 한번 실행하게끔 되어있어서 바로 알람이 뜨고 공데이터가 저장되는 것이였다.

3. 상세페이지에서 유저가 데이터를 공백으로 두고 저장해도 저장되었다.

            if (title == "" || content == "" || category == "--카테고리를 선택하세요--") {
                alert("내용을 전부 입력해주세요")
            } else { ...

위와 같이 조건문으로 입력칸중 하나라도 공백일때에 알람을 띄우고 데이터를 저장하지 않게끔 하였다

jinja2를 사용하여 상세페이지에서 받아온 데이터를 메인페이지에 넣어주기

trouble / solution
정말 아예 구조부터 모르겠던게 trouble이였다.
강의를 속성으로 들었지만 우리 프로젝트에 어디서부터 어떻게 적용해야될지 도무지 모르겠어서 조원 다같이 멘탈이 탈탈털리고 힘이빠진채로 각자 방법을 공부해오기로 하고 잠시 휴식을 가졌다.
슬픈 마음으로 눈에 들어오지도 않는 jinja2 공식 문서를 들여다보고있는데 조원분들중 한분이 적용에 성공했다고 하셔서 다시 다들 컴퓨터 앞으로 후다닥 모였다.
어디를 어떻게 바꾸시고 넣으셨는지 설명을 들었고 따라해서 리스트에 담는 것 까지 되긴됐는데 아직 원리나 원하는 데이터만 뽑아오는것은 잘 모르시겠다고 하셨지만, 그래도 아예 시작도 못하고 있는 우리에게 엄청나게 커다란 진척이였다. 
성공한 파일을 받아서 뜯어보고 물어보고 해서 api에서 DB에서 찾아온 정보를 return 할 때 details라는 변수에 담은 다음 그 변수를 index.html에서 받아서 쓰는 것이구나!라는것을 깨달았고

@app.route('/')
def home():
    token_receive = request.cookies.get('mytoken')
    try:
        payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
        # 1. DB에서 detail 정보 모두 가져오기
        details = list(db.dbsparta.find({}, {'_id': False}))
        # 2. 성공 여부 & detail 목록 반환하기
        
        return render_template('index.html', details=details)​

바로 카드의 title 부분에 적용시켜보았는데 성공적으로 데이터베이스의 내용이 카드에 담겼다!!!

<h4>{{ details[1]['title'] }}</h4>​

---

오늘까지의 결과물

https://github.com/spartaGroup4/pracDailylunch4