리액트 useRef 사용법: DOM 제어, input focus, 이전 값 저장하기 useRef는 렌더링 사이에 값을 보존하거나, 실제 DOM 요소에 직접 접근해 포커스·스크롤·스타일을 제어할 때 쓰는 훅입니다. ref.current 값을 바꿔도 리렌더링은 일어나지 않으므로 화면에 보여줄 값은 여전히 useState로 관리하는 것이 원칙입니다. 1. useRef 핵심 요약 2. 예제 1 — DOM 직접 제어(스크롤·하이라이트) 버튼을 클릭하면 지정 박스로 스무스 […]
리액트 useEffect 사용법: 의존성 배열과 생명주기 이해 useEffect는 컴포넌트가 렌더링된 뒤 실행되어 이벤트 리스너 등록/해제, 타이머, API 호출 등 외부 동기화 작업을 담당합니다. 의존성 배열로 실행 시점을 제어하며 전통적인 componentDidMount·Update·Unmount에 대응합니다. 아래에 의존성 배열의 정확한 동작을 표와 예제로 자세히 알아봅니다. 1. useEffect 기본 형태 2. 의존성 배열 깊게 이해하기 의존성 배열은 “이 값들이 바뀌면 이펙트를
React 이벤트 처리 방법: onClick·onChange·onSubmit 예제 리액트 이벤트는 브라우저 이벤트를 SyntheticEvent로 표준화해 제공합니다. JSX에서는 카멜케이스 속성에 함수 레퍼런스를 전달해야 하며, 상황에 따라 preventDefault()로 기본 동작을 막거나 stopPropagation()으로 전파를 차단할 수 있습니다. 아래 예제로 onClick·onChange·onSubmit의 핵심 패턴을 바로 실습해 보세요. 1. 리액트 이벤트 기본기 리액트는 브라우저 이벤트를 SyntheticEvent로 감싸 브라우저 간 차이를 줄이고 일관된 API를 제공합니다(React
리액트 state 관리: useState 기본 사용법과 동작 원리 리액트(React)는 컴포넌트의 동적인 데이터를 다루기 위해 state 개념을 제공합니다. state는 UI와 데이터의 일관성을 유지하는 핵심 도구이며, 함수형 컴포넌트에서는 useState 훅을 사용해 관리합니다. 이 글에서는 state 변경 규칙(불변성)과 함께, 카운터 예제, 입력 폼 예제를 통해 useState의 기본 원리를 알아봅니다. 1. useState 기본 사용법 useState는 배열을 반환하며, 첫 번째
리액트 props 사용법: 부모에서 자식으로 데이터 전달하기 props는 부모 컴포넌트가 자식 컴포넌트로 값을 전달하는 표준 방법입니다. 이 글에서는 props 기본 문법, props.children으로 래핑된 콘텐츠 전달하기, 기본값 설정(ES6 기본 매개변수 · defaultProps)까지 예제와 함께 알아봅니다. “props는 읽기 전용(read-only)”이라는 원칙을 꼭 기억하세요. 1. props 기본 문법 부모는 JSX 속성 형태로 값을 전달하고, 자식은 props 객체(또는 구조 분해
리액트 JSX 문법 규칙: 인라인 스타일링·className·닫는 태그·주석 리액트 JSX는 HTML과 비슷해 보이지만 몇 가지 중요한 규칙이 있습니다. 초보자가 자주 헷갈리는 인라인 스타일링, className, 반드시 닫는 태그, 주석을 정리했습니다. 이 규칙만 숙지해도 JSX 작성 시 오류를 줄이고, 코드 가독성을 높일 수 있습니다. 1. 인라인 스타일링은 카멜 표기법 사용 JSX에서 인라인 스타일링은 객체 형태로 작성해야 하며, CSS
VSCode에서 여러 프로젝트 폴더를 하나의 창에서 열기 프론트엔드와 백엔드처럼 분리된 프로젝트 폴더를 VSCode 한 창에서 다루면 터미널/디버깅/검색을 통합해 개발 효율이 크게 올라갑니다. 이 글에서는 워크스페이스(.code-orkspace) 기능으로 두 개 이상의 폴더를 한 번에 여는 방법에 대해서 알아보겠습니다. 대상 예시 워크스페이스 사용 .code-workspace 예시 또 다른 방법으로는 .code-workspace 파일을 직접 만드는 방법입니다. 예시 파일: blueshare.code-workspace 터미널/디버깅 통합
MCP 프로토콜 이해하기: AI 에이전트와 외부 툴 연결의 표준 MCP(Model Context Protocol)는 AI 에이전트(LLM)와 외부 도구(툴) 간의 통신을 표준화한 오픈 프로토콜입니다. 이 글에서는 MCP의 개념과 필요성, 주요 구성 요소 및 동작 원리에 대해서 자세히 알아보겠습니다. MCP란 무엇인가? MCP는 LLM 기반의 에이전트가 “내부 지식”을 넘어 외부 시스템·API·데이터베이스 등을 활용할 수 있도록 설계된 프로토콜입니다. OpenAI나 Anthropic 등의
윈도우에서 Git Bash로 리눅스 쉘 스크립트 작성하기 Windows 환경에서 Docker나 WSL 없이도 Git Bash 하나로 간편하게 리눅스 쉘 스크립트를 작성 및 테스트하는 방법에 대해 알아보겠습니다. 1. 다양한 쉘 개발 환경 Windows 환경에서 여러가지 방법으로 리눅스 쉘 스크립트를 작성 및 테스트 할 수 있습니다. 아래 세 가지 방법을 간단히 살펴보고, 마지막에 Git Bash 활용법을 자세히 다룹니다.
React JSX 기초: 표현식·조건부 렌더링·리스트 출력 이 글에서는 React에서 UI를 작성할 때 핵심이 되는 JSX 문법에 대해 알아봅니다. 표현식 삽입, 조건부 렌더링, 리스트 렌더링 예제를 통해 JSX 사용법을 익히고, 주요 팁과 주의사항을 정리해 보세요. 1. JSX란? JSX(JavaScript XML)는 JavaScript 코드 안에 HTML 구조를 작성할 수 있게 해 주는 문법입니다. 브라우저가 이해하는 순수 JavaScript로 변환되기 때문에,
