팀 소개 페이지 구현 5월 3주 WIL

1. 프로젝트 목표

1. 메인 페이지 구현

• 메인 페이지에는 팀소개, 팀원참여버튼, 팀원의 카드출력

2. 팀원참가 페이지

• 팀원의 이름, 나이, 취미, 블로그주소, 코멘트, 사진을 업로드 할 수 있는 기능 구현하기

3. 팀원 개인 페이지

• 메인 페이지에서 팀원의 카드를 누를 시 팀원 개인페이지로 이동 후 팀원 정보 출력

4. 저장된 팀원의 정보수정, 삭제

• 팀원 개인페이지에서 정보수정, 삭제 기능구현하기

2. 진행한 프로젝트

1.팀원의 정보저장하기 POST

 function posting() {    

            let name = $('#name').val();

            let age = $('#age').val();

            let hobby = $('#hobby').val();

            let blog = $('#blog').val();

            let comment = $('#comment').val();

            let image = $('#image').val();

            let formData = new FormData();

            formData.append("name_give", name);

            formData.append("age_give", age);

            formData.append("hobby_give", hobby);

            formData.append("blog_give", blog);

            formData.append("comment_give", comment);

            formData.append("image_give", image);

            fetch('/teams', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {

                alert(data['msg'])

                window.location.href = '/'

            })

        }

html에서 사용자가 작성한 내용을 db로 저장하기 위해 서버로 보냄

let name = $('#name').val();

let name = 으로 name이란 이름의 변수안에 $('#')라는 jQuery를 사용하여 body에 id="name"이라는 값을 지정하고

.val()이라는 jQuery를 사용하여 지정한 값을 가저오게하였다.

let formData = new FormData();

            formData.append("name_give", name);

name 이라는 변수를 name_give라는 이름으로 FormData에 넣어 서버로 보내준다.

서버에 보낼때는 JSON형태가 아닌 FormData에 넣어 POST 요청을 하는것이다.

 fetch('/teams', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {})

/teams라는 이름으로 서버로 POST 요청 body내용물은 formData

@app.route("/teams", methods=["POST"])

def teams_post():

    name_receive = request.form['name_give']

    age_receive = request.form['age_give']

    hobby_receive = request.form['hobby_give']

    blog_receive = request.form['blog_give']

    comment_receive = request.form['comment_give']

    image_receive = request.form['image_give']

   

    doc = {

        'name':name_receive,

        'age':age_receive,

        'hobby':hobby_receive,

        'blog':blog_receive,

        'comment':comment_receive,

        'image':image_receive

    }

    db.teams.insert_one(doc)

 프론트에서 보내준 값을 받아 각 값에 대응하는 이름을 정하여

 db.teams.insert_one(doc)

데이터베이스의 teams라는 폴더에 insert 해달라는 요청을 보내는 것이다.

 

구현을 끝마치고 코드를 보며 알게되었는데

doc = {

        'name':request.form['name_give'] }

이런 식으로 바로 작성을 한다면 코드가 짧아지니 더 좋을 것같다.

 

이미지 파일은 업로드에 실패하여 이미지URL을 사용하는 것으로 일단 완성하였다.

 

2. 팀원 정보 GET 및 팀원 개인 페이지 이동

팀별로 개인페이지(html)은 만들지 않았고 같은 페이지에서 한팀원의 정보만 출력되게 하고싶었다.

그렇게 하기위 해선 팀원 페이지에서 한 팀원의 정보만 가져올 필요가있고, 페이지 이동기능이 필요했다.

 

먼저 페이지 이동기능을 만들었다.

버튼 테그에 <a> 테그를 사용하여 a href =".html"로 사용 해보았다.

하지만 , <a> 테그는 하이퍼 링크를 걸어 주는 것이므로, 배포를 하지않은 상태에선 페이지가 넘어 가지않는 문제가 발생

 

다른 방법을 모색하여 html 파일끼리 이동이 가능한 location.href = "" 을 사용하여 문제를 해결하였다.

onclick="location.href='/gocard/'"

flask 에서 웹 표현 : route('/') 을 사용하여

@app.rout('/gocard')

• 맨 앞에 @가 붙는 것은 장식자 (decorator)를 난타낸다.
• flask에서는 이러한 장식자가 URL 연결에 활용된다.
• 장식자를 사용하면 다음 행의 함수부터 장식자에 적용 된다.

@app.route('/gocard')

def gocard():

    return render_template('card.html')

url '/gocard'는 다은 행에 정의 되어있는 gocard함수와 연결된다.

route 장식자는 플라스크 서버로 '/gocard'URL 요청이 들어왔을 때 어떤 함수를 호출할 걸인가 조정한다.

route 장식자는 장식된 함수에서 결과를 반활할때 그결과를 대기중인 웹 브라우저로 반환한다.

이렇게 개인페이지로 넘어가는 것은 완료 되었다.

 

하지만, 같은 페이지에서 특정 데이터만 불러오는 것에서 문제가 생겼다.

팀원 각각의 html을 만들지 않았기에, 한 페이지에 원하는 정보만을 가져오는 방법을 사용해야하는데

방법을 몰랐던 것이다.

 

처음에는 MongoDB에서 자동으로 생성해주는 ObjectId 타입의 '_id'컬럼을 사용하려 했으나 해당 타입이 string이 아닌 관계로 jsonString으로 프론트에 전달하기 위해서는 String 타입으로 변경해주는 작업이 추가적으로 필요했다. 하지만 MongoDB에서 데이터를 find할 때 ObjectId를 사전에 String타입으로 가져오는 방법이 없어 iteration을 통해 따로 ObjectId 타입을 변경해주는 추가 작업이 필요했는데  구형하는 기술력도 부족하거니와, 마감시간까지의 시간이 촉박하여 일단은 손쉬운 방법으로 실행했다.

onclick="location.href='/gocard/${name}

팀원 개인 페이지로 넘어가는 링크에 같은 이름의 데이터를 받아오는 방식으로 했다.

@app.route('/gocard/<memberNamed>')

def gocard(memberNamed):

    only_memberd = list(db.teams.find({'name':memberNamed},{'_id':False}))

   

    return render_template('card.html',only = only_memberd)

${name} 을 <memberNamed>으로 받아 db에 같은 이름의 데이터를 찾은 이후 only 라는 변수로 html에 보내주었다.

여기서 문제발생

• 이 경우 이름이 같은 데이터가 있다면 1개의 데이터가 아닌 같은 이름의 데이터가 더 나오게된다.
• 추후 위에서 서술한 ObjectId 타입을 변경해주는 방법을 찾아 수정이 필요하다.

<p class="card-text">나이 : {{only[0].age}}</p>

이제 가져온 데이터를 내가 원하는 값에 맞게끔 넣어주는 작업을 하여 끝냈다.

 

그러던 중 blog주소를 표시하는데 링크를 달아주고싶었다.

<p class="card-text" >블로그 : {{only[0].blog}}</p>

이렇게 작성만 하였을 땐 블로그의 주소에 링크가 달리지 않아

이번엔 하이퍼링크를 달아주는 <a> 테그를 사용하여

<p class="card-text" >블로그 : <a href="{{only[0].blog}}">{{only[0].blog}}</a></p>

웹 페이지에서 블로그 주소를 눌렀을 때 이동할 수 있게 하이퍼 링크를 달아주었다.

 

3. 데이터 삭제

<button onclick="member_delete()" type="button" >팀원 삭제</button>

팀원 삭제 버튼을 만들고 버튼에 member_delete() 라는 함수를 입력

function member_delete() {

            let name = '{{only[0].name}}'

            fetch(`/teams/${name}`, { method: "DELETE" }).then((res) => res.json()).then((data) => {

                alert(data['msg'])

                window.location.href = '/'

            })

        }

이 곳에 사용 된 정보중 이름{{only[0].name}} 을 기준으로 DELETE 요청

추가) window.location.hred = '/' 는 작업성공시 메인페이지로 보내주는 기능이다.

@app.route("/teams/<name>", methods=["DELETE"])

def teams_delete(name):

    db.teams.delete_one({'name':name})

    return jsonify({'msg':'삭제 완료!'})

{{only[0].name}}을 name 이라는 변수로 보낸 것을 /teams/<name> 에서 <name>으로 받아

db.teams에서 delete_one(삭제요청) {'name' : name} 'name'값이 변수 name과 같은 정보를.

여기서도 name을 기준으로 잡았기에 위에서 서술한 같은 name 이있을 경우 문제가 발생할 수 있다.

 

4.데이터 수정

<button onclick="location.href='/goupdate/{{only[0].name}}'" type="button" >팀원 수정</button>

데이터 수정 페이지로 넘어가게 하였고, 넘어 갈때 {{only[0].name}}으로 지금 수정을 하고싶은 데이터의 기준을 name으로 잡았다.

@app.route('/goupdate/<memberName>')

def goupdate(memberName):

    only_member = list(db.teams.find({'name':memberName},{'_id':False}))

   

    return render_template('update.html',onlyone = only_member)

수정 하는 페이지에 값을 가져와 value를 사용하여 기존 데이터를 보여주고 수정이 필요한 부분을 직관적으로 보여주었다.

<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" id="name" value="{{onlyone[0].name}}">

이렇게 수정에 완료한값은 POST와 비슷하게 서버로 요청을 보내는데

function updating(){

            let name = $('#name').val();

            let age = $('#age').val();

            let hobby = $('#hobby').val();

            let blog = $('#blog').val();

            let comment = $('#comment').val();

            let image = $('#image').val();

            let formData = new FormData();

            formData.append("name_give", name);

            formData.append("age_give", age);

            formData.append("hobby_give", hobby);

            formData.append("blog_give", blog);

            formData.append("comment_give", comment);

            formData.append("image_give", image);

            fetch('/teamsUpdate/{{onlyone[0].name}}', { method: "UPDATE", body: formData }).then((res) => res.json()).then((data) => {

                alert(data['msg'])

                window.location.href = '/'

            })

        }

이 값을

@app.route("/teamsUpdate/<updateName>", methods=["UPDATE"])

def teams_update(updateName):

    name_receive = request.form['name_give']

    age_receive = request.form['age_give']

    hobby_receive = request.form['hobby_give']

    blog_receive = request.form['blog_give']

    comment_receive = request.form['comment_give']

    image_receive = request.form['image_give']

    db.teams.update_one(

        {'name':updateName},

        {

            "$set":{

                'name':name_receive,

                'age':age_receive,

                'hobby':hobby_receive,

                'blog':blog_receive,

                'comment':comment_receive,

                'image':image_receive

            }

        }

    )

    return jsonify({'msg':'수정 완료!'})

받은 후 db의 'name' 값이 upadteName 값과 같은 데이터를

특정 데이터를 수정할 수 있는 "$set" 을 사용해 수정 하였다.

 

3. 실패한 기능들

1. 위에서도 서술 하였듯이 get, delete, update에 사용한 객체값을 고유한 값을

사용한 것이 아니기에 문제가 발생할 수있다.

추후 MongoDB에서 자동으로 생성해주는 ObjectId 타입의 '_id'컬럼을 사용하는 방법을 터득하여 고유값으로

이러한 문제를 해결해보자.

혹은, 등록한 년,월,일,시,분,초 까지 같이 등록하여 한 데이터의 유니크한 고유값을 만들어 활용해 보자.

 

2. 이미지 업로드 및 다운로드를 구현하지 못하였다.

이미지의 저장 방법을 찾았지만, 경로 설정부터 막혀버렸다.

시간이 촉박하여 URL주소를 사용하는 방법으로 대채하였으나 추후 수정을 할때 방법을 찾아 추가해보자.

외부 저장프로그램 ex)AWS와 같은 것 사용하는 것도 좋은 방법이겠으나,아직 나에게는 어려운 부분이 많기 때문에 로컬에 저장하고 활용하는 법부터 익혀보자.