frontend31 React Setup Visual Studio Code 사용할 경우 터미널에 들어가 하단 명령들을 기입합니다npm install -g create-react-appcreate-react-app 다른 방법은 하단과 같습니다npx create-react-app * Npx는 노드 패키지 실행을 도와주는 도구 입니다. 그래서 create-react-app 이란 npm 레지스트리에 있는 패키지를 생성한 폴더에서 실행해서 리액트를 설치 해줍니다. npm run start 로 React를 실행 -> localhost:3000에 페이지 확인할 수 있습니다 npm run test 로 코드에 문제가 있는지 확인할 수 있습니다 npm run dev를 사용하려면 package.json의 "scripts" 섹션에 "dev" 설정을 추가해야 합니다.. 2024. 10. 11. React에 State & Props 상태(State)는 컴포넌트 내부에 존재하는 변수로, 컴포넌트 외부에서는 접근하거나 수정할 수 없으며, 컴포넌트 내부에서만 사용됩니다. 상태는 this.setState를 통해 수정할 수 있으며, 비동기적으로 동작할 수 있습니다. State가 변경되면 어떻게 되나요?상태(State) 변경은 사용자 입력, 이벤트 트리거 등과 같은 상황에서 발생합니다. 상태가 변경되면 React는 이를 감지하고 가상 DOM을 업데이트한 뒤, 실제 DOM에 필요한 부분만 효율적으로 렌더링합니다. (업데이트된 상태를 가진 컴포넌트만 다시 렌더링 합니다). setState() 메서드는 변경된 부분의 재렌더링 과정을 트리거합니다. State 사용 시 주의할 점 ** State는 직접 수정하면 안 되고, 'setState()' 통해.. 2024. 10. 11. JSX (JavaScript XML)이 뭔가요 React JSX는 JavaScript XML의 약자로, JavaScript와 함께 HTML 코드를 작성하고 createElement() 및 appendChild() 메서드 없이 DOM에 배치하는 데 사용됩니다. JSX를 사용하면 템플릿 언어와 같은 방식으로 더 적은 코드 줄 수로 재사용 가능한 UI 컴포넌트를 쉽게 생성할 수 있으며, JavaScript의 강력함을 함께 활용할 수 있습니다. **JSX를 사용하는 것은 필수가 아니지만, React 프로그래밍에서는 강력히 권장됩니다. JSX를 사용하면 코드를 더 쉽게 작성하고 읽을 수 있어 개발 과정이 보다 수월해지기 때문입니다. JSX는 일반 JavaScript로 반환되는 과정에서 최적화를 수행하기 때문 더 빠릅니다JSX를 통해 템플릿을 쉽게 작성할 수 .. 2024. 10. 10. Virtual Dom에 대해 문서 객체 모델(DOM)은 HTML 및 XML 문서를 위한 프로그래밍 인터페이스입니다. DOM은 문서의 구조를 노드 트리로 표현하며, 스크립트가 문서의 내용과 구조에 접근하고 조작할 수 있는 방법을 제공합니다. 초기 렌더링 : 앱이 시작될 때, 전체 UI는 가상 DOM(Virtual DOM)으로 표현됩니다. React 요소가 생성되어 가상 구조로 렌더링 됩니다.상태와 Props 변경 : 앱 내에서 상태(state)와 props가 변경되면, React는 가상 DOM에서 해당되는 컴포넌트를 다시 렌더링 합니다.차이 비교 (Diff 알고리즘 사용) : React는 차이(diff)를 확인하기 위해 현재 가상 DOM과 이전 버전을 비교하는 diff 알고리즘을 사용합니다. 이 과정에서 두 버전 간의 차이점을 식별합.. 2024. 10. 10. Client-side Rendering vs Server-side Rendering 클라이언트 사이드 렌더링(CSR)은 JavaScript를 사용하여 웹사이트나 애플리케이션을 브라우저에서 렌더링 하는 방식입니다. CSR에서는 콘텐츠의 처리 및 렌더링이 서버가 아닌 브라우저에서 이루어집니다. 서버는 페이지의 기본 HTML 컨테이너만 렌더링하고, 나머지 콘텐츠는 클라이언트에서 처리됩니다.CSR은 동적 콘텐츠가 많고 높은 수준의 인터랙티브 기능이 필요한 애플리케이션, 예를 들어 채팅 앱이나 소셜 미디어 플랫폼에 자주 사용됩니다. 또한, 단일 페이지 애플리케이션(SPA) 에도 적합합니다. 유저가 웹 페이지 요청 : 브라우저로부터 유저의 웹페이지 요청을 받습니다서버가 요청을 받습니다 : 서버로 GET 요청 발송서버가 CSS와 JavaScript 파일이 있는 링크를 HTML 페이지 통해 전달 :.. 2024. 10. 9. Single Page Application (SPA) 싱글 페이지 애플리케이션은 웹 브라우저가 전체 페이지를 새로 로드하는 기본 방식 대신, 웹 서버로부터 새로운 데이터를 받아 현재 웹 페이지를 동적으로 다시 작성하는 웹사이트 또는 웹 애플리케이션입니다. 따라서 사용자는 서버에서 새로운 페이지를 로드하지 않고도 웹사이트를 사용할 수 있어, 성능이 향상되고 보다 인터랙티브한 경험을 얻을 수 있습니다. 반면 A 페이지를 만들면 A html 템플릿, B 페이지를 만들면 B html 템플릿 방식은 전통적인 웹 사이트를 만들 때 사용하는 Multi-Page Application 입니다. 동적 상호작용 : 전체 페이지를 다시 로드하지 않고 빈번한 사용자 상호작용이 필요한 애플리케이션의 경우실시간 업데이트 : 원활한 사용자 경험을 위해 실시간 응답성이 중요한 경우풍.. 2024. 10. 8. 이전 1 2 3 4 5 6 다음
