insu90 님의 블로그

이번 포스팅에서는 스크롤 박스 컴포넌트를 구현하고, 버튼을 클릭했을 때 맨 위로 이동과 맨 아래로 이동 기능을 추가하는 방법을 설명하겠습니다. 이 기능은 주로 긴 내용을 표시할 때 사용하며, 사용자가 쉽게 원하는 위치로 이동할 수 있도록 도와줍니다.기본 구현먼저, 스크롤 박스의 기본 구조부터 살펴보겠습니다. 스크롤 박스는 고정된 크기의 박스를 만들고 그 안에 스크롤이 가능한 내용을 추가하는 형태입니다. 이를 위해 div 요소에 overflow: auto 스타일을 적용하여 내용이 넘칠 때 스크롤이 생기도록 합니다.1. ref 디렉토리에 ScrollBox.js 컴포넌트 만들기import { Component } from "react";class ScrollBox extends Component { re..

React의 ref는 DOM 요소나 React 컴포넌트에 대한 직접적인 참조를 생성하고 관리하는 데 사용되는 특별한 속성입니다.ref는 DOM 조작이 필요한 특정 상황에서 활용되며, 대표적인 사용 사례는 다음과 같습니다.포커스, 텍스트 선택 영역, 미디어 제어애니메이션 실행서드 파티 DOM 라이브러리와의 통합이번 포스팅에서는 ref를 활용해 패스워드 검증 컴포넌트를 구현하는 과정을 살펴보겠습니다. 기능 요구사항입력된 패스워드가 "0000"이면 입력창의 배경색을 파란색으로 변경.입력된 패스워드가 틀리면 배경색을 빨간색으로 변경.잘못된 경우 입력창에 포커스를 설정.초기 코드: 클래스형 컴포넌트와 상태 관리먼저 기본적인 컴포넌트를 작성합니다.src 디렉터리 아래에 ref 디렉터리를 만들고, ValidatePa..

1. 상태 내리기상태 내리기는 부모 컴포넌트의 상태를 자식 컴포넌트로 전달하는 방식입니다.부모 컴포넌트의 상태를 자식 컴포넌트가 props를 통해 받아 사용합니다.부모의 상태가 변경되면 부모와 해당 상태를 사용하는 모든 자식 컴포넌트가 다시 렌더링됩니다.예제 코드: 두 자식 컴포넌트에서 상태를 계산하기 import { useState } from "react";// 부모 컴포넌트 정의function Parent() { const [number, setNumber] = useState(0); // 상태 값 정의 return ( {/* 부모 상태를 직접 보여줌 */} 입력값: {number} {/* 상태를 변경하는 입력창 */} setNumber(e.targe..

1. 리액트 이벤트 사용 시 주의사항#1 이벤트 이름이벤트 이름은 카멜 케이스로 작성해야 합니다.onclick (x) OnClick (x) onClick (o)onkeyup (x) OnKeyUp (x) onKeyUp (o)  #2 이벤트 핸들러JSX에서 이벤트 핸들러는 자바스크립트 코드가 아닌 함수 형태로 전달해야 합니다. // (x) alert('hello')}> // (o) ⇐ 함수를 화살표 함수로 직접 정의const handleClick = () => alert('hello'); // (o) ⇐ 외부에 정의한 함수 이름을 전달매개변수가 필요한 경우:const handleClick = (message) => alert(message); handleClick("Hello")} />이벤트 객체의 ..

리액트(React)는 상태(state)를 통해 컴포넌트의 동적인 동작을 가능하게 합니다. 상태는 일반 변수와 달리 변경 시 컴포넌트를 리렌더링하여 사용자 인터페이스(UI)에 즉각적으로 반영됩니다. 이 글에서는 상태의 정의, 클래스형 및 함수형 컴포넌트에서 상태를 관리하는 방법, 그리고 상태 관리 시 주의사항을 살펴보겠습니다. 1. 상태(state)란?상태는 컴포넌트 내부에서 읽고 업데이트할 수 있는 데이터입니다. 리액트는 상태가 변경될 때 컴포넌트를 자동으로 리렌더링합니다.⚠ 중요: 상태 변수는 일반 변수처럼 직접 수정할 수 없으며, 반드시 리액트가 제공하는 setState 메서드 또는 useState 훅을 사용해 업데이트해야 합니다.클래스형은 setState, 함수형은 useState가 반환하는 업데이..

React를 사용하여 간단한 신호등(Traffic Light) 컴포넌트를 만드는 방법을 소개합니다. 이 글에서는 여러 개의 컴포넌트를 만들고, 객체 배열을 활용하여 데이터를 출력하고, 동적인 스타일링을 적용하여 신호등의 색깔을 변경하는 기능까지 구현해보겠습니다. 1. 신호등 컴포넌트 만들기이제 신호등(Traffic Light) 컴포넌트를 만들어봅니다. 신호등은 빨간색, 초록색, 노란색 원을 출력하고, 각 원의 크기와 색상을 부모 컴포넌트로부터 전달받습니다.먼저 간단한 디자인부터 시작하겠습니다.function App() { return ( );}export default App;위와같이 나오는 것을 볼 수 있습니다. 이제 디자인은 되었으니 이를 컴포넌트를 ..

React는 UI를 구성하기 위한 컴포넌트 기반의 라이브러리입니다. 이번 포스팅에서는 클래스형 컴포넌트와 함수형 컴포넌트의 구조, props(properties)를 사용하는 방법, 그리고 props.children 활용법을 정리하였습니다. 1. 컴포넌트 구조React 컴포넌트는 크게 클래스형 컴포넌트와 함수형 컴포넌트로 나눌 수 있습니다.클래스형 컴포넌트React.Component를 상속받아 작성하며, 반드시 render 메서드가 필요합니다.import { Component } from 'react'; class MyApp extends Component { //리액트 컴포넌트를 상속받아 정의 render() { // 리액트 컴포넌트가 정의한 render 함수 재정의 return (..

JSX는 JavaScript XML의 약자로, 자바스크립트에 XML/HTML 문법을 결합하여 간결하고 직관적인 UI 코드를 작성할 수 있는 문법입니다. 리액트(React)에서 컴포넌트를 정의하거나 UI를 구성할 때 주로 사용됩니다. 이 글에서는 JSX의 특징과 규칙, 그리고 주요 활용법을 소개합니다. 1. JSX란?JSX는 JavaScript와 XML의 조합으로, HTML 요소를 JavaScript 코드 안에서 작성할 수 있습니다. const element = Hello, World!;//위 코드는 Babel을 통해 일반 JavaScript로 변환됩니다.const element = React.createElement("h1", {}, "Hello, World!"); JSX의 장점HTML과 JavaScri..

AWS 주간 소식 모음: AWS 뉴스 블로그 20주년, Amazon MSK Express 브로커, EC2 Windows Server 2025 이미지 출시 등 | Amazon Web Services 한국 블로그 AWS 주간 소식 모음: AWS 뉴스 블로그 20주년, Amazon MSK Express 브로커, EC2 Windows Server 2025 이미지 출시AWS 뉴스 블로그 20주년을 축하합니다! 🎉🥳🎊 2004년 11월 9일, Jeff Barr가 첫 번째 블로그 게시물을 게시했습니다. 당시 그는 TypePad를 사용하여 개인 블로그 사이트를 시작했습니다. 그는 회사 또aws.amazon.com 이번 업데이트에서 제가 주목한 부분은 Amazon MSK의 새로운 Express 브로커, Window..

CI/CD 파이프라인 구축 단계1. GitHub Actions 설정GitHub Actions는 GitHub에 내장된 CI/CD 도구로, 별도의 서버를 설치하지 않고도 자동화된 빌드, 테스트, 배포 등을 설정할 수 있습니다.1.1 GitHub Actions 워크플로우 파일 만들기GitHub 저장소에서 .github/workflows라는 폴더를 만들고 그 안에 워크플로우 파일을 생성합니다.워크플로우 파일 (ci-cd.yml)의 내용은 기본적으로 다음과 같습니다: name: CI/CD Pipelineon: push: branches: - main pull_request: branches: - mainjobs: build: runs-on: ubuntu-latest s..