[메이킹챌린지] 10기 4조 개발일지

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

On a couch

[메이킹챌린지] 10기 4조 개발일지 본문

프론트엔드 공부/스파르타 웹개발 종합반

[메이킹챌린지] 10기 4조 개발일지

couch 2022. 2. 10. 11:21

시작 | 와이어프레임

결과 | 시연영상

Day01 (02.09)

OT 진행. 어떻게 진행될 지 감도 못 잡았지만 어찌저찌 조장이 되었다.

조원 분들과 얘기를 나누다 보니 서로 공통점이 많았다.

왕초보들이긴 하지만 서로 밀고 끌면서 잘 해 봤으면 좋겠다.

Day02 (02.10)

첫 회의를 해서 홈페이지의 기본적인 컨셉, 기능, 구성을 얘기했다.

얘기한 내용 바탕으로 튜터링 받아 보니 몇 가지 빼고는 충분히 구현할 만하다고 하신다.

어려운 '몇 가지'는 추후에 다시 논의하기로 했다.

왕초보지만 겁이 없는 팀원들이라 좋다. 나 혼자였으면 이 정도 기능까지는 욕심 못 냈을 거 같다.

톡으로만 얘기하면서 진행하려니까 이게 되나 싶기도 한데 어떻게든 되고 있다.

결정된 내용은 노션으로 옮겨서 정리하니까 보완이 된다. 자주 들여다 볼 회의록, 투두리스트, 참고자료란 등을 만들어 넣었다.

1회차 회의록/튜터링 기록

주간회의 1회차 (22.02.10)

[안건]

프로젝트 난이도
프로젝트 컨셉
백엔드/프론트엔드 포지션
미니튜터 일정추가

[결정사항]

프로젝트 개괄
1. 컨셉 : 분리수거 방법 조회 및 검색 사이트
2. 필요 기능
  - 검색기능 : 텍스트 검색 or 조건 필터링 검색
  - 카테고리(음식물쓰레기/분리수거/제로웨이스트) 분류 클릭하면 하위 리스트 조회
  - 하위 리스트(각각 분리수거 방법) 카드 클릭하면 세부 내용 조회
  - Q&A 페이지 : 사용자가 질문 작성하고 관리자가 답변
  - 관리자페이지 : 신규 리스트 작성 및 질문 답변
기타 결정 사항
- 프로젝트 난이도 : ‘LV1.나혼자메모장’ 기본 CRUD에 충실
- 팀원 포지션 : 초기에 구분없이 함께 개발 후 디벨롭 과정에서 파트 나눠서 맡기
- 튜터링 질문 항목 : 회의 토대로 기능 구현 가능한지 여부 (ex-필터링 검색)

[추후 일정]

8시 튜터링 때 페이지 기능/난이도 관련 가이드 받기
주요 구성요소(대분류 카테고리, 조회 내용에 포함될 것들, 검색필터 등) 논의
크롤링 할 사이트 선정
사이트 디자인(프로토타입 만들어보기)

[안건]
튜터링 1회차 (22.02.10)
- 팀원 포지션
- 프론트엔드&백엔드 두가지 경험 모두 해보는 것이 좋으니 기능을 분리해서 각자 담당한 기능의 프론트&백엔드를 해보는 방향 추천
- 페이지 최소 4개 필요할 듯
  - 분리수거 항목별 리스트 나오는 페이지
  - 글작성 페이지 (Q&A)
  - 리스트 입력 페이지 (관리자)
  - onclick 팝업페이지 (분리배출 방법 상세 페이지)
  - ! 상세 검색 페이지는 CSS로 구현하면 될 듯
22.02.10 튜터링

Day03 (02.11)

딱히 회의시간을 정하진 않았지만 '오늘 역할분담 직전까지 간다'는 생각으로 정리가 필요한 사항들을 논의했다.

검색기능은 다른 기능, 레이아웃과도 얽혀 있으니 먼저 정리해야겠다 싶어, 검색에 포커스를 맞췄다.

다들 아이디어 내 주신 덕분에 메인 레이아웃, 검색기능, 카드 내용 구성, 페이지 제목 등 큰 틀이 깔끔히 정리됐다.

튜터님, 매니저님이 '이 팀은 진행이 빠르다', '논의가 활발하다'라고 해 주시는 걸 보니 자신감이 붙는다.

처음에는 뭘 어느 기간동안 진행해야 할 지 감도 안 잡혔는데 이제는 마음도 좀 여유롭다.

회의 내용

👨‍⚖️ 결정

[큰 틀에서]

기본 CRUD : 요가동작사전처럼 물건의 card를 화면에 띄움. 클릭 시 세부 내용을 볼 수 있음.
관리자 페이지 : card의 CRUD를 관리하는 페이지를 분리.
키워드 검색 기능 : 검색 창에 키워드를 입력하면 관련 검색 결과를 볼 수 있음.
~~조건 필터링 검색 기능 : 사용자가 분리수거 대상에 포함된 재질들을 체크하여 검색하면 관련 분리수거 방법 일괄 조회 가능~~
ㄴ색인별 카드 조회 기능으로 변경
Q&A 기능 : 게시판에 문의 글과 답글을 작성할 수 있음.

[카드내용 (DB)]

카드마다 개별적으로 상세내용 입력

[비주얼 측면]

우측 세로 메뉴(분류별 보기) 제작, 색인 버튼 보여주기
메인 페이지에서 바로 품목카드 보여주기
홈페이지 제목 : Re:Waste

🙋‍♀️ 제안

[ ] 카드를 클릭하면 보여 줄 세부 카테고리를 결정합시다! (대분류, 분리 배출 방법, 유의사항 등)
[ ] 활용할 색인 종류를 결정해요!

Day04(02.12)

결정사항

파트를 5개로 나누어 각자 개발할 기능을 정했다!

Day05(02.13)

개발일지

평소와 달리 개인적인 일정이 많았던 주말이라 공부 진도를 맞추는 게 힘들었다 ㅠ 그래도 어찌저찌 완강!

정말x100 감사하게도 팀원분이 Git 등 기초 세팅을 맞춰주셨다.

git 연동까지 따라잡았고, 진짜 개발 고민은 이제 시작!

오늘 한 일

적용 가능한 튜토리얼 찾기
페이지 구조 그리기
제작 순서 정하기

Issue

코딩 목적, 환경 등 나한테 맞는 조건으로 검색해야 한다는 걸 깨달았다. 처음 검색해서 나온 자료들은 기획 용으로 쓰고, 실제 코드 작성용 참고자료는 flask 키워드를 넣어서 얻은 걸 써야겠다.

내일 할 것

게시판 부트스트랩 찾기
기초 db 만들기
기본 html 작성

Day06(02.14)

개발일지

오후 종일 앉아서 기초 작업을 했다.

어디서부터 해야 하나 막막했는데, 블로그 글 찾아가면서 부트스트랩으로 비주얼을 잡으니 다음 단계가 보인다.

오늘 한 일 (완료!)👏👏👏

게시판 부트스트랩 찾기
기초 db 만들기
기본 html 작성

Issue

API 오류
- DB에서 Q&A 게시글을 불러와 목록에 붙이는 코드를 짰는데, 아무래도 DB를 불러오는 과정에서 오류가 있는 것 같았다.
- 미니튜터님께 질문해서 DB 내용을 list로 불러올 때 '_id'값을 빼야 오류가 나지 않는다는 걸 알았다. ㅠㅠㅠㅠㅠ id 너는 뭐가 문제니 ㅠㅠㅠㅠ 못 불러오니 이제 글 번호매기기는 다른 방법으로 해야겠다.
```
#글 목록 보여주기
@app.route('/board', methods=['GET'])
def show_board():
    board = list(db.qna.find({},{'_id': False}))
    return jsonify({'boards': board})
```
게시글 작성일 알아내는 법?
- 당연히 'const time = new Date'하면 시간이 time에 저장될 줄 알았는데 안 됐다;;
- nomadcoder에서 시계 만들던 자료를 찾아보니 String()으로 감싸는 방법이 있었다!
- 날짜 양식을 한글로 바꾸고 싶어서 moment 라이브러리를 활용했다. 도움주신블로그1 블로그2

내일 할 것

게시판의 글 넘버링은 어떻게 하는 걸까?
글 제목 누르면 게시글 읽기 페이지로 넘어가게 하자!
조회수 올라가도록 만들자!
댓글기능 찾아보자!

Day07(02.15)

개발일지

몸상태가 너무 메롱이라 원래 하려던 것은 못 하고, 튜터링 시간에 'required' 속성이 적용되지 않는 이유만 물어봤다.

오늘 한 일

DB 연결하기
태그 오류 찾기
글 넘버링 방법 찾기

Issue

input 태그에 required가 작동하지 않는다!
- 튜터님 말씀으로는 아예 ajax에서 검사하는 과정이 필요하다시는 듯.

내일 할 것

몽고DB 자동 넘버링 설정
글 제목 누르면 게시글 읽기 페이지로 넘어가게 하자!
조회수 올라가도록 만들자!
필수입력 기능 추가하자!

Day08(02.16)

개발일지

오늘 한 일

게시판 글 넘버링 설정(jinja 템플릿 이용)
글 제목 클릭하면 게시글 읽기 페이지로 넘어가게 링크

Issue

몽고DB 자동 넘버링 설정
- 구글에 자료가 없는 건 아닌데, 2시간은 헤메고 나서야 함수들이 deprecated돼서 못 쓰는 거라는 걸 알게 됐다. 도대체 document.count() 없이 수는 어떻게 세는 건가요...ㅠ 사실 작동되는데 그냥 내 syntax가 잘못된 건지 ㅠ

게시판 글 넘버링은 jinja 템플릿을 이용해 몽고DB 넘버링 참조하지 않고도 해결했다. db에서 데이터 가져올 때도 시간 역순으로, 가져온 거에 번호 붙일 때도 역순으로.
- jinja로 게시판 목록 생성하는 아이디어는 여기서(인프런 강의 메모)
- 번호를 역순으로 작성하는 방법은 여기서
qna 게시글을 작성하려고 할 때 갑자기 400 Bad request 오류가 떴다. 막상 뒤로가기 눌러보면 작성한 글은 잘 저장되어 있다. 바뀐 거 없을 텐데 오류가 나는 이유는...?
- 이 블로그 글 보고 수정했더니 400 오류는 안 뜨지만 글 하나 쓸 때마다 'false'라는 데이터가 추가로 딸려온다.
- 결국 스택오버플로우에 질문 올렸다.. https://stackoverflow.com/questions/71136705/how-to-solve-post-400-error-on-python-flask

내일 할 것

상세페이지 연결하자!
조회수 올라가도록 만들자!

Day09(02.17)

개발일지

오늘 한 일

상세페이지 연결!
글목록 페이지네이션 구현 시도 ^^

Issue

순서는 페이지네이션이 먼저였는데 아무리 비슷하게 따라해 보려고 해도 블로그 코드에서 생략된 부분이 뭔지 이해할 수 없어서 완벽히 적용이 불가능했다. 특히 이 부분에서 'page' 정보를 대체 어디서 받아오는지 모르겠음ㅜㅠ html과 pythom 파일을 정독해 봐도 서로를 참조하고 있는 것만 같다. 일단 뭉텅이로 주석 처리 해 놓고 미뤄뒀다.
```
request.args.get("page", 1, type=int)
```
- nj님께서 설명해주신 덕분에 이게 크롤링 할 때 쓰던 request 모듈이었구나 하는 걸 뒤늦게 깨달았다. 써 봤던 거니까 포기하지 말고 내일 다시 검색해서 이해해 보자!
- 참고한 글은 https://journeytosth.tistory.com/31?category=409691 , https://ichi.pro/ko/gandanhan-peullaseukeu-peiji-maegim-72089703558702 , https://mondaymonday2.tistory.com/458
상세페이지로 연결하는 방법을 찾아보다가 https://wikidocs.net/81046 점프투플라스크 책 내용을 따라해 보기로 했다. 여기서 쓰이는 여러 모듈이나 개념을 이해하기 위해 또 무한 구글링이 필요했음. 그래도 결국 성공했다!
- 읽다보니 blueprint나 기타 개념들이 마치 html에서 css와 js 파일 빼놓고 링크시키는 것과 같아보여서, '이 부분은 빼도 되겠다'싶었다. 마찬가지로 db도 책에서 사용한 기능이 mongodb의 어느 부분과 같은 것인지 잘 보고 대체해서 쓸 수 있었다.

내일 할 것

페이지네이션 성공하자!
댓글 기능 만들자!
부트스트랩 'checkout' 예제 보고 필수입력기능 만들자!

Day10(02.18)

개발일지

오늘 한 일

댓글 작성 + 보여주기 기능 만들었다!

Issue

댓글 기능 : 상세페이지랑 똑같이 점프투파이썬 책 보고 만들었는데 오류 나는 부분이 너무 많았다 ㅠㅜ
- 405method not allowed 오류 : 클라-서버의 GET / POST 종류가 맞지 않아서 생기는 거라고 한다. POST 설정한 라우터에서 자꾸 GET 찾아서 GET도 추가해줬더니 없어졌다. 아마 redirect할 때 필요한 값을 가져가려고 그랬나 보다.
- (+ 책에서 POST를 [ ]이 아니라 ( )로 감싸서, 그것땜에 생긴 오류 찾느라 1시간은 잡아먹었다)
- redirect가 자꾸 오류나서 구글링 해 url_for()으로 감쌌더니 됐다.
- 본문기능은 js에서 moment.js 사용해서 날짜값을 얻어왔는데, 댓글기능은 pythons에서 얻으려니 datetime이라는 또다른 모듈이 필요했다.

내일 할 것

댓글 css / 부트스트랩 적용
부트스트랩 'checkout' 예제 보고 필수입력기능 만들자!
페이지네이션 성공시키자!

Day13(02.21)

개발일지

그저께는 css만 조금 적용하고 문제 해결은 많이 못 했다. 마지막 발표까지 다시 가자!

오늘 한 일

상세창 부트스트랩 적용했다!
조회수 올라가게 만들었다.
글/댓글 삭제기능 시도했다.
페이지네이션 다시 검색했다 ^^

Issue

페이지네이션
- 두 가지 방법을 찾아 (1, 2) 따라했는데 오늘도 역시 오류는 날 놓아주지 않았다. 검색하다보니 'pagenate' 함수가 sqlalchemy라는 모듈을 활용해야 사용 가능한 것인가보다. 으어.. (+) 여기서 나오는 '쿼리'가 뭔가 해서 검색했다. 결과
- 비슷한 고민을 가진 질문글을 발견했지만 이렇다 할 방법이 없나 보다.
- 아예 이런 고민을 해결해주는 https://datatables.net/ 이라는 서비스도 발견했다.
- 드디어 'page' 값이 어떻게 전달되는지 설명하는 글도 발견하고, 또 아주 복잡한 튜토리얼을 하나 찾긴 했는데.. 일단은 포기할까보다 ㅠㅜ
조회수
- 이 글을 보고, 세부페이지 내용 로딩 전 조회수 값을 +1하게 만들었다.
- 뒤로가기 해서 목록으로 되돌아왔을 때, 바로 리로드(true로 바꿔서서버단 정보까지 리로드)해서 바뀐 값을 반영하도록 만들었다.
- 조건을 안 걸었더니 무한 리로딩 되길래, 이해는 못 했지만 이 글 내용을 따라서 적용했다.
삭제 기능
- 일단 글 삭제, 댓글삭제 모두 작성은 했다. 문제는 댓글삭제 버튼을 눌렀을 때 댓글삭제 라우트에 제대로 닿지 못한다는 것이다. 이 부분은 질문감이다.

내일 할 것

글/댓글 삭제기능 오류 잡기
아이디/비번 확인방법 찾기

Day14(02.22)

개발일지

http 통신이란 정말 알다가도 모르겠다.

오늘 한 일

글쓰기 400 Bad request 해결!

Issue

400 bad request
- 조원분이 찾아주셨다. button 타입이 submit으로 되어 있어서 ajax랑 기능이 중복되는 바람에 오류가 나는 거였다 ㅠㅠㅠㅠㅠㅠㅠㅠ
- 관련한 글도 두 가지나 찾아와 주심 (1, 2)이런 가능성은 전혀 생각도 못 하고 실제로 전송되는 데이터만 계속 찾고 있었네 ㅠㅠㅠ
- 여기에 연결된 다른 기능들이 삐끗한 거 같은데 잡으러 가야지.

내일 할 것

글/댓글 삭제기능 오류 잡기
아이디/비번 확인방법 찾기

Day15(02.23)

개발일지

http 통신이란 정말 알다가도 모르겠다.

마감일에는 이상한 힘이 있는 걸까? 못 할 거라고 생각한 주요 기능을 끝까지 구현했다.

(티스토리 오류 났는지 글이랑 이미지를 커서 위치에서 못 불러온다. 복붙이나 이동도 원하는 위치로 안 된다. 오늘은 일지 대충 쓰라는 계시인가.)

오늘 한 일

댓글 삭제기능 오류 해결
글 삭제 시 해당 댓글도 모두 삭제
글/댓글 삭제 시 비밀번호 대조 작업
ajax 통해 받은 값으로 alert 띄우기

Issue

댓글 삭제 기능
- 문제 1: 분명히 클라-백 모두 POST 요청으로 맞춰뒀는데 콘솔을 보니 클라에서 자꾸 GET 요청을 보내고 있었다. 에라모르겠다 싶어서 그냥 GET으로 맞춰줬다.
- 문제 2: API는 연결이 됐는데 이상하게 정보가 안 넘어왔다. 이때부터 계속 단계별로 console.log와 print를 써 가며 체크했는데, const comment_id 이 부분이 계속 사용되지 않은 값으로 표현되는 거다. 분명히 url에서 ${comment_id}에 넣어 사용했는데! 왜 그러지 싶어 console.log(comment_id)를 적으니 그제야 활성화되고 값도 넘어왔다. 분명히 console.log는 내부 코드랑 아무 관련이 없어야 하는데;;; 이유는 모르겠지만 얘가 통신을 도와주고 있으니 이대로 놔뒀다.
```
$(document).ready(function () {
    $(".cmdelete").on('click', function () {
        if (confirm("정말로 삭제하시겠습니까?")) {
            const comment_id = String($(this).attr('id'));
            console.log(comment_id)
            $.ajax({
                url: `/cmdelete?id=${comment_id}`,
                type: 'GET',
                data: {},
                success: function (response) {
                    alert(response["msg"]);
                    location.href = "/qna"
                }
            })
        }
    })
});
```
글 삭제 시 해당 댓글도 모두 삭제
- 안 해도 티는 안 나겠지만 그래도 할 수 있을 것 같다는 생각이 드니 하고 싶었다.
- 클라에서 글 id값 받은 뒤 댓글 콜렉션에서 해당하는 데이터 delete_many로 지우기. 글 id와 댓글 id가 헷갈려서 잠깐 오류가 났다.
글/댓글 삭제 시 비밀번호 대조 작업
- 글 하단에 비밀번호 input과 삭제 버튼(a태그에 타입을 button으로 해서 만들었다. 이전의 교훈대로 type이 submit이 안 되게 조심!)을 만들었다.
- 삭제하기 위해 넣은 비밀번호가 DB에 있는 비밀번호(글 작성할 때 입력한 비밀번호)와 일치하면 삭제를, 불일치하면 에러 alert을 띄우고 싶었다.
- 글 삭제도 더듬더듬 겨우 했는데, 댓글이 더 골치아팠다. jinja로 for문 돌려서 생성하는 거라, id값을 고정해서 만들면 같은 id가 여러 개 생겨 삭제하고자 하는 특정 요소를 집어낼 수 없었다. id를 서로 다르게 만들어 줘야 하는데, 그렇다고 id={{ answer._pw }} 으로 만들자니 이상하게 내 작업에서는 js가 jinja 문법을 못 읽었다. 원래는 js에서 읽혀야 되는 거라던데!
- 결국 이런저런 방식을 돌고 돌아 comment_pw를 comment_id에 몇 글자 덧붙인 모양으로 만들었다. 이렇게 하면 $(this)로 간단하게 가져올 수 있는 comment_id를 먼저 선언하고, comment_pw는 백틱 이용해서 comment_id에 저장된 값을 가져올 수 있었다. 휴!
ajax에서 js로 텍스트 전달해 alert 띄우기
- 해결하고 나서야 수업 때 이미 썼던 기능이라는 게 생각났다. route에서 return할 때 쓸 수 있는 방법을 여러 가지 알게 되니까 오히려 헷갈렸다. (jsonify, render_template, url_for ...)
- render_template과 url_for으로 데이터를 전송할 수 있는 걸 보고, 클라->백으로 보낼 때처럼 데이터를 왕창 들려보낼 수는 없을까 했는데 안타깝게도 인자를 그렇게 받는 기능이 아닌가보다. 한참 이래저래 바꿔가며 헤메다가 back to basic 해서 jsonify로 전달했다.
- 코드는 문제가 없는데 자구 에러가 나서 뭔가 했더니 ajax에 success: function(response) 부분에서 response를 안 적었다. 허허.
css적용
- 메인 기능 페이지와 맞춰서 레이아웃, 색상, 글씨체 등을 다듬었다. 정돈되니 훨씬 깔끔하고 메인 페이지와의 통일감도 생겨 보인다.
- 부트스트랩 적용해서 만든 게시글 보드랑 글읽기 페이지 수정할 때 class가 너무 많아서 정리하기 힘들었다. css 자체기능으로 커버할 수 있는 기능은 부트스트랩 안 쓰는 게 더 깔끔하고 수정하기 좋겠다는 깨달음을 얻었다.

내일 할 것

마지막 발표 준비 (내용, 순서, ppt)
css 더 다듬기
할 수 있으면 글 삭제버튼 숨기는 기능 만들기

22.03.06

마지막까지 수정하고 수정한 끝에 완성본이 작품전시회에 올라갔다.

https://spartacodingclub.kr/community/exhibition

심화반 분들 작품이 너무 대단해 보여서, 우리는 등수 안에 들기만 해도 좋겠다 싶었는데 현재 금메달을 달고 있다.

안 그래도 예쁜 내새끼인데 볼 때마다 뿌듯하다.

짬짬이 시간 내서 오류도 잡고, 기능 업데이트도 하고, 리팩토링도 하고 싶다.

실력을 업시키기 위해서 지금은 또다시 공부 중!

저작자표시

'프론트엔드 공부 > 스파르타 웹개발 종합반' 카테고리의 다른 글

스파르타 내일배움단 웹개발5주패키지 후기 (0)	2022.03.01
[5주차] 서버 작업 (0)	2022.02.13
[4주차] python (0)	2022.02.08
[3주차] python (0)	2022.02.03
[2주차] js, jquery, ajax (0)	2022.01.23

'프론트엔드 공부/스파르타 웹개발 종합반' Related Articles

On a couch

[메이킹챌린지] 10기 4조 개발일지 본문

[메이킹챌린지] 10기 4조 개발일지

시작 | 와이어프레임

결과 | 시연영상

Day01 (02.09)

Day02 (02.10)

Day03 (02.11)

👨‍⚖️ 결정

🙋‍♀️ 제안

Day04(02.12)

Day05(02.13)

Day06(02.14)

Day07(02.15)

Day08(02.16)

Day09(02.17)

Day10(02.18)

Day13(02.21)

Day14(02.22)

Day15(02.23)

'프론트엔드 공부 > 스파르타 웹개발 종합반' 카테고리의 다른 글

티스토리툴바