Map() 함수

일단 map함수가 뭐냐면 ES6 문법은 아니지만, 정말 자주 쓰이는 메소드란다! 꼭 숙지해야할 코드!

const array1= [1,4,9,16];

//map 사용
const map1 = array1.map(x=>x*2);

//함수가 적용된 결과로 새로운 배열을 반환.
console.log(map1); //[2, 8, 18, 32]

이런 식으로 기존의 배열을 -> 새로운 배열로 만들어 주는 함수라고 한다!

오늘 맞닥드린 issue

mongoDB에 data에 Post 했던 Data 값들이 잘 이용해
웹종합반 강의에서 학습했던 방법으로 데이터를 뽑아, .append(temp_html) 을 잘 붙여 주어 list 들까지는 잘만들었는데...
Modal 에는 data 들이 들어오지 않는 현상이 생겼다 ㅠㅠ

자바스크립트 코드

여기 까진 강의대로 잘 적용되었지만 아래에서 큰 깨달음을 얻는다.

fetch('/post').then((res) => res.json()).then((data) => {
            let rows = data['result'];
            $('#columns').empty();
            rows.forEach((a) => {
                let image = a['img'];
                let name = a['name'];
                let mbti = a['mbti'];
                let _id = a['_id']; 

                let temp_html = ` <figure class="content" data-num="${_id}">
                                      <img src="${image}" />
    
                                      <figcaption class="name">
                                            ${name}
                                      </figcaption>
                                      <figcaption class="mbti">
                                            ${mbti}
                                      </figcaption>
                                      <button class="detail">
                                          자세히
                                      </button>
                                  </figure>`;
                $('#columns').append(temp_html);
            
            });

여기서부터 시작이다... 아직도 코드가 잘 익혀지지 않지만, 기록하고 남겨서 공부 할 예정

   //  detail-Modal , Get ,Modal close status
            $('.content').click(function () {
                let detail_modal = $('.detail-overlay');

                let id = $(this).data('num');

                $('.detail').attr('data-num', id);

                let all_id = rows.map(rows => rows['_id']);

                let indexNum = $.inArray(id, all_id);

                let this_data = rows[indexNum]
                
                let $image =this_data['img']
                let $name = this_data['name'];
                let $mbti = this_data['mbti'];
                let $blog = this_data['blog'];
                let $advantages = this_data['advantages'];
                let $collaboration = this_data['collaboration'];
                let _id = this_data['num'];
                
                $('.info-image img').attr('src', $image);
                $('.info-name').text($name);
                $('.info-mbti').text($mbti);
                $('.info-blog').text($blog);
                $('.info-advantages').text($advantages);
                $('.info-collaboration').text($collaboration);

                $('.info-overlay').attr('data-num', _id);

                detail_modal.css({
                    'display': 'block'
                });
            });
        });

데이터 값을 요리조리 요리해서 적용해 주었다. 자식 요소까지 데이터를 끌고 가기위한 노오오력!

느낀점

TIL에 앞서... 오늘은 내 생일이다... 축하를 많이 받아 세상 행복했다. 🥲, 그리고 코드를 긁어 오는 것은 익숙하지만, 코드 구현이 아직도 어렵다... 팀원중에 벌써 코드를 이해하고 서툴지만 한줄씩 써 내려가는 것을 발견했는데 너무 대단하고 느낀바가 많았다. 나도 코드를 읽고 긁어 쓰는 것을 벗어나 하나씩 작성해 보는 연습도 해보아야 겠다. (마지막 까지 나 자신 생일 축하해)