IT LAB

1. 도메인순수 도메인 모델을 중심으로 구성됨✅ POJO data class (기술 의존 없음) 2. Application 유즈케이스 흐름을 담당하는 영역✅ 도메인 객체를 사용해서 시스템의 유즈케이스를 구현함✅ 외부 연동이 필요할 경우 outbound port를 의존하여 처리함 (구체적인 외부 기술 모름)✅ outbound port 인터페이스를 정의하고 실제 구현체는 adapter-out에서 구현함 3. Port내부 애플리케이션이 외부와 소통하기 위해 정의해둔 인터페이스✅ 도메인과 어댑터 간 포트를 경계로 구분됨✅ 추상 API를 정의함✅ 목적에 맞는 프로토콜을 따름 Inbound Port외부 요청이 애플리케이션 기능을 실행할 수 있도록 정의한 입력 인터페이스ex) Controller, Scheduler,..

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처럼 생겼음 (실제로는..