1. api서버, 클라이언트랑 통신하는 서버 분리

기존 management폴더에 client폴더를 새로 파서

.git빼고 싹다 옮겨준다.

express generator를 이용해서 express앱을 생성한다. 디렉토리 명은 apiServer이다.

https://expressjs.com/ko/starter/generator.html

 

Express 애플리케이션 생성기

Express 애플리케이션 생성기 애플리케이션의 골격을 신속하게 작성하려면 애플리케이션 생성기 도구인 express를 사용하십시오. 다음의 명령을 이용해 express를 설치하십시오. $ npm install express-generator -g 다음과 같이 -h 옵션을 이용해 명령의 옵션을 표시하십시오. $ express -h Usage: express [options][dir] Options: -h, --help output usage informat

expressjs.com

생성된 apiServer의 package.json의 dependency에 있는 항목들을 설치하기 위해

npm install을 실행해준다.

일반적으로는 npm install 모듈명을 입력해서 모듈을 설치하지만 프로젝트의 루트경로에 package.json파일을 두고 
npm install 명령어를 입력하면  npm이 package.json에 명시된  dependencies부분의 모듈들을 모두 설치해 준다.
물론 package.json파일이 없는 상태에서 npm install 명령어만 입력하면 의존정보를  찾을수 없다는 오류가 난다.

 

분리한 후 디렉토리 모습

2. 서버 두개 실행시키기

루트폴더에 package.json 파일을 만든 후

client통신서버랑 api서버 둘다 실행시킬 수있게 scripts를 짜주고

 

concurrently 모듈을 설치해서 한번에 실행시킬 수 있게 세팅한다.

https://github.com/kimmobrunfeldt/concurrently

 

kimmobrunfeldt/concurrently

Run commands concurrently. Like `npm run watch-js & npm run watch-less` but better. - kimmobrunfeldt/concurrently

github.com

 

package.json을 세팅해놓고

> concurrently "npm:server" "npm:client"

한줄 입력시 백, 프론트 서버를 동시에 실행하도록 구현했다.

물론 포트번호를 둘이 안겹치게 바꿔야한다.

클라이언트는 3000번, api서버는 5000번을 썼다.

 

저작자표시

'웹 > 리액트' 카테고리의 다른 글

[리액트]고객관리 시스템_UI  (2) 2019.09.01
[리액트]고객관리 시스템_컴포넌트  (0) 2019.09.01
[리액트]고객관리 시스템_프로젝트 생성  (0) 2019.09.01
[리액트]형상관리  (0) 2019.08.31
[리액트]앱 빌드/배포  (0) 2019.08.31

부트스트랩과 비슷한 material-UI 프레임워크를 사용했다.

https://react-bootstrap.github.io/

 

https://react-bootstrap.github.io/

React Bootstrap The most popular front-end framework Rebuilt for React. Current version: 1.0.0-beta.10

react-bootstrap.github.io

https://material-ui.com/

 

Material-UI: A popular React UI framework

React components for faster and easier web development. Build your own design system, or start with Material Design.

material-ui.com

 

터미널에 npm install @material-ui/core

 

1. 테이블 골격 만들기

<App.js>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Customer from "./components/Customer";
import Table from "@material-ui/core/Table";
import TableHead from "@material-ui/core/TableHead";
import TableBody from "@material-ui/core/TableBody";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
 
const customers = [
  {
    id: 1,
    name: "name1",
    birthday: "112345",
    gender: "남자",
    job: "없음"
  },
  {
    id: 2,
    name: "name2",
    birthday: "112345",
    gender: "남자",
    job: "없음"
  },
  {
    id: 3,
    name: "name3",
    birthday: "112345",
    gender: "여자",
    job: "없음"
  }
];
class App extends Component {
  render() {
    return (
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>아이디</TableCell>
            <TableCell>이름</TableCell>
            <TableCell>생일</TableCell>
            <TableCell>성별</TableCell>
            <TableCell>직업</TableCell>
            
          </TableRow>
        </TableHead>
        <TableBody>
          {customers.map(c => {
            return (
              <Customer
                id={c.id}
                name={c.name}
                birthday={c.birthday}
                gender={c.gender}
                job={c.job}
              ></Customer>
            );
          })}
        </TableBody>
      </Table>
    );
  }
}
 
export default App;
 
 cs

<Customer.js>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from "react";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
 
class Customer extends Component {
  render() {
    return (
      <TableRow>
        <TableCell>{this.props.id}</TableCell>
        <TableCell>{this.props.name}</TableCell>
        <TableCell>{this.props.birthday}</TableCell>
        <TableCell>{this.props.gender}</TableCell>
        <TableCell>{this.props.job}</TableCell>
      </TableRow>
    );
  }
}
 
export default Customer;
 
 cs

기본 HTML 테이블에서 본거랑 비슷하게 매칭이 된다.

<table> : <Table>

<thead> : <TableHead>

<tr> : <TableRow>

<td> : <TableCell>

 

2. CSS입히기

<App.js>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Customer from "./components/Customer";
import Table from "@material-ui/core/Table";
import TableHead from "@material-ui/core/TableHead";
import TableBody from "@material-ui/core/TableBody";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
const styles = theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing.unit * 3,
    overflowX: "auto"
  },
  table: {
    minWidth: 1080
  }
});
const customers = [
  {
    id: 1,
    name: "name1",
    birthday: "112345",
    gender: "남자",
    job: "없음"
  },
  {
    id: 2,
    name: "name2",
    birthday: "112345",
    gender: "남자",
    job: "없음"
  },
  {
    id: 3,
    name: "name3",
    birthday: "112345",
    gender: "여자",
    job: "없음"
  }
];
class App extends Component {
  render() {
    const{classes}=this.props;
    return (
      <Paper className={classes.root}>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>아이디</TableCell>
              <TableCell>이름</TableCell>
              <TableCell>생일</TableCell>
              <TableCell>성별</TableCell>
              <TableCell>직업</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {customers.map(c => {
              return (
                <Customer
                  id={c.id}
                  name={c.name}
                  birthday={c.birthday}
                  gender={c.gender}
                  job={c.job}
                ></Customer>
              );
            })}
          </TableBody>
        </Table>
      </Paper>
    );
  }
}
 
export default withStyles(styles)(App);
 
 cs

 

저작자표시

'웹 > 리액트' 카테고리의 다른 글

[리액트]고객관리 시스템_API서버 만들기  (0) 2019.09.01
[리액트]고객관리 시스템_컴포넌트  (0) 2019.09.01
[리액트]고객관리 시스템_프로젝트 생성  (0) 2019.09.01
[리액트]형상관리  (0) 2019.08.31
[리액트]앱 빌드/배포  (0) 2019.08.31

1. 고객 컴포넌트 만들기

src에 components디렉하나 만들어주고 그아래 Customer.js 파일을 만들어준다.

<App.js>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Customer from "./components/Customer";
 
const customer = {
  name: "들짐승",
  birthday: "112345",
  gender: "남자",
  job: "없음"
};
class App extends Component {
  render() {
    return (
      <Customer
        name={customer.name}
        birthday={customer.birthday}
        gender={customer.gender}
        job={customer.job}
      />
    );
  }
}
 
export default App;
 
 cs

App.js에 고객변수 하나를 만들어주고 Customer에 속성으로 넘겨준다.

<Customer.js>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, {Component} from 'react';
 
class Customer extends Component{
    render(){
        return(
            <div>
                <h2>{this.props.name}</h2>
                <p>{this.props.birthday}</p>
                <p>{this.props.gender}</p>
                <p>{this.props.job}</p>
            </div>
        )
    }
}
 
export default Customer;
 cs

 

Customer에서는 props로 받는다.

render부분을 보면

여러 태그들이 병렬로 나열돼있어서 <div>태그로 묶어줘야한다.

 

[리액트]props state

 

[리액트]props state

1. props props는 생성자 인자로 비유해서 이해했다. MyComponent 태그를 보면 속성=값 으로 인자를 넘겨줬다. 객체를 찍어낼때 생성자 인자로 "a", "b"를 넘겨줬다고 생각하면된다. 2.state state는 클래스의 pr..

fieldanimal.tistory.com

 

글고 동빈나형님이 개꿀팁 알려주셨는데

class Customer부분을 컨트롤+클릭하면

클래스 정의부로 자동으로 이동한다.

 

2. 고객 컴포넌트 쪼개기

<Customer.js>만 수정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import React, { Component } from "react";
 
class Customer extends Component {
  render() {
    return (
      <div>
        <CustomerProfile
          id={this.props.id}
          name={this.props.name}
        ></CustomerProfile>
        <CustomerInfo
          birthday={this.props.birthday}
          gender={this.props.gender}
          job={this.props.job}
        ></CustomerInfo>
      </div>
    );
  }
}
class CustomerProfile extends Component {
  render() {
    return (
      <div>
        <h2>{this.props.id}</h2>
        <h2>{this.props.name}</h2>
      </div>
    );
  }
}
 
class CustomerInfo extends Component {
  render() {
    return (
      <div>
        <p>{this.props.birthday}</p>
        <p>{this.props.gender}</p>
        <p>{this.props.job}</p>
      </div>
    );
  }
}
 
export default Customer;
 
 cs

 

Customer를 CustomerProfile이랑 CustomerInfo로 나눠서

각각 렌더링한다.

내부에서만 사용되는 클래스니깐 

export할땐 걍 Customer만 해주면된다.

 

3. 데이터 추가하기

<App.js>에 데이터 추가하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Customer from "./components/Customer";
 
const customers = [
  {
    id: 1,
    name: "name1",
    birthday: "112345",
    gender: "남자",
    job: "없음"
  },
  {
    id: 2,
    name: "name2",
    birthday: "112345",
    gender: "남자",
    job: "없음"
  },
  {
    id: 3,
    name: "name3",
    birthday: "112345",
    gender: "여자",
    job: "없음"
  }
];
class App extends Component {
  render() {
    return (
      <div>
        {customers.map(c => {
          return (
            <Customer
              id={c.id}
              name={c.name}
              birthday={c.birthday}
              gender={c.gender}
              job={c.job}
            ></Customer>
          );
        })}
      </div>
    );
  }
}
 
export default App;
 
 cs

map함수를 사용해서 조진다.

map안에 화살표함수가 있는데 익명함수쓸때 간단히 처리한다고 한다.

https://wayhome25.github.io/javascript/2017/02/23/js-Arrow-functions/

 

자바스크립트 화살표 함수 · 초보몽키의 개발공부로그

자바스크립트 화살표 함수 23 Feb 2017 | javascript 함수 화살표 함수 화살표 함수 (Arrow functions) 설명 화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고, 화살표 함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적당합니다. 그래서 생성자로서 사용할 수 없습니다. MDN 문법 (param1, param2, …, paramN) => { stat

wayhome25.github.io

var a = [
  "Hydrogen",
  "Helium",
  "Lithium",
  "Beryl­lium"
];

var a2 = a.map(function(s){ return s.length });

var a3 = a.map( s => s.length );

 

 

저작자표시

'웹 > 리액트' 카테고리의 다른 글

[리액트]고객관리 시스템_API서버 만들기  (0) 2019.09.01
[리액트]고객관리 시스템_UI  (2) 2019.09.01
[리액트]고객관리 시스템_프로젝트 생성  (0) 2019.09.01
[리액트]형상관리  (0) 2019.08.31
[리액트]앱 빌드/배포  (0) 2019.08.31

동빈나 개발자님의 리액트로 고객관리 시스템을 개발하는 강의가 있다.

https://www.youtube.com/watch?v=_yEH9mczm3g&list=PLRx0vPvlEmdD1pSqKZiTihy5rplxecNpz&index=1

 

https://ndb796.tistory.com/category/React%EC%99%80%20Node.js%EB%A1%9C%20%EB%A7%8C%EB%93%9C%EB%8A%94%20%EA%B3%A0%EA%B0%9D%20%EA%B4%80%EB%A6%AC%20%EC%8B%9C%EC%8A%A4%ED%85%9C%20%EA%B0%9C%EB%B0%9C%20%EA%B0%95%EC%A2%8C

 

'React와 Node.js로 만드는 고객 관리 시스템 개발 강좌' 카테고리의 글 목록

프로그래밍 강의를 진행하는 공간입니다.

ndb796.tistory.com

1. npx create-react-app management 로 프로젝트 만들어준다.

 

2. css 파일 바꿔서 적용시켜보기

App.css파일을 수정하고, App.js의 div에 적용시킨다.

JSX문법을 사용하기 때문에 걍 class=""가 아닌 className=""으로 적용시킨다.

 

 

 

2. README.md

깃허브에 올라가서 출력될 내용들, 소개내용,설치방법,레퍼런스 등이 들어가는 공간이다.

맨위에 한줄 추가해본다.

 

3. 원격저장소랑 연동시키기

일단 로컬저장소는 세팅이 되어있다.

https://fieldanimal.tistory.com/71?category=764530

 

[리액트]형상관리

create-react-app 하면서 앱 만들었을 때, 저절로 .git폴더가 안에 생겨져있었다. 로컬저장소까지 세팅이 된 상태다. 나는 생활코딩형님꺼 리액트 튜토리얼앱 다 만들고나서 한번에 commit, push 했다. commit할..

fieldanimal.tistory.com

실제로 추적하고있는게 보인다.

커밋한번 해주고

깃헙에 저장소 만들어주고

git remote add origin https://github.com/kimdongwoowoo/React-Management-System.git

git push origin master

아까 README.md에서 수정한 내용도 같이 나온다.

gitignore을 보면 npm module, build 다 업로드되지 않도록 처리되어있다. create-react-app 좋다.

저작자표시

'웹 > 리액트' 카테고리의 다른 글

[리액트]고객관리 시스템_UI  (2) 2019.09.01
[리액트]고객관리 시스템_컴포넌트  (0) 2019.09.01
[리액트]형상관리  (0) 2019.08.31
[리액트]앱 빌드/배포  (0) 2019.08.31
[리액트]이벤트 핸들러  (0) 2019.08.31

create-react-app 하면서 앱 만들었을 때, 저절로 .git폴더가 안에 생겨져있었다.

로컬저장소까지 세팅이 된 상태다.

나는 생활코딩형님꺼 리액트 튜토리얼앱 다 만들고나서 한번에 commit, push 했다.

commit할때는 걍 visual studio code에서 메시지 입력하고 컨트롤엔터 쳐주면
내 로컬저장소에 변경된 파일들이 commit된다.

터미널에다가

  • 원격저장소를 등록시킬 때 : git remote add origin 깃헙주소
  • 원격저장소에 push할 때 : git push origin 브랜치이름 (master)

 

깃헙에 올리고 나니까

일케 돼있었다.

난 한번도 commit한 적이 없는데 맨 처음에 리액트플젝 만들 때 자동으로 로컬저장소에 커밋도 해줬나보다.

 

gitignore까지 있어서 안을 보니까

빌드한 부분은 제외하고 처리한다. 굉장히 스마트하다.

 

create-react-app할 때 깃세팅 다 해주고 vs code에서 쉽게 커밋해서그렇지
안그랬으면 해당 폴더(my-react-app) 들어가서 우클릭해서 git bash 키고
git init 해서 .git폴더 만들어주고 로컬저장소 세팅하고
git commit –m 메시지 해주고
git remote origin add 원격저장소주소하고

git push origin master해서 처리했어야 한다.

git ignore도 따로 했어야한다.

 

형상관리에 대한 작업들까지 생성해주는 프레임워크 짱이다.

저작자표시

'웹 > 리액트' 카테고리의 다른 글

[리액트]고객관리 시스템_컴포넌트  (0) 2019.09.01
[리액트]고객관리 시스템_프로젝트 생성  (0) 2019.09.01
[리액트]앱 빌드/배포  (0) 2019.08.31
[리액트]이벤트 핸들러  (0) 2019.08.31
[리액트]props state  (0) 2019.08.31

+ Recent posts

티스토리툴바