핵심 차이 요약구분JavaScriptTypeScript타입동적 타입(실행 시 결정)정적 타입(컴파일 시 결정)타입 표기없음: 타입명 사용(: string, : number 등)파일 확장자.js.ts(React → .tsx)컴파일브라우저에서 직접 실행TypeScript → JavaScript 로 변환 필요(tsc)장점빠르게 작성 가능, 유연함타입 안정성, 에러 조기 발견, 유지보수 용이 변수 선언 비교변수의 타입 지정// JavaScriptlet name = "한화"let age = 25 : string, : number → 타입을 명시(컴파일 시에만 사용, JS에서는 사라짐)타입을 생략하면 타입 추론으로 자동 판별let name = "한화" // TypeScript 가 자동으로 string 타입으로 ..

Javascript 와 TypeScript 문법 비교

핵심 차이 요약구분JavaScriptTypeScript타입동적 타입(실행 시 결정)정적 타입(컴파일 시 결정)타입 표기없음: 타입명 사용(: string, : number 등)파일 확장자.js.ts(React → .tsx)컴파일브라우저에서 직접 실행TypeScript → JavaScript 로 변환 필요(tsc)장점빠르게 작성 가능, 유연함타입 안정성, 에러 조기 발견, 유지보수 용이 변수 선언 비교변수의 타입 지정// JavaScriptlet name = "한화"let age = 25 : string, : number → 타입을 명시(컴파일 시에만 사용, JS에서는 사라짐)타입을 생략하면 타입 추론으로 자동 판별let name = "한화" // TypeScript 가 자동으로 string 타입으로 ..

14:41:53

VSCODE 에서 npm 명령어를 사용해 Vite React 프로젝트를 생성했다. 생성 후 가장 먼저 보는 파일은 index.html 이고, 여기서 src/main.jsx 같은 엔트리 파일을 불러온다. main.jsx 는 React 앱을 실제 DOM 의 root 요소에 붙이고, 그다음 App.jsx 가 루트 컴포넌트로 실행된다. 즉 흐름은 아래와 같다.index.html : 가장 바깥 HTML 껍데기main.jsx / main.tsx : React 시작점App.jsx / App.tsx : 메인 화면 컴포넌트// index.html // main.jsximport { StrictMode } from 'react'import { createRoot } from 'react-dom/cl..

[React] React 파일 구조(Vite React)

VSCODE 에서 npm 명령어를 사용해 Vite React 프로젝트를 생성했다. 생성 후 가장 먼저 보는 파일은 index.html 이고, 여기서 src/main.jsx 같은 엔트리 파일을 불러온다. main.jsx 는 React 앱을 실제 DOM 의 root 요소에 붙이고, 그다음 App.jsx 가 루트 컴포넌트로 실행된다. 즉 흐름은 아래와 같다.index.html : 가장 바깥 HTML 껍데기main.jsx / main.tsx : React 시작점App.jsx / App.tsx : 메인 화면 컴포넌트// index.html // main.jsximport { StrictMode } from 'react'import { createRoot } from 'react-dom/cl..

2026.06.01

컴포넌트컴포넌트는 UI 를 잘게 나눈 조각이다.버튼, 카드, 네비게이션, 리스트 같은 걸 각각 독립된 컴포넌트로 만들고, 필요할 때 조합해서 화면을 구성한다.쉽게 말하면, 화면 조각을 만드는 JavaScript 함수이다. React 에서 컴포넌트는 보통 함수로 만든다.function Hello() { return 안녕하세요;} 위 함수를 사용하면 처럼 태그로 이용해서 사용한다. Props (속성)Props 는 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 입력값이다. 쉽게 말하면 함수의 매개변수 같은 개념이라 보면 된다.function Hello(props) { return {props.name}님 안녕하세요;} 사용 예 결과홍길동님 안녕하세요 더 많이 쓰는 방식 (구조분해)// 부모 컴포넌트functi..

에러 내용은 아래와 같다.Modal 창을 제어하다가 Modal 창을 닫을 때 숨겨질 영역안의 버튼이나 input에 포커스가 남아 있으면, 보조기술 입장에서는포커스는 거기에 있는데 그 역역은 숨겨져 있는 모순 상태가 된다. 즉, 본인은 Modal 창을 닫을 때 닫기 버튼에 대한 포커싱이 남아있어서 브라우저 콘솔창에 경고가 찍혔다. 원인은 Bootstrap 의 modal 속성에 aria-hidden="true" 를 적용하자 브라우저가 "포커스된 요소를 숨기면 안된다" 고경고를 띄운것이다.Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technolo..

new Promise 로 return 을 하는 함수가 있다.Promise 함수 내부에서 jquery 의 ajax 를 통해 api 요청을 한 후 count 값이 0일 경우 "return;" 을 사용했더니promise 를 await 로 호출한 부분 이후의 로직이 실행되지 않았다. 이유는 new Promise 가 resolve 또는 reject 를 줄 때 까지 await 는 계속 대기하고 있기 때문에이후 로직이 실행되지 않는다. new Promise 함수 예시function checkData() { return new Promise((resolve, reject) => { $.ajax({ url: '/api/data', success: (response..

브라우저가 클라이언트로부터 요청을 받고 서버로부터 리소스를 받아 처리하는 과정이다. 🌐 1. 클라이언트가 서버에 접근 (HTTP Request) 사용자가 URL 을 입력하거나 링크를 클릭하면 브라우저는 다음을 수행한다.DNS 조회 → IP 주소 획득서버와 TCP 연결HTTPS 면 SSL/TLS 핸드셰이크서버에 HTTP 요청 전송(GET /index.html) 📦 2. 서버가 HTML, CSS, JS 등 리소스를 응답 서버는 요청된 HTML 문서를 먼저 보내고,HTML 에 링크된 CSS/JS/이미지 파일들을 동시에 추가 요청하게 된다. 🧩 3. HTML 파싱 → DOM 트리(DOM Tree) 생성 HTML 문서는 문자열이므로 이를 분석해 DOM(Document Object Model) 트리를 만..