제리코드르렁

Flux 아키텍처는 단방향 데이터 흐름을 기반으로 애플리케이션 상태 관리를 체계적으로 하는 디자인 패턴임. 특히 리액트(React)와 함께 사용되는 상태 관리 패턴으로 유명하며, 복잡한 애플리케이션에서 데이터 흐름을 쉽게 추적하고, 상태 관리를 더욱 예측 가능하게 만드는 데 중점을 둠. Flux의 핵심 개념Flux 아키텍처는 크게 4개의 주요 컴포넌트로 구성됨:Action (액션)Dispatcher (디스패처)Store (스토어)View (뷰)Flux 데이터 흐름1. Action (액션)액션은 애플리케이션에서 일어나는 **사건(이벤트)**을 의미함.사용자 입력, API 호출 등으로 발생하며, 액션 객체는 일반적으로 다음과 같은 형식을 가짐:{ type : 'ADD_TODO'. payload : { ..

1.1 justify-content (가로 축 정렬)이 속성은 Flexbox의 자식 요소들을 가로 방향으로 어떻게 배치할지 결정합니다. .container { display: flex; justify-content: center;}값:flex-start: 왼쪽 정렬 (기본값)center: 가운데 정렬flex-end: 오른쪽 정렬space-between: 자식 요소들 사이에 균등한 간격을 주되, 양 끝은 부모 요소에 붙음space-around: 자식 요소들 사이에 균등한 간격을 주되, 양 끝도 동일한 간격을 가짐space-evenly: 자식 요소들 사이와 부모의 양 끝까지 균등한 간격을 줌  1.2 align-items (세로 축 정렬).container { display: flex; align-i..

https://jerrycodezzz.tistory.com/44 CSS Flexbox 속성들1.1 justify-content (가로 축 정렬)이 속성은 Flexbox의 자식 요소들을 가로 방향으로 어떻게 배치할지 결정합니다. .container { display: flex; justify-content: center;}값:flex-start: 왼쪽 정렬 (기본값)center: 가운데jerrycodezzz.tistory.com 1. Flexbox (display: flex)Flexbox는 가로, 세로로 요소들을 쉽게 배치할 수 있게 해주는 레이아웃 도구입니다..parent { display: flex; /* Flexbox를 적용할 부모 요소 */ justify-content: cen..

import React from 'react';function Button({ label, onClick }) { return {label};}export default Button;

npx create-react-app 프로젝트이름

index.jsimport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );// If you want to start measuring performance in your app, pass a function// to log results (for example: reportWebVitals(console.log))// or se..

"emmet.includeLanguages" : { javascript" : "javascriptreact", "*html" : "html", } 1. "javascript": "javascriptreact"리액트에서 JSX 문법을 사용하기 때문에, javascript 파일 안에서도 HTML과 유사한 코드를 작성하게 된다.하지만, 기본적으로 Emmet은 .js 파일 안에서는 HTML 코드 자동 완성을 제공하지 않음이 설정을 추가하면, .js 파일에서도 Emmet이 리액트의 JSX 문법을 인식하고, HTML 태그 자동 완성 기능을 사용할 수 있게 됨.2. "*html": "html"이 부분은 모든 파일에서 HTML 자동 완성 기능을 제공하려는 설정리액트 뿐만 아니라, .html 확장자가 아니더라..

node_modules : 설치한 ㅁ도ㅠㄹ이 저장되는 장소public : index.html / src : 리액트를 작업할 폴더package.json : 라이브러리버전, 프로젝트 설정 기록