react4 728x90 브라우저에서 JSX 안전하게 실행하는 방법, Babel, CRA, Vite 환경 JSX는 왜 바로 실행이 안 되나요?JSX = JavaScript가 아님JSX는 HTML + JS 섞어 쓴 듯한 문법일 뿐, 실제로는 브라우저가 이해 못하는 문법입니다.예const element = Hello JSX!;브라우저는 위 코드를 그대로 실행할 수 없고, 다음처럼 변환된 JS만 이해합니다.const element = React.createElement('h1', null, 'Hello JSX!');그래서 필요한 것: 트랜스파일 과정Babel 같은 도구가 JSX → 순수 JavaScript로 변환합니다.React 개발 환경(CRA, Vite 등)은 이 과정을 “자동으로” 해주는 툴일 뿐입니다.핵심 결론JSX 파일을 그대로 브라우저에서 더블클릭 → 실행 X반드시Babel 같은 트랜스파일러로 미리 변.. 2025. 11. 23. Anthropic Claude Code로 개발 생산성 올리는 터미널 코딩 도우미 Claude Code는 Anthropic에서 제공하는 터미널 기반 AI 코딩 도구로, 개발자가 터미널에서 직접 Claude와 상호작용하며 코딩 작업을 수행할 수 있게 해주는 도구입니다.운영 체제macOS: 10.15 이상Linux: Ubuntu 20.04+, Debian 10+Windows: WSL(Windows Subsystem for Linux) 필요하드웨어 및 소프트웨어RAM: 최소 4GBNode.js: 18 버전 이상Git: 2.23+ (선택사항)GitHub/GitLab CLI: PR 워크플로우용 (선택사항)인터넷 연결: 필수 (AI 처리용)설치 과정기본 설치# 1. npm을 통한 전역 설치npm install -g @anthropic-ai/claude-code# 2. 프로젝트 디렉토리로 이동cd.. 2025. 7. 26. 사이트와 앱 디버깅 최적화 및 취약점 분석에 React Developer Tools 활용 React Developer Tools는 React로 빌드된 웹 사이트와 모바일 앱을 디버깅하고 최적화하는 데 필수적인 도구입니다. 이 도구를 사용하면 개발자는 React 컴포넌트의 계층 구조를 시각적으로 검사하고, 각 컴포넌트의 props와 state를 실시간으로 편집하며, 성능 문제를 식별할 수 있습니다. 다음은 React Developer Tools를 설치하고 사용하는 방법에 대한 기본적인 내용입니다. React Developer Tools 설치 방법 브라우저 확장 프로그램 Chrome, Firefox, Edge: 이러한 브라우저에서는 React Developer Tools를 브라우저 확장 프로그램으로 직접 설치할 수 있습니다. 설치 후, React로 빌드된 웹 사이트를 방문하면 도구가 자동으로 활.. 2024. 3. 5. Prometheus 시스템 및 서비스 모니터링 시스템 프로메테우스는 Cloud Native Computing Foundation(CNCF) 프로젝트로, 시스템 및 서비스 모니터링 시스템입니다. 프로메테우스는 구성된 대상으로부터 지정된 간격으로 메트릭을 수집하고 규칙 표현식을 평가하여 결과를 표시하며, 지정된 조건이 관찰되면 알림을 트리거할 수 있습니다. 프로메테우스를 다른 메트릭 및 모니터링 시스템과 구별하는 기능은 다음과 같습니다. 다차원 데이터 모델 (메트릭 이름 및 키/값 차원 세트에 의해 정의된 시계열 데이터) PromQL이라는 강력하고 유연한 쿼리 언어를 사용하여 이 다차원성을 활용 분산 저장에 대한 종속성이 없으며, 단일 서버 노드는 자체적으로 동작 시계열 데이터 수집을 위한 HTTP 풀 모델 배치 작업을 위한 중간 게이트웨이를 통해 시계열 데이.. 2023. 10. 2. 이전 1 다음 728x90 728x90
