전체 글242 🐧 리눅스 환경에서 Selenium으로 크롤링하기 – Chromium 브라우저로 설정하는 법 웹 크롤링은 데이터 수집 자동화의 핵심 기술 중 하나입니다. 그중에서도 Selenium은 웹 브라우저를 실제로 띄우고 조작할 수 있어 자바스크립트 렌더링이 필요한 페이지에도 강력합니다.이 글에서는 리눅스 환경(Ubuntu 기준)에서 Selenium을 사용하기 위해 필요한 Chromium 브라우저와 chromedriver 설정법을 다뤄봅니다.🧱 1. 왜 Chrome이 아닌 Chromium을 쓰는가?리눅스 환경에서는 일반적인 Google Chrome 설치보다는 오픈소스 버전인 Chromium을 사용하는 게 일반적입니다. 이유는 다음과 같습니다:경량이고 빠르며 불필요한 구글 서비스가 제거됨리눅스 패키지 매니저로 손쉽게 설치 가능headless 크롤링 환경에 최적화⚙️ 2. Chromium과 chromedri.. 2025. 4. 22. JavaScript에서 Promise를 사용하여 비동기 처리 순차적으로 기다리기 JavaScript에서는 비동기 처리를 할 때, 특히 API 호출이나 데이터 로딩과 같은 시간이 오래 걸리는 작업에서 동기적 처리와 같은 방식으로 기다려야 할 때가 많습니다. 이럴 때 유용하게 사용되는 것이 바로 Promise입니다.Promise란?Promise는 JavaScript에서 비동기 작업의 결과를 다루기 위한 객체입니다. 비동기 작업이 완료되었을 때 성공적으로 완료되었는지 또는 실패했는지를 처리할 수 있도록 도와줍니다.Promise의 기본 구조Promise는 주로 세 가지 상태를 가집니다:Pending: 작업이 아직 진행 중일 때.Resolved (Fulfilled): 작업이 성공적으로 완료되었을 때.Rejected: 작업이 실패했을 때.let myPromise = new Promise((re.. 2025. 2. 4. Bootstrap을 활용한 다이얼로그 탭 웹 애플리케이션 개발 시, 사용자가 데이터를 조회하거나 필터링할 수 있는 인터페이스를 제공하는 것은 매우 중요합니다. 이번 글에서는 Bootstrap을 활용해 탭 방식의 다이얼로그를 구현하는 방법을 살펴보겠습니다.주요 기능 설명구현할 기능은 다음과 같습니다:탭 기반의 다이얼로그: 두 개의 탭으로 구성된 UI를 통해 사용자가 "API 품목"과 "날짜" 기반 조회 중 하나를 선택할 수 있습니다.BootstrapDialog를 활용한 다이얼로그: 다이얼로그 컴포넌트를 사용해 사용자에게 조회 옵션을 제공합니다.API 연동: 선택한 옵션에 따라 적절한 API를 호출합니다.구현 코드Svelte 컴포넌트 코드아래는 전체 코드입니다. 필요에 따라 수정하거나 재사용할 수 있습니다.wms API조회주요 포인트탭 UI 구성:.. 2025. 1. 27. Ruby 로그 보기 좋게 출력하기 Ruby로 작업을 하다 보면 복잡한 데이터나 로그를 확인해야 하는 경우가 많습니다. 이때 데이터를 보기 좋게 출력하는 것은 디버깅과 유지보수를 훨씬 더 수월하게 만들어줍니다. 이번 포스팅에서는 Ruby의 기본 기능인 pp와 JSON.pretty_generate를 활용해 로그를 보기 좋게 출력하는 방법을 소개하겠습니다.1. pp (Pretty Print) 모듈pp는 Ruby의 표준 라이브러리로, 복잡한 객체나 데이터를 사람이 읽기 쉽게 출력하는 데 유용합니다. JSON 변환 없이 Ruby 객체를 그대로 보기 좋게 출력할 수 있어 간단하고 강력합니다.사용법require 'pp'# 예제 데이터users = [ User.new( id: 1, name: "Alice", email: "alice@.. 2025. 1. 24. JavaScript 함수 선언: function vs 화살표 함수 (=>) JavaScript에서 함수를 선언하는 방법에는 전통적인 function 키워드를 사용하는 방식과 ES6에서 도입된 화살표 함수 (=>)를 사용하는 방식이 있습니다. 두 방식은 사용법과 동작 방식에서 중요한 차이점을 가지며, 상황에 따라 적합한 방식을 선택해야 합니다. 이 글에서는 두 방식의 차이점과 각각의 장단점을 알아보겠습니다.차이점1. 구문 및 선언 방식function:전통적인 함수 선언 방식으로,function apiInspectData() { // 함수 내용}함수 선언은 코드의 어느 위치에서든 호출할 수 있습니다 (호이스팅).화살표 함수 (=>):변수에 익명 함수(anonymous function)를 할당하는 방식입니다.const apiInspectData = () => { // 함수 내용}.. 2025. 1. 23. Rails에서 Primary Key Sequence 초기화하기 Primary Key Sequence 초기화는 Rails 애플리케이션을 개발하거나 데이터베이스 작업을 수행할 때 자주 필요한 작업 중 하나입니다. 특히, 데이터를 가져오거나 삭제한 후 ID 시퀀스가 잘못 설정되어 데이터베이스 에러를 방지하기 위해 초기화 작업이 필요할 수 있습니다.Primary Key Sequence란?Primary Key Sequence는 데이터베이스에서 새 레코드를 추가할 때 다음 Primary Key(ID) 값을 결정하는 데 사용되는 값입니다.대부분의 경우, 테이블의 id 열이 Primary Key로 설정되며, 다음과 같이 동작합니다:첫 번째 행이 추가되면 id는 1로 설정됩니다.그다음 행을 추가할 때, id는 이전 ID 값 + 1이 됩니다.이러한 시퀀스 값은 id_sequence로.. 2025. 1. 20. BootstrapDialog로 사용자 확인(체크박스) 다이얼로그 만들기 이 글에서는 BootstrapDialog를 활용해 사용자에게 확인 메시지를 표시하고, 특정 조건(체크박스 선택)이 충족될 때만 동작을 수행하는 다이얼로그를 구현하는 방법을 소개합니다.목표BootstrapDialog를 사용하여 사용자 확인 다이얼로그 생성사용자에게 중요한 작업(예: 데이터 저장, 취소)을 확인받기 위한 UI를 제공.체크박스 선택 여부로 동작 제한사용자가 확인 체크박스를 선택하지 않으면 진행되지 않도록 구현.사용성 향상 및 코드 구조화이해하기 쉬운 로직과 이벤트 처리를 통해 유지보수성을 높임.구현하기예제 1: BootstrapDialog.show() 사용이 예제에서는 BootstrapDialog.show() 메서드를 이용하여 대화상자를 생성합니다. 이 방법은 즉시 대화상자를 띄우고자 할 때 .. 2025. 1. 17. systemctl --no-pager 명령어의 출력 결과를 페이지 분할 없이 한 번에 표시 systemctl과 --no-pager 옵션이란?1. systemctl의 역할systemctl은 Linux에서 서비스(프로세스)를 관리하는 데 사용되는 명령어입니다.예를 들어:서비스 시작: sudo systemctl start 서비스 상태 확인: sudo systemctl status 2. --no-pager 옵션의 의미--no-pager는 systemctl 명령어의 출력 결과를 페이지 분할 없이 한 번에 표시하도록 하는 옵션입니다.기본적으로 systemctl은 결과를 less와 같은 페이저(pager) 프로그램을 통해 출력하여 한 화면씩 나눠 보여줍니다.하지만 이 옵션을 사용하면 페이저 없이 모든 결과를 한 번에 출력합니다. 왜 --no-pager를 사용하는가?1. 명령어 실행 속도 개선페이저는 결과를.. 2025. 1. 6. WSL에서 systemctl 에러 해결하기: system has not been booted with systemd as init system WSL(Windows Subsystem for Linux)에서 systemctl 명령어를 사용하려고 할 때, 아래와 같은 에러를 마주쳤다.system has not been booted with systemd as init system (pid 1). can't operate. failed to connect to bus: host is down 문제의 원인1. WSL1은 Systemd를 지원하지 않음systemctl은 Systemd라는 리눅스의 init 시스템(부팅 및 서비스 관리 시스템)에서 동작하는 명령어입니다.하지만 WSL1은 Systemd를 기본적으로 지원하지 않기 때문에 systemctl 명령어를 실행할 수 없습니다.2. WSL2로 전환이 필요WSL2는 WSL1과 달리 완전한 Linux 커널.. 2025. 1. 3. [Svelte] 애니메이션 검색 창 만들기 검색 애니메이션 전체 요청자 담당자 작업명 fa fa-search 는 Font Awesome 아이콘 라이브러리의 클래스를 사용사용하려면 Font Awesome의 CSS 파일을 포함하거나 설치해야 함. HTML 파일의 사용 2024. 12. 14. 복사 방지 해제 법 방법 11. 원하는 페이지에서 F1을 누른다. 2. 설정창 클릭 3. Disable JavaScript를 체크한다.그리고 복붙을 한다!주의점) 설정창을 끄면 해당 설정도 풀린다 방법 1이 안될땐 스타일로 막혀 있을 수 있다.방법 2 Ctrl + Shift + c 을 누른다.복사를 원하는 부분을 클릭한다DevTools의 Styles에서user-select 가 들어가 있는 부분을 전부 체크를 해제한다그리고 복붙 한다! 2024. 12. 13. [Svelte] input type="text" change event Svelte에서 on:input 이벤트 처리하기Svelte에서 폼을 다룰 때, 사용자의 입력에 실시간으로 반응해야 하는 경우가 많습니다. 이번 블로그 글에서는 on:input 이벤트를 처리하여 입력 필드의 값이 변경될 때마다 변수를 업데이트하는 방법을 알아보겠습니다.입력 필드 설정먼저, Svelte에서 기본적인 입력 필드를 설정해보겠습니다. 입력 값을 변수에 바인딩하고, on:input 이벤트를 사용하여 입력이 변경될 때마다 함수를 호출합니다.svelte이 예제에서는 id가 "search"인 입력 필드를 만들었습니다. Svelte의 bind:value 지시어를 사용하여 입력 필드의 값을 searchText 변수에 바인딩합니다. 이를 통해 searchText가 항상 입력 필드의 값과 동기화됩니다.on:in.. 2024. 12. 12. 텍스트 무지개 애니메이션 텍스트에 무지개 애니메이션 효과 적용하기웹 디자인에서 애니메이션 효과는 사용자 경험을 향상시키는 중요한 요소입니다. 이번 블로그에서는 텍스트에 무지개 애니메이션 효과를 적용하는 방법을 알아보겠습니다. CSS만으로 간단하게 구현할 수 있으며, 부드러운 색상 전환과 움직임을 통해 눈길을 끄는 디자인을 만들 수 있습니다.최종 코드아래는 무지개 애니메이션을 텍스트에 적용하는 CSS 코드입니다: .gradient-text { font-size: 1em; /* 텍스트 크기 설정 */ font-weight: 500; /* 텍스트 두께 설정 */ cursor: pointer; /* 마우스 커서 포인터로 변경 */ background: linear-gradient(45deg, #fc8080, #ffa500, .. 2024. 11. 27. 쉘 스크립트 - 변수 1. 변수 선언쉘 스크립트는 변수를 선언 할때는 = 기호를 사용하고, 공백이 없어야 한다.name="Ubuntu" 2. 변수 사용변수를 사용할 때는 변수 앞에 $ 기호를 붙여서 사용한다.echo "System: $name" 실행 결과System: Ubuntu 3. 읽기 전용 변수readonly 를 사용하여 변수를 읽기 전용으로 설정할 수 있다.수정을 시도하면 오류를 발생한다# 텍스트 색상 설정readonly RED='\033[0;31m'readonly NC='\033[0m' 4. 변수 값 할당 시 명령어 결과 사용명령어의 결과를 변수에 저장하고 싶을땐 백틱(`), $() 으로 감싸서 사용한다.# 현재 경로를 변수에 저장current_dir=$(pwd)# 현재 날짜 가져오기CURRENT_DATE=$(dat.. 2024. 11. 14. js every 개발중 list에서 원하는 타입이 없으면 알림을 알리는 방법을 고민하고 있었다 let task_type_ck = true; readTaskData.data.tasks.forEach(item => { if(!modalPathList[item.task_type]){ task_type_ck= false; return; } }); if(!task_type_ck){ alert("modalPathList에서 찾을 수 없는 task_type이 있습니다"); return; }그래서 위와 같이 배열을 순외 하면서 값을 검증 한뒤 알림을 띄우는 방식으로 제작 했었다.하지만 마음에 들지 않아 검.. 2024. 11. 13. 스벨트 에러 ReferenceError: bootstrap is not defined 스크립트 로딩 순서 확인:스크립트를 로드하는 순서가 중요합니다. import하기 전에 jQuery와 부트스트랩이 이미 로드되어 있어야 합니다. 로딩 순서를 확인하고, 필요한 경우에는 로드 순서를 조정하여 문제를 해결할 수 있습니다.application.jsimport jquery from "jquery";window.$ = window.jquery = jquery;import "bootstrap";import BootstrapDialog from "bootstrap4-dialog";window.BootstrapDialog = BootstrapDialog; +layout.svelte onMount(async () => { import('/src/lib/application.js'); //mount후.. 2024. 6. 26. rails Origin 체크 비활성 rails new backend --api 명령어를 사용하여 Rails API 서버를 생성할 때는 기본적으로 Rails.application.config.action_controller.forgery_protection_origin_check = false 설정이 적용됩니다. 이는 Rails API 애플리케이션에서는 일반적으로 CSRF(Cross-Site Request Forgery) 보호 기능을 필요로 하지 않기 때문에 Origin 체크를 비활성화하는 것입니다.기본적으로 Rails는 CSRF 공격을 방지하기 위해 요청이 올바른 Origin에서 왔는지 확인합니다. 이를 통해 다른 도메인에서 악의적인 요청을 보내는 CSRF 공격을 막습니다. 하지만 API 서버에서는 다른 도메인에서 요청을 받아야 할 수 있.. 2024. 6. 25. rails - svelteKit 서버 분리rails new backend --apirails new backend --api 명령어에서 --api 옵션을 붙이면 다음과 같은 차이점이 있습니다:경량화된 어플리케이션 구성:API 전용 모드에서는 HTML 뷰 렌더링과 관련된 대부분의 파일과 설정이 생략됩니다.어플리케이션이 JSON 응답을 생성하고 관리하는 데 최적화됩니다.미들웨어 구성 변경:API 모드에서는 웹 요청과 응답에 필요한 최소한의 미들웨어만 포함됩니다.Action Cable, Turbolinks, Sprockets 등의 자산 파이프라인 관련 미들웨어가 제외됩니다.컨트롤러 설정 변경:기본 컨트롤러가 ActionController::API를 상속받습니다. ActionController::API는 경량화된 버전의 컨트롤러로, 기본적으로.. 2024. 6. 24. rails 모델 생성 rails generate model Postrails g model Post class CreatePosts rake db:migrate class HomeController 2024. 6. 2. 루비 데이터 받아보기 index.erb + html 작성 home_controller.rbclass HomeController params[:num1] => num1 이라는 name 의 value 를 가져옴 => 문자열 형태.to_i => int 형변환 routes.rb연결 2024. 5. 24. Rails 생성 컨트롤러 생성controllers > home_controller.rb 생성됨 페이지 만들기index 페이지 컨트롤러 작성 views > home >index.erb 파일 생성 테스트 작성 config > routes.rbhome#index 컨트롤러 연결실행 2024. 5. 9. 데이터 시각화 파이썬 high=[]low=[]with open('test.csv','r') as file: data=csv.reader(file) header=next(data) for row in data: if row[4]=='': break high.append(float(row[4])) low.append(float(row[-3]))print('최고') print(high)print('최저')print(low)plt.plot(high,color='red',label='high')plt.plot(low,color='blue',label='low')# 색뿐만아니라 선모양,마커 표시 등의 설정사항을 변경하거나 추가할수있다plt.legend()plt... 2024. 5. 8. python ValueError 문자열 입력시 int로 형변환하면 에러발생 try - except 로 에러 처리 2024. 5. 4. python 로또 게임 설계로또가 시작되면 사용자가 1~45 사이의 6개의 숫자를 선택합니다 완료되면 랜덤으로 숫자를 6+1개 뽑습니다 같은 숫자가 있는지 확인합니다 6개 맞으면 1등 5개 +1개 맞으면 2등 5개 맞으면 3등 4개 맞으면 4등 한글코딩input을 사용해서 list에 6개의 숫자를 저장합니다 랜덤으로 숫자를 뽑기위해 표준모듈 random을 사용해 1개의 숫자를 뽑고 중복 체크 타이버 가동 (표준모듈 time) list에 저장 6개 되면 스탑 보너스 숫자 1개를 뽑습니다 set 차집합을 이용 사용자가 선택한 숫자 6개가 랜덤으로 뽑은 6개와 동일하다면 set 길이는 0 1등 선택한 숫자 5개가 같고 set 길이는 1 나머지 1개가 보너스 숫자와 같으면 2등 선택한 숫자 5개만 같으면 set 길이는 1.. 2024. 5. 3. csv 직접 접근해서 데이터 얻기 파이썬 maxTemp=0date=''with open('test01.csv','r') as file: data=csv.reader(file) header=next(data) for row in data: ##print(row) row[5]=float(row[5]) if maxTemp 2024. 5. 1. 탬플릿 패턴 여러 클래스에서 공통으로 사용하는 메서드를 템플잇화 하여 상위 클래스에서 정의하고 하위 클래스마다 세부 동작 사항을 다르게 구현하는 패턴이다 - JDBC템플릿 변하지 않는 기능은 상위클래스에 만들어두고자주 변경되며 확장할 기능은 하위 클래스에서 만들도록 하여 상위의 메소드 실행 동작 순서는 고정하면서 세부 실행 내용은 다양화 될 수 있는 경우에 사용된다 사용 시기 클라이언트가 알고리즘의 특정 단계만 확장하고 전체 알고리즘이나 해당 구조는 확장하지 않도록 할때 동일한 기능은 상위 클래스에서 정의하면서 확장 변화가 필요한 부분만 하위 클래스에서 구현할때 장점클라이언트가 대규모 알고리즘의 특정 부분만 재정의하도록 하여 알고리즘의 다른 부분에 발생하는 변경 사항의 영향을 덜 받도록 한다.상위 추상클래스로 로직.. 2024. 4. 28. 팩토리패턴 클라이언트에서 직접 new연산자를 통해 제품 객체를 생성하는 것이 아닌 제품객체들을 도맡아 생성하는 클래스를 만들고 이를 상속하는 서브 공장 클래스의 메서드에서 여러가지 제춤 객체 생성을 각각 책임 지는 것이다 사용시기 클래스 생성과 사용의 처리 로직을 분리하여 결합도를 낮추고자 할 때코드가 동작해야하는 객체의 유형과 종속성을 캡슐화를 통해 정보 은닉 처리할 경우 장점생성자와 구현 객체의 강한 결합을 피할 수 있다팩토리 메서드를 통해 객체의 생성 후 공통으로 할 일을 수행하도록 지정해줄 수 있다단일 책임 원칙 준수 : 객체 생성 코드를 한 곳으로 이동하여 코드를 유지보수하기 쉽게 할 수 있으므로 원칙을 만족개방 / 폐쇠 원칙 준수 : 기존 코드를 수정하지 않고 새로운 유형의 제품 인스턴스를 프로그램에 도.. 2024. 4. 24. 싱글톤 패턴 객체의 인스턴스가 오직 1개만 생성되는 패턴 장점1. 메모리 측면에서 new를 최소 한번만 해서 메모리 낭비를 방지할 수 있다2. 다른 클래스 간에 데이터 공유가 쉽다. 싱글톤 인스턴스가 전역으로 사용되는 인스턴스이기 때문이다 단점1. 싱글톤 인스턴스는 자원을 공유하고 있기 때문에 테스트를 하기 위해선 매번 인스턴스 상태를 초기화 시켜주어야 한다2. 멀티 스래딩 환경에서 발생할 수 있는 동시성 문제동시성 : 하나의 세션이 데이터를 수정 중일때, 다른 세션에서 수정 전의 데이터를 조회해 로직을 처리함으로써 데이터의 정합성이 깨지는 문제 해결) 1. syncronizedsyncronized 를 사용하여 해당 스레드를 제외하고 나머지 스레드들의 데이터 접근을 막아 순차적으로 데이터에 접근랗 수 있도록 해줌문.. 2024. 4. 19. 우편 전체 읽음 처리 및 전체 안읽음, 삭제 선택해서 수정하는 것은 전부를 바꾸는 것이 아니기에 체크된 pk로 하나하나 업데이트를 진행해야한다 전체 읽음 처리 및 전체 안읽음, 삭제 스크립트 //각 행의 체크박스에 대한 이벤트 리스너 추가 var letterCheckboxes = document.getElementsByName("lettercheck"); for (var i = 0; i < letterCheckboxes.length; i++) { letterCheckboxes[i].addEventListener("change", function() { updateCheckAllCheckbox(); updateFilterButtonText(); }); } function updateCheckAllCheckbox() { var checkAllCheck.. 2024. 4. 15. 페이지네이션 페이지네이션은 크게 2가지로 나뉜다 1. 프론트엔드에서 모든 데이터를 받아와 페이징하는 방법 2. 모델로부터 데이터를 페이지에 맞게 가져오는 방법 2가지가 있다 나는 2번 방법으로 제작해 보았다 먼저 페이징 처리를 하기 위해선 // 쪽지 목록 (회원) private static final String SELECTALL_LETTER_LIST = "SELECT LETTER_ID, SENDER, TITLE, LETTER_CONTENTS, LETTER_DATE, " + "LETTER_STATUS FROM LETTER WHERE LOGIN_ID=? ORDER BY LETTER_DATE DESC LIMIT ?, ?"; LIMIT를 사용해야합니다 LIMIT 은 범위를 지정할수 있는 함수로서 첫 번째 매개변수는 반환할.. 2024. 4. 13. 이전 1 2 3 4 ··· 9 다음
