본문 바로가기
반응형

Programming31

HTTP 구조 규칙 1) 문서의 뼈대(최소 골격) : 최상단 1행. 쿼크모드 방지.: 문서 루트. 보통 lang 지정.: 메타데이터(문서제목, 인코딩, SEO/OG, 스타일/스크립트 로드 등).: 실제 화면에 나타나는 **흐름 콘텐츠(Flow content)**의 컨테이너.2) “블록/인라인”보다 콘텐츠 카테고리로 생각하기HTML5부터는 “블록 vs 인라인” 구분만으로 설명하지 않습니다. 대신 요소들은 다음 카테고리 중 하나(또는 여러 개)에 속합니다.메타데이터(Metadata): 문서 메타( 전용). , , , , 등.흐름(Flow): 거의 모든 본문(content) 요소. , , , , , , 등.문구(Phrasing): 텍스트 레벨 요소. , , , , , , 등.구획(Sectioning): 문서 아웃라인을 나.. 2025. 9. 10.
Vite 기본 설정 및 실무 예제 + App.jsx 구조 분석 + useState 심화 개념 정리 🔍 Vite 기본 설정 및 실무 예제 + App.jsx 구조 분석 + useState 심화 개념 정리프론트엔드 개발에서 빠른 개발 환경과 직관적인 설정으로 각광받는 Vite. 이 글에서는 Vite의 핵심 설정 파일인 vite.config.js를 중심으로 기본 개념부터 실무 예제까지, 그리고 React의 진입점인 App.jsx 구조와 React Hook인 useState의 심화 개념까지 함께 정리합니다.📁 1. vite.config.js 기본 설정 해설vite.config.js는 Vite 프로젝트의 핵심 설정 파일로, 다음과 같은 역할을 합니다: 번들링 대상 정의 (plugins) 개발 서버 설정 (server) 별칭(alias) 등 모듈 해석 방식 설정 (resolve) 빌드 옵션 (build.. 2025. 5. 2.
[React] Vite 설치 및 기본 개념 이해 Vite로 React 앱 만들기1. Vite 설치 및 프로젝트 생성절차터미널을 onebite-react 폴더로 이동합니다.다음 명령어를 입력합니다:npm create vite@latest프로젝트 이름을 묻는 창이 나오면 원하는 이름을 입력합니다.(예시: section_custom)"Select a framework" 질문에서는 방향키로 React를 선택합니다."Select a variant" 질문에서는 JavaScript를 선택합니다.프로젝트 폴더(section_custom)로 이동한 후, 의존성 설치를 위해 다음 명령어를 실행합니다:npm install설치가 완료되면 node_modules 폴더와 다수의 라이브러리들이 추가됩니다.Tip: 직접 React 설정을 구성하려면 번거로운 작업(webpack 설.. 2025. 4. 29.
[React] React 기초부터 모듈 시스템까지 1. React란?Meta(Facebook) 에서 개발한 오픈소스 JavaScript 라이브러리입니다.대규모 웹 서비스의 UI를 더 편리하고 효율적으로 개발하기 위해 만들어졌습니다.핵심 포인트대규모 UI를 작은 단위로 쪼개어 관리 (컴포넌트)데이터 변화에 따라 UI 자동 업데이트빠른 렌더링 성능 제공(* 렌더링 : 웹페이지 화면에 UI요소를 그려내는 것을 말함)2. React의 기술적 특징2-1. 컴포넌트 기반 UI 구성컴포넌트(Component) = 화면을 구성하는 하나의 독립적인 단위입니다.예시 구조:- Header.js- Main.js- Footer.js이렇게 나누면 중복 코드 없이, 유지보수와 확장성이 좋아집니다.📌 실제 React 코드 예시// Header.jsxexport default fu.. 2025. 4. 29.
[JS] 자바스크립트의 동기(Synchronous)와 비동기(Asynchronous) 처리 방식 🔄 자바스크립트의 동기(Synchronous)와 비동기(Asynchronous) 처리 방식1. 동기(Synchronous)란?동기 방식이란 하나의 작업이 끝날 때까지 다음 작업이 대기하는 구조를 의미합니다. 코드는 작성된 순서대로 순차적으로 실행됩니다.✅ 예시console.log("A 작업 시작");console.log("B 작업 시작");console.log("C 작업 시작");🧠 결과A 작업 시작B 작업 시작C 작업 시작모든 작업이 한 개의 흐름(thread) 위에서 순서대로 실행됩니다.2. 비동기(Asynchronous)란?비동기는 기다리지 않고 다음 작업으로 넘어가는 방식입니다. 대표적으로 setTimeout, setInterval, AJAX 호출, 이벤트 리스너, 파일 읽기 등이 있습니다.✅.. 2025. 4. 28.
[JS] JavaScript Date 객체에 대해 알아보자 📅 JavaScript Date 객체 완전 정복JavaScript의 Date 객체는 날짜와 시간을 다루기 위한 표준 도구입니다. 이 자료에서는 Date 객체의 생성, 구성 요소 추출, 수정, 포맷팅까지 실무에서 유용하게 활용할 수 있는 방법을 정리합니다.1. Date 객체 생성 방법기본 생성let date1 = new Date(); // 현재 시스템 날짜 및 시간 기준console.log(date1);위 코드는 현재 시간을 기준으로 Date 객체를 생성합니다.new Date()는 내장 생성자 함수로, 반드시 new 키워드와 함께 호출해야 올바른 Date 인스턴스를 생성합니다.특정 날짜 지정let date2 = new Date("1989-09-29T23:10:10"); console.log(date2);.. 2025. 4. 25.
반응형

티스토리툴바