분류 전체보기

1. 참조 자료형과 배열1.1. 배열이란?  배열(Array)은 동일한 자료형의 데이터를 하나의 변수로 묶어 저장하는 자료구조입니다. Java에서 배열은 객체로 관리되며, 한 번 선언된 크기는 변경할 수 없습니다.1.2. 배열 선언 및 초기화배열을 선언하는 방식은 두 가지가 있습니다.int[] a; // 권장 방식int a[]; // 가능하지만 비권장배열을 생성하면서 값을 초기화하는 방법은 다음과 같습니다.int[] a = new int[3]; // {0, 0, 0}으로 자동 초기화int[] b = {3, 4, 5}; // 직접 값 대입System.out.println(Arrays.toString(a)); // [0, 0, 0]1.3. 배열의 메모리 구조Java에서 배열은 스택(Stack) ..

1. React 컴포넌트 개요React는 UI를 만들기 위한 컴포넌트 기반의 JavaScript 라이브러리입니다. 컴포넌트를 활용하면 UI를 작은 단위로 나누어 재사용 가능하며, 유지보수가 쉬운 구조를 만들 수 있습니다.1.1. 컴포넌트의 종류React의 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉩니다.1) 클래스형 컴포넌트클래스형 컴포넌트는 Component 클래스를 확장하여 생성하며, render() 메서드가 반드시 필요합니다.import { Component } from "react";class MyComponentClass extends Component { render() { return ( 이름은 홍길동입니다. 나이는 23살입니다. ..

1. Node.js 개요1.1. Node.js란?Node.js는 Chrome V8 엔진 위에서 실행되는 서버 사이드 JavaScript 런타임 환경입니다. 일반적으로 JavaScript는 브라우저에서 실행되지만, Node.js를 사용하면 서버에서도 JavaScript를 실행할 수 있습니다.1.2. Node.js의 특징비동기 이벤트 기반: I/O 작업을 비동기적으로 처리하여 성능을 향상합니다.싱글 스레드 모델: 하나의 스레드에서 여러 요청을 처리하여 효율성을 극대화합니다.NPM(Node Package Manager) 지원: 다양한 패키지를 설치하여 기능을 확장할 수 있습니다.모듈 시스템 제공: 모듈을 사용하여 코드를 구조적으로 작성할 수 있습니다.1.3. Node.js 설치Node.js 설치Node.js ..

1. React Router란?React Router는 React 애플리케이션에서 클라이언트 측 라우팅을 관리하는 라이브러리입니다. 기본적으로 싱글 페이지 애플리케이션(SPA)에서는 브라우저의 URL이 변경되더라도 페이지가 새로고침되지 않아야 합니다. React Router는 이를 가능하게 해주는 핵심적인 도구입니다.1.1. React Router의 주요 개념BrowserRouter: HTML5의 History API를 기반으로 라우팅을 관리하는 방식입니다.RouterProvider: React Router v6.4부터 새롭게 추가된 기능으로, 데이터 로딩, 에러 핸들링 등을 보다 쉽게 처리할 수 있도록 해줍니다.Routes & Route: 특정 URL 패턴에 따라 렌더링할 컴포넌트를 정의합니다.useN..

1. Ref란? 왜 필요한가?React에서 ref는 DOM 요소나 React 컴포넌트에 대한 참조를 생성하고 관리하는 데 사용되는 특별한 속성입니다. 보통 다음과 같은 경우에 활용됩니다.특정 DOM 요소에 직접 접근해야 할 때입력 필드의 포커스를 조정할 때애니메이션을 실행할 때서드파티 라이브러리와 연동할 때일반적으로 React에서는 상태(state)를 사용하여 UI를 업데이트하지만, ref는 상태를 변경하지 않고도 DOM 요소를 직접 제어할 수 있어 불필요한 리렌더링을 방지하는 데 유용합니다.1.1. createRef()를 이용한 ref 사용법import { Component, createRef } from "react";class MyComponent extends Component { constru..

1. 이벤트 핸들링이란?이벤트 핸들링(event handling)은 사용자의 입력(클릭, 키 입력 등)에 대한 반응을 처리하는 방법입니다. React에서는 기존 HTML과 달리 JSX 문법을 활용하며, 이벤트 이름이 camelCase 형식을 따릅니다.예제import { Component } from "react";class EventPractice extends Component { render() { return ( 이벤트 연습 console.log(e.target.value)} /> ); }}export default EventPractice;위 코드에서는 onChange 이벤트가 발생할 때, 입력된 값을 콘솔에 출력하는 기능을 추가했습니..