전체 글 (64) 썸네일형 리스트형 MacOS에 KeyCloak 설치 방법 1. Java 설치 확인Keycloak은 Java 기반이라 자바 17 이상이 필요해.터미널에 아래 명령어 입력해서 확인해봐:java -version없으면 Adoptium이나 Homebrew로 OpenJDK 17 설치 추천: brew install openjdk@17 설치 후 아래로 링크 걸어주기:sudo ln -sfn $(brew --prefix)/opt/openjdk@17/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-17.jdk export PATH="/usr/local/opt/openjdk@17/bin:$PATH"2. Keycloak 다운로드공식 사이트에서 최신 버전 ZIP 파일 다운로드:https://github.com/keycloa.. 프론트엔드 웹보안 실무 대응법 + 공격 예시 1. 인증 & 인가 (Authentication & Authorization)공격 시나리오사용자가 로그인해서 받은 JWT 토큰을 XSS 공격자가 스크립트로 훔쳐감 → 공격자가 그 토큰으로 로그인된 상태 가장 → 내 계정 탈취예) 게시판에삽입 → 쿠키 탈취공격 메커니즘스크립트가 페이지 내에서 실행되면서 document.cookie 접근 가능 → 토큰, 세션 쿠키 빼감토큰이 로컬스토리지에 있으면 더 쉽게 탈취 가능개발자 실무 대응토큰을 로컬스토리지에 저장하지 말고, httpOnly, Secure, SameSite 쿠키로 저장해 브라우저 JS에서 접근 불가React는 JSX 기본적으로 HTML 이스케이프 처리해 XSS 위험 줄임민감한 API 호출 시 Authorization 헤더로 토큰 전달, 쿠키 인증도 필.. React Router란? React Router란?React SPA (Single Page Application)에서 페이지(뷰) 간 이동을 관리해주는 라이브러리브라우저 주소(URL)에 따라 렌더링할 컴포넌트를 선택하고, 히스토리 관리 및 네비게이션 기능 제공기존 멀티 페이지 방식과 달리 페이지 전체 새로고침 없이 화면을 전환 가능주요 개념 및 컴포넌트1. BrowserRouter라우터의 최상위 컴포넌트브라우저 히스토리를 사용해 URL 변화 감지 및 상태 관리보통 앱 최상단(루트 컴포넌트)에 위치tsx복사편집import { BrowserRouter } from 'react-router-dom'; BrowserRouter> App /> BrowserRouter> 2. Routes와 RouteRoutes 안에 여러 개의 Route를.. 도커(Docker)란? ✅ 간단하게 말하면:내 앱을 실행하는 환경 전체를 하나의 "이미지"로 만들고, 그걸 어디서든 똑같이 실행할 수 있게 해주는 도구.📦 예를 들어:우리 앱은 Node.js 18, npm, 특정 폴더 구조, env 세팅 등 환경도커는 이걸 하나의 이미지로 포장해서,로컬AWS EC2GitHub Actions팀원 노트북어디서든 똑같이 돌릴 수 있게 함.⚙️ 2. 도커의 핵심 개념들용어설명이미지(Image)앱과 실행 환경을 포함한 실행 가능한 패키지 (정적인 파일)컨테이너(Container)이미지에서 실행된 실질적인 앱 인스턴스 (실행 중인 것)Dockerfile이미지 만드는 레시피 파일Docker Hub이미지 저장소 (npm의 도커 버전)Volume컨테이너 외부의 파일을 공유/저장하는 방법Port Mapping.. Ubuntu에 Docker로 PostgreSQL 설치하고 EC2 PostgreSQL DBeaver 연결 📌 개요이 글에서는 Ubuntu 서버 환경에서 Docker를 사용하여 PostgreSQL을 설치하고, 여러 개의 독립된 DB 인스턴스를 실행하는 방법을 단계별로 설명합니다.도커 권한 설정 (sudo 없이 실행하고 싶을 때)sudo usermod -aG docker $USER newgrp docker 1. PostgreSQL 이미지 다운로드docker pull postgres기본적으로 latest 태그가 설치됩니다.2. PostgreSQL 컨테이너 실행기본 컨테이너 실행docker run --name my-postgres \ -e POSTGRES_PASSWORD=mysecretpassword \ -p 5432:5432 \ -d postgres--name: 컨테이너 이름-e POSTGRES_PASSWOR.. Ubuntu에 Docker 설치하기 - 초보자 가이드 Docker는 컨테이너 기반 가상화 플랫폼으로, 개발 및 배포 환경을 효율적으로 관리할 수 있어 요즘 필수 도구 중 하나입니다.초보자도 쉽게 따라할 수 있게 각 명령어와 과정마다 설명을 덧붙였으니 끝까지 함께 해보세요!1. 기존 Docker 관련 패키지 제거 (필요시)sudo apt-get remove docker docker-engine docker.io containerd runc혹시 이전에 Docker나 관련 패키지가 설치되어 있다면 깨끗하게 제거하는 과정입니다.처음 설치하는 경우라면 이 과정은 생략해도 됩니다.2. 시스템 패키지 목록 업데이트 및 필수 도구 설치sudo apt-get update sudo apt-get install -y ca-certificates curl gnupg lsb-re.. Array.prototype.reduce() reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.const array1 = [1, 2, 3, 4];// 0 + 1 + 2 + 3 + 4const initialValue = 0;const sumWithInitial = array1.reduce( (accumulator, currentValue) => accumulator + currentValue, initialValue,);console.log(sumWithInitial);// Expected output: 10리듀서 함수는 네 개의 인자를 가집니다.누산기 (acc)현재 값 (cur)현재 인덱스 (idx)원본 배열 (src)리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는.. String.prototype.substring() Substring() 메서드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전까지 문자열의 부분 문자열을 반환const str = "Mozilla";console.log(str.substring(1, 3));// Expected output: "oz"console.log(str.substring(2));// Expected output: "zilla" 사용법str.substring(indexStart[, indexEnd])indexStart반환문자열의 시작 인덱스indexEnd옵션. 반환문자열의 마지막 인덱스 (포함하지 않음.) 설명substring() 메서드는 indexStart 부터 문자를 추출하지만 indexEnd 가 포함되지 않아도 괜찮습니다. 특징은 아래와 같습니다.만약 indexEnd .. 이전 1 2 3 4 ··· 8 다음