[내일배움캠프 AI] B7팀 - 미니프로젝트 결과물

미니프로젝트 1차 - 팀 일당백  소개 웹페이지

💯일당백

소수정예로 이루어진 팀 일당백 소개와 팀원의 이야기를 담은 팀 소개 웹 페이지입니다

 

팀장 : 이현지

• 프로젝트 전체 코드 연결
• 방명록 API 백엔드 개발 및 방명록 Form 만들기
• 개인상세페이지 만들기

팀원 : 이지영

• 전체 프론트엔드 구조 잡기
• 팀소개/팀리스트 페이지 만들기
• 개인상세페이지 만들기

 

개발한 기능들

1. 팀원들의 정보를 보여줄 수 있는 페이지를 구현해주세요. HTML Css Javascript Bootstrap
2. 페이지별로 방명록을 입력받을 수 있는 백엔드를 만들어주세요. JS Flask MongoDB
3. DB에 저장된 정보들을 사람들에게 보여줄 수 있는 페이지를 만들어주세요. HTML Css JS Flask MongoDB
4. 프로젝트를 소개하는 문서를 만들어주세요.
   • 개발 인원 및 역할, 프로젝트 소개, 구현 된 api, 사용 된 기술(html, js, python, …), 데이터베이스 구조, etc

 

와이어프레임

 

프로젝트 결과 시연 영상

http://3.35.3.174/

 

프로젝트 결과 코드

API 설계

기능	method	URL	Request	Response
팀소개 메인 페이지	GET	/
팀원 리스트 페이지	GET	/list
팀원 개인 페이지	GET	/member?host={name}
방명록 등록 API	POST	/api/guest	{host : host, team : team, name : name, comment : comment}
방명록 조회 API	GET	/api/guest	{host: host}	{host : host, team : team, name : name, comment : comment, date: date}

 

사용된 기술

HTML, CSS, JS, jQuery, Python, Flask, mongoDB

 

DB 구조

guest { host : host,
             team : team,
             name : name,
             comment : comment,
             date: date }

 

마음에 드는 코드

이현지

@app.route('/member')
def member():
   host = request.args.get('host')
   return render_template(host+".html")

app.py에서 각 개인페이지로 route 설정할때, 멤버가 추가되거나 삭제되었을때 app.py를 통해서 라우트 설정을 했어햐했었는데 최대한 app.py를 건들지 않는 방법을 고민했다. 그 결과 /member뒤에 host로 멤버이름을 넣으면, 해당 host이름을 가진 html로 이동하게 작성했다. 중복되는 코드를 최소화 하는 방안이라서 가장 마음에 든다.

 

 

이지영

$(window).scroll(function () {
    $('.ani').each(function (i) {
        var bottom_of_element = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if (bottom_of_window - bottom_of_window * -0.15 > bottom_of_element) {
            $(this).animate({'opacity': '1', 'margin-top': '0'}, 300);
        }

    });
});

index.html 부분에서 script에 포함되어 있는 내용인데 좋아하는 코드로 뽑은 이유는 디자이너가 없는 우리 팀에게 작은 스크롤 효과지만 뭔가 더 웹페이지가 동적으로 보이고 더 디자인이 잘 된 느낌을 주는 부분이기 때문이다.