분류 전체보기

Spring Boot Jsoup을 통한 웹 크롤링

웹 크롤링이란? 웹 크롤링은 웹 사이트에서 정보를 수집하고 추출하는 자동화된 프로세스를 의미합니다. 웹 크롤링은 일반적으로 웹 사이트의 robots.txt 파일을 준수하고, 무분별한 크롤링이나 스크래핑이 웹 서버에 부하를 일으키지 않도록 주의해야 합니다. 또한, 웹 사이트의 이용 약관을 준수해야 하며, 합법적인 목적으로만 사용해야 합니다. 크롤링을 할 때는 데이터 소유자의 권리를 존중하고 윤리적인 사용을 지키는 것이 중요합니다. Jsoup Jsoup은 HTML 파싱 및 조작을 위한 자바 라이브러리로, 웹 크롤링 작업에서 많이 사용됩니다. Jsoup을 통해 HTML 문서에서 원하는 정보를 추출할 수 있습니다. Jsoup 라이브러리 추가 dependencies { implementation 'org.jsou..

JS padStart와 padEnd 메소드: 문자열 길이에 맞게 문자 채워넣기 (문자열 패딩)

JavaScript의 padStart와 padEnd는 문자열을 특정 길이로 패딩하는데 사용됩니다. 이를 통해 지정한 문자를 원하는 길이로 문자열을 채우거나, 텍스트를 정렬하는데 활용됩니다. padStart와 padEnd는 ES8(ECMAScript 2017)부터 표준으로 추가되었습니다. 따라서 오래된 브라우저나 환경에서는 지원되지 않을 수 있음에 주의해야합니다. padStart 문자열의 시작 부분에 특정 문자열로 채워, 지정한 길이 만큼 만듭니다. 첫 번째 인자는 최종 길이를 나타냅니다. 두 번째 인자는 채울 문자열입니다. 두 번째 인자를 생략하면 기본값으로 공백(" ")이 사용됩니다. 아래 예제는 문자열 길이가 5가 되도록 문자열 "0"을 시작 부분부터 채워준 코드입니다. const str = "123..

웹 보안을 위한 XSS, CSRF 방어

XSS: Cross-Site Scripting XSS는 공격자가 악의적인 스크립트를 웹 페이지에 삽입하는 공격입니다. 해당 스크립트 코드는 게시판이나, 이미지, 웹 메일 등에 삽입될 수 있습니다. 삽입된 스크립트는 사용자의 브라우저에서 실행되며, 공격자에게 사용자의 정보를 노출하거나 악의적인 행동을 수행할 수 있습니다. 공격자가 위와 같은 악의적인 스크립트를 취약한 웹 페이지에 삽입합니다. 사용자가 해당 페이지를 열면, 악의적인 스크립트가 실행되어 예상치 못한 동작을 수행합니다. XSS는 사용자가 웹 사이트를 신용하여 악의적인 스크립트를 클릭한 경우로, 주로 사용자(클라이언트)를 대상으로 한 공격입니다. XSS 해결 1: 이스케이프 처리 XSS 취약점은 웹 어플리케이션 사용자로부터 입력받은 데이터 값을 ..

D3.js SVG: 2차원 벡터 그래픽을 표현하는 XML 기반 마크업 언어

SVG SVG(Scalable Vector Graphics)란 XML 기반의 벡터 그래픽 형식으로, 웹 페이지와 어플리케이션에서 벡터 기반의 그래픽을 표현하기 위해 사용됩니다. HTML이 헤더, 표와 같은 요소를 제공하는 거처럼 SVG는 원, 사각형, 곡선 등을 그릴 수 있는 요소를 제공합니다. SVG 장점 SVG는 이미지가 아니기 때문에 크기를 조절하여도 이미지가 깨지지 않습니다. 또한 간단한 이미지 같은 경우 JPG나 PNG 같은 비트맵 파일에 비해 크기가 작습니다. 이러한 이유로 아이콘이나 로고에 많이 쓰입니다. 이미지 뿐만 아니라 JS와 CSS와 결합하여 애니메이션을 만들 수 있고, 차트와 그래프를 표현하여 데이터도 시각화할 수 있습니다. SVG 사용법 SVG 시작 태그를 먼저 작성해줍니다. 속성..

D3.js 데이터 시각화를 구현하기 위한 자바스크립트 라이브러리

D3.js D3.js는 "Data-Driven Documents"의 약어로, 데이터 시각화를 위한 무료 오픈 소스 JavaScript 라이브러리입니다. D3.js는 데이터를 가져와 이를 시각화 시켜주는 도구로써 그래프, 차트, 지도 대시보드 등 다양한 형태의 데이터 시각화를 구현하는데 도움이 됩니다. D3.js는 HTML 문서의 DOM 요소를 선택하고 조작하여 데이터를 시각화합니다. 또한 SVG를 사용하여 그래프, 차트 등의 요소를 그립니다. SVG란? SVG(Scalable Vector Graphics)란 XML 기반의 벡터 그래픽 형식으로, 웹 페이지와 어플리케이션에서 벡터 기반의 그래픽을 표현하기 위해 사용됩니다. HTML이 헤더, 표와 같은 요소를 제공하는 거처럼 SVG는 원, 사각형, 곡선 등을..

JS 자바스크립트: `프로토타입` 기반 객체 지향 프로그래밍 언어

프로토타입(Prototype) 프로토타입 기반 언어는 객체 지향 프로그래밍의 한 형태로, 클래스 기반 언어와는 다른 객체 지향 모델을 따릅니다. JS(JavaScript)는 대표적인 프로토타입 기반 언어입니다. 프로토타입 상속: 클래스 기반 언어에서는 객체를 클래스의 인스턴스로 생성하는 반면, 프로토타입 기반 언어에서 객체는 다른 객체로부터 직접 상속됩니다. 즉, 객체는 다른 객체의 프로퍼티와 메서드를 상속받아 사용할 수 있습니다. 이때, 새로운 객체는 원본 객체의 프로토타입을 상속받습니다. 이를 통해 코드 재사용과 확장이 간단하게 이루어집니다. 프로토타입 객체: 프로토타입 기반 언어에서는 객체가 자체 속성과 메서드를 가짐과 동시에 prototype이라는 특수한 속성을 가집니다. 이 prototype 속..

Spring Boot Validation @NotNull, @NotEmpty, @NotBlank 차이점

유효성 검증을 위해 Java Bean Validation을 사용합니다. 그 중 성격이 비슷한 @NotNull과 @NotEmpty, @NotBlank에 간략히 정리하겠습니다. 객체의 유효성 검증, Hibernate Validator에 대한 개념과 사용 예시를 자세히 알고 싶으면 다음 링크를 따라가주시면 됩니다. :) https://yeo-computerclass.tistory.com/284 Spring Hibernate Validator와 Data Binding: 데이터 유효성 검사와 데이터 연결 Validation이란? 유효성 검증으로 전달 받은 데이터 객체의 내용에서 잘못된 내용이 있는지 유효성을 확인합니다. Spring은 주로 다음 두 가지 방식으로 유효성 검증을 합니다. Java Bean Valid..

Vue.js vue-infinite-loading을 사용한 무한 스크롤 구현하기

무한 스크롤 웹 어플리케이션에서 페이지 스크롤이 아래로 내려가면서 자동으로 추가 콘텐츠를 로드하는 무한 스크롤은 사용자 경험을 향상시킵니다. 바닐라 JS로 구현도 가능하지만 간단하게 구현하기 위해 Vue.js에서 제공하는 플러그인을 사용하여 구현해보겠습니다. vue-infinite-scroll과 vue-infinite-loading이 있지만 vue-infinite-loading vue 컴포넌트 라이브러리를 사용한 예시를 보여드리겠습니다. vue-infinite-loading Vue.js 애플리케이션에 무한 스크롤 기능을 추가하는데 도움을주는 Vue 컴포넌트 라이브러리입니다. 이 라이브러리를 통해 무한 스크롤을 간단하게 구현할 수 있습니다. 다음 링크에 나와있는 예제 코드를 참고하여 작성했습니다. http..