728x90 전체 글143 [VS Code] Visual Studio Code 라이브 서버(Live Server) 설정 [VS Code] Visual Studio Code 라이브 서버(Live Server) 설정 VS Code의 확장 프로그램인 Live Server는 웹 개발자들에게 매우 유용한 도구이다. 이 확장 프로그램은 정적 및 동적 웹 페이지를 개발하는 동안 개발자가 코드를 수정할 때마다 브라우저에 자동으로 업데이트(실시간 리로드)를 적용하여 불필요한 새로고침을 줄이고 개발 속도를 획기적으로 늘려준다. 또한 단순 HTML/CSS/JAVSCRIPT 작업을 하는데 불필요하게 톰캣을 설치한다던가 배보다 배꼽이 더큰 작업을 수행해야하는 경우가 있는데 Live Server는 로컬 개발 서버를 생성해주므로 빠르고 편리한 개발환경을 제공한다. Live Server 설치 확장 프로그램을 열어 Live Server를 검색하여 설치.. 2023. 7. 21. 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. [Windows] 윈도우에 파이썬(Python) 설치하기 [Windows] 윈도우에 파이썬(Python) 설치하기 Python 설치 아래 링크를 클릭하여 파이썬 홈페이지로 접속한다. Welcome to Python.org The official home of the Python Programming Language www.python.org 다운로드한 파일을 실행한다. 기본 설치 디렉토리가 위와 같이 설정이 되어 있다. 설치 디렉토리를 변경하려면 Customize installation을 눌러 변경한다. Add pythone.exe to PATH를 체크하여 시스템 환경 변수에 자동으로 추가하도록 한다. 체크를 하지 않는 경우에는 나중에 별도로 환경변수를 등록해야 한다. 나중에 수동으로 환경변수를 추가하려면 파이썬 설치 디렉토리를 알고 있어야 한다. C:\Use.. 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. [Apache Tomcat] Context docBase를 이용하여 웹 어플리케이션에서 파일 시스템 접근 [Apache Tomcat] Context docBase를 이용하여 웹 어플리케이션에서 파일 시스템 접근 Apache Tomcat에서 Context의 docBase는 웹 어플리케이션의 기본 디렉토리 경로를 지정하는데 사용된다. 이를 통해 웹 어플리케이션에서 해당 경로에서 파일시스템에 접근하여 리소스를 찾을 수 있다. 예를 들어 리눅스 파일 시스템의 /data/image 라는 디렉토리안에 여러 이미지 파일들을 넣으면 웹 어플리케이션에서 경로에 있는 이미지 파일들에 접근이 가능한 것이다. Context docBase를 이용하면 웹 어플리케이션에서 따로 소스코드를 작성하여 파일시스템 접근하는 불편함을 없애준다. 아래 코드를 이용하여 확인해보자. 디렉토리 생성 $ mkdir /data/image 웹 어플리케이션.. 2023. 6. 2. [LINUX] CIFS를 이용한 외부 서버 파일 시스템 접근 [LINUX] CIFS를 이용한 외부 서버 파일 시스템 접근 CIFS를 이용하여 외부 파일시스템에 접근하려면 외부 시스템에서 먼저 Samba를 이용한 서버가 구성이 되어 있어야 한다. 우선 외부 서버가 Samba로 구성된 서버가 있다고 가정하고 CIFS를 이용해 접근하는 방법에 대해 알아보자. CIFS는 Common Internet File System의 약자로, cifs-utils는 Linux에서 CIFS/SMB (Server Message Block) 파일 시스템을 관리하기 위한 유틸리티다. cifs-utils 라는 유틸리티를 설치하면 외부 서버의 파일시스템에 접근이 가능하다. cifs-utils 확인 설치가 되어 있다면 아래와 같이 cifs-utils의 정보가 출력된다. 정보가 출력되지 않는다면 설.. 2023. 6. 2. 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. 이전 1 2 3 4 ··· 10 다음 728x90
