ES5 자바스크립트와 Cobweb 스크래핑 개발 실무 가이드

1. 개요
2. 연간 교육 계획과 Cobweb 개발 로드맵
3. Cobweb 아키텍처와 JS 모듈 구조 이해
4. Cobweb 모듈의 실행 흐름
5. ES5 자바스크립트 핵심 기능의 실무 적용
6. 일반적인 스크래핑 패턴 구현
7. 자바스크립트 강의 내용과 Cobweb 실무 적용
8. 주요 실무 패턴 분석
9. 자주 사용되는 ES5 스크래핑 기법
10. 실무 적용을 위한 개발 팁

1. 개요

이 문서는 "웹 프론트엔드를 위한 자바스크립트 첫걸음" 강의와 Cobweb 개발 환경을 연계하여, 실무에서 ES5 자바스크립트를 효과적으로 활용하는 방법을 안내합니다.

Cobweb은 Object-C/Cocoa 기반의 스크래핑 도구로, espiderKit 프레임워크를 통해 자바스크립트 모듈을 실행하는 구조입니다.

이러한 환경에서 ES5 자바스크립트 지식을 어떻게 실제 스크래핑 개발에 적용할 수 있는지 알아보겠습니다.

2. 연간 교육 계획과 Cobweb 개발 로드맵

2.1 분기별 교육 및 실무 적용 계획

3. Cobweb 아키텍처와 JS 모듈 구조 이해

3.1 Cobweb의 JavaScript 실행 구조

Cobweb은 Object-C/Cocoa 기반의 스크래핑 도구로, espiderKit 프레임워크를 통해 자바스크립트 모듈을 실행하는 구조입니다.

다음과 같은 구조로 JavaScript 모듈을 실행합니다.

┌─────────────────────────────────────────┐
│           Cobweb Application            │
│  ┌─────────────────┐  ┌───────────────┐ │
│  │  Cocoa UI Layer │  │ Configuration │ │
│  └─────────────────┘  └───────────────┘ │
│  ┌─────────────────────────────────────┐│
│  │         espiderKit Framework        ││
│  │  ┌─────────────┐   ┌─────────────┐  ││
│  │  │ Spider      │◄──┤ JavaScript  │  ││
│  │  │ Engine      │   │ Interpreter │  ││
│  │  └─────────────┘   └─────────────┘  ││
│  └─────────────────────────────────────┘│
└─────────────────────────────────────────┘

 

 

 

espiderKit 프레임워크는 내부적으로 JavaScript 실행 환경을 포함하고 있으며, 이를 통해 ES5 자바스크립트로 작성된 스크래핑 모듈을 실행합니다. Object-C 코드와 JavaScript 코드는 이 실행 환경을 통해 상호 작용합니다.

 

 

3.2 모듈 상속 구조

Cobweb에서 JavaScript 모듈은 다음과 같은 상속 구조를 가집니다.

Module.prototype.js (기본 모듈)
      ↑
KROM0016.js (사이트 카테고리별 모듈)
      ↑
KROM0016011000.js (무신사 주문 조회 모듈)

 

이 구조에서 각 레벨은 다음과 같은 역할을 담당합니다.

1. 기본 모듈(Module.prototype.js): 모든 스크래핑 모듈의 기본 기능 제공
2. 카테고리 모듈(KROM0016.js): 특정 카테고리(예: 쇼핑몰 주문조회)에 공통적인 기능 제공
3. 사이트별 모듈(KROM0016011000.js): 특정 사이트(예: 무신사)에 맞춘 구체적인 스크래핑 로직 구현

4. Cobweb 모듈의 실행 흐름

4.1 모듈 실행 라이프사이클

Cobweb에서 JavaScript 모듈은 다음과 같은 라이프사이클로 실행됩니다.

Init() → GetParam() → Login() → GetData() → Convert() → SetResult()

각 단계는 다음과 같은 역할을 담당합니다.

1. Init(): 모듈 초기화, HTTP 객체 생성 및 기본 설정
2. GetParam(): 실행 파라미터 획득 및 검증
3. Login(): 대상 사이트 로그인 처리
4. GetData(): 실제 데이터 스크래핑 수행
5. Convert(): 스크래핑한 데이터를 표준 형식으로 변환
6. SetResult(): 최종 결과 반환

각 단계는 boolean 값을 반환하며, 하나라도 false를 반환하면 모듈 실행이 중단됩니다.

4.2 핵심 코드 패턴 분석

무신사 스크래핑 모듈 코드에서 볼 수 있는 핵심 패턴을 분석해보겠습니다.

모듈 정의와 상속

var KROM0016011000 = function () {
    // 모듈 속성 및 메서드 정의
    this.retData = {}; // 결과 데이터
    this.tempData = {}; // 임시 데이터
    
    // 메서드 구현
    this.Init = function() { /* ... */ }
    // ...
}

// 부모 모듈 상속
KROM0016011000.prototype = new KROM0016();

HTTP 통신 처리

this.http = new HttpProtocol();
this.http.timeout = 30;
this.http.urlencode = true;
this.http.isSSLHostname = true;

// HTTP 요청 예시
this.http.setRequestHeader("Connection", "Keep-Alive");
resultData = this.httpConnect("", "GET", this.hostURL + getData, "", 4);

JSON 데이터 처리

try {
    resultJson = JSON.parse(resultData);
} catch (e) {
    this.userError = (new Error().lineNumber + 1) + "";
    this.error = ERROR_ESPIDER.PAGE_CHANGE;
    this.tracking(resultData, this.debugDate, true);
    return false;
}

// 안전한 데이터 접근
this.safeGet = function(d) {
    d = (d === null || d === undefined) ? "" : d;
    if (typeof d == "number") d = d + "";
    return d;
};

오류 처리

this.userError = (new Error().lineNumber + 1) + "";
this.error = ERROR_ESPIDER.PAGE_CHANGE;
this.tracking(resultData, this.debugDate, true);
return false;

5. ES5 자바스크립트 핵심 기능의 실무 적용

5.1 프로토타입 기반 상속

Cobweb 모듈은 ES5의 프로토타입 상속을 활용하여 코드 재사용성을 높입니다.

// 부모 클래스 정의
var BaseModule = function() {
    this.commonMethod = function() {
        // 공통 기능 구현
    }
}

// 자식 클래스 정의
var ChildModule = function() {
    this.specificMethod = function() {
        // 특화 기능 구현
    }
    
    // 부모 메서드 오버라이드
    this.commonMethod = function() {
        // 기본 구현 확장
        BaseModule.prototype.commonMethod.call(this);
        // 추가 기능 구현
    }
}

// 상속 설정
ChildModule.prototype = new BaseModule();

5.2 클로저와 스코프

ES5의 클로저를 활용하여 모듈 내부 상태를 캡슐화할 수 있습니다.

var ScrapeModule = function() {
    // 프라이빗 변수
    var privateData = {};
    var requestCount = 0;
    
    // 프라이빗 함수
    function processData(rawData) {
        // 내부 처리 로직
        requestCount++;
        return /* 처리된 데이터 */;
    }
    
    // 퍼블릭 메서드 (클로저를 통해 프라이빗 변수/함수 접근)
    this.getData = function() {
        var rawData = this.httpConnect(/* ... */);
        return processData(rawData);
    }
    
    this.getRequestCount = function() {
        return requestCount;
    }
}

6. 일반적인 스크래핑 패턴 구현

6.1 선택자 시스템 구현

웹사이트 구조 변경에 대응하기 위한 견고한 선택자 시스템 예시

function findElement(container, selectors) {
    if (typeof selectors === 'string') {
        selectors = [selectors];
    }
    
    for (var i = 0; i < selectors.length; i++) {
        var element = container.querySelector(selectors[i]);
        if (element) return element;
    }
    
    return null;
}
// 사용 예시
var priceElement = findElement(productCard, [
    '.product-price',
    '.price',
    '[data-price]',
    'strong.value'
]);

6.2 데이터 추출 및 정제

다양한 형식의 데이터를 일관되게 추출하고 정제하는 유틸리티

var DataExtractor = {
    // 텍스트 추출
    getText: function(element, selectors, defaultValue) {
        defaultValue = defaultValue || '';
        var targetEl = findElement(element, selectors);
        return targetEl ? targetEl.textContent.trim() : defaultValue;
    },
    
    // 가격 추출 및 정규화
    extractPrice: function(element, selectors) {
        var priceText = this.getText(element, selectors);
        return priceText.replace(/[^\d]/g, '');
    },
    
    // 날짜 추출 및 변환
    extractDate: function(element, selectors, format) {
        var dateText = this.getText(element, selectors);
        // 날짜 형식 변환 로직 구현
        return formattedDate;
    }
};

6.3 동적 콘텐츠 처리

동적으로 로드되는 콘텐츠 처리 전략

function waitForElement(selector, timeout) {
    timeout = timeout || 10000; // 기본 10초 타임아웃
    
    var startTime = new Date().getTime();
    
    function checkElement() {
        var element = document.querySelector(selector);
        
        if (element) {
            return element;
        }
        
        if (new Date().getTime() - startTime > timeout) {
            throw new Error("Element not found within timeout: " + selector);
        }
        
        // 잠시 대기 후 다시 확인
        return null;
    }
    
    // 요소가 나타날 때까지 반복 확인
    while (true) {
        var element = checkElement();
        if (element) return element;
        
        // JavaScript에서는 동기적 대기가 불가능하므로 실제 구현은 다를 수 있음
        // Cobweb 환경에서는 별도의 대기 메커니즘 사용 필요
    }
}

6.4 데이터 검증 및 정합성 확인

데이터 검증 및 정합성 확인 패턴

function validateData (data, schema) {
    for (var key in schema) {
        if (schema.hasOwnProperty(key)) {
            var validator = schema[key];
            var value = data[key];
            
            if (!validator(value)) {
                return {
                    valid: false,
                    field: key,
                    value: value
                };
            }
        }
    }
    
    return { valid: true };
}

// 사용 예시
var orderSchema = {
    orderNo: function(v) { return v && v.length > 0; },
    orderDate: function(v) { return /^\d{8}$/.test(v); },
    amount: function(v) { return !isNaN(v) && v >= 0; }
};

var validationResult = validateData(orderData, orderSchema);
if (!validationResult.valid) {
    // 검증 오류 처리
}

7. 자바스크립트 강의 내용과 Cobweb 실무 적용

7.1 강의 주제별 Cobweb 실무 연계

7.2 ES5 문법의 실무 활용

// 1. 변수와 스코프 (강의 섹션 2, 7)
var searchStDt = this.tempData.searchStDt;
var searchEndDt = this.tempData.searchEndDt;

// 2. 조건문 (강의 섹션 5)
if (searchStDt == "" && searchEndDt == "") {
    // 조회일자 미입력 시 자동으로 현재일 기준 최근 5년 이내 내역을 조회
    this.tempData.searchStDt = resultJson.startDate.replace(/\-/g, '');
    this.tempData.searchEndDt = resultJson.endDate.replace(/\-/g, '');
}

// 3. 객체 활용 (강의 섹션 10)
var orderJson = {
    orderNo: orderNumber, // 주문번호
    orderDate: orderDate[0].replace(/\./g, ''), // 날짜(일자)
    detailList: [] // 주문내역 목록
};

// 4. 배열과 반복문 (강의 섹션 11, 12)
for (var item of orderOptionList) {
    var detailJson = {};
    detailJson.productName = item.goodsName;
    detailJson.quantity = item.quantity + "";
    // ... 추가 필드
    orderJson.detailList.push(detailJson);
}

// 5. 정규표현식 활용 (자료형 처리)
orderJson.orderDate = orderDate[0].replace(/\./g, '');

8. 주요 실무 패턴 분석

8.1 데이터 추출 패턴

Cobweb에서 웹사이트 데이터를 추출하는 핵심 패턴입니다.

// HTTP 요청을 통한 데이터 획득
resultData = this.httpConnect(new Error().lineNumber + 1, "GET",
    "/order-service/my/order/get_order_view/" + orderNumber, "", 0);
if (resultData === false) return false;

try {
    // JSON 파싱 (강의 섹션 비동기처리/API 호출)
    resultJson = JSON.parse(resultData);
} catch (e) {
    this.userError = (new Error().lineNumber + 1) + "";
    this.error = ERROR_ESPIDER.PAGE_CHANGE;
    this.tracking(resultData, this.debugDate, true);
    return false;
}

// 데이터 검증 및 안전한 접근 (강의 섹션 조건문/객체)
var orderList = this.safeGet(resultJson.orderList);
if (!orderList || orderList == "") {
    // 에러 처리
    return false;
}

8.2 데이터 정제 및 변환

스크래핑한 원시 데이터를 표준 형식으로 가공하는 패턴입니다.

// Convert 메소드의 핵심 패턴
for (var i = 0; i < orderList.length; i++) {
    var rec = orderList[i];

    var orderJson = {};
    orderJson[MODULE_ESPIDER.RES_OM_DATE_KEY] = "" + rec.orderDate;
    orderJson[MODULE_ESPIDER.RES_OM_ORDER_NUMBER_KEY] = "" + rec.orderNo;
    // ... 추가 필드 매핑
    
    orderJson[MODULE_ESPIDER.RES_OM_ORDER_DETAIL_LIST_KEY] = [];
    for (var j = 0; j < rec.detailList.length; j++) {
        var dt_rec = rec.detailList[j];
        
        var orderDetailJson = {};
        orderDetailJson[MODULE_ESPIDER.RES_OM_PRODUCT_NAME_KEY] = "" + dt_rec.productName;
        // ... 추가 필드 매핑
        
        orderJson[MODULE_ESPIDER.RES_OM_ORDER_DETAIL_LIST_KEY].push(orderDetailJson);
    }
    
    this.retData[MODULE_ESPIDER.RES_RESULT_KEY][MODULE_ESPIDER.RES_LISTS_KEY].push(orderJson);
}

8.3 안전한 데이터 접근

Cobweb에서 널 체크와 타입 변환을 통한 안전한 데이터 접근 패턴입니다.

// 안전한 데이터 획득 헬퍼 함수
this.safeGet = function(d) {
    d = (d === null || d === undefined) ? "" : d;
    if (typeof d == "number") d = d + ""; //숫자인 경우 문자열로 변경
    return d;
};

// 사용 예
var orderList = this.safeGet(resultJson.orderList);
if (!orderList || orderList == "") {
    // 에러 처리
}

9. 자주 사용되는 ES5 스크래핑 기법

9.1 데이터 포맷 변환

날짜, 금액 등의 데이터 포맷을 변환하는 기법입니다.

// 날짜 포맷 변환 (YYYY-MM-DD → YYYYMMDD)
searchStDt = this.tempData.searchStDt ? 
    this.tempData.searchStDt.substr(0, 4) + "-" + 
    this.tempData.searchStDt.substr(4, 2) + "-" + 
    this.tempData.searchStDt.substr(6, 2) : "";

// 금액에서 콤마 제거
detailJson.amount = item.receiveAmount.replace(/\,/g, '');

// 필수 데이터 검증
if (
    detailJson.productName == "" ||
    detailJson.quantity == "" ||
    detailJson.amount == "" ||
    detailJson.option == "" ||
    detailJson.state == "" ||
    detailJson.lnkUrl == "" || 
    detailJson.productCode == ""
) {
    this.userError = (new Error().lineNumber + 1) + "";
    this.error = ERROR_ESPIDER.PAGE_CHANGE;
    this.tracking(JSON.stringify(item) + "\n\n[resultData]\n" + resultData, this.debugDate, true);
    return false;
}

// 날짜 검증
if (!searchStDt.checkDateString()) {
    this.error = ERROR_ESPIDER.LOGIC_CHECK_DATE;
    this.userError = (new Error().lineNumber + 1) + "";
    return false;
}

10. 실무 적용을 위한 개발 팁

10.1 ES5 호환성 유지하기

최신 자바스크립트 기능을 사용하지 않고 ES5 호환성을 유지하는 방법:

// ❌ 사용하지 않음: let, const (ES6)
let orderList = resultJson.list;
const hostURL = "https://www.musinsa.com";

// ✅ 사용함: var (ES5)
var orderList = resultJson.list;
this.hostURL = "https://www.musinsa.com";

// ❌ 사용하지 않음: 화살표 함수 (ES6)
orderList.forEach(item => {
    // 처리
});

// ✅ 사용함: 함수 표현식 (ES5)
for (var i = 0; i < orderList.length; i++) {
    var item = orderList[i];
    // 처리
}

// ❌ 사용하지 않음: Promise, async/await (ES6+)
async function fetchData() {
    const response = await fetch(url);
}

// ✅ 사용함: 콜백 기반 비동기 처리 (ES5)
this.httpConnect(lineNum, "GET", url, "", 0, function(result) {
    // 응답 처리
});

10.2 디버깅 및 로깅 최적화

스크래핑 모듈의 디버깅과 로깅을 효과적으로 하는 방법:

// 라인 번호 추적으로 오류 위치 파악
this.userError = (new Error().lineNumber + 1) + "";

// 상세 컨텍스트 정보 포함 로깅
this.tracking(
    JSON.stringify(item) + "\n\n[resultData]\n" + resultData,
    this.debugDate,  // ex) "20251231"
    true
);

// 중요 단계별 로깅
console.info("무신사 모듈 KROM0016011000 class 4.GetData :: module index[", 
    this.index, "] thread index[", this.threadIndex, "]");

🛍️ 환불/교환, 이렇게 말하세요!

1. 기본 환불/교환 표현

2. 환불/교환 상황별 표현

3. 환불/교환 조건

4. 증거 제시 표현

긴급 상황 대처 표현

🚨 환불/교환 시 주의사항

🌟 초보자 환불/교환 꿀팁

1. 영수증 깔끔하게 보관
2. 구매 즉시 상품 상태 확인
3. 환불/교환 기간 체크
4. 정중한 태도 유지
5. 필요시 번역 앱 활용

추가 꿀팁

• 대부분의 일본 상점은 고객 서비스에 매우 친절함
• 상황을 차분하고 명확하게 설명
• 비언어적 의사소통(제스처) 활용

Q&A

Q: 환불이 안 되면 어떻게 해야 하나요?
A: 매니저나 다른 직원에게 양해를 구하세요. "店長に相談したいです" (텐쵸니 소단시타이 데스 - 점장과 상담하고 싶습니다)

Q: 영수증을 분실했다면?
A: 신용카드로 결제했다면 카드 전표로 확인 가능할 수 있습니다.

#일본쇼핑 #환불 #교환 #여행팁

💰 면세 신청, 이렇게 하세요!

1. 면세 기본 문의 표현

2. 면세 신청 조건

3. 면세 신청 시 필요 서류

4. 면세 절차 표현

5. 면세 구매 가능 품목

🚨 면세 쇼핑 주의사항

🌟 면세 쇼핑 초보자 꿀팁

1. 면세점 미리 확인
2. 여권/비자 사본 준비
3. 구매 영수증 깔끔하게 보관
4. 면세 창구 위치 미리 파악

추가 꿀팁

• 대형 백화점이나 면세점에서 가장 용이
• 공항 면세점도 이용 가능
• 구매 즉시 면세 절차 진행

Q&A

Q: 면세 구매 후 반출 주의사항은?
A: 구매한 물품은 입국 시 면세 수하물로 인정되며, 출국 시 세관에서 확인 가능합니다.

Q: 면세 구매 제한이 있나요?
A: 개인당 일정 금액과 수량 제한이 있으니 사전에 확인이 필요합니다.

#일본면세 #여행쇼핑 #면세팁 #일본여행

👗 사이즈 문의하기

1. 기본 사이즈 문의 표현

2. 일본 의류 사이즈 비교표

3. 사이즈 관련 상세 문의

🎨 색상 문의하기

1. 기본 색상 문의 표현

2. 기본 색상명

3. 색상 관련 추가 문의

🚨 쇼핑 시 주의사항

🌟 초보자 쇼핑 팁

1. 사이즈 측정 앱 미리 다운로드
2. 색상명 미리 외우기
3. 손가락으로 사이즈 표현 가능
4. 스마트폰 번역 앱 준비

추가 꿀팁

• 매장 직원에게 친절하고 인내심 있게 대하기
• 몸짓과 포인팅으로 소통 가능
• 사진 보여주며 문의하기 효과적

Q&A

Q: 사이즈가 맞지 않으면 어떻게 해야 하나요?
A: "交換できますか" (코칸 데키마스카 - 교환 가능한가요?)라고 물어보세요.

Q: 색상이 마음에 들지 않으면?
A: 정중하게 다른 색상을 문의하거나 다른 매장을 둘러보세요.

#일본쇼핑 #여행팁 #사이즈문의 #색상문의

[2024 완전 정복] 일본 쇼핑 협상 회화 - 가격 흥정부터 결제까지 초보 여행자 필수 가이드

🛍️ 일본 쇼핑, 이렇게 대화하세요!

1. 가격 묻기 기본 표현

2. 흥정 표현 (단, 일본은 흥정 문화가 약함)

3. 상품 상태 및 사이즈 확인

4. 결제 및 영수증 관련

🚨 일본 쇼핑 시 주의사항

🌟 쇼핑 초보자 꿀팁

1. 현금과 신용카드 모두 준비
2. 면세점 활용하기
3. 가격 미리 확인
4. 간단한 일본어 표현 준비

일본 쇼핑 특별 팁

• 대부분의 상점은 흥정을 안 받습니다
• 면세점에서는 좀 더 적극적인 가격 문의 가능
• 관광지 주변 상점은 조금 더 유연할 수 있음

Q&A

Q: 흥정이 통할까요?
A: 일반 상점에서는 거의 불가능합니다. 전통 시장이나 노점상에서만 제한적으로 가능합니다.

Q: 면세 구매는 어떻게 해야 하나요?
A: 여권 제시 후 구매 시 즉시 면세 처리됩니다. 하나투어나 면세점에서 자세히 안내받으세요.

#일본쇼핑 #여행팁 #쇼핑회화 #일본여행