반응형 컴포넌트8 카카오테크캠퍼스 2기 | STEP2 | 5일차(24-06-28) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 5일차(24-06-28) 회고📝 StorybookStorybook은 컴포넌트의 다양한 상태를 직접 눈으로 확인할 수 있는 환경을 제공한다. 버튼의 색상이나 크기를 변경하면서 실시간으로 UI 변화를 확인할 수 있었다. UI의 일관성을 유지하는 데 도움이 되고, 컴포넌트를 개발할 때 오류를 줄이고 효율적으로 작업할 수 있다.다양한 상태에서 컴포넌트가 어떻게 보이는지 미리 확인할 수 있어 디자인의 일관성을 유지하는 데 도움을 주었다. 실시간으로 UI를 조정할 수 있어 사용자 경험을 개선할 수 있었다. 📝 Storybook 설치 및 설정설치 명령어Storybook을 처음 설치할 때, 타입스크립트로 설정하기 위해서 package.json 파일을 열어 의존성에 타입.. 2024. 7. 1. 리액트 네이티브 React Native | React.createElement와 JSX ⭕ 리액트 네이티브 React Native | React.createElement와 JSX리액트 네이티브에서는 UI를 작성하기 위해 컴포넌트를 사용합니다. 텍스트를 표시하기 위해서는 Text 컴포넌트를 사용합니다. 이 때, React.createElement와 JSX는 컴포넌트를 생성하는 두 가지 주요 방법입니다. ➡️ React.createElement 함수React.createElement 함수는 가상 DOM 객체를 생성하는 데 사용됩니다. 이 함수는 세 개의 인자를 받습니다. 첫 번째 인자: 컴포넌트의 이름 (예: 'Text')두 번째 인자: 속성 객체 (props)세 번째 인자: 컴포넌트의 자식 요소예를 들어, 다음 코드는 Text 컴포넌트를 생성합니다.const virtualDOM = React.. 2024. 3. 20. 리액트 네이티브 React Native | JSX와 XML 마크업 언어 ⭕ 리액트 네이티브 React Native | JSX와 XML 마크업 언어리액트 네이티브(React Native)는 모바일 애플리케이션을 개발하기 위한 프레임워크로, XML 마크업 언어를 사용합니다. XML은 HTML의 부분집합으로, 태그나 속성을 자유롭게 확장할 수 있어 HTML보다 유연한 구조를 가집니다. ➡️ JSXJSX는 리액트 네이티브에서 사용되는 문법으로, JavaScript XML의 약자입니다. JSX는 JavaScript로 XML 형식의 코드를 작성할 수 있게 해줍니다. HTML과 달리 XML은 태그 이름을 자유롭게 정의할 수 있습니다 ➡️ 마크업 언어 문법마크업 언어의 기본 문법은 시작 태그와 끝 태그로 이루어집니다. 시작 태그는 형식으로 작성하고, 속성을 가질 수 있습니다. 속성은 항.. 2024. 3. 20. 리액트 React | React: Props 및 State ⭕ 리액트 React | React: Props 및 State 프런트엔드 개발을 위한 JavaScript 라이브러리 ➡️ Virtual DOM 자바스크립트 객체 복제본: DOM 노드 트리의 경량화된 복사본, 실제 DOM보다 빠른 연산 가능 diffing 알고리즘: 이전과 현재의 Virtual DOM을 비교하여 실제 DOM에 반영해야 할 변경사항을 파악 배치 업데이트 기능: 변경사항을 모아두었다가 한 번에 실제 DOM에 적용하여 성능 최적화 ➡️ render() 컴포넌트의 렌더링: 컴포넌트가 호출될 때 실행되며, Virtual DOM을 생성하고 업데이트 결정 순수 함수: props나 state의 변경에 따라 결과가 결정됨 렌더링 단계: 'render phase'에서 Virtual DOM 생성 및 비교, '.. 2024. 3. 9. 리액트 React | 노마스 코더 영화 평점 웹서비스 | 컴포넌트 생명주기 함수: 마운트, 업데이트, 언마운트, 에러 처리 ✅ 생명주기 함수 컴포넌트가 생성, 업데이트, 소멸될 때 호출되는 일련의 메서드이다. 생명 주기 함수를 통해 컴포넌트의 동작을 제어하고, 상태를 갱신하거나 데이터를 가져온다. 함수 실행 순서 constructor() 함수: 컴포넌트가 생성될 때 호출되며, 초기화 작업을 수행한다. static getDerivedStateFromProps() 함수: 컴포넌트가 생성될 때와 업데이트될 때 호출되며, 프로퍼티 값을 상태 값으로 변환을 수행한다. render() 함수: 컴포넌트의 UI를 생성하고 반환을 수행한다. componentDidMount() 함수: 컴포넌트가 마운트 된 후에 호출되며, 초기화 및 네트워크 요청 등의 작업을 수행한다. shouldComponentUpdate() 함수: 컴포넌트가 업데이트될 때.. 2023. 4. 3. 리액트 React | 컴포넌트 간 데이터 전달을 위한 속성(props) ✅ 속성(Props) React는 컴포넌트 간에 데이터를 전달하는 메커니즘으로 속성(Props)을 제공합니다. 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있습니다. Props는 읽기 전용이므로 하위 컴포넌트에서는 Props 값을 수정할 수 없습니다. 데이터는 항상 상위 컴포넌트에서 하위 컴포넌트로만 흐르기 때문에 Props를 사용하여 컴포넌트에 필요한 데이터와 이벤트 핸들러를 전달할 수 있습니다. 💡 속성(Props)의 읽기 전용성 React 컴포넌트에서 함수형 컴포넌트나 클래스형 컴포넌트 모두 Props는 읽기 전용입니다. 함수형 컴포넌트에서는 Props를 함수의 매개변수로 받아와 사용하며, 클래스형 컴포넌트에서는 this.props를 통해 Props를 사용합니다. Props는 항.. 2023. 3. 26. 리액트 React | 컴포넌트(Components) ✅ 컴포넌트(Components) 컴포넌트(Component)는 React 애플리케이션을 구성하는 최소한의 단위입니다. React에서는 UI를 재사용 가능한 개별적인 조각으로 분리하여 컴포넌트로 만들고, 각 조각을 개별적으로 살펴볼 수 있습니다 과거의 웹 프레임워크들은 일반적으로 MVC, Model-View-Controller 방식으로 구성되어 있어 각 요소의 의존성이 높아 재사용이 어려웠습니다. 그러나 React에서는 컴포넌트를 독립적으로 구성하여 재사용성을 높일 수 있습니다. 이를 통해 우리는 새로운 컴포넌트를 쉽게 만들 수 있습니다. 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM 노드를 출력하는 함수로 볼 수 있습니다. 💡 React 컴포넌트 네이밍 규칙 Reac.. 2023. 3. 26. 델파이 Delphi | 무료 체험판 다운로드 및 설치하는 방법 ✅ 델파이 Delphi 무료 체험판 다운로드 및 설치하는 방법Embarcadero Technologies사에서 개발한 객체 지향 프로그래밍 언어 및 통합 개발 환경(IDE)이다.Pascal 언어를 기반으로 하며, Windows를 포함한 다양한 플랫폼에서 사용할 수 있다.사용하기 쉽고 직관적인 GUI(Graphical User Interface)를 제공하여 빠르게 애플리케이션 개발이 가능하다.Visual Basic과 비슷한 개발 방식으로, 도구상자에서 컴포넌트를 드래그 앤 드롭하여 사용할 수 있다.다양한 라이브러리와 컴포넌트가 제공되어 있어, 웹 개발, 데이터베이스 연동, 멀티미디어 등 다양한 분야에서 사용된다.C++과 같이 메모리 관리를 개발자가 직접해야 하는 점이 있어 초보자에게는 어려울 수 있다.무료.. 2022. 11. 20. 이전 1 다음 반응형
