전체 글 (128) 썸네일형 리스트형 NEXT, VITE 환경변수 Next.js에서 환경변수 설정 및 사용 1. 환경변수 파일 생성Next.js에서는 .env.local, .env.development, .env.production 등의 파일을 사용합니다. 📌 주의: .env.local 파일은 .gitignore에 자동으로 포함되어 Git에 푸시되지 않습니다. NEXT_PUBLIC_API_URL=https://api.example.comSECRET_KEY=super-secret-key 2. 환경변수 사용 Next.js에서는 NEXT_PUBLIC_ 접두사가 붙은 변수만 클라이언트(브라우저)에서 접근 가능합니다. 1) 클라이언트에서 사용export default function Home() { return ( API URL: {process.env.NE.. CyclicBarrier, CountDownLatch `CyclicBarrier` 는 여러 개의 스레드가 모두 특정 지점(Barrier)에 도달할 때까지 기다렸다가, 동시에 실행을 재개하도록 하는 동기화 도구입니다."Cyclic"이라는 이름처럼 반복해서(barrier를 다시 사용할 수 있음) 사용할 수 있음CountDownLatch와 달리 모든 스레드가 도착해야만 다음 단계로 진행 package com.example;import java.util.concurrent.CyclicBarrier;public class CyclicBarrierReuseExample { public static void main(String[] args) { int numThreads = 3; CyclicBarrier barrier = new Cycl.. 이React, Vite, Typescript 참고, 오류 Window객체 확장 declare global 구문을 사용하면 브라우저의 window 객체를 확장하는 인터페이스를 정의할 수 있습니다. TypeScript에서 Window 인터페이스는 전역 window 객체를 나타내므로, 이 인터페이스를 확장하면 브라우저 환경에서 window 객체에 새로운 속성을 추가할 수 있습니다.declare global { interface Window { myCustomProperty: string; myCustomFunction: () => void; }}// window 객체에 새로운 속성을 추가window.myCustomProperty = "Hello, world!";window.myCustomFunction = () => { console.log("Cus.. Animation (transition, transform, keyframes) 기본적인 의사 클래스 이벤트 :hover 사용자가 요소 위에 마우스를 올렸을 때 스타일을 변경할 때 사용합니다.일반적으로 버튼, 링크 등의 강조 효과에 많이 사용됩니다. :focus 사용자가 요소를 포커스(클릭하거나 키보드 Tab으로 이동)했을 때 적용됩니다.주로 input, textarea 같은 폼 요소에 사용됩니다. :active 사용자가 요소를 클릭하고 있는 동안 적용됩니다.버튼을 클릭할 때 눌리는 효과를 만들 때 유용합니다. :target :target은 URL의 해시(#id)가 해당 요소를 가리킬 때 적용됨.주로 앵커링(페이지 내 이동)과 모달/토글 효과 등에 활용됨. :focus-visible :focus와 유사하지만, 키보드로 포커스할 때만 적용됩니다.마우스로 클릭하면 :focus-visib.. Spring Reactive [Mono, Flux, DeferredResult, WebClient, Future] Spring Reactive는 비동기적이고 논블로킹(Non-blocking) 방식으로 데이터를 처리하는 방법을 제공하는 Spring의 기능입니다. 주로 SpringWebFlux라는 모듈을 통해 구현되며, 이는 서버 응답의 지연 시간을 줄이고 높은 동시성을 처리할 수 있도록 돕습니다. 비동기처리 @GetMapping("rest") public Mono> rest(@RequestParam int idx) { String url = "/service?req={req}"; // 첫 번째 요청 보내기 return webClient.get() .uri(url, "rest" + idx) .retrieve() .. 스케쥴링 알고리즘 (FCFS, SJF, SRTF, RR) 1. FCFS (First Come, First Served, 선착순) 📌 특징:먼저 온 프로세스부터 순서대로 실행 (비선점)단순한 구조, 하지만 긴 작업이 먼저 오면 전체 지연 가능성 있음 (Convoy Effect)✅ 적합한 경우배치 처리 시스템 (Batch Processing System)백그라운드에서 실행되는 긴 작업을 순차적으로 처리할 때프린터 대기열 (Print Queue)먼저 온 인쇄 작업부터 차례로 인쇄💡 예시:은행 창구: 먼저 온 고객부터 처리하는 방식파일 다운로드 서버: 먼저 요청한 파일부터 다운로드 2. SJF (Shortest Job First, 최단 작업 우선)📌 특징:실행 시간이 가장 짧은 작업부터 처리 (비선점)평균 대기 시간 최소화 (하지만 긴 작업이 계속 밀릴 가능성.. CORS (Cross-Origin Resource Sharing) CORS (Cross-Origin Resource Sharing)는 웹 페이지가 다른 도메인에 있는 리소스를 요청할 때 발생할 수 있는 보안 문제를 해결하는 메커니즘 Access-Control-Allow-Origin: 요청을 허용할 도메인을 명시Access-Control-Allow-Methods: 허용할 HTTP 메소드(예: GET, POST 등)Access-Control-Allow-Headers: 허용할 HTTP 헤더Access-Control-Allow-Credentials: 쿠키나 인증 정보를 포함한 요청을 허용할지 여부 도메인이 다를 경우 메소드OPTION을 보내 허용된 origin, method등을 체크 CORS (Cross-Origin Resource Sharing)에서 Preflight O.. [React] 빌드 (번들링 Bundling, 트랜스파일링 Transpiling, 타입스크립트 컴파일) 빌드 과정 (next build 실행)TypeScript → JavaScript 변환 (트랜스파일링)SWC(기본) 또는 Babel이 TypeScript를 JavaScript로 변환Type Checking은 tsc가 아니라 Next.js 자체 체크 (next lint)모듈 번들링 (Webpack)Webpack이 모든 JS, CSS, 이미지 등을 하나로 묶음트리 쉐이킹(Tree Shaking)으로 불필요한 코드 제거최적화 및 압축CSS 및 JS 파일을 최소화 (Minification)코드 스플리팅(Code Splitting)으로 필요한 부분만 로드 가능하게 만듦 트랜스파일링 (Transpiling) : 최신 문법(ES6+, TypeScript 등)을 브라우저가 이해할 수 있는 코드(ES5 등)로 변환하는 과.. 이전 1 2 3 4 5 6 ··· 16 다음
