TIL_220524_팀 프로젝트

팀 프로젝트의 결과물을 제출하는 날

 

나의 발자국을 돌아보는 시간

 

개발자들의 발자국

 

GITHUB

 

처음으로 알차게 깃허브를 사용했다. (뿌듯)

 

깃 강의로 빌드업된 나의 깃 능력을 최대한으로 사용하는 프로젝트가 되었다.

능숙하진 못하더라도 브랜치를 나누어 작업하는 습관
세밀한 작업에도 커밋 기록을 남기는 습관
이슈 등록과 이슈 태그를 통해 작업 내역을 기록하는 습관 등

앞으로 협업할 현장에서 투입되기 위한 밑거름을 다져가는 중!!

 

---

 

📌 필수 기능

•  사물인식 기능
•  업로드 이미지 해당 카테고리 출력 서비스 ((ex. 남성, 여성 성별 구분 등)
•  이미지마다 인식한 사물의 정보를 로그에 저장해주세요 (DB 저장)

📌 추가 기능

•  커스텀 데이터셋을 만들어서 학습
•  브라우저의 웹캠 기능 사용으로 촬영 혹은 실시간으로 사물인식
•  결과 공유 기능
•  회원기능
  • 소셜 로그인(구글, 카카오) 기능

📌 도전 과제

•  GIT의 Pull Request를 요청시 팀원 중 한 명 이상이 코드를 검토후 코멘트를 달아주세요. 리뷰가 끝나면 Merge를 진행해주세요.
•  프론트엔드와 백엔드를 별도의 레포지토리로 분리해서 사용해주세요. (flask에서는 render_template 을 사용하지 않고 json 데이터만 보내주는 방식)
•  백엔드 개발에 Postman을 적극 활용해주세요
•  jQuery대신 javascript를 이용해서 프론트엔드를 작성해주세요.
•  Flask 블루프린트를 사용해서 API 모듈화

 

마지막 날을 앞두고 고군분투 해준 우리 팀원들과 함께 이만큼이나 이뤄냈다.
추가 기능은 전부 충족할 수 없었지만, 서로의 코드를 한 번씩 리뷰하며 배우고, 경험하는 귀한 시간이 되었다.

 

---

 

flask - blueprint

 

프로젝트 블루프린트 최종 구성

 

 

처음 적용해보는 블루프린트는 처음 구성을 세팅하는 법부터 상당한 긴장감을 주었다.

하지만 한 번 구성하고 흐름을 이해하니 확실히 팀 프로젝트를 하면서 팀원간의 충돌을 확실하게 줄일 수 있었다.

너무 좋은 방법이라고 생각한다.

다음 프로젝트에서도 기본 구성을 블루프린트로 사용할 수 있을 것 같다.

 

---

 

code : 기능 파트 (로그인, 회원가입, 병합 총괄)

 

회원가입 중복 검사처리 및 공백 처리

backend

    # 입력 정보에 대한 에러
    try:
        if not user_id_receive or not email_receive:
            sign_error = 770
            return jsonify({'message': 'fail', 'sign_error': sign_error})
        elif '@' not in email_receive or '.' not in email_receive:
            sign_error = 771
            return jsonify({'message': 'fail', 'sign_error': sign_error})
        elif not password_receive or not password_check_receive:
            sign_error = 772
            return jsonify({'message': 'fail', 'sign_error': sign_error})
        elif password_receive != password_check_receive:
            sign_error = 773
            return jsonify({'message': 'fail', 'sign_error': sign_error})
        elif not user_age_receive:
            sign_error = 774
            return jsonify({'message': 'fail', 'sign_error': sign_error})
            # 중복 처리
        elif db.member.find_one({'user_id': user_id_receive}):
            sign_error = 775
            return jsonify({'message': 'fail', 'sign_error': sign_error})
        elif db.member.find_one({'email': email_receive}):
            sign_error = 776
            return jsonify({'message': 'fail', 'sign_error': sign_error})
    except:
        status = 200
        return jsonify({'message': 'success', 'status': status})

frontend

if (response_json.sign_error == 770) {
    alert("아이디 혹은 이메일을 입력하세요.")
    return
} else if (response_json.sign_error == 771) {
    alert("이메일 형식이 아닙니다.")
    return
} else if (response_json.sign_error == 772) {
    alert("비밀번호를 입력하세요.")
    return
} else if (response_json.sign_error == 773) {
    alert("비밀번호를 확인해주세요.")
    return
} else if (response_json.sign_error == 774) {
    alert("나이를 입력해주세요.")
    return
} else if (response_json.sign_error == 775) {
    alert("중복된 아이디입니다.")
    return
} else if (response_json.sign_error == 776) {
    alert("중복된 이메일입니다.")
    return
} else {
    alert("가입 완료!")
    window.location.replace(`${frontend_base_url}/templates/login.html`);
}

 

 

종류별 에러 검출에 대한 정의에 대한 내용이다.

처음에 이렇게 하는 것이 맞는지 잘 몰랐다.(사실 정답은 없다.)

하지만 코딩하면서 튜터님께 듣기론 이런 식으로 나누어 오류를 검출하는 방법으로 코딩하는 것이 협업에서도 중요한 부분이라고 하셨다.

협업에 한 걸음 나아갔다.

 

---

 

fetch() 함수

async function getName() {
    const response = await fetch(`${backend_base_url}/getuserinfo`, {
        headers: {
            'Authorization': localStorage.getItem("token")
        }
    })

    // status 200 확인 조건문
    if (response.status == 200) {
        response_json = await response.json()
        return response_json.email
    } else {
        return null
    }
}

 

function 함수명() 으로 실행 시 backend 와 통신하기 위한 await fetch(backend 경로) 정의 하고 
backend 로 보낼 데이터를 담고, response를 _json 화 하여 return 으로 보냄

대강 이런 로직
너무 생소한 나머지 이해하는데 꽤 애먹었지만, 생각보다 재밌다.