본문 바로가기

전체 글459

사이버 공격 사이버 공격 개요정의: 인터넷을 통해 다른 컴퓨터에 접속하여 시스템을 손상시키거나 무단 침입하는 행위기본 방식: 시스템 설정 오류, 보안 취약점 등을 악용하여 관리자 권한을 탈취 기술 발전에 따른 공격 다양화네트워크 패킷 조작웹사이트 취약점 악용무선 환경에서의 스마트폰 공격 다양한 사이버 공격악성코드(malicious Code, Malware)악의적인 용도로 사용될 수 있는 코드가 심어진 유해 프로그램의 총칭악성코드 종류: 바이러스, 웜, 트로이 목마, 백도어, 스파이웨어, 랜섬웨어 등무분별한 인터넷 사용으로 인한 감염이 많음예방 방법: 의심스러운 웹사이트 방문 자제, 수상한 이메일 확인하지 않기, 문자나 메신저로 오는 인터넷 주소 함부로 접속하지 않기, 이메일 문자 메신저로 받은 첨부 파일 함부로 열지.. 2025. 3. 25.
JWT & CRSF JWT 구성요소JWT는 세 부분으로 구성됩니다:xxxxx.yyyyy.zzzzzHeader.Payload.Signature각 부분은 Base64Url로 인코딩된 JSON 문자열입니다.1. Header (헤더)토큰의 타입과 서명 알고리즘 정보를 담습니다.{ "alg": "HS256", "typ": "JWT"}alg: 서명에 사용할 알고리즘 (예: HS256, RS256)typ: 토큰 타입 (보통 "JWT")2. Payload (페이로드, = claims)사용자 정보와 토큰의 의미 있는 데이터를 담는 핵심 부분입니다.{ "sub": "accessToken", "userId": 123, "email": "user@example.com", "role": "ADMIN", "iat": 1718780000.. 2025. 3. 25.
Jest와 React Test Library(RTL) Jest는 테스트 실행기 + 검증 도구 JestBy ensuring your tests have unique global state, Jest can reliably run tests in parallel. To make things quick, Jest runs previously failed tests first and re-organizes runs based on how long test files take.jestjs.ioReact Testing Library (RTL)는 React 컴포넌트 렌더링 & DOM 쿼리 도구 Testing Library | Testing LibrarySimple and complete testing utilities that encourage good testing .. 2025. 3. 25.
서버 없이 이미지에서 텍스트를 추출 tesseract js Tesseract.jsTesseract.js는 브라우저에서 돌아가는 순수 JavaScript OCR(광학 문자 인식) 라이브러리입니다.이미지에서 텍스트를 추출할 수 있으며, 별도의 서버 없이 클라이언트만으로 동작해요.특징작동 환경브라우저 또는 Node.js 모두 지원언어 지원영어, 한글 포함 다국어 (학습 파일 필요)동작 방식이미지 → WebAssembly → 텍스트 추출의존성Web Worker + WASM 파일설치 방식npm install tesseract.js 또는 CDN/로컬 로드 가능오픈소스무료, MIT 라이선스기본 사용법 (v6 기준)import { createWorker } from 'tesseract.js';const worker = await createWorker();await worke.. 2025. 3. 24.
크롬 확장프로그램 react로 개발하기 (WXT: Web Extension Framework) React로 크롬이나 웨일 확장 프로그램을 작성할 수 있을까? 찾아보다가 CRXjs를 사용하려고 했지만 2025년 5월에 업데이트를 멈출수도 있다는 공지를 확인하고 WTX를 이용해서 만들기로 했다.WXT는 크롬 확장 프로그램을 React + TypeScript로 빠르게, 편하게 만들기 위한 최신 개발도구이다. Next-gen Web Extension Framework – WXTWXT provides the best developer experience, making it quick, easy, and fun to develop web extensions. With built-in utilities for building, zipping, and publishing your extension, it's e.. 2025. 3. 24.
chrome 확장 프로그램 일반 웹 개발 vs 크롬 확장 개발웹 개발 vs 크롬 확장 개발시작점index.html 같은 메인 페이지manifest.json (설정 파일)권한 시스템없음 (브라우저가 제한)manifest.json에 명시적으로 선언해야 브라우저 기능 사용 가능페이지 접근현재 페이지 안에서만 동작다른 웹페이지의 DOM도 조작 가능 (content.js)백그라운드 처리백엔드(API 서버) 필요background.js에서 이벤트 처리 가능UI 실행 방식URL 직접 접속아이콘 클릭 → 팝업(popup.html) 실행보안 제한(CSP)적당히 자유로움매우 엄격 (CDN, inline script 금지 등)스토리지localStorage, DB 등chrome.storage.local, sync 등 브라우저 내장 스토리지배포서버에 올.. 2025. 3. 24.
Java 라이브러리와 모듈 시스템 Java 라이브러리와 모듈 시스템 (Java 8 & Java 9+) 1. 라이브러리(Library)란?자주 사용하는 클래스(.class) 파일들을 묶어 놓은 재사용 가능한 코드 묶음일반적으로 .jar (Java ARchive) 형태로 배포됨Java 8까지는 주로 JAR 기반으로 코드 재사용예시: ArrayList, Scanner 등이 포함된 rt.jar (Java 기본 라이브러리)2. 라이브러리 사용하는 법.jar 파일 사용 방법라이브러리를 .jar 파일로 제공 받음Classpath에 추가import 문으로 클래스 사용명령줄에서 JAR 실행javac -cp lib/mylib.jar MyProgram.javajava -cp .:lib/mylib.jar MyProgram3. 모듈(Module)이란? (Jav.. 2025. 3. 24.
JavaScript의 Object 객체와 주요 메서드 1️⃣ Object 생성 방법// 1. 객체 리터럴 방식const person = { name: "John", age: 30, greet: function () { return `Hello, my name is ${this.name}`; },};console.log(person.greet()); // Hello, my name is John// 2. Object 생성자 함수 사용const user = new Object();user.name = "Alice";user.age = 25;console.log(user.name); // Alice// 3. Object.create() 사용const proto = { type: "human" };const person2 = Object.create(.. 2025. 3. 21.
React 고급 Hook React 고급 Hook  (React 18+) 1. useId (서버와 클라이언트에서 동일한 ID 생성)React 18+에서 추가된 고유한 ID를 생성하는 Hook.클라이언트와 서버에서 같은 ID를 유지하도록 설계됨.SSR(서버 사이드 렌더링) 환경에서 ID 충돌 방지.폼 라벨 연결import { useId } from "react";const Example = () => { const id = useId(); // 고유한 ID 생성 return ( 이름: );};export default Example;id가 자동으로 생성되므로, 여러 개의 요소를 사용해도 충돌이 발생하지 않음.SSR(Next.js 등)에서 클라이언트와 서버의 ID가 일치하도록 보장함.2. u.. 2025. 3. 21.
useRef, useImperativeHandle useRef1. useRef란?React의 상태(useState)와는 다르게 리렌더링 없이 값을 저장할 수 있는 Hook.DOM 요소에 직접 접근하거나, 이전 값을 저장할 때 사용됨.값이 변경되어도 컴포넌트가 리렌더링되지 않음.2. useRef 기본 문법import { useRef } from "react";const Example = () => { const inputRef = useRef(null); // 초기값 설정 const focusInput = () => { inputRef.current.focus(); // input에 포커스 적용 }; return ( 포커스 );};export default Example;useRef를 사용하면 input 요.. 2025. 3. 21.
useEffect, useLayoutEffect, useInsertionEffect useEffectuseEffect는 React에서 컴포넌트의 생명주기를 다룰 수 있는 Hook으로, 사이드 이펙트(Side Effects)를 처리하는 역할을 합니다.1. useEffect의 역할비동기 API 요청 (데이터 패칭)이벤트 리스너 등록 및 해제DOM 조작 (클래스 추가, 애니메이션 등)타이머 설정 및 정리 (setTimeout, setInterval)컴포넌트가 마운트/언마운트될 때 특정 로직 실행2. useEffect 기본 문법1) 기본적인 사용 (마운트 시 실행)import { useEffect } from "react";const Example = () => { useEffect(() => { console.log("✅ 컴포넌트가 마운트됨!"); }, []); // 빈 배열 [] .. 2025. 3. 21.
React Router DOM React에서 페이지 이동 방법페이지 전환이 필요한 경우 react-router-dom을 사용하는 것이 가장 좋습니다.1. React Router (react-router-dom)React에서 페이지 이동을 구현하는 표준 라이브러리.설치npm install react-router-dom기본 사용법import { BrowserRouter, Routes, Route, Link } from "react-router-dom";const Home = () => 홈 페이지;const About = () => 소개 페이지;const App = () => { return ( 홈 | 소개 } /> } /> );};expor.. 2025. 3. 21.

티스토리툴바