사과하는 제라스

한명의 고객이 담고 있는 정보가 많을때는 How?? → 계층적으로 구성해서 각각의 Component가 담고 있는 내용들을 분리 ex) Customer → CustomerInfo + Customer import React, { Component } from 'react'; import Customer from './components/Customer' import './App.css'; const customer = { 'id' : '1', 'image' : 'https://placeimg.com/64/64/any', 'name' : '홍길동', 'birthday' : '980817', 'gender' : '남자', 'job' : '대학생' } //id, image 추가 class App extends C..

Component(컴포넌트) : 웹 문서에서 어떠한 내용을 보여주기 위한 기본적인 단위, 웹 문서에서 그려지게 될 최소 단위 ㄴex) App.js의 App 클래스는 웹 프로그램 그 자체를 화면에 출력하기 위해 Component를 써서 만들어준 것. Component는 계층적으로 구성될 수 있기 때문에 하나의 Component 안에 다른 여러 개의 Component가 들어갈 수 있음. src 폴더 안에 components 폴더 생성 후 내부에 Customer.js 이라는 JS 파일 생성. React에서 소스코드를 작성할 때 import와 export가 많이 쓰임. import React from 'react'; //React라이브러리를 불러옴 class Customer extends React.Compon..

App.js란? :실질적으로 웹사이트의 화면에 대한 내용 출력을 담당하는 부분 import logo from './logo.svg'; import './App.css'; function App() { return ( //하나의 클래스를 App.css에서 정의해줄텐데 그 클래스를 사용하겠다는 뜻임 Let's develop management system! ); } export default App App.css란? : App.js와 연동되어서 웹사이트의 메인부분에 해당하는 디자인을 담당함. .gray-background { background: darkgray; } ㄴApp.js에다가 적용하는 디자인 (darkgray 색상의 배경색을 설정.) → index.css에서 ReactDOM.render(, doc..

React 개발에 있어서 가장 효과적인 통합개발 환경 중 하나는 Visual Studio Code(VSC)이다. create-react-app 으로 만든 리액트 프로그램은 웹 프론트가 구동 중인 상태에서 소스코드를 수정하고 저장하면 알아서 컴파일되어 반영된다. import logo from './logo.svg'; import './App.css'; function App() { return ( # 이미지 넣기 # 텍스트 보여주기 Edit src/App.s and save to reload. # 링크 달아주기 Learn React ); } export default App; React의 장점: 일부 코드 변경 후 저장만 해도 새로고침 없이도 수정내역이 반영됨. → 개발속도가 매우 빠르게 가능. [2강에서..

맥이나 리눅스에 비해 윈도우 사용자들은 개발 환경 구축이 상대적으로 어려움이 있음. Create React App(CRA) 이란 패키지를 사용하여 리액트 프로젝트를 가장 빠르고 간결함. 설치 및 실행 순서 1. Node.JS 설치 2. npm이란 패키지 관리 도구까지 설치됨 3. C 드라이브에 RPT(이 강의에선 React Project Tutorial)란 폴더 생성 4. cmd 실행 후 cd 명령어로 RPT로 경로 변경 5. npm install -g create-react-app으로 설치 ㄴ여기서 -g는 global 옵션으로 글로벌 패키지 형태로 설치하게 함. -> 기능 : 지금 만드는 프로젝트 말고도 다른 프로젝트에서도 해당 패키지(여기서는 create-react-app) 사용이 가능하게 함. WA..