Frontend (4) 썸네일형 리스트형 React Component란? React Component 정의UI를 구성하는 독립적이고 재사용 가능한 코드 조각입니다. 화면을 구성하는 버튼 하나, 카드 하나, 헤더 전체가 마치 레고 블록 처럼 각각 하나의 Component가 될 수 있습니다. 규칙React에서 Component는 JavaScript 함수이고, 단 두 가지 규칙이 있습니다.1. 함수명이 대문자로 시작해야합니다. 예: myButton ❌ → MyButton ✅2. JSX를 반환해야합니다. React-Component 예시:function MyButton() { return 나는 버튼입니다} 두 가지 형태1. Class Component (구식)class MyButton extends Reac.Component { render () { return {this.. React 앱 준비하기 React 준비 전 단계커맨드 라인 인터페이스(command-line interface; CLI) 툴인 Create-React-App(CRA) 사용하여, React를 추가 할 것 입니다.Create-React-App을 사용하기 위해서는 Node.js를 설치해야 합니다. Node.js는 npm (the node package manager)와 npx (the node package runner)를 포함합니다. React 초기 설정하기Create-React-App(CRA) 툴:프로젝트에 필요한 패키지를 설치하고 파일들을 생성하여 React 애플리케이션 개발하는 과정을 신속히 처리합니다. 패키지를 설치하는 과정에서 create-react-app(CRA)이 의존하는 패키지들에서 발견된 취약점 경고 뜹니다.Cr.. React는 어떤 언어일까? 1. 정의React는 웹과 네이티브 사용자 인터페이스(UI)를 위한 선언적이고 컴포넌트 기반의 JavaScript 라이브러리입니다. 2. 등장 배경React는 Meta(구 Facebook) 와 개발자 커뮤니티에 의해 유지·관리되며, 2013년 5월 공개적으로 첫 릴리즈되었습니다. Facebook은 복잡한 UI 상태 관리와 대규모 SPA 개발에서 기존 MVC 패턴의 한계를 느꼈고, 컴포넌트 기반의 선언적 UI 라이브러리를 내부적으로 개발해 오픈소스로 공개했습니다. 2026년 2월 24일에는 Meta가 React를 Linux Foundation 산하의 React Foundation에 기부하며 완전한 오픈소스 거버넌스 체계를 갖추게 되었습니다. 3. 주요 특징1. 컴포넌트 기반 (Component-.. React Native 시작하기 바이브 코딩을 하다가 한계를 느꼈다.요즘 AI Agent를 활용해 코드를 작성하고 있는데, 백엔드 개발자 준비를 8개월 정도 했던 덕분에 백엔드 코드는 어렵지 않게 읽힌다. 문제는 프론트엔드다. 무언가 잘못됐을 때 직접 코드를 읽고 원인을 파악하기가 쉽지 않다는 한계를 느꼈다. 그래서 프론트엔드도 직접 읽을 수 있는 수준까지 익혀야겠다고 생각했고, React Native를 선택하게 되었다. 이유는 크게 세 가지다. 1. 앱 개발에 대한 관심사이드 프로젝트로 앱을 개발하면서 그 과정이 즐거웠고, 자연스럽게 흥미가 생겼다. 2. Android/iOS 크로스 플랫폼앱을 개발하다 보니 Android와 iOS 각각의 개발자를 구하기 어렵고, 두 플랫폼에 동시에 배포해본 경험을 쌓기도 쉽지 않다는 걸 체감했다. 하.. 이전 1 다음