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 이벤트가 발생할 때, 입력된 값을 콘솔에 출력하는 기능을 추가했습니..
0. 들어가며리액트 마지막 수강날이라 오늘은 조별로 그룹 미니 프로젝트를 진행했다.각자 REST API 를 활용하는 컴포넌트를 만들어서 라우팅시켜 묶어서 페이지를 완성하는 미니 프로젝트였다. 1. 뭘 만들지? 그리고 잠깐의 삽질postman의 public api와 다른 오픈 api들을 모아놓은 사이트를 강사님께서 제공해주셔서 살펴봤는데,딱히 땡기는 주제가 없어서 구글링하기 시작했다. 그러다 우연히 찾게된 오픈 api 모음 github 발견..https://github.com/dl0312/open-apis-korea GitHub - dl0312/open-apis-korea: 🇰🇷 한국어 사용자를 위한 서비스에 사용하기 위한 오픈 API 모음🇰🇷 한국어 사용자를 위한 서비스에 사용하기 위한 오픈 AP..