[221118] 미니프로젝트1 결과 보고서 ('22.11.14 ~ '22.11.18)

경진·2022년 11월 18일
0

내일배움캠프

목록 보기
4/10

1. 프로젝트 소개

  • 프로젝트 명 : 자기소개 RPG
  • 설명 : 사전캠프 웹개발종합반 강의를 통해 배운 기능을 바탕으로 팀&자기소개 페이지를 제작한다.

2. 와이어프레임 (초안)

1. 메인페이지

메인페이지

2. 팀소개페이지

팀소개페이지

3. 팀원소개페이지

팀원소개페이지

4. 댓글 페이지

댓글페이지

3. 개발 기능

FunctionMethodResponse
가입신청(등록)POST가입 데이터
가입신청(선택삭제)POST가입 데이터
조회GET리스트

4. 기술 스택

  • HTML, CSS, Javascript, JQuery, Python, MongoDB

5. 업무 담당자

이름직책역할업무
박경진팀장프론트엔드메인페이지, 팀 소개 페이지 제작
유희선팀원프론트엔드팀원 소개 페이지 제작
정지우팀원프론트엔드팀원 소개 페이지 제작, 방명록 페이지 제작
김재광팀원백엔드각 페이지 DB 백엔드 구성 (GET)
이희찬팀원백엔드각 페이지 DB 백엔드 구성 (POST)

6. 프로젝트 기간

  • 프로젝트 시작 : 2022.11.14 (월) 12:00
  • 팀 내 중간 점검 : 2022.11.16 (수) 19:00
  • 최종 점검 : 2022.11.17 (목) 16:00 ~ 23:00
  • 최종 제출 : 2022.11.18 (금) 13:00
  • 발표회 : 2022.11.18 (금) 14:00

7. RESTful API

기능MethodURLrequestresponse
팀 소개페이지 유튜브 영상 재생GEThttps://developers.google.com/youtube/iframe_api_reference?hl=ko영상 자동재생, 반복재생autoplay: true, loop: true
메인페이지GET/index
길드페이지GET/intro길드 소개페이지 연결뒤집어진 카드를 클릭하여 이동
길드 소개페이지GET/intro_guild길드원 소개페이지 연결큐브 마지막 슬라이드를 클릭하여 이동
길드원 소개페이지GET/member길드원 개인 소개페이지 연결뒤집어진 카드에 있는 'CLICK'을 클릭하여 이동
길드원 개인 소개페이지GET/member-'initial'개인 블로그 연결하이퍼 링크 연결
길드원 개인 소개페이지 방명록 조회GET/guest'1~5'get: {guest_'initial_get, guest_comment}방명록 리스트
길드원 개인 소개페이지 방명록 작성POST/guest'1~5'post: {guest_'initial_get, guest_comment}각 페이지 방명록 입력
길드원 개인 소개페이지 방명록 삭제DELETE/guest'1~5'delete: {guest_'initial_get, guest_comment}방명록 선택 삭제
가입 신청 페이지 조회GET/submit
가입 신청 조회GET/submitsget: {sumit_name, sumit_job, sumit_cmt}신청 리스트
가입 신청 작성POST/submitspost: {sumit_name, sumit_job, sumit_cmt}닉네임, 한 줄 소개 입력
가입 신청 삭제POST/delete-submitspost: {sumit_name, sumit_job, sumit_cmt}신청서 선택 삭제

8. 회의 내용

2022.11.16 (수)

  1. 폴더 경로 지정
app.py

./templates
-> .html

./static
-> .css
-> .js

./static/img
-> .jpg
-> .jepg
-> .png

  1. 파일명 지정
(1) 메인 페이지
- index.html
- main.css
- main.js

(2) 길드 소개 메인페이지
- intro.html
- intro.css
- intro.css

(2-1) 길드 설명 페이지
- introguild.html
- introguild.css
- introguild.js

(3) 길드원 소개 메인페이지
- member.html
- member.css
- member.js

(3-1) 길드원 개인 소개 페이지
- member_kj.html
- member_jg.html
- member_hs.html
- member_hc.html
- member_jw.html
-> CSS, JS는 html 내부 제작

(4) 가입 신청 페이지
- submit.html
- submit.css
- submit.js

  1. 변수명 지정
1. 길드원 개인소개 페이지

(1) 이름
-> guest_kj // 경진
-> guest_jg // 재광
-> guest_hs // 희선
-> guest_hc // 희찬
-> guest_jw // 지우
통합 -> guest

(2) 코멘트
-> cmt_kj // 경진
-> cmt_jg // 재광
-> cmt_hs // 희선
-> cmt_hc // 희찬
-> cmt_jw // 지우
통합 -> cmt


2. 가입 신청 페이지
(1) 이름
-> nickname

(2) 한 줄 소개 (코멘트)
-> comment

(3) 직업 선택
-> job

2022.11.17 (목)

  1. 문제점 및 해결방법
1. 오브젝트 위치 조정 (희선)
 -> 해결 방법 : 오브젝트 위치 설정을 고정 값으로 변경하여 배치.

2. GET을 통한 리스트 불러오기 (희찬)
 -> 해결 방법 : 로직을 정확히 파악하지 못해 발생한 일이었으며 코드를 다시 분석해 올바은 위치에 배치.

3. 유튜브 영상 시작 제목 제거 (경진)
 -> 해결 방법 : 유튜브에서 항목과 관련된 코드를 없애 영상의 제목을 지우는 것이 불가능함.
 
4. 파일을 통합하고 최종 점검을 할 때 한 곳에서 방명록을 남기면 모두의 방명록에 남겨지는 오류 발생 (지우)
-> 해결 방법 : 파일 경로 점검을 통해 경로를 올바르게 지정하여 해결

5. 변수명을 초기에 지정하지 않고 따로 작업 후 통합하는 과정에서 타인이 작성한 코드를 이해하는데 시간과 에너지를 많이 소요 (재광)
-> 해결 방법 : 프로젝트 시작 때 함수 명과 변수 명을 초기에 논의 하기로 함. (협업시 코딩 컨벤션의 중요성을 느낌)

  1. 팀의 특징, 목표, 약속
1. 팀의 특징
- 맡은 일에 진심이며, 피드백에 두려움이 없다.
- 내향형끼리 모였지만 모두가 협엽을 잘 한다.

2. 팀의 목표
- 주어진 코드의 의미를 알고 사용하자!
- 1인분 하는 개발자가 되자!

3. 팀의 약속
- 기본에 충실하자!
- 일일 마무리는 오전 2시까지
- 모르는 것은 주저말고 질문하기
- 모든 질문에 귀찮아 하지 않기
- 확실하게 알 수 있도록 공부하기

9. 프로젝트 결과물

링크 : 개발구조 웹페이지

1. 메인 페이지

메인페이지

2. 팀 소개 메인 페이지

길드페이지

2-1. 팀 소개 페이지

길드소개페이지

3. 팀원 소개 메인페이지

길드원페이지

3-2. 팀원 소개 페이지

길드원소개페이지

4.가입 신청 페이지

가입신청 페이지


10. 프로젝트를 마무리하며 (KPT)

1. 서비스가 달성하고자 하는 목표

개발의 시작을 알리는 9조 조원들을 설명하여 알리고자 하는 목표를 담았습니다.


2. 핵심 기능 소개

길드 소개 클릭 시, 나오는 카드와 영상 중 카드 클릭 시, 큐브 안에 5계명, 특징, 목표가 적혀있음.
핵심 기능을 위와 같이 설정한 이유는 많은 공간을 차지하여 가독성이 떨어질 수 있는 부분을 한 화면에 묶어 가독성, 디자인 요소를 잡을 수 있었기 때문.


3. 기술적으로 새롭게 배운 것에 대한 설명

  • 경진 : 외부 API사용 및 기능들을 필요에 맞게 커스텀 하는 방법을 배웠습니다.
  • 지우 : 특강으로 새롭게 배웠던 Git을 이용해 쉽게 백업할 수 있었습니다.
  • 희찬 : 코멘트를 개별로 삭제할 수 있는 기능을 어떻게 구현하는지 새로 배웠습니다.
  • 재광 : 방명록 구현시, 특정 게시글을 선택적으로 삭제할 수 있는 기능 구현 방법에 대해 배웠습니다.
  • 희선 : HTML과 CSS만으로 카드를 flip하는 오브젝트 구현하는 방법을 배웠습니다.

4. 프로젝트 코드 자랑

  • 경진
{HTML, CSS만으로 카드를 만들고 뒤집을 수 있는 방법이 있다는 것이 신기했습니다.}


{HTML - 카드 요소 만들기}

        <div class="medal">
          <div class="front">
            <img src="../static/img/introduce2.png" alt="로고 프론트" />
          </div>
          <div class="back">
            <a href="./intro_guild">
              <img src="../static/img/introduce.png" alt="로고 백" />
            </a>
          </div>
        </div>
        
        
 {CSS - 카드 뒤집기 효과 만들기}
 
.medal {
  perspective: 1000px; // 뒤집는 과정에서 입체감이 보이는 효과. 1000px 만큼
}
.medal .front,
.medal .back {
  position: absolute; // 부모요소 기준으로 자식 요소 배치 -> 부모요소 body // 이미지 중첩효과
  backface-visibility: hidden; // 중첩된 이미지 뒷면이 안보이게 배치
  transition: 1s; // 자연스러운 전환효과 (1초)
}
.medal .front {
  transform: rotateY(0deg); // 앞면을 0도로 배치하여 앞면만 보이게 하기
}
.medal:hover .front {
  transform: rotateY(180deg); // 마우스를 가져다대면(hover) 180도로 뒤집음 
}
.medal .back {
  transform: rotateY(-180deg); // 마우스를 떼면 뒷면으로 엎어져 있음
}
.medal:hover .back {
  transform: rotateY(0deg); // 마우스를 가져다다면(hover) 뒷면이 보임
}

  • 희찬
{삭제기능이 post가 아닌 delete 도 가능하다는게 마음에 드는데 기능은 post와 같지만 코드 구별이 쉬운 것같아 마음에 듭니당}

@app.route("/guest5", methods=["DELETE"])
def guest_hs_delete():
    num_receive = request.form['num_give']

    db.member_hs.delete_one({'num': int(num_receive)})
    return jsonify({'msg': '방명록 삭제하기 완료!'})

  • 지우
{제가 만든페이지 전체가 다 맘에 들지만 그 중에서도  개인페이지의 방명록 부분이 부트스트랩으로 구성하지 않고 제가 직접 html과 css를 만들었기 떄문에 제일 마음에 듭니다!}

<div id="message-box" style="overflow-y:scroll; overflow-x: hidden; height:630px;">
    <div id="mypost">
        <div id="container"><h1 class="style-3">visitor</h1></div>
        <div id="post_nick">
            <input type="text" id="name" placeholder="닉네임">
        </div>
        <div id="post_cmt">
            <textarea placeholder="응원댓글" id="comment"></textarea>
        </div>
        <div id="post_button" style="">
            <button onclick="save_comment()" type="button">응원 남기기</button>
        </div>
    </div>
    <div class="mycards" id="comment-list">

    </div>
</div>

  • 희선
{저는 class와 id를 같이 쓸 수 있다는 사실을 처음 알게 해준 코드라서 마음에 듭니다.}

<style>#btnSubmit { margin: auto; display: block;}</style>
<div><button type="button" class="btn btn-dark btn-lg" id="btnSubmit" onclick="location.href=''link"> CLICK </button></div>

  • 재광
{게시글을 작성할 때마다 삭제 버튼이 함께 달리고, 삭제기능이 작동할 수 있도록 구현할 수 있어서 기뻤습니다.}

{#게시글을 작성할 때마다 삭제버튼이 함께 달리도록 구현함 #}
function show_submit_list() { 
    $.ajax({
        type: 'GET',
        url: '/submits',
        data: {},
        success: function (response) {
            let rows = response['submits']

            for (let i = 0; i < rows.length; i ++){
                let num = rows[i]['num']
                let submit_name = rows[i]['submit_name']
                let job = rows[i]['job']
                let submit_cmt = rows[i]['submit_cmt']

                let temp_html = `<tr id="www">
                                    <td>${submit_name}</td>
                                    <td>${job}</td>
                                    <td>${submit_cmt}</td>
                                    <td><button id="right" onclick="delete_submit(${num})" type="button" class="btn btn-dark">삭제</button></td>
                                </tr>`
                {#등록된 게시글별로 개별 삭제기능 버튼 추가됨#}
                $('#submit-box').append(temp_html)
            }
        }
    });

5. 부족했던 점

  • API 작성 시 Underbar '_' 를 사용하면 안된다는 점을 인지 하지 못하고 사용하여 진행 하여 마무리 할 쯤 알았던 것이 아쉬었습니다. (다음 프로젝트부터는 Bar '-'를 사용할 것!!!)
  • 요소 배치를 자유자재로 하지 못해 화면 사이즈에 대응되는 배치를 잘 하지 못한 점이 아쉬웠습니다.
  • GitHub를 자유롭게 사용하지 못하여 이번 프로젝트에서는 활용하지 못한 것이 아쉬웠습니다.

6. 소감

좋은 결과물을 서로 협업하여 만들기 위해 의견을 제시하다보니,혼자서 생각할 수 없었던 부분을 생각하기도 하고 어려움이 발생할 경우, 같이 의논하여 해결해 나갈 수 있다는 점이 좋았습니다.
나 혼자가 아닌 함께 이겨낼 수 있는 팀원 분들이 옆에 계셔서 행복했습니다.


11. 221118 최종발표 튜터 피드백

  • Restful 작성 방식

    • ex) 방명록 작성하면 request 에서 작성하는 내용은 키, 밸류를 작성하면 됨.

  • 벨로그/티스토리

    • 마무리하며...소감란.
    • 각자 팀원의 홈페이지 주소, 깃 주소 작성하면 좋을 것임.

  • 백엔드 방명록:

    • 수정 기능 추가 / 비밀번호 기능 추가 필요.
    • 방명록은 오브젝트 아이디로 구현을 안 한듯. 여기는 수정필요.

  • 가입신청 페이지,

    • 톤앤매너 바탕화면이 검정인데, 내부 페이지는 하얀색..
    • 직업 선택시, 아무것도 선택 안 해도 가입신청이 됨.
    • 백엔드에서 무직업 신청자들 막는 코드를 작성하면 좋을듯.

  • 각 페이지 알림창 (alert을 모달창으로???)

    • 정영훈 튜터님이 중점적을 보신 것
    • CRUD 기능들...
    • URL 연결이 어떻게 되는지 확인

12. Node.js B반 개발구조 제작 멤버

profile
경진
항상 처음 세웠던 목표 처럼
이전 포스트

[221117] YoutubeAPI

다음 포스트

[221118] 내배캠 5일차 - 프로세스, 쓰레드, 비동기

0개의 댓글