1주차 풀스택 미니 프로젝트 회고

영상 보여주기 순서팀 번호: 4
제목: 어쩔쓰레기
설명: 가전제품, 생활용품, 식품 등 일상생활에서 많이 사용하는 아이템들별로 각각 다른 분리수거 방법이 있다는 것을 유저들에게 공유하고 댓글을 달며 소통하는 정보형 플랫폼
영상: https://youtu.be/XKqAiiOFBBU

 

1일차, 굉장히 순조로웠던 하루.

 

우선 기획회의가 금방 끝났다. 아이템 선정이 빨랐기 때문인데, 예전부터 생각했던 나의 아이디어가 채택되었다. 아이디어는 상품별 재활용 분리수거 방법을 알려주는 페이지를 만들면 좋겠다는 것이었다. 내가 생각해도 만들어보기 좋은 아이디이어일 것 같아서, 전날 자료를 찾아봤다. 나와 같은 생각을 했던 사람이 책을 냈길래(쓰레기 사전), 알라딘 중고서점에 가서 책을 구매했다. 맞다, 하루 전인 5/8에 책을 샀다. 그리고 5/9에 회의를 하는데 정말로 이 아이디어가 좋다는 의견이 모였고, 검색을 하다 비슷한 사이트가 있다는 사실도 알게 되었다. '쓰레기 백과사전' 아무튼 우리는 연습을 하는 것이고, 상업적인 이용은 하지 않을 것이며, 도메인은 곧 사라질 예정이어서 만들어보기로 했다. 우리는 게더타운의 보드를 이용해 페이지 템플릿을 그린 후 역할을 나누고 만들기 시작했다. 

 

한 일: 프로젝트 기획 회의

         상세페이지 골격 만들기(HTML, CSS 이용해서)

         웹개발 플러스 강의를 날려 들음.

 

2일차, 멘붕 

 

일단 강의를 들으며 robo3T로 mongoDB가 연결이 안 되는 문제가 있었다. 터미널에서 파일 깔았다 지우고 깔았다 등 난리를 쳤는데도 실패... 시간을 한참 허비하다가 웹개발 종합반 사전 강의에서 배운 방식을 적용하면 된다길래(다른 방식일 뿐이라고) 연결 포기. . 

 

한 일: 삽질.

          웹개발 플러스 강의를 이어서 날려 들음. (다시 들어야 하는데 ㅠ_ㅜ)

          상세페이지에 app.py와 자바스크립트로 데이터 넣고 가져오는 것을 만듦.

공부: https://writingcode.tistory.com/12

[항해99] 웹개발 플러스 2주차 (작성중)

3일차, 오전에는 괜찮았는데, 오후에 다시 삽질

한 일: 아침에는 데이터 저장 페이지를 따로 만듦

        또 삽질. 페이지/num 구현 대실패

        웹개발 플러스 강의 조금 (2주차 , 4주차 강의는 거의 다 듣는데 성공했으나 날려들음)

 

공부: bulma

https://writingcode.tistory.com/14

[항해99] 웹개발 플러스 4주차 (작성중)

 

4일차, 과제 제출. 오늘 저녁 식사는 여유롭게.

프로젝트 제출하고, 개인 공부를 했던 것 같은데, 일요일이 되어서 작성하다 보니 뭘 했는지 기억이 안 난다

 

한 일 : [진자 html 변환 문제] 오류를 해결! 프로젝트 무사히 제출. 저녁엔 개인 공부 조금.

 

결과물 영상 보여주기 순서 회의 ↓

영상 보여주기 순서

 

1. 홈페이지 들어가기
2. 메인 보여주기
3. 하나 클릭해서 상세페이지 이동
4. 상세페이지에서 댓글 불가 공지 확인
5. 로고 눌러서 메인페이지 이동
6. 로그인/회원가입 클릭해서 로그인 페이지 이동
7. 회원가입하기
8. 회원가입 페이지에서 1) 1글자 입력 후 중복확인 (안되는 확인하고) 2) 아이디, 패스워드, 패스워드 재입력 입력 후 가입하기 누르면(중복확인 안됨 메시지 받고) 3) 중복확인 후 회원가입하기
9. 로그인 하기
10. 메인페이지에서 상세페이지 이동
11. 댓글 달기 
12. 좋아요 누르기 
13. 좋아요 다시 누르기(취소 확인)
14. 로그아웃

 

풀스택 회고 : 조원들이 다 좋았다. 잘하는 분도 계셔서 도움을 많이 받았다. 좌절하고 실패하는 법을 배웠다.    

 

프로젝트 진행 과정

와이어프레임 기획 1차 완료

개별 웹개발 플러스 강의 수강 중

메인페이지, 로그인, 회원가입 페이지 구현 완료

메인 페이지의 중분류 items들을 클릭했을 때의 상세페이지 구현완료 (이미지와 글 내용 불러오기, 게시물 좋아요 기능, 피드 기능까지)

로그인 시와 로그아웃 시에 쓸수있는 기능과 나오는 내용 다르게 구현 완료

 

Trouble Shooting (우리 팀이 해결한 문제 정리)

1. [token decode 문제] 로컬에서는 로그인이 잘 됐으나 배포 시 잘 안됐던 문제. gitbash 터미널에 나온 에러 로그를 살펴보았고 해당 에러 로그를 구글링하였음. 내용인 즉슨, sign_in() 함수의 token을 만들 때 마지막에 .decode('utf-8')이 로컬에서는 없어야 로그인이 잘 동작이 되고 배포환경에서는 있어야 잘 동작이 된다는 것이었는데, 그렇게 해결은 했는데 왜 그런 것인지 명쾌한 이유는 잘 모르겠음.(질문해보면 좋을듯)

     1-1. (me 한정) macOS를 쓰고 있는데, 내 컴퓨터 환경에서는 로컬에서도 .decode('utf-8')이 포함되어야 정상 작동됨.

 

2. [진자 html 변환 문제] jinja2 템플릿 언어로 {{item_info.exp}}를 불러왔고 DB에 저장된 내용 item_info.exp이 String Type이면서 html 태그형식이었음. 하지만 html코드로 잘 적용되어 화면에 이쁘게 나오지 않고 계속 문자열 형식으로 html코드가 지저분하게 나왔음.

 

let temp_html = `{{ item_info.exp|tojson }}`

$("#exp-list").append(temp_html.replaceAll("\"", ""))

 

위와 같은 방식으로 잘 해결하였고 맨 앞과 맨 뒤에 있는 ' " ' 도 제거하여 해결함.

 

3. [페이지별 댓글 공통/한정 문제] 각 상세페이지별로 달린 댓글이 다르게 나와야 하는데.. 상세페이지의 아이템 내용과 이미지는 달라지지만 댓글은 공통적으로 모두 나오는 문제가 있었음. >> 댓글을 저장할 때부터 "item_num"을 DB key값으로 넣었고 app.py에서 댓글을 불러올 때, num_receive = request.args.get("num_give") 방식으로 num값을 받아 DB에서 해당 상세페이지에 해당하는 댓글들만 불러와지도록 구현함.

 

4. [로그인 상태별 설정 문제] 로그인 했을 때와, 로그인 하지 않았을 때의 화면 내용의 구분이 필요했음. 예를들어 로그인 했으면 로그인/회원가입 버튼 대신 그 자리에 ㅇㅇ님 환영합니다! 라는 문구와 로그아웃 버튼이 나와야 했고, 로그인을 해야만 댓글을 쓸 수 있는 창이 나오고 로그인을 안 한 상태에서는 댓글창이 없고 다른 사람의 댓글에 좋아요를 누르려고해도 "로그인이 필요합니다."라는 문구가 나와야 했음. if token_receive is not None을 기준으로 토큰이 있다면 로그인이 된 것이니, Status = True로 설정, 그렇지 않으면 로그아웃이 된 상태이니 status = False로 설정하여 해당 status를 render_template에 태워서 html 화면으로 보냈고 그 화면에서 {{status}} jinja2 템플릿 언어를 통해 구분을 하였음.

 

5. [변수 이름 문제] 각자 만든 페이지를 합치는 과정에서 지정한 변수가 서로 달라서 정리 시간이 잠깐 필요했음. 해결하는 데 시간이 오래 걸린 것은 아니었으나, 기획 과정에서 변수 네이밍에 대해서도 의견을 일치해 두는 게 좋다고 생각함.