To Do

1. Make card that shows Video that I uploaded

First of All, I had to set the html , specifically actual "card"

I thought of making unique function that makes html for video
ex. function make_video()

BUT

since I am using ejs,
I decided to make usage of it,
which means that, I used "for loop" to show the video on html pages

after I sent the data to client from server

Server Code

// post : aws-sdk > Videos
router.post('/api/users/mySpace',function( req, res){

    var x_auth = req.cookies.x_auth;
    const { email } = x_auth;

    // VideosingleUpload 라는  function을 제공한다 
    VideosingleUpload( req, res, function( err ){   

        console.log("Request for uploading image");

        // client에 보낼 정보를 object 형식으로 만든다
        
        if(err){
            console.log("Error during uploading image");
            console.log(err)
            
            return res.status(403).send({ errors : [ { title : 'File Upload Error', detail : err.message }]});
        }
 
        // location에는 url of our image 이 들어있을 것이다 
        console.log("Updating Video url in MongoDb")

        //x-auth token으로 찾아서 update( 해당 user 의 db video list에 넣는다 )
        connection.db.collection("users", function(err, collection){

            // 해당 동영상 link를 array 에 추가하기 
            collection.updateOne({'token':x_auth},{$push : {'profile_videos':req.file.location} },{new:true});

            if(err)
            {
                console.log("Update Error happened")
                console.log(err)
                res.status(404)

            }else{
                // 만약 video update 에 성공한다면 

                // 클라이언트 측에 전달할 video link를 찾아서 전달해준다
                collection.find({token:x_auth}).toArray(function(err, data){
                    //data는 내가 찾은 token에 해당하는 데이터이다
                    // 즉, 내가 찾는 댄서에 대한 정보가 data로 들어오는데
                    // array 형식으로 들어오기 때문에, data[0]이라고 작성하는 것이다 
                    if(err){
                        console.log("Finding Video links Error happened")
                        console.log(err)
                        res.status(405)
                    }

                    console.log("Got the data")
                    res.status(200).render('mySpace', data[0] )
        
                    })// find

                }// else

            console.log("Video Push success")
            
        })
    });   // VideosingleUpload
})

Html Code

<div class = "tab-pane active" id = "Videos">
                <% for ( var i = 0; i < profile_videos.length; i++){ %>
                    <div class = "video">
                        <video width ="100%" height = "100%" controls muted src = <%=profile_videos[i] %> > 
                        </video>
                    </div>
                  <% } %>
            </div>

2. C.R.U.D on Video

2.1 Add "text" under "video" that describes on video

Trial 1. add new variable

The reason why I set this as an "Array" instead of "String"
is because,

the text / description has to move with video.
which means, they have to be in one "set"

but in order for this to happen,
"text" also had to be an array, since "video" is an array

And I will automatically make a set of "text, and video" by integrating the text,video that has same index number

Trail 2. put "Text" and "Video" in one varaible

< SERVER CODE : How Push Occurs >

2.2 Request occurs twice by form, ajax post

< HTML . JS >

inpForm.onsubmit = function(){

    var formData = new FormData(inpForm);
    var xhr = new XMLHttpRequest()
    // video를 입력하지 않으면 alert 띄우고  redirect
    if( inpFile.files[0] === undefined ){
        alert("Put in your video")
        return false;
    }

    // response 처리하기
    xhr.onload = function(){
        if(xhr.status === 200){
            console.log("Server responded appropriately with 200 status")
            // 동영상 url 링크를 받는다
            console.log(xhr.responseText)
            alert("Video Upload Success")
            // make_video()
            window.location.href = "/api/users/mySpace"
        }
        else if( xhr.status === 403){
            alert("Error while uploading to AWS")
        }
        else if( xhr.status === 404){
            alert("Update Error while updating DB")
        }
        else if( xhr.status === 405){
            alert("Finding Video links in DB Error")
        }
    }

    console.log("Request going")
    xhr.open('POST',inpForm.getAttribute('action'), true)

    xhr.send(formData)
    // event.preventDefault()
    return ;
}

< SERVER. JS >

// post : aws-sdk > Videos
router.post('/api/users/mySpace',function( req, res){

    var x_auth = req.cookies.x_auth;
    const { email } = x_auth;

    // VideosingleUpload 라는  function을 제공한다 
    VideosingleUpload( req, res, function( err ){   

        console.log(req.body.profile_videos_text)

        console.log("Request for uploading image");
        // client에 보낼 정보를 object 형식으로 만든다
        
        if(err){
            console.log("Error during uploading image");
            console.log(err)
            
            return res.status(403).send({ errors : [ { title : 'File Upload Error', detail : err.message }]});
        }
 
        // location에는 url of our image 이 들어있을 것이다 
        console.log("Updating Video url in MongoDb")

        //x-auth token으로 찾아서 update( 해당 user 의 db video list에 넣는다 )
        connection.db.collection("users", function(err, collection){

            // 해당 동영상 link를 array 에 추가하기 
            collection.updateOne(
                {'token':x_auth},
                {$push : { 
                    'profile__info' : { 'profile_videos':req.file.location,
                    'profile_videos_text':req.body.profile_videos_text
                } 
            }
        }, {new:true});

            if(err)
            {
                console.log("Update Error happened")
                console.log(err)
                res.status(404)

            }else{
                // 만약 video update 에 성공한다면 

                // 클라이언트 측에 전달할 video link를 찾아서 전달해준다
                collection.find({token:x_auth}).toArray(function(err, data){
                    //data는 내가 찾은 token에 해당하는 데이터이다
                    // 즉, 내가 찾는 댄서에 대한 정보가 data로 들어오는데
                    // array 형식으로 들어오기 때문에, data[0]이라고 작성하는 것이다 
                    if(err){
                        console.log("Finding Video links Error happened")
                        console.log(err)
                        res.status(405)
                    }

                    console.log("Got the data")
                    res.status(200).render('mySpace', data[0] )
                    return;

                    })// find

                }// else
            
        })
    });   // VideosingleUpload
})

Solution : add "return ; " at the end ( both in html, server ), so that no additional event occurs

2.3 create "Edit"

PB 1. create ejs file for "Edit" in "GET" method

PB 2. Edit action has to be applied to specific video that I am dealing with,

let's say we clicked "Edit" of 1st post,

If we move to edit page, then the change has to be applied on only 1st video

But,,,,,current Edit.ejs page does not have the specific info on the
Post Number,

That is, it doesn't know which post we are editing

Solution is to send "Post info" by URL , especially using "query"

That is, I am sending Video info by adding "aws-video-link" like below.

From HTML, send info to below url.

<span>
                                  <a class="Edit" href="/api/users/mySpace/edit/<%= _id %>?Link=<%= profile__info[i].profile_videos %>&Text=<%= profile__info[i].profile_videos_text %>">Edit</a>
</span>


From Server, below route receives above info and it is saved in "req.query"

router.get('/api/users/mySpace/edit/:id', ( req, res, next) => {

    console.log(req.query)

    console.log("id is " +req.params.id)

    // 해당 요소를 찾는다 
    User.findOneAndUpdate( {_id : req.params.id}, req.body, { new : true}, (err, docs) =>{
        if( err ){
            console.log("Can't retrieve data and edit becuase of some database problem")
            // 그저 error 을 pass 시키기 
            next(err);
        }else{
            // console.log("docs is : " ,docs)
            res.render('mySpace_update', { data : docs , query : req.query});
        }
    });

    return;
})


// HTML in mySpace_Update.ejs  : which amke usage of req.query we sent 
<form class = "form" enctype = "multipart/form-data" method = 'POST' action = "/api/users/mySpace" id = 'upload_form'>
                    <div class="video-preview">
                          <video id="video-element" controls autoplay muted>
                              <source src = "<%= query.Link %>" type="video/mp4">
                          </video>
                      </div>
                      <label for="inpFile">
                          Upload Other Video
                          <input type="file" value = "Choose your Video" specllcheck = 'false' name = "video" id = "inpFile" accept ="video/mp4" />
                      </label>

                      <div class="video-text">
                          <input type="text" value = "<%= query.Text %>" name = "profile_videos_text" id = "inpText"/>
                      </div>
                      <button type="submit" id="submit-btn" class='btn-deactive'>Submit
                    </button>
</form>

PB 3. Sent Revised info from update.ejs to POST server, and complete update

Here, I have faced the fundamental problem

If I edit the "video link" here, It's link has to be exactly applied to POST we want to edit

Then, I have to get the "Exact Order Number" of POST.

I was thinking "HOW"

when I made the "video html", I used "for loop",
then, in order for me to get the "order" of video,
I have to get the "var i"

<div class = "tab-content">
            <div class = "tab-pane active" id = "Videos">
                <% for ( var i = 0; i < profile__info.length; i++){ %>
                    <div class = "video">
                        <video  controls muted src = <%= profile__info[i].profile_videos %> > 
                        </video>
                        <div class="video__text">
                            <span> <%= profile__info[i].profile_videos_text %></span>
                        </div>
                        <div class="video__btn">
                            <span>
                                <a class="Edit" href="/api/users/mySpace/edit/<%= _id %>?Link=<%= profile__info[i].profile_videos %>&Text=<%= profile__info[i].profile_videos_text %>&Num=<%= i %>">Edit</a>
                            </span>
                            <span>
                                <a class="Delete" href="/api/users/mySpace/delete<%= _id %>">Delete</a>
                            </span>

                        </div>
                    </div>
                  <% } %>
            </div>

            <div class = "tab-pane" id = "mboard">
                <div id="cards-container">
                </div>
            </div>
            <div class = "tab-pane" id = "tboard">
                <span>Tu board</span>
            </div>
        </div>

The Link is shown like below , where "i" is surrounded by "<%= %>

<span>
    <a class="Edit" href="/api/users/mySpace/edit/<%= _id %>?Link=<%= profile__info[i].profile_videos %>&Text=<%= profile__info[i].profile_videos_text %>&Num=<%= i %>">Edit
    </a>
</span>

PB 4. Don't allow Video Edit, only allow user to edit "Text". If they want to upoad other video, then let them upload new, instead of revising the videos

why?
Case division of ( 1. NEw File uploaded ) and ( 2. New file not uploaded ) is hard

PB 5. Using nodejs and mongoose to update array

// mySpace_Edit post
router.post('/api/users/mySpace/edit/:id' , function( req, res, next ){

    var x_auth = req.cookies.x_auth;
    const { email } = x_auth;

    console.log("req.params : " , req.params)
    console.log("req.body " , req.body)

    var Num = parseInt(req.body.Num);
    var Link = req.body.Link;
    var Text = req.body.Text;
    var profile__place = util.format('profile__info[%d]', Num)
    var profile__info = "'".concat(util.format('profile__info[%d]', Num)).concat("'") 
    console.log(profile__info)
    console.log(Num)

    connection.db.collection("users", function(err, collection){

        // 해당 동영상 link를 array 에 추가하기 
        collection.updateOne(
            {'_id': req.params.id},
            {$set : { 
                profile__info : { 'profile_videos':Link,
                'profile_videos_text':Text
                } 
            }
        }, {new:true});

        if(err)
        {
            console.log("Update Error happened")
            console.log(err)
            res.status(404)

        }else{
            // 만약 video update 에 성공한다면 

            // 클라이언트 측에 전달할 video link를 찾아서 전달해준다
            collection.find({token:x_auth}).toArray(function(err, data){
                //data는 내가 찾은 token에 해당하는 데이터이다
                // 즉, 내가 찾는 댄서에 대한 정보가 data로 들어오는데
                // array 형식으로 들어오기 때문에, data[0]이라고 작성하는 것이다 
                if(err){
                    console.log("Finding Video links Error happened")
                    console.log(err)
                    res.status(405)
                }

                console.log("Changed the data")
                res.status(200).redirect('/api/users/mySpace')
                // res.render('mySpace', data[0] )
                // res.
                // return;

                })// collection : find

        }// else

    })

})

It was not still working

Trial 1 : When you want to update info by "ID" in DB, which is specific element of array, + also, if you are using "DB", instead of "Schema" ( ex. User.findOneandUpdate~ ), you have to add "new ObjectId "

var ObjectId = require('mongoose').Types.ObjectId; 

// mySpace_Edit post
router.post('/api/users/mySpace/edit/:id' , function( req, res, next ){

    var x_auth = req.cookies.x_auth;
    const { email } = x_auth;

    console.log("req.params : " , req.params)
    console.log("req.body " , req.body)

    var Num = parseInt(req.body.Num);
    var Link = req.body.Link;
    var Text = req.body.Text;
    var profile__place = util.format('profile__info[%d]', Num)
    // var profile__info = "'".concat(util.format('profile__info[%d]', Num)).concat("'") 

    var profile__videos__new = "'".concat('profile__info').concat('.').concat(Num).concat('.').concat("profile_videos").concat("'") 
    var profile__videos__text__new = "'".concat('profile__info').concat('.').concat('$').concat('.').concat(Num).concat('.').concat("profile_videos_text").concat("'") 

    //console.log(profile__videos__new)
    // console.log(profile__videos__text__new)
    console.log('req.params.id',req.params.id)
    console.log('Link : ',Link)
    // Link ='https://danceprojectmb.s3.ap-northeast-2.amazonaws.com/Profile/1593407483563-file_example_MP4_480_1_5MG%20%281%29.mp4'
    Link = "'".concat(Link).concat("'")
    console.log("New link:", Link)


    connection.db.collection("users", function(err, collection){

        // 해당 동영상 link를 array 에 추가하기 
        collection.updateOne(
            {
                "_id" : new ObjectId(req.params.id) ,
                "profile__info.profile_videos" : Link

            },{ $set : { 
                'profile__info.$.profile_videos_text' : Text,
                }
            }, 
            (err,doc)=>{

                // console.log('doc',doc)

                if(err)
                {
                    console.log("Update Error happened")
                    console.log(err)
                    res.status(404)

                }else{
                    console.log("Array update Finished")
                    // 만약 video update 에 성공한다면 

                    // 클라이언트 측에 전달할 video link를 찾아서 전달해준다
                    collection.find({token:x_auth}).toArray(function(err, data){
                        //data는 내가 찾은 token에 해당하는 데이터이다
                        // 즉, 내가 찾는 댄서에 대한 정보가 data로 들어오는데
                        // array 형식으로 들어오기 때문에, data[0]이라고 작성하는 것이다 
                        if(err){
                            console.log("Finding Video links Error happened")
                            console.log(err)
                            res.status(405)
                        }

                        console.log("Changed the data")
                        res.status(200).redirect('/api/users/mySpace')
                        // res.render('mySpace', data[0] )
                        // res.
                        // return;

                        })// collection : find

                }// else
            });


    })

Conclusion is, This is the "Right Solution"

But, Still, "Text" Value didn't change.....

Why ?
Because, the Link variable was different from actual "aws-link" of video

Actual link : 'https://danceprojectmb.s3.ap-northeast-2.amazonaws.com/Profile/1593407483563-file_example_MP4_480_1_5MG%20%281%29.mp4'

Link variable : 'https://danceprojectmb.s3.ap-northeast-2.amazonaws.com/Profile/1593407483563-file_example_MP4_480_1_5MG (1).mp4'

That is, In somewhere, the Link was not passed appropriately....
So....where?

From

To

That is,. original url of video is

" https://danceprojectmb.s3.ap-northeast-2.amazonaws.com/Profile/1593407483563-file_example_MP4_480_1_5MG%20%281%29.mp4 "

But, the sent url to "Edit get" Page is
" https://danceprojectmb.s3.ap-northeast-2.amazonaws.com/Profile/1593407483563-file_example_MP4_480_1_5MG (1).mp4 "

Reason : It seems like it is happening because there is length limit in "url"....

Solution 1: Use JS to send GET DATA instead of a.href

I gave each video and unique "Id"

and applied click event listenenr to every video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href = "../../cssjs/mypage/myMainpage.css" rel = "stylesheet"/>
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
  />
    <title>MyMainPage</title>
</head>

<body>
    <header id = "header1">
        <nav>
            <a class = "main" href="/main">
                <h2>같이추장께</h2>
              </a>
            <h2>Search</h2>
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ul>
        </nav>
    </header>
    
    <main>

        <div class = "Infos">

            <div class="Info__image">
                <img style=" border: 3px solid lightgray; border-radius: 50%;""  width = "100%" height = "100%" src="<%= profile_img %>">
            </div>

            <div class="Info__content">
                <div class="main__content">
                    <div class = "main__content name">
                        <%= e_name %>
                    </div>
                    <div class = "main__content profile">
                        <a href="/api/users/mypage">
                            <span >Profile Edit</span>
                            <i class="fas fa-user-cog icon-3x"></i>
                          </a>
                    </div>
                </div>
                <div class="profile__content">
                    <div class = "profile__content video">
                        <span class="title">Video</span>
                        <span class="num">5</span>
                    </div>
                    <div class = "profile__content friends">
                        <span class="title">Board</span>
                        <span class="num">5</span>
                    </div>
                    <div class = "profile__content board">
                        <span class="title">Friend</span>
                        <span class="num">5</span>
                    </div>
                </div>

                <div class="personal__content">
                    <span>Korean name : <%= k_name %></span>
                    <span>Place : <%= place %></span>
                    <span>Kakaotalk : <%= Kakaotalk %></span>
                    <span>Instagram : <%= Instagram %></span>
                </div>
            </div>

        </div>

        <ul id ="nav-tab" class="Nav">
            <li class = "active"><a  href = "#Videos">Video</a></li>
            <li><a href = "#mboard">Mi Board</a></li>
            <li><a href = "#tboard">Tu Board</a></li>
        </ul>

        <div class = "tab-content">
            <div class = "tab-pane active" id = "Videos">
                <% for ( var i = 0; i < profile__info.length; i++){ %>
                    <div id = "video<%= i%>" class = "video">
                        <video  controls muted src = <%= profile__info[i].profile_videos %> > 
                        </video>
                        <div class="video__text">
                            <span> <%= profile__info[i].profile_videos_text %></span>
                        </div>
                        <div class="video__btn">
                            <span>
                                <span class="Edit" >Edit</span>
                            </span>
                            <span>
                                <span class="Delete" >Delete</span>
                            </span>
                        </div>
                    </div>
                  <% } %>
            </div>

            <div class = "tab-pane" id = "mboard">
                <div id="cards-container">
                </div>
            </div>

            <div class = "tab-pane" id = "tboard">
                <span>Tu board</span>
            </div>
            
        </div>

        <div class="modal hidden">
            <div class="modal__overlay"></div>
            <div class="modal__content">
                <form class = "form" enctype = "multipart/form-data" method = 'POST' action = "/api/users/mySpace" id = 'upload_form'>
                    <h3>Upload Your Video</h3>
                    <label for="inpFile">
                        Choose Video
                        <input type="file" value = "Choose your Video" specllcheck = 'false' name = "video" id = "inpFile" accept ="video/mp4" />
                    </label>
                    <div class="image-preview" id ="image-preview">
                        <img src="" alt="Video preview" class="image-preview__image">
                        <br/>
                        <span class="image-preview__default-text">Video Preview
                        </span>
                    </div>
                    <div class="video-preview">
                        <video id="video-element" controls autoplay muted>
                            <source type="video/mp4">
                        </video>
                    </div>
                    <div class="video-text">
                        <input type="text" value = "Describe Your Video" name = "profile_videos_text" id = "inpText"/>
                    </div>
                    <button type="submit" id="submit-btn" class='btn-deactive'>Submit
                    </button>
                </form>
            </div>
        </div>
    </main>

    
    <div id ="card-copy" class="card-container">
        <div id="card">
        <div id="card-title"></div>
            <div class="sub-container">
            <div id="card-place-time" class='card-info'></div>
            <div id="card-people" class='card-info'></div>
            </div>
        </div>
      <div class="open-update"><div class="card-button btn-update">수정하기</div><div class="card-button btn-delete">삭제하기</div>
    </div>
</div>

    <div class="modalcontainer">
    </div>
    <div id="modal" class="delete-modal modal-hide">
        <div class="modal-header">정말 삭제할거에요? ㅠㅠ</div>
        <div class="modal-main">
          <button id='del-yes'>Yes?</button>
          <button id='del-no'>No?</button>
        </div>
    </div>

    <footer>
        <button id = "open">+_+</button>
    </footer>

    <script src="../../cssjs/mypage/mySpace.js"></script>
    <script type = "text/javascript">

        var Edit_Btn = document.getElementsByClassName('Edit')


        <% for ( var i = 0; i < profile__info.length; i++){ %>

            
            Edit_Btn["<%= i %>"].addEventListener('click', function(){
                var Edit_Video = document.getElementById("video<%= i %>")
                
                console.log(Edit_Video)
                console.log("click")

                const form = {

                    _id : "<%= _id %>" , 
                    Link : Edit_Video.querySelector('video').src ,
                    Text : Edit_Video.querySelector(".video__text").querySelector('span').innerHTML ,
                    Num  : <%= i %> 

                    }

                    console.log(form.Link)

                    var xhr = new XMLHttpRequest();

                    var requestData = `${form._id}?Link=${form.Link}&Text=${form.Text}&Num=${form.Num}`
                    console.log(requestData)

                    xhr.onload = () => {
                    // if( xhr.status == 200)
                    //     console.log("Good response")
                    //     location.href = '/api/users/mySpace'

                    }

                    xhr.open('GET',`/api/users/mySpace/edit/${requestData}`, true)
                    xhr.setRequestHeader('Content-type' , 'application/x-www-form-urlencoded')
                    xhr.send(requestData)
                    location.href = `/api/users/mySpace/edit/${requestData}`

                    // event.preventDefault()
                    return ;

                }, false)
                      <% } %>    
                      
                console.log()

    </script> 

</body>

</html>

Result : Same

So. The point is, whether you send the data throught existing method ( ex. a.href ) or JS . is not different...haha

Also, After you click particular video, it edits the corresponding video anyway..

If you click the last video, below client appears

Solution 2 : Add Unique number for Each video thought User.Schema

Html page in mySpace.ejs > div.video_num is hidden

<form class = "form" enctype = "multipart/form-data" method = 'POST' action = "/api/users/mySpace" id = 'upload_form'>
                    <h3>Upload Your Video</h3>
                    <label for="inpFile">
                        Choose Video
                        <input type="file" value = "Choose your Video" specllcheck = 'false' name = "video" id = "inpFile" accept ="video/mp4" />
                    </label>
                    <div class="image-preview" id ="image-preview">
                        <img src="" alt="Video preview" class="image-preview__image">
                        <br/>
                        <span class="image-preview__default-text">Video Preview
                        </span>
                    </div>
                    <div class="video-preview">
                        <video id="video-element" controls autoplay muted>
                            <source type="video/mp4">
                        </video>
                    </div>
                    <div class="video-text">
                        <input type="text" value = "Describe Your Video" name = "profile_videos_text" id = "inpText"/>
                    </div>
                    <div class="video-num">
                        <input type="number" value = "<%= profile__info.length %>"  name = "profile_videos_num" id = "inpNum"/>
                    </div>
                    <button type="submit" id="submit-btn" class='btn-deactive'>Submit
                    </button>
                </form>

router

// mySpace_Edit post
router.post('/api/users/mySpace/edit/:id' , function( req, res, next ){

    var x_auth = req.cookies.x_auth;
    const { email } = x_auth;

    console.log("req.params : " , req.params)
    console.log("req.body " , req.body)

    var Num = req.body.Num;
    var Link = req.body.Link;
    var Text = req.body.Text;
    var profile__place = util.format('profile__info[%d]', Num)
    // var profile__info = "'".concat(util.format('profile__info[%d]', Num)).concat("'") 

    var profile__videos__new = "'".concat('profile__info').concat('.').concat(Num).concat('.').concat("profile_videos").concat("'") 
    var profile__videos__text__new = "'".concat('profile__info').concat('.').concat('$').concat('.').concat(Num).concat('.').concat("profile_videos_text").concat("'") 

    //console.log(profile__videos__new)
    // console.log(profile__videos__text__new)
    console.log('req.params.id',req.params.id)
    console.log('Link : ',Link)
    // Link ='https://danceprojectmb.s3.ap-northeast-2.amazonaws.com/Profile/1593407483563-file_example_MP4_480_1_5MG%20%281%29.mp4'
    Link = "'".concat(Link).concat("'")
    console.log("New link:", Link)

    connection.db.collection("users", function(err, collection){

        // 해당 동영상 link를 array 에 추가하기 
        collection.updateOne(
            {
                "_id" : new ObjectId(req.params.id) ,
                "profile__info.profile_videos_num" : Num

            },{ $set : { 
                // "profile__info.$.profile_videos" : Link,
                'profile__info.$.profile_videos_text' : Text,
                "profile__info.$.profile_videos_num" : Num
                }
            }, 
            (err,doc)=>{

                // console.log('doc',doc)
                if(err)
                {
                    console.log("Update Error happened")
                    console.log(err)
                    res.status(404)

                }else{
                    console.log("Array update Finished")
                    // 만약 video update 에 성공한다면 

                    // 클라이언트 측에 전달할 video link를 찾아서 전달해준다
                    collection.find({token:x_auth}).toArray(function(err, data){
                        //data는 내가 찾은 token에 해당하는 데이터이다
                        // 즉, 내가 찾는 댄서에 대한 정보가 data로 들어오는데
                        // array 형식으로 들어오기 때문에, data[0]이라고 작성하는 것이다 
                        if(err){
                            console.log("Finding Video links Error happened")
                            console.log(err)
                            res.status(405)
                        }

                        console.log("Changed the data")
                        res.status(200).redirect('/api/users/mySpace')
                        // res.render('mySpace', data[0] )
                        // res.
                        // return;

                        })// collection : find

                }// else
            });


    })