IT LAB

1. Vite란?프론트엔드 개발을 위한 빌드 도구이자 개발 서버✅ 기본 구조 잡아줌✅ HMR: 코드 수정 시, 전체 페이지를 다시 로드하지 않고 바뀐 부분만 즉시 반영해줌✅ 모던 브라우저 환경 최적화: ES Module 기능을 적극적으로 활용 (불필요한 번들링을 줄이므로 더 빠르게 동작함)✅ 빌드 도구 포함: 개발용 서버 뿐 아니라 배포용 파일 생성 가능 셋팅npm create vite@latest -- --template react-ts 2. 주요 디렉토리/파일파일/디렉토리역할알아야 할 점src/애플리케이션 소스 코드대부분의 개발이 여기서 이루어짐src/main.tsxReact 앱 시작점보통 건드릴 일 거의 없음src/App.tsx첫 화면 컴포넌트React 공부 초반에는 거의 여기만 수정public/..

1. 기본 타입stringnumberjavascript에는 정수와 실수를 구분하는 타입이 없음 booleanArray배열 안에 어떤 타입의 값이 들어가 있는지 표현함 예시더보기let numbers: number[] = [1, 2, 3];let names: string[] = ['Alice', 'Bob'];let numbers: Array = [1, 2, 3];let names: Array = ['Alice', 'Bob'];type User = { id: number; name: string;};const users: User[] = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' },]; 2. 타입 확인확인 대상코드stringtypeof s === 'stri..

1. 배경Javascript의 성장처음에는 웹페이지에 간단한 상호작용을 넣기 위한 작은 스크립트 언어였음현재는 프론트엔드 뿐 아니라 백엔드, 큰 규모의 앱에서도 사용됨⚠️ 앱이 커질수록 실행 전에는 발견하기 어려운 타입 관련 오류가 많아짐 목표Javascript 코드를 실행하기 전 타입이 맞는지 검사하는 역할✅ Javascript 문법을 그대로 쓰며, 거기에 Typescript의 타입 시스템이 추가됨 2. 타입값이 할 수 있는 동작과 능력 Type Annotation변수, 함수 파라미터, 반환값 등에 타입을 직접 적는 문법타입을 지정할 대상 뒤에 타입을 적음 Object Type객체가 어떤 속성을 가지고 있고, 각 속성이 어떤 타입인지 표현함 예시더보기function printCoord(pt: { x: ..

1. React화면을 만들기 위한 Javascript 라이브러리✅ state나 props가 바뀌면 컴포넌트를 다시 렌더링하고, 변경된 부분만 화면에 반영해줌 2. 컴포넌트재사용 가능한 UI 조각 (화면을 컴포넌트라는 단위로 나누어 구성함)✅ JSX를 반환하는 JS 함수✅ 중첩할 수 있음 예시) 컴포넌트더보기컴포넌트 이름은 대문자로 시작함 예시) js 함수더보기function Button() { return 저장;}html 태그는 소문자로 시작함 예시) 중첩 가능더보기export default function MyApp() { return ( Welcome to my app );}export default는 대표 컴포넌트를 의미함 JSXHTML처럼 생겼음 (실제로는..

1. Environment배포 대상 환경을 의미함github actions에 어떤 환경에 배포할 지 알려주는 역할ex) development, staging, production 예시) 워크 플로더보기jobs: deploy: runs-on: [self-hosted, production] environment: production steps: - run: ./blue-green-deploy.sh 보호 장치 역할job 앞에 보호 장치를 걸 수 있음기능의미Required reviewers지정된 사람이 승인해야 배포 진행Prevent self-review실행한 사람이 자기 배포를 직접 승인하지 못하게 함Wait timer승인 후 일정 시간 기다렸다가 배포Deployment branch..

1. 전통적인 배포 방식의 한계과거 온프레미스 환경에는 서버 자원이 제한적이었음새로운 버전을 배포할 때 기존 운영 서버에 코드를 덮어쓰는 방식이였음✅ 현재 유저가 사용중인 서버에 직접 새 코드를 반영하는 구조⚠️ 장애 범위가 큼: 배포하다 터지면 직접 롤백해야 했음⚠️ 롤백 느림: 문제가 생기면 이전 버전으로 직접 돌려야 하므로 오래걸림⚠️ 디버깅이 어려움: 버그가 나면 서비스를 살리기 바빠 디버깅을 할 수가 없음⚠️ 무중단 배포가 어려움: 서버를 재시작하거나 교체하는 과정에서 일시적인 중단이 발생함 2. 블루/그린 배포 방법론현재 운영 중인 환경과 동일한 새로운 환경을 하나 더 만들어놓고, 새 버전을 그곳에 배포한 뒤 검증이 끝나면 트래픽만 전환하는 전략클라우드 기술이 발전하면서, 똑같은 서버 환경을 ..

1. Github Flow란?Github에서 권장하는 단순한 브랜치 기반 개발 흐름✅ main 브랜치는 작업 시작점이자 언제든 배포 가능한 안전한 브랜치✅ PR 단위를 작게 가져가기➡️ 배포가 빨라짐➡️ 소규모 팀에 적합ex) main, feature/* 흐름작업커밋 & pushPull Request 생성리뷰/CI 확인main에 merge브랜치 삭제 출처Github - Github Flow

1. OAuth2 Resource Server보호된 자원을 관리하는 서버✅ 보호된 자원의 요청에 대한 인증 과정을 담당함 Protect Access with an OAuth2 Access Token구분설명검증JWT자체 서명 토큰public key 사용Opaque Token토큰 내용을 알 수 없는 토큰인정 서버의 introspection 엔드포인트에 확인 요청 설정) JWT더보기더보기spring: security: oauth2: resourceserver: jwt: issuer-uri: https://my-auth-server.com@Configuration@EnableWebSecuritypublic class SecurityConfig { @Bean ..

1. Status CodegRPC 호출은 마지막에 status 하나를 클라이언트에게 돌려줌보통 code, description으로 구성됨 2. 자주 쓰이는 코드코드의미생성주체재시도 관점예시OK성공서버/라이브러리재시도 불필요정상 저장CANCELLED호출 취소주로 호출자/서버 컨텍스트보통 자동 재시도 아님클라이언트 취소, 서버에서 cancel 감지DEADLINE_EXCEEDED정해진 시간 안에 응답 못 받음라이브러리에서 자주 생성상황 따라 가능3.5초 deadline 초과INVALID_ARGUMENT입력값 자체가 잘못됨애플리케이션이 직접같은 요청 재시도 의미 없음빈 content, 잘못된 roomId 형식NOT_FOUND대상 없음애플리케이션이 직접상태 바뀌기 전엔 의미 없음채팅방 없음ALREADY_EXIST..

1. Deadline클라이언트가 "이 시각 이후에는 더 이상 응답을 기다리지 않겠다" 라고 정하는 시간✅클라이언트는 이 시각이 넘으면 호출을 포기하고 실패로 간주함 필요성분산 시스템에서는 서버가 느려지거나 네트워크가 밀림으로 인한 지연이 발생할 수 있음⚠️ 만약 deadline이 없다면, 클라이언트가 계속 대기하게 되어 지연이 전체 시스템에 전파될 수 있음 2. ClientDEADLINE_EXCEEDED 상태deadline 초과 시, 클라이언트가 호출에 대해 받는 상태 3. ServerCANCELLED 상태서버에서 작업 중 deadline 시간을 초과할 경우, 계속 하던 작업을 자동 취소함✅ 단, 작업중인 것은 롤백하는 코드를 작성해줘야 함 4. PropagationgRPC 요청이 체이닝 형식일 경우, ..