[Reason] 작업 후 push 명령어를 입력했을 때 발생된 에러이다. 주로 다른 commit 과 충돌로 인해 발생되는 에러이다. [Solution] (1) 강제 push 진행 $ git push origin +{push할 브랜치} 혹은 (2) 기존에 작업한 내용이 있을 경우 pull 먼저 수행 후 다시 push 진행 $ git pull origin {push할 브랜치} --allow-unrelated-histories 위의 명령어로 pull을 진행한 뒤 다시 push를 진행한다.

Props 는 렌더링 호출되는 컴포넌트들의 속성 값들이라고 볼 수 있습니다. 태그를 처음 다뤄본다면 위와 같이 여러 동일한 컨텐츠들을 수작업으로 일일히 하나씩 추가해야했을 것입니다. 이것을 보완해서 작성해보겠습니다. 반복되는 내용들을 단일 function 한 개로 만든 다음 렌더 함수에서 해당 Card 를 세 번 불러오기만 하면 반복적으로 내용들을 불러올 수 있습니다. 렌더링 함수 쪽에 보면 형식으로 마치 컴포넌트를 불러오는 것처럼 호출할 수도 있고, {Card()} 형식을 통해 같은 파일 내에 js 요소를 불러오는 형식으로도 호출할 수 있습니다. 하지만 단일 요소를 반복적으로 사용하는 것이기 때문에 당연히 비욘세 사진만 나옵니다. 따라서 재사용한 카드 구성 요소 각각에 다른 정보 조각들을 넣어주어야 합..

[Reason] 처음 React를 다루면서 프로젝트를 만들고 실행했을 때 발생된 에러이다. 원인은 package.json 파일에 등록된 dependencies 중에 react-scripts 패키지의 버전이 맞지 않아 발생된 에러이다. [Solution] npm install --save react-scripts@5.0.1 프로젝트 터미널에서 해당 명령어를 통해 react-scripts 버전을 바꿔주고 다시 npm start 명령어를 실행주니 로컬에서 React App 이 정상적으로 실행되었다.

윈도우 로컬 환경에서 React 를 활용한 반응형 앱을 만들기 위해서는 크게 4가지 단계를 거치면 됩니다. 1. 노드를 설치 2. 개발 툴 설치 (Visual Studio 등..) 3. React App 생성 4. App을 실행 (1) 노드 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 노드 사이트에서 최신 버전의 node.js 를 받아줍니다. LTS 버전을 다운받아 설치하면 됩니다. (2) 개발 툴 설치 (Visual Studio Code) https://code.visualstudio.com/download Download Visual St..

React 를 컴포넌트로 관리하게 될 때 컴포넌트로 만든 js 파일이나 렌더링할 내용이 있는 jsx 파일을 사용하려면 export를 해주어야 하고, 그 컴포넌트를 사용하는 파일에서는 import 를 시켜주어야 합니다. 이 export와 import를 사용하는 방법을 조금 더 알아보겠습니다. 단일 Export / Import math.js const pi = 3.1415962; export default pi; index.js import React from "react"; import ReactDOM from "react-dom"; import pi from "./math" ReactDOM.render( {pi} , document.getElementById("root") ); 컴포넌트인 math.js ..

React 의 가장 큰 장점 중 하나는 컴포넌트를 사용한 깔끔한 프로젝트 구성과 관리 효율성이 있습니다. 하나의 파일 안에 필요한 모든 코드를 넣는 것이 아니라 필요한 기능들과 input 되어져야 될 파일들을 따로 구분시켜 필요할 때마다 해당 기능들을 가지고 있는 컴포넌트 파일만을 간편하게 import 해서 사용하는 것입니다. 단일 컴포넌트 파일을 만들어 놓기만 해도 원할 때마다 재사용하여 구성할 수 있습니다. 이 컴포넌트를 어떻게 사용하고 구성하는지에 대해 예시 코드로 테스트해보며 정리해보겠습니다. 기존의 React 파일 구성 index.js import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( My Favourite..