반응형 컴퓨터공부/React20 [React & Express] 04 스코프란 무엇인가? let 과 var의 차이점은 무엇인가? let과 var는 자바스크립트에서 변수를 선언하는 키워드입니다. 가장 큰 차이점은 변수의 스코프(scope)입니다. var로 선언한 변수는 함수 스코프(function scope)를 갖지만, let으로 선언한 변수는 블록 스코프(block scope)를 갖습니다. 함수 스코프(fuction scope)는 해당 함수 내에서 선언된 변수는 함수 내부에서 모두 접근할 수 있습니다. 하지만 블록 스코프(block scope)는 해당 블록(중괄호 {}) 내에서 선언된 변수는 해당 블록 내에서만 접근할 수 있습니다. 이것은 변수의 유효 범위를 결정하는데 영향을 미칩니다. var로 선언한 변수는 함수 내에서 정의한 변수가 함수 전체에서 접근 가능하다는 것을 의미합니다. 따라서,.. 2023. 5. 20. [React & Express] 03 class, constructor, static ,extend, super https://codepen.io/pen/ (코드펜) class React Class Components는 React에서 가장 오래된 방식 중 하나입니다. 이는 ES6 클래스 기반의 컴포넌트입니다. Class Components는 상태(State)과 라이프 사이클(Life cycle)을 관리하기 편하며, 클래스 내부에 메서드를 정의할 수도 있습니다. 또한, 이전 버전의 React에서 기본적으로 사용되던 방식 중 하나이므로, 여전히 많은 코드에서 사용됩니다. React Class Components는 React.Component 클래스를 상속받아 생성됩니다. 이 클래스는 render() 메서드를 구현해야 한다. // unnamed let Rectangle = class { constructor(height.. 2023. 5. 20. [React & Express] 02 IE8, react 장점 React & Express 를 이용한 웹 어플리케이션 개발하기 02 React 장점으로는 뭐가 있을까? React는 웹 애플리케이션 개발 분야에서 매우 인기 있는 프론트엔드 프레임워크 중 하나입니다. 이를 사용하면 개발자는 다음과 같은 장점을 누릴 수 있습니다. 1. 가상 돔(Virtual DOM) React는 가상 돔(Virtual DOM)을 사용하므로, 최상위 DOM 요소에서 작은 변화를 찾아내고, 변화를 최소화하여 UI를 업데이트합니다. 이를 통해 효율적인 UI 업데이트가 가능합니다. 2. 컴포넌트 기반 React는 컴포넌트 기반 아키텍처를 채택하여 코드의 재사용성 및 유지보수성을 향상시킵니다. 3. 생산성 향상 React는 코드의 간결성과 가독성을 향상시키는 JSX문법을 제공합니다. 이는 HTM.. 2023. 5. 20. [React & Express] 를 이용한 웹 어플리케이션 개발하기 01 React & Express 를 이용한 웹 어플리케이션 개발하기 01 앵귤러가 react를 대체할수있을까? 앵귤러와 리액트는 모두 웹 개발 분야에서 인기있는 프론트엔드 프레임워크 중 하나입니다. 앵귤러는 구글에서 개발하고 있으며, AngularJS(1.x)와 Angular(2+)가 있으며, TypeScript를 기본 언어로 사용합니다. 리액트는 Facebook에서 개발하고 있으며, JavaScript 또는 TypeScript로 개발될 수 있습니다. 이제 약간의 차이점을 살펴보겠습니다. 1. 컴포넌트 기반 앵귤러와 리액트 모두 컴포넌트 아키텍처를 사용합니다. 그러나 앵귤러는 더 많은 프로젝트 구성 요소, 서비스 및 기타 디렉티브를 제공합니다. 이는 대형 애플리케이션의 작성에 적합합니다. 리액트는 단순하고 .. 2023. 5. 20. [생활코딩] props 강의 key, component, props import React from "react"; import "./App.css"; import "./index.css"; function Header(props) { console.log("props", props, props.title); return ( {props.title} ); } function Aticle(props) { return ( {props.title} {props.body} ); } function App() { return ( ); } export default App; 코드설명 "Header"라는 함수가 있고 “props” 매개변수를 받습니다. 이 함수는 “props” 객체와 그 객체의 “title” 속성을 콘솔에 기록합니다. 첫 번째 “props” 인스턴스는 함수에 전달되는.. 2023. 5. 18. [생활코딩] props , eslint] src\App.js Line 6:37: 'title' is missing in props validation react/prop-types [생활코딩] prop react prop은 component의 속성이다. React prop은 React 컴포넌트에서 특정한 값을 전달할 수 있도록 하는 속성(property)입니다. Prop은 다른 컴포넌트로부터 전달받을 수도 있고, 컴포넌트 내부에서 생성된 값을 전달할 수도 있습니다. Prop을 사용하여 컴포넌트 간에 데이터를 전달하면, 데이터의 일관성을 유지하며 중복 코드를 줄일 수 있습니다. 컴포넌트의 속성은 일반 JavaScript 변수와 동일하게 다룰 수 있으며, 다른 컴포넌트에서 해당 속성을 사용할 때에는 JSX 문법을 사용하여 속성 값을 전달합니다. React prop은 불변성을 지니며, 컴포넌트가 생성될 때는 초기 값이 설정되며, 이후에는 변경되지 않습니다. 이러한 이유로 React pr.. 2023. 5. 17. [생활코딩] 시멘틱 웹과 Component 추가하기 [생활코딩] 시멘틱 웹과 Component 추가하기 시멘틱웹: , , 태그를 말한다. https://www.youtube.com/watch?v=WT58gOl8Eh8 따라하면서 오류 정리, import React from "react"; import "./App.css"; import "./index.css"; 이부분은 반드시 import 해야된다 - eslint import React from "react"; 오류부분 function Header() { return; WEB ; } 해결된 부분 function Header() { return ( WEB{" "} ); } funtion 변수() { 괄호하고 return ( 값을 넣어라 ); 2023. 5. 17. [생활코딩] React 배포하는 방법 React 배포하는 방법 npm run build C:\Users\seolzone\IdeaProjects\lifereact>npm run build > lifereact@0.1.0 build > react-scripts build Creating an optimized production build... Compiled successfully. File sizes after gzip: 47.11 kB build\static\js\main.a8c82644.js 1.78 kB build\static\js\787.032469ce.chunk.js 427 B build\static\css\main.3068919b.css The project was built assuming it is hosted at /. Yo.. 2023. 5. 16. 이전 1 2 3 다음 반응형
