I'm sw engineer!

특정 속성에 접근할 때, 해당 속성이 null또는 undefined오류를 방지 🚀 즉, ?.당신을 사용하면 존재하는지 확인하는 if방법 없이 안전하게 속성에 접근할 수 있습니다!const obj = { user: { name: "Alice", age: 25 }};// 일반적으로 속성 접근console.log(obj.user.name); // 출력: "Alice"// 존재하지 않는 속성에 접근 (오류 발생)// console.log(obj.user.address.street); // ❌ TypeError: Cannot read properties of undefined (reading 'street')// ✅ 옵셔널 체이닝 사용console.log(obj.user...

내용 보기 / 숨기기 이 부분은 클릭하면 나타나고 다시 클릭하면 숨겨집니다. 2️⃣ 설명data-bs-toggle="collapse":클릭하면 해당 요소의 collapse기능을 활성화합니다. => 헤드 설정data-bs-target="#collapseExample": 숨기거나 참여대상 요소를 id입력합니다. => 숨기거나 표시할 body 의 id 작성: 숨길 요소를 감싸는 것 div. => 숨기거나 표시할 body에 class 와 id 정하기

$div.data(item); 📌 왜 사용할까요?데이터의 분류 및 분류item저장소 DOM 요소(`$div)에 저장하면, 이후 이벤트가 발생합니다.예를 들어, 클릭 이벤트 $(this).data()를 사용하여div에그디데이터DOM 조각 없이 데이터를 활용data-*속성 사용자예시 $('.accordion-item-wrap').on('click', function() { const itemData = $(this).data(); console.log(itemData); // 클릭한 div에 저장된 item 객체 출력}); 🔍예제 코드items.forEach((item) => { const $div = $(''); const html = this._dataConverter(item)..

// HTML 태그 제거 및 줄바꿈 처리 let text = data .replace(/]*>/g, "\r\n") // → 개행 문자로 변환 .replace(/]*>/g, "") // 모든 HTML 태그 제거 .replace(/ /g, " ") //  를 공백으로 변경 .trim(); // 앞뒤 공백 제거

변형되지 않는 현상 발생.기존 코드.replace(//g, "\r\n") // → 개행 문자로 변환 변경 코드.replace(/]*>/g, "\r\n") // 태그(속성 포함) → 개행 문자로 변환

$('#example').DataTable({ responsive: { details: false }});의미:responsive: DataTables에서 화면 크기에 따라 자동으로 컬럼을 숨기거나 표시하여 반응형 UI를 지원하는 옵션입니다.details: false: 반응형 처리 시 숨겨진 컬럼에 대한 추가 상세 정보 표시를 비활성화합니다.동작 방식:responsive가 활성화되면 화면 크기가 작아질 때 일부 컬럼이 숨겨질 수 있습니다.기본적으로, 숨겨진 컬럼의 데이터는 클릭 시 + 버튼을 눌러 상세 보기(details 기능)에서 확인할 수 있습니다.details: false를 설정하면 이 상세 보기 기능이 비활성화되어, 숨겨진 데이터가 아예 표시되지 않습니다.  기본 설정 (d..

if (this.$table.dataTable().fnSettings().fnRecordsDisplay() > 0) { // Execute logic if there are records displayed}this.$table.dataTable()DataTable 인스턴스를 초기화하거나 검색합니다..fnSettings()DataTables의 내부 설정 개체를 가져옵니다..fnRecordsDisplay()적용된 필터를 고려하여 현재 표시된 레코드 수를 반환합니다.

📌 setTimeout과 같은 비동기 코드에서 화살표 함수가 외부 this를 유지한다는 의미➡ 화살표 함수(=>)는 this를 바인딩하지 않고, 선언된 위치의 this를 그대로 사용한다.➡ 일반 함수(function() {})는 호출 방식에 따라 this가 달라진다.이 차이가 setTimeout, setInterval 같은 비동기 코드에서 this를 유지하는데 영향을 준다는 의미다.  ✅ 1. setTimeout에서 일반 함수(function) 사용 function Timer() { this.seconds = 0; setInterval(function() { this.seconds++; console.log(this.seconds); }, 1000);}cons..

📌 화살표 함수(=>)는 this를 바인딩하지 않는다화살표 함수는 일반 함수(function)과 다르게 this를 자체적으로 바인딩하지 않는다.즉, 화살표 함수 내부에서 this를 사용하면, 자신이 속한 스코프의 this를 그대로 가져온다(lexical this). 📌 1. 일반 함수와 화살표 함수의 this 차이✅ (1) 일반 함수에서의 this일반 함수(function)에서 this는 함수를 호출한 객체에 따라 달라짐.const obj = { value: 42, normalFunction: function() { console.log(this.value); // obj를 가리킴 (this === obj) }};obj.normalFunction(); // 출력: 42일반..

**크롤링(Crawling)**은 **웹 크롤러(Web Crawler)**라는 프로그램 또는 봇이인터넷 상의 웹 페이지를 자동으로 탐색하고 정보를 수집하는 과정을 말합니다.크롤링은 검색 엔진, 데이터 분석, 웹 스크래핑 등 다양한 목적으로 활용됩니다. 크롤링의 과정시작 URL 설정크롤러는 특정 URL(시드 URL)에서 시작하여 해당 페이지를 방문합니다.HTML 분석방문한 웹 페이지의 HTML 코드를 분석하고, 내부 링크 및 외부 링크를 추출합니다.링크 추적수집한 링크를 따라가며 다음 페이지로 이동합니다. 이렇게 여러 페이지를 자동으로 순회합니다.데이터 수집각 페이지의 텍스트, 이미지, 메타데이터 등 필요한 데이터를 저장합니다.반복탐색이 종료될 때까지 위 과정을 반복합니다.크롤링의 목적검색 엔진 색인(In..