IT LAB

[React] 2. Vite로 프로젝트 셋팅하기

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

[Typescript] 1. Typescript란?

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

[React] 1. React란?

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