[TIL] 부트캠프 1주-4일차

[기억하고 싶은 것]

• VS code에서 코드 주석 처리하는 단축키 : Ctrl + /
•  openProfile 버튼에서 바인딩 오류가 있었다.

이렇게 바인딩 하려고 했는데 이것은 문서가 처음 로드될 때 존재하는 요소에 바인딩 하는 것이라 동적으로 생성되고 제거되는 버튼에는 사용할 수 없었다.

        $("#openProfile").click(async function () {
            let index = $(this).data("index");
            let member = member_data[index];

            $('#profileCard img').attr('src', member.image);
            $('#profileCard .featurette-heading').html(member.name);
            $('#profileCard .lead').html(${member.content}</h3>);
            $('#profileCard #blog').attr('href', member.blog_url);

            $('#profileCard').show();
        })

 

아래의 코드로 수정하여 해결했다. 

~ GPT의 설명

• document 객체에 이벤트 리스너를 등록하고, 클릭 이벤트가 발생할 때 이벤트의 대상이 #openProfile 요소인 경우에만 콜백 함수를 실행합니다.
• 이렇게 하면 페이지가 로드된 후 동적으로 생성된 #openProfile 요소에도 이벤트가 정상적으로 적용됩니다.
• async function () {...}는 비동기 작업을 수행하기 위해 사용됩니다. 이 예제에서는 비동기 작업이 포함되어 있지는 않지만, 추후 추가할 수 있습니다.

        $(document).on('click', '#openProfile', async function () {
            let index = $(this).data("index");
            let member = member_data[index];

            $('#profileCard img').attr('src', member.image);
            $('#profileCard .featurette-heading').html(member.name);
            $('#profileCard .lead').html(`<h3>${member.content}</h3>`);
            $('#profileCard #blog').attr('href', member.blog_url);

            $('#profileCard').show();
        });

 

 

 

[오늘 한 일]

• 알고리즘 문제 풀기
• 프로젝트 회의(오전 1회, 오후 1회)
• 프로젝트에서 맡은 부분 완성

 

[내일 할 일]

• 아침 저녁으로 알고리즘 문제 풀기
• 프로젝트 회의하고 데이터 수정
• SQL 강의 듣기