python과 selenium를 활용한 웹 크롤링에 대해 알아보겠습니다.
selenium은 다양한 브라우저(Chrome, Internet, Edge, Firefox, Opera, Safari)를 지원합니다.
selenium을 활용하면 웹페이지 정보 수집도 가능하고 원하는 웹 자동화 프로그램을 작성할 수 있습니다.
예제에서는 chrome 브라우저를 사용합니다.

selenium 크롤링 phyton

chrome-driver 다운로드

chrome브라우저를 사용하기 위해 chromedriver를 chrome 버전에 맞게 다운로드 받아야합니다.

• chromedriver 다운로드 링크

pip selenium 설치

pip를 이용하여 selelnium을 사용하기 위해 selenium를 설치해줍니다.

$ pip install selenium

selenium python 페이지 열기

from selenium import webdriver
import time

# 1. chromedriver 경로 설정
driver = webdriver.Chrome('./chromedriver')

# 2. google 사이트 열기
driver.get("https://google.com")
     
# 3. 3초 후에 브라우저 종료
time.sleep(3)
driver.close()

chromedriver가 다른 경로에 있다면 chromedriver path를 설정합니다.

python에서 chromedriver와 selenium을 활용하여 브라우저를 오픈하고 원하는 주소로 이동하는 방법에 대해 알아보았습니다.
다음에는 원하는 DOM Elements를 찾고 입력하는 방법들에 대해 알아보겠습니다.

[Selenium] - selenium WebElement python
[Selenium] - selenium element selector python

nodejs와 selenium-webdriver에서 element를 찾을 때 사용하는 selector에 대해 알아보겠습니다.
By Class를 이용하여 다양한 방법으로 원하는 element를 찾을 수 있습니다.
class, id, css selector, xpath, name 등을 지원합니다.

일반적으로 element ID가 사용가능하고, 고유하며, 예측가능하다면 검색할 때 element ID를 통해 하는 것이 매우 빠르고, 복잡하게 DOM을 이용하는 방법들을 속도에서 앞섭니다.
고유한 ID가 없다면, CSS selector이 그 다음으로 선호되는 방법입니다.
XPath 또한 CSS selector만큼 잘 작동되지만, 구문이 복잡하며 디버깅을 하기 힘들고 꽤 느린 경향이 있다고 합니다.

selenium element selector By nodejs

selenium selector By.id nodejs

element id를 이용하여 찾는 방법입니다.

const webdriver = require('selenium-webdriver');
const { By } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

const run = async () => {
  const service = new chrome.ServiceBuilder('./chromedriver').build();
  chrome.setDefaultService(service);

  const driver = await new webdriver.Builder()
    .forBrowser('chrome')
    .build();
  await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

  const loginInput = await driver.findElement(By.id('loginId'));
  await loginInput.sendKeys("userid");
  const loginPw = await driver.findElement(By.id('loginPw'));
  await loginPw.sendKeys("password");

  setTimeout(async () => {
    await driver.quit();
    process.exit(0);
  }, 3000);
}

run();

By.id를 이용하여 element를 찾고 각각 값을 입력하였습니다.

selenium selector By.className nodejs

await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

const chkLogin = await driver.findElement(By.className('img_top ico_check'));
await chkLogin.click();

By.className를 이용하여 element를 찾고 로그인 상태 유지 버튼을 클릭하는 이벤트를 주었습니다.

selenium selector By.name nodejs

await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

const loginInput = await driver.findElement(By.name('loginId'));
await loginInput.sendKeys("userid");
const loginPw = await driver.findElement(By.name('password'));
await loginPw.sendKeys("password");

By.name를 이용하여 element를 찾고 각각 값을 입력하였습니다.

selenium selector By.xpath nodejs

await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

const loginInput = await driver.findElement(By.xpath('//*[@id="loginId"]'));
await loginInput.sendKeys("userid");
const loginPw = await driver.findElement(By.xpath('//*[@id="loginPw"]'));
await loginPw.sendKeys("password");

By.xpath를 이용하여 element를 찾고 각각 값을 입력하였습니다.

selenium에서 element를 찾을 때 사용하는 By 클래스에 대해 알아보았습니다.
By 클래스에서 제공하는 다양한 함수를 활용하면
element id, classname, name, css selector, xpath 등을 활용하여 원하는 element를 찾을 수 있습니다.
다음에는 원하는 페이지 로딩 혹은 element 로딩이 끝날때까지 기다리는 Wait에 대해 알아보겠습니다.

[Selenium-크롤링] - selenium 크롤링 nodejs - 브라우저 열기

[Selenium-크롤링] - selenium element 찾기 nodejs

nodejs와 selenium-webdriver에서 사용할 수 있는 Element에 대해 알아보겠습니다.
Element를 적절히 활용하면 selenium을 활용한 크롤링 혹은 웹 자동화를 할 수있습니다.
Element를 찾고 Element에서 제공하는 다양한 함수에 대해 알아보겠습니다.
예제에서는 chrome 브라우저를 사용합니다.

selenium WebElement nodejs

WebElement는 DOM element를 나타냅니다.
element를 찾을 떄는 Webdriver를 이용해서 찾을 수도 있고 다른 WebElement를 통해서도 찾을 수 있습니다.

const webdriver = require('selenium-webdriver');
const { By } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

const run = async () => {
  const service = new chrome.ServiceBuilder('./chromedriver').build();
  chrome.setDefaultService(service);

  const driver = await new webdriver.Builder()
    .forBrowser('chrome')
    .build();
  await driver.get('https://www.tistory.com/');

  const info_div = await driver.findElement(By.className('btn_tistory '));
  start_btn.click();

  setTimeout(async () => {
    await driver.quit();
    process.exit(0);
  }, 3000);
}

run();

selenium findElement, findElements nodejs

findElement: 일치하는 하나의 Element를 반환합니다.
findElements: 일치하는 모든 Elements를 array로 반환합니다.

findElement

await driver.get('https://www.tistory.com/');

const startBtn = await driver.findElement(By.css('#kakaoHead > div > div.info_tistory > div > a'));
console.log(await startBtn.getText());

findElements nodejs

await driver.get('https://www.tistory.com/');

const gnbMenus = await driver.findElements(By.css('#kakaoGnb > ul > li'));
console.log(gnbMenus.length);
console.log(await gnbMenus[0].getText());

findElements는 array를 리턴합니다.

selenium sendKeys nodejs

문자 데이터를 입력하거나 Key 입력 이벤트를 발생시킬 수 있습니다.

const { By, Key } = require('selenium-webdriver');

await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

const loginInput = await driver.findElement(By.css('#loginId'));
await loginInput.sendKeys("email", "abc")
const pwInput = await driver.findElement(By.css('#loginPw'));
await pwInput.sendKeys("password", Key.ENTER)

Key.ENTER를 사용하여 패스워드 입력 후 엔터를 입력합니다.

selenium element click nodejs

element의 click 이벤트를 발생시킵니다.

await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

const loginInput = await driver.findElement(By.css('#loginId'));
await loginInput.sendKeys("email", "abc")
const pwInput = await driver.findElement(By.css('#loginPw'));
await pwInput.sendKeys("password")
const loginBtn = await driver.findElement(By.css('#authForm > fieldset > button'));
await loginBtn.click();

로그인 버튼 element를 찾고 click() 함수를 이용하여 click이벤트를 발생시킵니다.

selenium element getText nodejs

element의 sub-elements 포함한 모든 텍스트를 return합니다.

await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

const fields = await driver.findElement(By.css('#authForm > fieldset'));
console.log(await fields.getText());
// output
// 로그인
// 로그인 상태 유지
// 아이디 / 비밀번호 찾기

element를 활용하여 원하는 DOM을 찾거나 혹은 모든 DOM 리스트를 찾는 방법에 대해 알아보겠습니다.
다음에는 By를 활용한 DOM을 찾는 다양한 방법에 대해 알아보겠습니다.

[Selenium-크롤링] - selenium 크롤링 nodejs - 브라우저 열기

[Selenium-크롤링] - selenium element selector By nodejs

nodejs와 selenium-webdriver를 활용한 크롤링에 대하 알아보겠습니다.
selenium을 활용하면 웹페이지 정보 수집도 가능하고 원하는 웹 자동화 프로그램을 작성할 수 있습니다.
selenium은 다양한 브라우저(Chrome, Internet, Edge, Firefox, Opera, Safari)를 지원합니다.
예제에서는 chrome 브라우저를 사용합니다.

selenium 크롤링 nodejs

chrome-driver 다운로드

chrome브라우저를 사용하기 위해 chromedriver를 chrome 버전에 맞게 다운로드 받아야합니다.

• chromedriver 다운로드 링크

selenium-webdriver 설치

selelnium을 사용하기 위해 selenium-webdriver를 설치해줍니다.

$ npm install selenium-webdriver

nodejs

const webdriver = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

const run = async () => {
  // 1. chromedriver 경로 설정
  // chromedriver가 있는 경로를 입력
  const service = new chrome.ServiceBuilder('./chromedriver').build();
  chrome.setDefaultService(service);

  // 2. chrome 브라우저 빌드
  const driver = await new webdriver.Builder()
      .forBrowser('chrome')
      .build();

  // 3. google 사이트 열기
  await driver.get('https://google.com');
  
  // 4. 3초 후에 브라우저 종료
  setTimeout(async () => {
      await driver.quit();
      process.exit(0);
  }, 3000);
}

run();

chromedriver가 다른 경로에 있다면 chromedriver path를 설정합니다.

chromedriver와 selenium을 활용하여 간단하게 브라우저를 오픈하고 원하는 주소로 이동하는 방법에 대해 알아보았습니다.
다음에는 원하는 DOM Elements를 찾고 입력하는 방법들에 대해 알아보겠습니다.

[Selenium-크롤링] - selenium element 찾기 nodejs

[Selenium-크롤링] - selenium element selector By nodejs

php 문자열 길이 length

php 문자열의 길이를 구하는 방법에 대해 알아보겠습니다.
문자열 함수 strlen, mb_strlen을 사용하여 문자열의 길이를 구할 수 있습니다.

• strlen: 대상 문자열의 길이를 반환합니다.
• mb_strlen: 대상 문자열의 길이를 반환합니다.
• iconv_strlen: 대상 문자열의 문자의 갯수를 반환합니다.
  

- strlen

대상 문자열의 길이를 반환합니다.

Syntax: strlen ( string $string )

<?php
$str = 'php world.';
$length = strlen($str);
echo $length;
// output: 10

$str = '안녕하세요';
$length = strlen($str);
echo $length;
// output: 15
?>

안녕하세요는 문자열의 길이 5를 예상했는데 15라는 엉뚱한 결과가 나왔습니다.

NOTE: strlen은 문자열의 character의 길이가 아닌 Byte의 길이를 반환합니다.
우리가 원하는 값을 얻기 위해서는 mb_strlen을 사용해야 합니다.

- mb_strlen

대상 문자열의 길이를 반환합니다.

Syntax: mb_strlen ( string $str [, string $encoding = mb_internal_encoding() ] )

<?php
$str = 'php world.';
$length = mb_strlen($str, 'utf-8');
echo $length;
// output: 10

$str = '안녕하세요';
$length = mb_strlen($str, 'utf-8');
echo $length;
// output: 5
?>

INFO: $encoding을 입력하여 원하는 문자열의 길이를 얻을 수 있습니다.

- iconv_strlen

대상 문자열의 문자의 갯수를 반환합니다.

Syntax: iconv_strlen ( string $str [, string $charset = ini_get("iconv.internal_encoding") ] )

<?php
$str = 'php world.';
$length = iconv_strlen($str);
echo $length;
// output: 10

$str = '안녕하세요';
$length = iconv_strlen($str, 'utf-8');
echo $length;
// output: 5
?>

INFO: $charset을 입력하여 원하는 문자열의 길이를 얻을 수 있습니다.

- [php] - php 문자열 찾기

php 문자열 찾기

php 문자열 함수에서 문자열을 찾는 함수에 대해 알아보겠습니다.
문자열 함수 strpos, stripos, strstr을 사용하여 문자열을 찾을 수 있습니다.
정규식 패턴을 이용하는 reg_match, reg_match_all을 사용하여 문자열을 찾을 수 있습니다.

• strpos: 찾는 문자열에서 첫번째로 매칭된 position 값을 반환합니다.
• stripos: 찾는 문자열에서 첫번째로 매칭된 position 값을 반환합니다.(대소문자를 구분하지 않습니다.)
• strstr: 찾는 문자열이 존재하면 찾는 문자열을 포함한 나머지 문자열을 반환합니다.
• reg_match: 정규식 패턴을 이용하여 일치하는 첫번째 문자열을 찾습니다.
• reg_match_all: 정규식 패턴을 이용하여 일치하는 모든 문자열을 찾습니다.

- strpos

대상 문자열에서 찾는 문자열의 시작 위치(position)를 반환합니다.

<?php
$str = 'hi hi, welcome to the php world.';
$find = 'php';
$pos = strpos($str, $find);
echo $pos;
// output: 22

$find = 'welcome';
$pos = strpos($str, $find);
echo $pos;
// output: 7

$find = 'hello';
$pos = strpos($str, $find);
echo var_dump($pos);
// output: bool(false)
?>

INFO: 문자열이 존재하지 않는 경우 false를 반환합니다.

- stripos

대상 문자열에서 찾는 문자열의 시작 위치(position)를 반환합니다.
대소문자를 구분하지 않습니다.

<?php
$str = 'hi hi, welcome to the php world.';
$find = 'WORld';
$pos = stripos($str, $find);
echo $pos;
// output: 26

$find = 'WeLcOmE';
$pos = stripos($str, $find);
echo $pos;
// output: 7
?>

INFO: strpos와 stripos의 차이는 대소문자를 구분하느냐 하지 않느냐의 차이입니다.

- strstr

찾는 문자열이 존재하면 찾는 문자열을 포함한 나머지 문자열을 반환합니다.

Syntax: strstr ( string $haystack , mixed $needle [, bool $before_needle = FALSE ] )

<?php
$str = 'hi hi, welcome to the php world.';
$find = 'to';
$pos = strstr($str, $find);
echo $pos;
// output: to the php world.

$find = 'to';
$pos = strstr($str, $find, true);
echo $pos;
// output: "hi hi, welcome "
?>

INFO: $before_neelde = true로 하면 문자열의 처음부터 일치하는 문자열을 제외한 문자열을 반환합니다.

- preg_match

정규식 패턴을 이용하여 대상 문자열에서 일치하는 문자열을 찾습니다.
일치하는 문자를 찾은 경우 더 이상 검색하지 않습니다.

preg_match: preg_match ( string $pattern , string subject [, array &matches [, int $flags = 0 [, int $offset = 0 ]]] )
검색된 결과를 $matches 배열 변수에 반환합니다.

<?php
$str = 'hi hi, welcome to the php world.';
preg_match('/(hi)|(welcome)/', $str, $matches);
print_r($matches);
// print
// Array
// (
//     [0] => hi
// )
?>

INFO: 일치하는 값을 찾는 경우 더 이상 검색하지 않고 바로 결과를 반환합니다.
모든 값을 찾고 싶은 경우 preg_match_all을 사용할 수 있습니다.

- preg_match_all

정규식 패턴을 이용하여 대상 문자열에서 일치하는 모든 문자열을 찾습니다.

preg_match_all: preg_match_all ( string $pattern , string subject [, array &matches [, int $flags = PREG_PATTERN_ORDER [, int $offset = 0 ]]] )
검색된 결과를 $matches 배열 변수에 반환합니다.

<?php
$str = 'hi hi, welcome to the php world.';
preg_match_all('/hi/', $str, $matches);
print_r($matches);
// print
// Array
// (
//     [0] => Array
//         (
//             [0] => hi
//             [1] => hi
//         )
// )
?>

INFO: 정규식 flag //g 를 적용한 결과를 볼 수 있습니다.

php 문자열 함수, php 문자열 찾기, php 문자열 검색, php 문자 찾기, php 문자 검색, php 문자 갯수, php 문자열 정규식

파이썬 python list 값 요소 찾기

python list에서 원하는 값(요소)를 찾는 방법에 대해 알아보겠습니다.
list안의 값을 찾는 법은 여러 방법으로 구현할 수 있습니다.
각각의 방법에 대해 비교해보시고 상황에 맞게 적용하시기 바랍니다.

list[index]

list의 값의 index번호를 알고 있으면 index값을 적용하여 값을 가져올 수 있습니다.

list = ['apple', 'melon', 'grape', 'kiwi']
found = list[1]
print(found)
# print: melon

found = list[1]
print(found)
# print: kiwi

in operator

in 연산자를 이용하여 list에 찾는 값이 존재하는지 확인할 수 있습니다.

list = ['apple', 'melon', 'grape', 'kiwi']
if 'apple' in list:
    print(True)
    # print: True

list = ['apple', 'melon', 'grape', 'kiwi']
if 'Apple' not in list:
    print(True)
    # print: True

NOTE: 찾고자 하는 값이 문자나 문자열일 경우 대소문자를 구분합니다.

list.index

list에서 찾고자 하는 값고 정확히 일치하는 첫번째 값의 index 값을 반환합니다.
존재하는 모든 값의 index를 구하려면 다른 방법으로 구해야합니다.

Syntax: list.index(element)

• element: list에서 찾고자 하는 값
  
  

list = ['apple', 'melon', 'grape', 'kiwi']
found = list.index('melon')
print(found)
# print: 1

list = ['apple', 'apple', 'melon', 'grape', 'kiwi', 'apple']
found = list.index('apple')
print(found)
# print: 0

found = list.index('banana')
print(found)
# print: ValueError: 'banana' is not in list

NOTE: 찾고자 하는 값이 문자나 문자열일 경우 대소문자를 구분합니다.
값이 존재하지 않으면 ValueError를 반환합니다.

list.count

list에서 찾고자 하는 값의 갯수를 반환합니다.
찾고자 하는 값이 존재하지 않으면 0을 반환합니다.

Syntax: list.count(value)

• value: list에서 찾고자 하는 값

list = ['apple', 'melon', 'grape', 'kiwi']
count = list.count('apple')
print(count)
# print: 1

list = ['apple', 'apple', 'melon', 'grape', 'kiwi', 'apple']
count = list.count('apple')
print(count)
# print: 3

count = list.count('banana')
print(count)
# print: 0

list = ['apple', ['apple', 'melon'], 'grape', 'kiwi', 'apple']
count = list.count(['apple', 'melon'])
print(count)
# print: 1

INFO: parameter는 string, number, list등의 찾고자 하는 타입을 입력할 수 있습니다.

[Python] - 파이썬 python list to string 리스트를 문자열로 변경

[Python] - 파이썬 python 문자열 찾기

[Python] - 파이썬 python string, array, tuple length 길이

[Python] - 파이썬 python 문자열 공백 제거 / 삭제

javascript array를 정렬하는 방법에 대해 알아보겠습니다.
array sort 메서드를 사용하면 쉽게 배열을 정렬할 수 있습니다.
json array sort도 json key를 바탕으로 원하는 기준으로 정렬할 수 있습니다.

array.sort

배열 값을 정렬한 후에 정렬된 배열을 반환합니다.
기본 정렬 순서는 문자열의 unicode 포인트 순서를 따라 정렬됩니다.

Syntax: arr.sort([compareFunction])

• compareFunction: 배열의 정렬 순서를 정의하는 메서드

let array = [3, 5, 4, 1, 2];
array.sort();
console.log(array);
// output: [ 1, 2, 3, 4, 5 ]

array = ['b', 'a', 'e', 'd', 'c'];
array.sort();
console.log(array);
// output: [ 'a', 'b', 'c', 'd', 'e' ]

일반적인 경우라면 sort 메서드만 사용하여 쉽게 정렬할 수 있습니다.

예상과 다르게 정렬되는 경우에 대해 살펴보겠습니다.

array.sort 예상과 다른 경우

숫자들로만 이루어진 배열에서 sort 메서드를 사용하면 오름차순으로 정렬이 잘 될까요?
저는 그렇게 생각했습니다...
예제를 한번 보시죠

let array = [1, 2, 11, 34, 22];
array.sort();
console.log(array);
// output: [ 1, 11, 2, 22, 34 ]

예상과 같으셨나요? 능력자시군요..^^
NOTE: compareFunction이 없으면 배열의 값를 문자열로 변환하고 유니코드 순서로 문자열을 비교하여 정렬합니다.
숫자에 대한 오름차순 혹은 내림차순에 대한 정렬은 다른 방법이 필요해보입니다.

compareFunction(parameter)

sort 메서드의 파라미터로 정렬 순서를 정의하는 함수입니다.

• compareFunction(a, b) { return -1; }: a를 b보다 낮은 index로 정렬됩니다. [a, b]
• compareFunction(a, b) { return 1; }: b를 a보다 낮은 index로 정렬됩니다. [b, a]
• compareFunction(a, b) { return 0; }: a, b에 대한 순서를 변경하지 않습니다.

위의 정의를 바탕으로 다시 정렬해보겠습니다.

let array = [1, 2, 11, 34, 22];
array.sort((a, b) => a - b);
console.log(array);
// output: [ 1, 2, 11, 22, 34 ]

array.sort((a, b) => b - a);
console.log(array);
// output: [ 34, 22, 11, 2, 1 ]

array = [1, 2, 11, 34, 22];
array.sort((a, b) => 0);
console.log(array);
// output: [1, 2, 11, 34, 22]

INFO: 이제 원하는 정렬 방식으로 정렬이 잘 됐습니다.

• a - b: 오름차순 정렬
• b - a: 내림차순 정렬
• a = b: 순서를 변경하지 않음

json array sort

위 내용을 바탕으로 json array 정렬에 대해 알아보겠습니다.
기준이 되는 json key를 정하고 비교하여 정렬하면 원하는 결과를 얻을 수 있습니다.

let array = [
    { name: 'Amelia', age: 23 },
    { name: 'Grace', age: 32 },
    { name: 'Belita', age: 54 },
    { name: 'Isabel', age: 17 },
    { name: 'Luara', age: 48 },
    { name: 'Jessie', age: 73 }
];
// order by age asc
array.sort((a, b) => {
    if (a.age < b.age) return -1;
    if (a.age > b.age) return 1;

    return 0;
});
console.log(array);
// output: 
// [
//     { name: 'Isabel', age: 17 },
//     { name: 'Amelia', age: 23 },
//     { name: 'Grace', age: 32 },
//     { name: 'Luara', age: 48 },
//     { name: 'Belita', age: 54 },
//     { name: 'Jessie', age: 73 }
// ]

// order by name desc
array.sort((a, b) => {
    a = a.name.toLowerCase();
    b = b.name.toLowerCase();
    if (a < b) return 1;
    if (a > b) return -1;

    return 0;
});
console.log(array);
// output: 
// [
//     { name: 'Jessie', age: 73 },
//     { name: 'Belita', age: 54 },
//     { name: 'Luara', age: 48 },
//     { name: 'Grace', age: 32 },
//     { name: 'Amelia', age: 23 },
//     { name: 'Isabel', age: 17 }
// ]

json array에서 json key의 age를 기준으로 오름차순 정렬한 결과와 name기준으로 내림차순 정렬한 결과를 볼 수 있습니다.

[javascript] - 자바스크립트 javascript array 값 요소 찾기

[javascript] - 자바스크립트 javascript array to string 배열을 문자로 변경

[javascript] - [javascript] 자바스크립트 array 배열

[javascript] - [javascript] 자바스크립트 배열 추가 삭제 array 다루기

[javascript] - [javascript] 자바스크립트 json push, input value, 값 넣기