반응형 programming language/Javascript11 MutationObserver를 활용한 변화 감지 이미지 리스트의 변화를 감지하고 새로 추가된 이미지를 포함한 리스트를 다시 출력하려면 JavaScript의 MutationObserver 또는 리스트의 변화를 감지할 수 있는 리스트 갱신 함수를 활용할 수 있습니다. 아래 방법 중 상황에 맞는 것을 사용하시면 됩니다.방법 1: MutationObserver를 활용한 변화 감지HTML 요소 내에서 이미지 리스트가 동적으로 추가될 때 사용하면 좋습니다. observer.observe()에서 childList: true 옵션으로 자식 요소(이미지)가 추가되거나 제거될 때마다 MutationObserver가 트리거됩니다.addImage() 함수를 통해 이미지가 추가되면 MutationObserver가 감지하고 업데이트된 리스트를 출력합니다. // 이미지 리스트 .. 2024. 11. 15. string 데이터 배열로 만들기 공통 컴포넌트에서 출력되는 형식에 맞게 데이터를 가공후에 props를 통해 데이터를 내려보내려고 한다. - 서버에서 받아오는 데이터 형식 "testDescription": "-테스트 리스트 입니다 1번째.-테스트 리스트 입니다 2번째.-테스트 리스트 입니다 3번째.", - 만들어져야 하는 형식 newList: [ { "conText": "-테스트 리스트 입니다 1번째." }, { "conText": "-테스트 리스트 입니다 2번째." }, { "conText": "-테스트 리스트 입니다 3번째." }, ] 처음 시도했던 방식 '-' 기호를 가지고 하나의 문자열로 오는 데이터를 리스트로 나눈 후 conText의 이름에 데이터를 넣은 객체 모습으로 리턴시켰다. 그리고 나서 빈 문자열이 있을 경우는 지워주는 .. 2023. 12. 17. vanillaJS 페이지네이션 구현 각 구현되는 조건에 따라 파마리터명은 다르겠지만 초기 설정값을 정한다. 보통 화면 구현에는 이런 형식을 많이 사용하는 편인거 같다. 각 회사마다 다른 이름을 사용하고 있으니 참고! pageNum: 현재 페이지 pageSize: 한 페이지 당 나타낼 데이터의 갯수 totalRow: 총 데이터의 갯수 pageCount: 페이지 리스트 갯수 1. 먼저 페이징할 수 있는 데이터를 만들기 대략적으로 데이터가 담긴 리스트를 먼저 만들어 본다. 혹은 json-server등 유용한 API를 사용해도 무관하다. const someList = []; for (let i = 1; i { /** * 어디서 부터 어디까지 출력 시킬것인지 * slice : index를 이용해서 자름 (endIndex앞에자름) */ const s.. 2023. 12. 17. prototype 프로토타입은 자바스크립트의 핵심이다. 프로토타입 기반의 언어가 자바스크립트라는 개념을 인식해야한다. 클래스를 사용할 때도 프로토타입과 연관되어 있다. const user = { name: 'cap', age: 100 } const admin = user = { name: 'cap', age: 100, role: 'admin' } user과 admin 객체를 만들었다. 코드에서 보면 중복되는 name, age 속성들이 있다. 중복되는 코드를 줄일 수 있는 방법이 javascript에서 지향하는 prototype상속의 개념이다. user의 정보를 admin도 사용할 수 있도록 __proto__를 사용해서 prototype을 상속시켜줬다. admin을 조회해보니 [[prototype]] 안에는 age와 nam.. 2022. 12. 8. 이전 1 2 3 다음 728x90 반응형
