[TIL] 20230517 - mongoDB이용해서 get요청, post요청하기

서버 만들기, 클라이언트 생성

mongoDB에 members그룹을 만들어서

post하고 get요청으로 화면에 멤버카드 리스트를 띄웠다.

 

그런데, 

<문제>

클릭시 해당 멤버의 정보를 보여줘야한다.

멤버마다 개별 아이디값을 부여해 post하고 get 요청시 그해당 아이디의 객체정보를 가져와서 모달창에 보여줘야하는데..

팀원들의 코드를 보고 들어도 ... 잘안된댜ㅠㅠㅠㅠㅠ

post할때 id값을 만들어서 보내줘야한다는데

 

Math.random()함수로 각 아이디를 생성해서 get 요청시 입력해주긴했는데

그걸 어떻게 다시 post해서 기억하게 한담.....?

 

다른 팀원분 두분의 방법으로해봐도

id값이 들어가지않는다... 대체 뭐가 잘못된건지???

 

결국 엉망징창 ㅜㅜ 결국 post도 안되고

코드 싹 지우고 다시 시작!

 

div클릭시 해당 index 값을 가져와 data row에도 그 인덱스 값을 넣어서

클릭시 해당 멤버의 data만 가져올 수 있었다.

그런데 또 그 data에서  키값을 가져 올 수가 없...었.......

 

fetch('/members').then((res) => res.json()) .then((data) => {

        let rows = data['result']

        $('.team-member').empty()

        rows.forEach((a)=>{

            let name = a['name']

            let position = a['position']

            let mbti = a['mbti']

            let hobby = a['hobby']

            let img = a['img']

            let temp_html = `<div class="member-list" >

                                <div class="member-img"><img src="${img}" /></div>                

                                <div class="member-info">

                                    <h5 class="mem-name">${name}</h5>

                                    <p class="mem-posi">포지션 : ${position}</p>

                                    <p class="mem-mbti">MBTI : ${mbti}</p>

                                    <p class="mem-hobby">취미 : ${hobby}</p>

                                    <button class="more-btn" onclick="open_popup()">More</button>

                                </div>

                            </div>`

            $('.team-member').append(temp_html);

            const boxs = document.querySelectorAll(".member-list");

            boxs.forEach((el, index) => {

                el.onclick = () => {

                   

                    $('#popup').show();

                    console.log(index);

                    let rowData = rows[index]

                    console.log(rowData)

                    $('.member-contents').empty();

 

                    rowData.forEach((a)=>{  //여기가 문제라는데 forEach를 안돌려도 안나옴 ㅠㅠ

                        let name = a['name']

                        let position = a['position']

                        let mbti = a['mbti']

                        let hobby = a['hobby']

                        let email = a['email']

                        let git = a['git']

                        let blog = a['blog']

                        let img = a['img']

           

                        let temp_html2 = `<div class="pop-img">

                                            <img src="${img}" alt="멤버 이미지" />

                                        </div>

                                        <div class="pop-info">

                                            <h5 class="mem-name">${name} </h5>

                                            <p class="mem-posi">포지션 : ${position}</p>

                                            <p class="mem-mbti">MBTI : ${mbti}</p>

                                            <p class="mem-hobby">취미 : ${hobby}</p>

           

                                            <p class="mem-mail">이메일 : ${email}</p>

                                           

 

${git}"> Git ID : ${git}</a></p>

                                            <p class="mem-blog"><a href="${blog}" > Blog : ${blog}</a></p>

                                        </div>  `

                        $('.member-contents').append(temp_html2);

                    })

                }

            });

           

        })            

    });

 

오늘은 하루종일 제자리 걸음 ㅠㅠㅠ

기초가 부족한탓 같은데 시간은 없고 진도는 안나가고!

답답쓰 !

오늘 한거라곤 자동돌려서 수정한 로고한개뿐이네 ^^....

팀원분들 다 넘 잘하신당 내일은 더 화잇팅해야지

 

 

해결해야할 문제

* 개별 아이디값 부여 or 인덱스값으로 그데이터 가져오기

* 개별 댓글 입력,삭제, 수정 만들기

* 추후 업데이트 할부분 - 등록시 실제 이미지 파일 업로드