728x90 Programming50 Node 기반 Puppeteer로 웹 자동화하기 (Automating the Web with Node-Based Puppeteer) Node 기반 Puppeteer로 웹 자동화하기 (Automating the Web with Node-Based Puppeteer) Puppeteer는 웹 브라우저를 자동화하기 위한 Node.js 기반의 라이브러리로 Puppeteer를 사용하면 Chrome 또는 Chromium 기반의 웹 브라우저를 제어하고, 웹 페이지 상호작용, 스크린샷 및 PDF 생성, 웹 사이트 크롤링 등 다양한 작업을 자동화할 수 있다. Puppeteer과 비교되는 라이브러리로는 Selenium이 있는데 Selenium은 WebDriver API를 사용하여 웹 브라우저와 상호작용하지만, Puppeteer는 Chrome DevTools Protocol을 사용하여 웹 브라우저와 상호작용한다. 이 프로토콜을 통해 브라우저 내부 동작에 .. 2023. 7. 19. [Python] 파이썬 Selenium으로 웹 크롤링 (Web crawl with Python Selenium) [Python] 파이썬 Selenium으로 웹 크롤링 (Web crawl with Python Selenium) Selenium은 웹 애플리케이션을 테스트하고 자동화하기 위한 도구로 주로 웹 브라우저를 제어하여 테스트 시나리오를 자동으로 수행하고 결과를 분석하는 데 사용된다. 다양한 언어를 지원하며 파이썬 외에도 C#, Ruby, Java, JavaScript로도 사용이 가능하다. Selenium을 이용하면 로그인, 회원가입, 데이터 입력 등 웹 사이트 폼 작업을 자동으로 수행할 수 있으며, 웹 페이지에서 데이터를 추출하고 필요한 정보를 수집도 가능하다. 예를 들어 뉴스 기사, 제품 가격 비교 등도 가능하다. 이러한 기능을 이용하면 우리가 웹에서 하는 단순 업무를 자동화할 수 있지 않을까? Seleniu.. 2023. 7. 14. [Python] 파이썬에서 가상환경 사용하기 [Python] 파이썬에서 가상환경 사용하기 가상환경을 사용하는 이유 프로젝트마다 독립된 파이썬 환경을 생성할 수 있다. 이는 프로젝트 간 라이브러리 충돌을 방지할 수 있고 하나의 프로젝트에서 라이브러리를 업그레이드하거나 변경해도 다른 프로젝트에 영향을 끼치 않는다. 또한 다른 PC에서 공유받은 파이썬 프로젝트를 가상환경과 같이 받으면 공유한 PC의 환경과 동일하게 맞출 수 있다. 가상환경을 사용하지 않는 경우에는 시스템 환경(전역환경) 즉 모든 파이썬의 실행이 시스템 환경의 패키지를 바라보게 된다. 이 때문에 몇 개의 프로젝트만 만들다 보면 라이브러리 간 충돌을 야기할 수 있다. 지금 당장은 번거로울지라도 가상환경을 사용하는 습관을 들이자. 가상환경 생성 크롤러(crawler) 라는 프로젝트를 만든다고.. 2023. 6. 21. VS Code(Visual Studio Code)로 Python 개발환경 설정 VS Code(Visual Studio Code)로 Python 개발환경 설정 Visual Studio와 PyCharm은 모두 파이썬 개발에 많이 사용되는 통합 개발 환경(IDE)으로 어떤 IDE가 더 나은지는 개인의 선호도와 개발하는 프로젝트에 따라 다른데 파이썬 언어에 특화된 PyCharm과 달리 VS Code는 범용적인 개발환경이며 다양한 언어를 지원한다. VS Code를 이용하여 파이썬 개발을 위한 개발환경을 만들어보자. VS Code(Visual Studio Code) 설치 [Windows] Visual Studio Code (VS Code) 설치하기 [Windows] Visual Studio Code (VS Code) 설치하기 Visual Studio Code 마이크로소프트에서 개발한 MS의 .. 2023. 6. 20. Spring JPA 복합키(Composite Key) 설정 Spring JPA 복합키(Composite Key) 설정 Spring JPA란 스프링 프레임워크에서 제공하는 JPA(Java Persistence API)의 구현체로 ORM 기술을 스프링 프레임워크와 통합하여 사용할 수 있도록 도와준다. ORM은 객체-관계 매핑(Object-Relational Mapping)의 약자로, 객체 지향 프로그래밍과 관계형 데이터베이스 간의 데이터 변환과 매핑을 자동화하는 기술이다. ORM은 개발자가 SQL 쿼리를 직접 작성하지 않고도 객체를 데이터베이스에 저장하고 조회할 수 있게 해주며 객체와 데이터베이스 간의 각종 매핑 규칙과 관계를설정하여 개발자가 객체 중심으로 개발할 수 있도록 지원한다. Spring JPA is the implementation of the Java .. 2023. 6. 14. Spring Boot & Vue.js - Aixos 파일 다운로드 Spring Boot & Vue.js - Aixos 파일 다운로드 (File Download) 클라이언트(Vue)에서는 axios 를 이용해 서버로 파일 다운로드를 요청하고 서버(Spring Boot) 에서는 클라이언트로부터 요청을 받아 파일 다운로드를 처리하는 기능을 구현해보고자 한다. Spring Boot와 Vue를 연동하는 방법은 아래 링크를 이용하여 구축하면 된다. I would like to implement a feature where the client (Vue) requests file download from the server using axios, and the server (Spring Boot) handles the request and initiates the file downl.. 2023. 6. 13. [Java] 계층 구조 데이터에서 특정 노드 찾기 [Java] 계층 구조 데이터에서 특정 노드 찾기 계층 구조(Hierarchical Structure)는 요소들이 계층적인 관계를 가지고 구성된 구조를 의미한다. 이 구조에서는 상위 요소와 하위 요소 사이에 부모-자식 관계가 존재하며, 최상위에는 단일한 루트 요소가 있다. 예를 들어, 조직의 조직도는 계층 구조의 한 예이다. 조직도에서 최상위에는 회사 자체가 위치하고, 그 아래에는 부서, 부서 아래에 팀, 팀 아래 개인이 있을 것이다. 이러한 데이터를 관리할 때 특정 노드를 찾는 방법을 자바스크립트로 구현해보고자 한다. 전자제품에는 컴퓨터와 모바일 폰으로 구분되고 모바일 폰은 스마트 폰과 피쳐 폰으로 구분된다. 스마트폰 하위노드로 Android와 IOS가 있으며 새로운 JiurinieOS가 생겼다고 가정.. 2023. 6. 9. [JavaScript] 계층 구조 데이터에서 특정 노드 찾기 [JavaScript] 계층 구조 데이터에서 특정 노드 찾기 계층 구조(Hierarchical Structure)는 요소들이 계층적인 관계를 가지고 구성된 구조를 의미한다. 이 구조에서는 상위 요소와 하위 요소 사이에 부모-자식 관계가 존재하며, 최상위에는 단일한 루트 요소가 있다. 예를 들어, 조직의 조직도는 계층 구조의 한 예이다. 조직도에서 최상위에는 회사 자체가 위치하고, 그 아래에는 부서, 부서 아래에 팀, 팀 아래 개인이 있을 것이다. 이러한 데이터를 관리할 때 특정 노드를 찾는 방법을 자바스크립트로 구현해보고자 한다. 전자제품에는 컴퓨터와 모바일 폰으로 구분되고 모바일 폰은 스마트 폰과 피쳐 폰으로 구분된다. 스마트폰 하위노드로 Android와 IOS가 있으며 새로운 JiurinieOS가 생.. 2023. 6. 9. vue3-tree 트리 컴포넌트 Axios(비동기)로 데이터 가져오기 vue3-tree 트리 컴포넌트 Axios(비동기)로 데이터 가져오기 vue3-tree 트리 컴포넌트 라이브러리 vue3-tree 트리 컴포넌트 라이브러리 vue3-tree 라이브러리는 vue3을 위한 트리 컴포넌트 라이브러리다. 이 라이브러리는 계층적 구조를 가지는 데이터를 시각적으로 표현하고 다룰 수 있다. vue3-tree jiurinie.tistory.com 지난 시간에 vue3-tree 트리 컴포넌트 라이브러리를 이용하여 트리 구조의 데이터를 시각적으로 보여줄 수 있도록 샘플 예제를 구현해보았다. 실제 운영환경에서는 서버에서 알맞은 데이터를 조회하고 가져와서 사용자에게 보여줄 것이다. 현재 사용중인 백엔드가 없으므로 public에 json 데이터를 넣고 Axios 라이브러리를 이용하여 데이터를 .. 2023. 6. 8. vue3-tree 트리 컴포넌트 라이브러리 vue3-tree 트리 컴포넌트 라이브러리 vue3-tree 라이브러리는 vue3을 위한 트리 컴포넌트 라이브러리다. 이 라이브러리는 계층적 구조를 가지는 데이터를 시각적으로 표현하고 다룰 수 있다. vue3-tree 라이브러리로 트리의 각 노드를 확장하거나 축소할 수 있으며, 체크박스, 삭제 수정에 따른 이벤트 처리 또한 가능하다. 아래의 JSON 데이터와 같이 계층 구조의 데이터를 불러와 사용자에게 보여주는 화면을 만들어보자. [ { "id": 1, "label": "Electronics", "nodes": [ { "id": 2, "label": "Computers", "nodes": [ { "id": 4, "label": "Laptops" }, { "id": 5, "label": "Desktops".. 2023. 6. 8. Vue3에서 Composition API를 이용한 Axios 비동기 통신 Vue3에서 Composition API를 이용한 Axios 비동기 통신 Vue에서 권고하는 Promise 기반의 HTTP 라이브러리로서 웹 어플리케이션에서 서버와 HTTP 요청을 주고 받을 수 있다. 또 Promise를 사용하면 비동기식 처리 상에서 데이터가 넘어왔을 때만 해당 코드가 실행되도록 하는 콜백 처리를 해줄 수 있다. Axios 는 다음과 같은 기능을 제공한다. 브라우저를 위해 XMLHttpRequests 생성 node.js를 위해 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 변환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기위한 클라이언트 사이드 지원 지난 시간에 Vue에서 기본적인 Options API 문법으로 Axios를 이용한 비.. 2023. 5. 31. Vue3에서 Composition API을 써야하는 이유? Vue3에서 Composition API을 써야하는 이유? 기존의 Vue에서는 Options API(일반적인 Vue 문법)을 기본적으로 사용하였다. 그 후 Vue3 버전부터는 Composition API를 플러그인 설치 없이 선언만으로도 사용할 수 있도록 업그레이드가 되었는데, 이전 버전에서는 Vue3의 형태와 조금은 다르지만@vue/composition-api 플러그인을 이용해서 사용할 수도 있다. Vue3에서 Compostion API는 setup(){}이라는 함수를 이용해서 사용할 수 있다. 아래 코드는 동일한 기능을 구현하는 코드인데 Compostion API를 이용한 코드와 Options API(일반적인 Vue 문법)을 사용한 코드를 비교해보자. Composition API Composition.. 2023. 5. 16. [Spring Boot] multiple DataSource 다중 데이터베이스 연결 구성 [Spring Boot] multiple DataSource 다중 데이터베이스 연결 구성 Eclipse IDE 2022-06 Open JDK 17 Spring Boot 3.0.6 Gradle Lombok PostgreSQL 하나의 프로젝트에서 여러 데이터베이스에 연결을 하기 위한 다중 데이터소스(Multiple Datasource)를 구성하여 사용해보자. 하나의 데이터베이스에 연결할 경우 아래와 같이 application.properties에 간단히 설정만으로도 구동이 가능하다. 번외로 설명을 추가하자면 Spring Boot 2.0부터는 기본 연결 풀이 tomcat-jdbc에 HikariCP로 변경되었다. 그래서 아래와 같이 설정하여도 HikariCP를 이용하여 데이터소스를 제공받을 수 있다. appli.. 2023. 4. 26. Spring @RequestBody 415 Unsupported Media Type (feat. Postman) Spring @RequestBody 415 Unsupported Media Type (feat. Postman) Github에서 공개된 프로젝트 소스를 받아 Postman을 이용하여 Rest API 테스트 중 다음과 같은 오류가 발생하였다. 이미 알고 공부했던 내용임에도 불구하고 오류를 맞닦드리면 기억이 나지 않아 또 검색하여 찾게 된다. 게다가 내가 직접 코딩한 소스가 아니라면 헷갈림은 배가 된다. 시간이 지남에 따라 또 금새 잊혀지므로 간단하게나마 정리해보자. HTTP Status Code 415 Unsupported Media Type Spring Console Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content.. 2023. 4. 13. [Spring Boot] No matching variant of org.springframework.boot:spring-boot-gradle-plugin:3.X.X was found. [Spring Boot] No matching variant of org.springframework.boot:spring-boot-gradle-plugin:3.X.X was found. 'Import Getting Started Content' has encountered a problem. NoMatchingConfigurationSelectionException: No matching variant of org.springframework.boot:spring-boot-gradle-plugin:3.0.4 was found. The consumer was configured to find a runtime of a library compatible with Java 11, packaged as a j.. 2023. 3. 9. 이전 1 2 3 4 다음 728x90
