ruriruriya

React 테스트 후 빌드하고 배포하는 방법이다.1. 빌드하는 방법배포 전에 무언가 실행되고 있다면 실행을 중지하고 한다. 이는 포트 충돌을 방지하고, 빌드 프로세스가 안전하게 진행되도록 한다. Ctrl + Cnpm run build배포하면 build 폴더가 생성이 되고그 안에 파일의 용량을 줄이기 위해 띄어쓰기 등이 없어진 index.html 등이 생성된 것을 확인할 수 있다. 2. index.html 로컬 실행하기간편하게  build/index.html 서비스 웹을 실행할 수 있는 방법이다.npx serve -s build

src/index.js입구 파일전형적인 설정이 들어감은 App.js에서 태그를 불러와서 ui를 보여준다.App.jsfunction App(){} 이 안에서 ui를 제작함이 것에 대한 CSS는 App.css가 반영 됌.(index.js에도 index.css가 적용되어 있음.)id = rootroot id의 렌더링의 root는 public/index.html에 있음.

React 의 기본 환경설정을 해보자.1. node.js 설치 node.js 사이트에서 다운로드 LTS 또는 현재버전 크게 상관은 없다. https://nodejs.org/en/download  Node.js — Download Node.js®Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org node.js 사이트에 node.js 사이트에서 다운로드 LTS 또는 현재버전 크게 상관 없음. 서 다운로드 LTS 또는 현재버전 크게 상관 없음. 2. VS codevscode가 설치되어 있지 않다면 설치해야 한다.https://code.visualstudio.com/Download Download Visual Stu..

React에서 useState는 함수형 컴포넌트에서 상태 관리를 가능하게 해주는 훅(hook)이다. 이 훅을 사용하면 컴포넌트 내에 상태(state)를 생성하고, 이 상태를 업데이트할 수 있다.상태란 해당 컴포넌트의 데이터 또는 속성을 의미하며, 이 데이터가 변할 때마다 React는 컴포넌트를 다시 렌더링한다. useState 사용법 useState는 초기 상태 값을 파라미터로 받고, 상태 값과 그 상태를 설정하는 함수를 배열 형태로 반환한다. [useState 기본구조]state: 현재 상태의 값setState: 상태를 업데이트하는 함수initialState: 상태의 초기 값const [state, setState] = React.useState(initialState); useState는 0을 초기 ..

자바스크립트의 화살표 함수(arrow function)는 ES6에서 도입된 문법으로, 함수를 보다 간결하게 작성할 수 있는 방법이다. 화살표 함수는 기존의 function 키워드를 사용하는 함수 표현식을 대체할 수 있으며, 몇 가지 중요한 차이점이 있다. 화살표 함수의 기본 구조 여기에서 functionName은 함수의 이름, parameters는 매개변수, =>는 화살표 기호로, 오른쪽에는 함수의 본문이 위치한다. const functionName = (parameters) => { // 함수 본문 } 화살표 함수의 특징 간결성: 화살표 함수는 function 키워드를 생략하고, 함수 본문이 단일 표현식인 경우 중괄호와 return 문을 생략할 수 있습니다. 예를 들어:이 함수는 a와 b를 더한 값을 ..

JSX는 JavaScript XML의 약자로, HTML과 유사한 구문을 사용하여 JavaScript 코드 내에서 UI 요소를 기술하는 React의 확장 문법이다.JXS는 개발자가 UI 구조를 보다 직관적으로 작성할 수 있도록 하고 가독성과 생산성을 향상시킬 수 있다.<h2..

자바스크립트의 모듈 시스템은 코드를 여러 파일로 분할하고, 각 파일에서 개별적으로 기능을 정의한 후 다른 파일에서 재사용할 수 있게 해준다. 이를 통해 코드의 재사용성과 유지보수성을 높이고, 네임스페이스 오염을 방지할 수 있다. ES6에서 공식적으로 모듈 시스템을 지원하기 시작했으며, import와 export 문을 사용한다. 모듈 사용 방법 export - 모듈을 사용하기 위해서는 우선 기능을 정의하고 내보내야 한다. import - 그 다음, 다른 파일에서 그 기능을 불러와서 사용할 수 있다. 1. 기능 내보내기 [ mathUtils.js ] // 여러 함수를 export 할 수 있습니다. export function add(x, y) { return x + y; } export function su..

자바스크립트의 DOM(Document Object Model)이란? HTML 및 XML 문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조적 표현을 제공하고 프로그램이 문서 구조, 스타일 및 내용을 변경할 수 있도록 한다. 웹 페이지를 브라우저에서 렌더링할 때, 브라우저는 HTML 문서를 DOM으로 변환한다. 이 DOM은 문서의 모든 요소, 속성 및 텍스트를 노드로 나타내는 계층적인 트리 구조이다. DOM의 주요 개념 1. 노드 DOM의 기본 요소로, 문서의 모든 부분(요소, 속성, 텍스트 등)이 노드이다. 각 노드는 다른 노드와 관계를 가지며, 이런 관계는 트리 구조로 표현된다. 2. 요소 노드 HTML 태그에 해당하는 노드로 , , 등이 있다. 요소 노드는 속성 노드와 텍스트 노드를 포함할 수 있..