[TIL] 풀스택 미니 프로젝트

Doyeon·2023년 1월 17일

JavaScript TIL git github mongodb python 프로젝트 항해99

프로젝트 주제

다가오는 토끼의 해! 달토끼에게 소원을 빌어보자🐰
간절히 바라는 소원을 빌고, 서로의 소원을 응원하고, 오늘의 띠별 운세를 확인해보는 사이트

개발 기간

2023년 1월 16일 ~ 2023년 1월 17일

기술 스택

HTML
CSS
JavaScript
Python
Flask
bs4
mongoDB

구현 기능

소원 등록 페이지
- 소원 등록 기능
- 닉네임, 제목 유효성(빈 값 체크)
- 소원 등록 시, 이미지 모션
소원 조회 페이지
- 소원 조회 기능
- 소원 좋아요 기능
신년 운세 조회 페이지
- 신년 운세 크롤링
- 신년 운세 조회 기능

와이어 프레임

전체 와이어 프레임

API 문서

결과물

시연 영상 : 항해99 15조 기능 구현 영상
github 주소 : github tell-me-wish

트러블슈팅(문제해결)

소원 조회 페이지에서 ‘좋아요’ 기능 구현을 위해 mongoDB에 저장된 데이터의 _id 값을 어떻게 가져오고, 가져온 _id 값을 어떻게 사용해서 DB 데이터 값을 찾을 수 있을까?

GET 요청 으로 _id 값 가져오기 : 서버에서 데이터를 보낼 때 dumps() 함수로 보내고, 클라이언트에서는 받은 response를 JSON.parse() 로 받는다.

@app.route('/wish/look', methods=["GET"])
def wish_get():
    wish_list = list(db.wishes.find({}))
    return jsonify({'wish_list': dumps(wish_list)})

function show_wishes() {
    $('#wishlist').empty()
    $.ajax({
        type: "GET",
        url: "/wish/look",
        data: {},
        success: function (response) {
            let rows = JSON.parse(response['wish_list'])
	            // ...
            }
        }
    });
}

POST 요청 으로 보낸 _id 값으로 DB 데이터 찾기 : 클라이언트에서 request로 보낸 id 값을 str() 으로 바꾼 후, find_one으로 찾을 때 ObjectId 를 이용해 찾는다.

@app.route('/wish/like', methods=['POST'])
def like_save():
    id_recieve = str(request.form['id_give'])
    like_count = db.wishes.find_one({'_id': ObjectId(id_recieve)})['likeCount']

bootstrap으로 적용한 list 양식의 배경을 투명하게 구현할 수 있을까?
- class명 뒤에 bg-transparent 를 붙인다.
```
<ul class="list-group list-group-flush" id="wishlist">
	<li class="list-group-item bg-transparent">...</li>
</ul>
```

소원 등록 버튼을 누르면 이미지 모션이 나오고 소원 보기 페이지로 넘어가고 싶은데, 어떻게 구현할까?

gif 영상이 나오는 html 페이지(moving.html)를 만들고, 등록 버튼을 누르면 window.location.replace() 를 이용해 moving.html로 이동하고, setTimeout 함수를 이용하여 3초 뒤 소원보기 페이지로 이동하도록 한다.

// main.js

$.ajax({
        type: "POST",
        url: "/wish/regist",
        data: {nickname_give: nickname, wish_give: comment},
        success: function (response) {
            if(response["status"] == '200') { // 소원이 정상적으로 등록되면
                alert("소원 빌기 완료!")  // 메시지를 보내고
                window.location.replace('/wish-moving-page') // gif 영상이 나오는 html 페이지로 이동한다.
            } else if (response["status"] == '400') {
                alert("닉네임 또는 소원을 꼭 입력해주세요!")
                window.location.reload()
            }
        }
    });

# app.py
# 소원 등록 모션 페이지
@app.route('/wish-moving-page')
def wishMovingPage():
    return render_template('moving.html')

// moving.js

setTimeout(function () {
    window.location.replace('/wish-look-page')
}, 3000);

알게된 점

git으로 협업하기
1. 로컬, 원격에 모두 develop 브랜치를 만든다. (로컬 develop 브랜치에서 push 하면 원격에 자동으로 만들어지긴 한다.)
2. 각자 feature/기능명 으로 브랜치를 만들어 기능을 구현한다.(기능명에 이슈번호를 붙여 만들면 구분하기 편하다)
3. 기능을 구현하면 본인이 만든 feature/기능명 브랜치에서 똑같은 이름의 원격 브랜치로 푸쉬한다.
4. pull request를 보낼 때는 feature/기능명 → develop 브랜치로 보낸다.
5. 코드리뷰 후 develop 브랜치로 merge한다.
6. 팀원들은 원격 develop → 로컬 develop 브랜치로 pull을 받는다.
7-1. 작업중인 브랜치가 있다면, 작업중인 브랜치에서 develop 브랜치를 병합한다. (작업중인 브랜치 ← develop 브랜치)

7-2. 작업중인 브랜치가 없다면, develop 브랜치에서 새 feature 브랜치를 만들어 작업을 시작한다.

1 ~ 7을 반복한다.

개발이 모두 완료되었으면 develop → main 으로 pull request & merge 한다.

느낀 점

1. 구현 기능은 범위를 너무 넓게 잡지 않되, 명확하게 잡는다.

처음부터 너무 많은 기능들을 생각하는 것보다, 주요 기능을 명확하게 잡고 추가적으로 적용할 기능을 생각하는 것이 좋다.
이 프로젝트도 처음에는 소원을 등록하는 기능을 주요 기능으로 정해두고, 소원을 등록했을 때 이미지 모션을 추가하거나, 소원들에 좋아요를 누르거나, 운세를 볼 수 있거나 하는 기능들을 추가적으로 세웠다. 주요 기능을 구현하고 추가적인 기능을 구현하면 되니, 작업 완성도가 올라간다.

2. 와이어프레임, API 문서, 작업목록 등 문서 정리를 확실하게 하고 코딩을 시작한다.

토이 프로젝트를 진행할 때는 기능 구현할 것만 정리해놓고 페이지별로 작업하다보니, 공통된 기능을 구현하는 것도 있었고 API 요청할 때 주소도 제각각이어서 어려움을 겼었었다. 이번 프로젝트에서는 기획 단계에 시간을 좀 쏟고 문서로 잘 정리하고 코딩을 시작하니, 훨씬 수월하게 프로젝트가 진행되었다.

3. commit과 pull을 자주 한다. merge를 두려워하지 않는다.

구현하면서 commit을 자주 하고, 작업 목록(이슈) 단위별 구현이 완료 되었으면 push를 바로 한다. pull request를 하고 코드리뷰 후 mege를 한다. 그리고 바로 pull을 받는다.
pull을 자주 받아 작업을 진행하니 merge할 때 충돌이 거의 없었다.

회고

오전9시 ~ 다음날 오전6시까지 풀스택 미니 프로젝트를 위한 해커톤이 진행되었다.
대학생 때 코딩 과제하며 밤을 지새우던 기억도 나고… 아침에 핫식스를 사오면서 밤샐 준비를 했다.
주제 선정부터 구현 기능, 와이어프레임, API 문서 작성 등 문서 작업에 이어 구현까지 하루 안에 할 수 있을지 걱정도 되었다.

이번 조에는 프로젝트를 처음 해보시는 분들도 있었고, 하루 안에 만들어야 하기 때문에 작업 스코프를 잘 잡는 것이 중요했다.
주요 기능 하나를 중심으로 추가적인 기능들을 생각하면서 기획을 진행했다.
페이지별 코드 파일들을 잘 나누고 해야할 작업 목록들을 정리하고 목록마다 담당자를 정하여 진행하니, 수월하게 진행되었고 git에서 merge 할 때도 거의 충돌이 없었다.
기능별 작업 단위를 잘 나누고 담당자 배분을 잘한 덕분인 것 같다.
정말 밤을 꼬박 새우고 마지막까지 조금 더 깔끔한 화면을 구현하기 위해 노력했다.
거의 20시간 가까이 집중하여 작업 목록들을 모두 마치고 기능들을 모두 구현했다.
목표한 프로젝트를 완성할 수 있어 뿌듯했고 좋은 경험이었다.

이번 프로젝트로 git을 사용할 때 어려움이 많이 해소되었다. 협업할 때 git을 어떻게 이용하는지 확실히 알게 되었다.
스스로 아쉬웠던 부분은 백엔드 부분은 어느 정도 알고 기능 구현하는데 큰 무리가 없는데, 프론트엔드를 잘 몰라서 html로 잡은 구조를 원하는대로 화면에 배치시키는 것이 마음대로 되지 않았다.
영역을 배치할 수 있는 기본적인 CSS 문법은 공부를 해야겠다고 느꼈다.