본문 바로가기
반응형

전체 글30

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.
[JS] 자바스크립트 배열 메서드 조작, 탐색 변형까지 프론트엔드 실무를 하다 보면 가장 많이 다루게 되는 자료 구조 중 하나가 바로 배열(Array) 입니다. 오늘은 배열을 다룰 때 사용하는 핵심 메서드들을 요소 조작 / 순회 & 탐색 / 배열 변형으로 나누어 하나씩 살펴보겠습니다.1. 요소 조작 메서드 (Element Manipulation)✅ push(): 배열 끝에 요소 추가let arr1 = [1, 2, 3];arr1.push(4, 5, 6);console.log(arr1); // [1, 2, 3, 4, 5, 6]const newLength = arr1.push(7, 8);console.log(newLength); // 8실무 Tip: 서버에서 페이지네이션으로 데이터 일부를 받아올 때 기존 배열에 추가하는 데 자주 사용됩니다.✅ pop(): 배열 끝.. 2025. 4. 24.
반응형