안경잡이개발자

6강 Material UI를 적용하여 테이블 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]

React와 Node.js로 만드는 고객 관리 시스템 개발 강좌2018. 12. 31. 16:51
728x90
반응형

  본 강의에서는 CSS를 활용한 웹 디자인에 대해서는 자세히 다루지 않습니다. 그래서 이번 시간에 Material UI를 이용해서 CSS에 대해서 모르더라도 빠르게 예쁜 디자인을 할 수 있는 방법에 대해서 알려드리도록 합니다. Material UI는 리액트(React)에서 가장 많이 사용되는 디자인 프레임워크입니다. 과거에 가장 많이 사용되었던 Bootstrap UI와 비슷하다고 보시면 됩니다.


  CSS에 대해서 전혀 모르는 사람도 웹 문서를 뒤져가면서 하나씩 갖다 붙이기만 해도 예쁘게 화면이 구성된다는 특징이 있습니다.


  ▶ Material UI: https://material-ui.com/getting-started/installation/


  공식 사이트에 접속해서 Material UI의 사용법에 대해서 알아 볼 수 있습니다.



  따라서 Material UI를 설치하기 위해서 터미널(Terminal)에서 다음과 같은 명령어를 입력해주세요.


  ▶ Material UI 설치 명령어: npm install @material-ui/core



  설치 이후에는 서버를 종료시킨 이후에 다시 yarn start를 입력하여 구동시키면 됩니다.



※ Material UI를 사용해 테이블 만들어보기 ※


  고객 목록에 대한 정보는 테이블(Table) 형태로 출력하는 것이 효과적입니다. Material UI의 테이블 사용 예제는 다음 사이트에서 확인할 수 있습니다. https://material-ui.com/demos/tables/


▶ Customer.js


  고객(Customer) 컴포넌트를 다음과 같이 수정합니다. 한 명의 고객에 대한 정보는 테이블에서 하나의 행(Row)을 차지합니다.


import React from 'react';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';

class Customer extends React.Component {
render() {
return (
<TableRow>
<TableCell>{this.props.id}</TableCell>
<TableCell><img src={this.props.image} alt="profile"/></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;


▶ App.js


  이후에 테이블의 몸통(Body) 부분에서 각 고객에 대한 정보를 하나씩 출력하도록 처리하면 됩니다.


import React, { Component } from 'react';
import Customer from './components/Customer'
import './App.css';
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,
'image': 'https://placeimg.com/64/64/1',
'name': '홍길동',
'birthday': '961222',
'gender': '남자',
'job': '대학생'
},
{
'id': 2,
'image': 'https://placeimg.com/64/64/2',
'name': '나동빈',
'birthday': '960508',
'gender': '남자',
'job': '프로그래머'
},
{
'id': 3,
'image': 'https://placeimg.com/64/64/3',
'name': '이순신',
'birthday': '961127',
'gender': '남자',
'job': '디자이너'
}
]

class App extends Component {
render() {
return (
<div>
<Table>
<TableHead>
<TableRow>
<TableCell>번호</TableCell>
<TableCell>이미지</TableCell>
<TableCell>이름</TableCell>
<TableCell>생년월일</TableCell>
<TableCell>성별</TableCell>
<TableCell>직업</TableCell>
</TableRow>
</TableHead>
<TableBody>
{customers.map(c => {
return <Customer key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />
})}
</TableBody>
</Table>
</div>
);
}
}

export default App;


  적용 결과는 다음과 같습니다.



※ CSS 적용하기 ※


  이후에 withStyles 라이브러리를 이용해서 CSS를 적용할 수 있습니다.


import React, { Component } from 'react';
import Customer from './components/Customer'
import './App.css';
import Paper from '@material-ui/core/Paper';
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';

const styles = theme => ({
root: {
width: "100%",
marginTop: theme.spacing.unit * 3,
overflowX: "auto"
},
table: {
minWidth: 1080
}
});

const customers = [
{
'id': 1,
'image': 'https://placeimg.com/48/48/1',
'name': '홍길동',
'birthday': '961222',
'gender': '남자',
'job': '대학생'
},
{
'id': 2,
'image': 'https://placeimg.com/48/48/2',
'name': '나동빈',
'birthday': '960508',
'gender': '남자',
'job': '프로그래머'
},
{
'id': 3,
'image': 'https://placeimg.com/48/48/3',
'name': '이순신',
'birthday': '961127',
'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>
<TableCell>직업</TableCell>
</TableRow>
</TableHead>
<TableBody>
{customers.map(c => {
return <Customer key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />
})}
</TableBody>
</Table>
</Paper>
);
}
}

export default withStyles(styles)(App);



  결과적으로 작업한 내역을 커밋(Commit) 및 푸시(Push) 해주시면 됩니다.



728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

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

8강 Express에서 REST API 구축하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2019.01.01
7강 Node.js Express 서버 구축하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2019.01.01
5강 고객 컴포넌트 내용 분리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
4강 고객 컴포넌트(Component) 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
3강 깃(Git)을 이용해 소스코드 관리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31

5강 고객 컴포넌트 내용 분리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]

React와 Node.js로 만드는 고객 관리 시스템 개발 강좌2018. 12. 31. 09:07
728x90
반응형

  지난 시간에는 한 명의 고객(Customer)에 대한 정보를 담아 출력하는 Customer.js 컴포넌트를 만들어 보았습니다. 다만 한 명의 고객이 담고 있는 정보가 많아 다루기 어려울 때는 어떻게 할 수 있을까요? 바로 컴포넌트의 내용을 분리하는 것입니다. 컴포넌트의 내용을 잘게 분해하면 관리하기가 쉬워지며 생산성이 높아집니다. 따라서 이번 시간에는 고객 컴포넌트의 내용을 분리해 볼 거예요.


▶ App.js


  이제 우리는 한 명의 회원에 대한 정보를 확장해보도록 할 거예요.


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': '961222',
'gender': '남자',
'job': '대학생'
}

class App extends Component {
render() {
return (
<Customer
id={customer.id}
image={customer.image}
name={customer.name}
birthday={customer.birthday}
gender={customer.gender}
job={customer.job}
/>
);
}
}

export default App;


▶ Customer.js


  Customer.js는 실질적으로 한 명의 고객에 대한 정보를 출력하는 역할을 수행합니다. 그래서 출력할 내용이 많으면 이를 적절히 구조화하여 관리하는 것이 중요합니다. 따라서 저는 기존의 Customer를 CustomerProfile(고객 프로필)과 CustomerInfo(고객 정보) 두 가지 요소로 구분하여 구조화하도록 해보겠습니다.


import React from 'react';

class Customer extends React.Component {
render() {
return (
<div>
<CustomerProfile id={this.props.id} image={this.props.image} name={this.props.name}/>
<CustomerInfo birthday={this.props.birthday} gender={this.props.gender} job={this.props.job}/>
</div>
)
}
}

class CustomerProfile extends React.Component {
render() {
return (
<div>
<img src={this.props.image} alt="profile"/>
<h2>{this.props.name}({this.props.id})</h2>
</div>
)
}
}

class CustomerInfo extends React.Component {
render() {
return (
<div>
<p>{this.props.birthday}</p>
<p>{this.props.gender}</p>
<p>{this.props.job}</p>
</div>
)
}
}

export default Customer;



  결과적으로 데이터가 계층적으로 구성되었습니다.


  ※ 출력할 데이터 개수 늘려보기 ※


  이제부터는 데이터의 개수를 늘려보도록 하겠습니다. 기본적으로 컴포넌트(Component)는 리액트 요소(React Element)를 반환하는 형태로 개발이 되어야 하는데, 리액트 요소는 JSX를 이용해 생성할 수 있습니다. JSX의 특징은 내부 데이터가 2개 이상이라면 반드시 <div>와 같은 태그로 감싸서 사용해야 한다는 점입니다.


import React, { Component } from 'react';
import Customer from './components/Customer'
import './App.css';

const customers = [
{
'id': 1,
'image': 'https://placeimg.com/64/64/1',
'name': '홍길동',
'birthday': '961222',
'gender': '남자',
'job': '대학생'
},
{
'id': 2,
'image': 'https://placeimg.com/64/64/2',
'name': '나동빈',
'birthday': '960508',
'gender': '남자',
'job': '프로그래머'
},
{
'id': 3,
'image': 'https://placeimg.com/64/64/3',
'name': '이순신',
'birthday': '961127',
'gender': '남자',
'job': '디자이너'
}
]

class App extends Component {
render() {
return (
<div>
<Customer
id={customers[0].id}
image={customers[0].image}
name={customers[0].name}
birthday={customers[0].birthday}
gender={customers[0].gender}
job={customers[0].job}
/>
<Customer
id={customers[1].id}
image={customers[1].image}
name={customers[1].name}
birthday={customers[1].birthday}
gender={customers[1].gender}
job={customers[1].job}
/>
<Customer
id={customers[2].id}
image={customers[2].image}
name={customers[2].name}
birthday={customers[2].birthday}
gender={customers[2].gender}
job={customers[2].job}
/>
</div>
);
}
}

export default App;



  다만 위와 같이 작성하게 되면 소스코드가 지나치게 길어질 수 있습니다. 흔히 프로그래밍에서는 반복문을 이용해서 반복되는 소스코드를 줄일 수 있습니다. 바로 다음과 같이 작성하면 됩니다.


class App extends Component {
render() {
return (
<div>
{customers.map(c => {
return <Customer key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />
})}
</div>
);
}
}

export default App;


  맵(Map) 문법은 파이썬(Python)에서의 문법과 정확히 동일합니다. 특정한 리스트(List)가 있을 때 해당 리스트의 각 원소에 특정한 문법을 적용한 결과 리스트를 반환합니다. 다시 말해서 customers 배열에 있는 모든 원소에 대한 Customer Element를 반환하는 것입니다. 쉽게 말해 그냥 반복문을 사용해 각 고객에 대한 정보를 출력하도록 명시한 것입니다.


  또한 추가적으로 알아두면 좋은 점은 맵(Map)을 이용해 다수의 정보를 출력할 때는 key라는 이름의 Props를 사용해야 한다는 점입니다. 이를 사용하지 않으면 자바스크립트 콘솔(Console)에 관련 오류가 출력됩니다.


  마지막으로 작업한 내용에 대해서 커밋(Commit)과 푸시를 진행해주시면 됩니다.




728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

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

7강 Node.js Express 서버 구축하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2019.01.01
6강 Material UI를 적용하여 테이블 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2018.12.31
4강 고객 컴포넌트(Component) 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
3강 깃(Git)을 이용해 소스코드 관리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
2강 Visual Studio Code를 이용한 소스코드 작성 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31

4강 고객 컴포넌트(Component) 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]

React와 Node.js로 만드는 고객 관리 시스템 개발 강좌2018. 12. 31. 08:33
728x90
반응형

  이번 시간에는 고객 컴포넌트(Customer Component)를 만들어 보는 시간을 가져보도록 하겠습니다. 말 그대로 한 명의 고객에 대한 정보를 보여주기(View) 위한 기능입니다. 기본적으로 React는 HTML 웹 문서를 효과적으로 보여주기 위한 라이브러입니다. 그래서 컴포넌트란 말 그대로 웹 문서에서 어떠한 내용을 보여주기 위한 기본적인 단위라고 이해하시면 됩니다.


※ Customer 컴포넌트 ※


  Customer 컴포넌트를 만들어 주도록 하겠습니다. 지금부터 만들 컴포넌트(Component)들은 하나의 공간에 모아 놓으려고 해요. 그래서 src 폴더에서 [New Folder]를 눌러 새로운 폴더를 만들어 주도록 하겠습니다. 이름은 components에요.


 


  이후에 다음과 같이 components 폴더에서 [New File]을 눌러서 Customer.js 컴포넌트를 생성해주도록 합시다.



  이후에 소스코드를 작성해주시면 됩니다.


  ▶ import: 특정한 라이브러리를 불러오기 할 때 사용

  ▶ export: 특정한 라이브러리를 내보내기 할 때 사용


  말 그대로 React Component 라이브러리를 사용하기 위해서 import 구문이 먼저 나와야 합니다. 그리고 나중에 다른 컴포넌트에서 지금 우리가 만든 컴포넌트를 사용하기 위해서는 export를 해주셔야 하는 거예요.



import React from 'react';

class Customer extends React.Component {
render() {
return (
<div>
<h2>홍길동</h2>
<p>961222</p>
<p>남자</p>
<p>대학생</p>
</div>
)
}
}

export default Customer;


※ App.js ※


  이제 App.js에서 방금 우리가 만든 Customer 컴포넌트를 사용하도록 해볼게요.


import React, { Component } from 'react';
import Customer from './components/Customer'
import './App.css';

class App extends Component {
render() {
return (
<Customer/>
);
}
}

export default App;


  이제 웹 브라우저를 확인해 보시면 다음과 같이 한 명의 고객에 대한 정보가 출력되는 것을 확인할 수 있어요.



※ Props를 이용해 구조화하기 ※


  이제 Props를 이용해서 App.js에서 데이터(Data)를 가진 상태에서 고객에 대한 정보를 출력하도록 구조화하도록 하겠습니다.


▶ App.js


import React, { Component } from 'react';
import Customer from './components/Customer'
import './App.css';

const customer = {
'name': '홍길동',
'birthday': '961222',
'gender': '남자',
'job': '대학생'
}

class App extends Component {
render() {
return (
<Customer
name={customer.name}
birthday={customer.birthday}
gender={customer.gender}
job={customer.job}
/>
);
}
}

export default App;


▶ Customer.js


import React from 'react';

class Customer extends React.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;


  실행 결과는 동일합니다. 기존에 객체 지향 프로그래밍을 해보신 분들이라면 현재의 소스코드가 그러한 객체 지향 프로그래밍의 구조를 정확히 잘 따르고 있다는 사실을 확인할 수 있을 거예요.

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

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

6강 Material UI를 적용하여 테이블 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2018.12.31
5강 고객 컴포넌트 내용 분리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
3강 깃(Git)을 이용해 소스코드 관리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
2강 Visual Studio Code를 이용한 소스코드 작성 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
1강 Create React App으로 리액트 프로젝트 시작하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2018.12.31

3강 깃(Git)을 이용해 소스코드 관리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]

React와 Node.js로 만드는 고객 관리 시스템 개발 강좌2018. 12. 31. 07:26
728x90
반응형

  지난 시간까지 해서 리액트(React) 프로젝트를 생성하고 비주얼 스튜디오 코드(VSC)를 이용해서 개발 환경을 구축하는 시간을 가졌습니다. 이번 시간에는 깃(Git)을 이용해서 소스코드를 관리하는 방법에 대해서 알아보도록 하겠습니다. 우리는 향후 프로젝트의 효과적인 관리를 위해서 Git 저장소(Repository)를 생성한 뒤에 해당 저장소에 소스코드를 올리게 될 것입니다.


  일단 깃에 소스코드를 올리기 전에 전체 소스코드의 윤곽을 잡고 나서 올리는 것이 좋습니다.


  따라서 간단히 소스코드를 수정하며 프로젝트의 윤곽을 이해하는 시간을 가져보도록 하겠습니다.


※ App.js ※


  App.js는 실질적인 웹 사이트 화면에 대한 내용 출력을 담당하는 부분입니다.



import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
render() {
return (
<div className="gray-background">
<img src={logo} alt="logo" />
<h2>Let's develop management system!</h2>
</div>
);
}
}

export default App;


※ App.css ※


  App.css 파일은 App.js와 연동되어 웹 사이트의 메인 부분에 해당하는 내용의 디자인(Design)을 담당합니다. 저는 간단히 기존의 내용을 지운 뒤에 .gray-background라는 이름의 클래스(Class)를 만들어 보았습니다. 클래스는 웹 문서 내 각 요소의 디자인을 구분하기 위한 문법입니다.



.gray-background {
background: darkgray;
}


※ index.html ※


  이후에 index.html을 수정합니다. 기존의 index.html 파일은 온갖 주석으로 가득 차 있었을 거예요. 그러한 주석을 모두 지워주시면 됩니다. 참고로 index.html 소스코드 내에는 <div id="root"></div>라는 부분이 있는데, 이 root 영역에 실제로 App.js의 내용이 출력됩니다.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>


※ README.md ※


  이어서 README.md 파일을 수정합니다. 이것은 깃 허브(Git Hub)에 올라가 출력될 내용입니다. 프로젝트의 소개, 설치 방법, 레퍼런스 등의 문구가 들어가는 공간이라고 이해하시면 돼요.



## Management System

본 프로젝트는 React 강의 목적으로 만들어진 고객 관리 시스템(Management System)입니다.


  모든 소스코드를 저장해주신 뒤에 웹 사이트를 새로고침(F5) 해보시면 정상적으로 적용된 것을 확인할 수 있습니다.



※ 깃으로 프로젝트 관리하기 ※


  이제 깃 허브에 저장소를 생성하여 우리 프로젝트를 관리해 봅시다.


  ▶ 깃 허브(Git Hub) 주소: https://github.com/


  깃 허브에 회원가입 및 로그인을 해주신 뒤에 [Create Repository]를 진행해주시면 됩니다. 말 그대로 소스코드가 올라갈 수 있는 하나의 저장 공간을 만들어 준다고 이해하시면 됩니다.



  위와 같이 프로젝트의 이름만 지어 주신 뒤에 생성 버튼을 눌러주시면 다음과 같이 저장소가 생성됩니다.



  이후에 저장소의 주소를 복사해서 가지고 있어주세요. 이제 VSC로 돌아와서 깃(Git) 탭으로 가보시면 우리가 수정한 소스코드의 내용이 모두 왼쪽 화면에 드러나는 것을 확인할 수 있습니다.



  먼저 우리가 수정한 소스코드의 내역을 우리 컴퓨터의 로컬 저장소에 반영하기 위해서는 커밋(Commit)을 해주시면 됩니다. 따라서 커밋을 하고자 하는 소스코드를 먼저 추가해주세요.



  그리고 커밋을 진행하시면 됩니다. 저는 커밋 메시지로 'Create React Project'라고 지어주었어요.



  이후에 우리가 만든 깃 허브(Git Hub)의 저장소로 푸시(Push)하기 위해서 터미널을 열어줍시다.



  이제 아까 복사했던 저장소의 주소를 원격지 주소로 설정한 뒤에 푸시(Push)를 진행해주시면, 소스코드가 깃 허브에 업로드 됩니다.


  ▶ 깃 허브 원격지 설정: git remote add origin https://github.com/ndb796/React-Management-System.git

  ▶ 깃 허브 원격지로 푸시: git push --set-upstream origin master



  푸시 이후에 깃 허브 저장소를 새로고침 해보시면 다음과 같이 소스코드가 모두 업로드 되어 있는 것을 확인할 수 있습니다.


728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

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

6강 Material UI를 적용하여 테이블 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2018.12.31
5강 고객 컴포넌트 내용 분리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
4강 고객 컴포넌트(Component) 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
2강 Visual Studio Code를 이용한 소스코드 작성 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
1강 Create React App으로 리액트 프로젝트 시작하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2018.12.31

2강 Visual Studio Code를 이용한 소스코드 작성 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]

React와 Node.js로 만드는 고객 관리 시스템 개발 강좌2018. 12. 31. 07:21
728x90
반응형

  리액트(React) 개발에 있어서 가장 효과적인 통합 개발 환경(IDE) 중 하나는 바로 비주얼 스튜디오 코드(Visual Studio Code)입니다. 일단 지난 시간에 만들었던 리액트 프로젝트를 실행(Start) 시켜주세요. 기본적으로 서버가 구동 중인 상태에서 소스코드를 수정하면 알아서, 수정된 내역에 맞게 다시 컴파일이 이루어지면서 실제 웹 서비스에 반영된다는 특징이 있습니다.



  이제 이 상태에서 비주얼 스튜디오 코드를 설치해서 프로젝트 소스코드를 비주얼 스튜디오로 열어 보도록 하겠습니다. 혹시 비주얼 스튜디오 코드가 설치되어 있지 않으신 분은 다음의 사이트에서 설치를 진행하시면 됩니다.


  ▶ 비주얼 스튜디오 코드(Visual Studio Code) 사이트: https://code.visualstudio.com/


  접속 이후에는 자신의 운영체제에 맞는 응용 프로그램으로 설치를 진행할 수 있습니다. 설치를 하실 때에는 기본 설정으로 설치를 진행해주셔도 별다른 어려움 없이 따라오실 수 있습니다.



  설치 이후에는 비주얼 스튜디오 코드를 실행해주세요. 이후에 [File] - [Open Folder] 자신의 리액트 프로젝트를 열어주세요.



  기본적으로 리액트(React)는 App.js라는 이름으로 메인 자바스크립트를 관리할 수 있습니다. 실제로 HTML 문서에서 <body> 태그에 해당하는 내용은 이 App.js가 채우게 됩니다. 따라서 한 번 이 App.js를 수정해 봅시다.



  저는 다음과 같이 내용을 대략 아무렇게나 바꾸어 보도록 하겠습니다.



  이후에 저장(Ctrl + S)을 해주시면 자동으로 소스코드가 컴파일 되어 다음과 같이 웹 사이트에서 수정 내역을 확인할 수 있습니다.



728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

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

6강 Material UI를 적용하여 테이블 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2018.12.31
5강 고객 컴포넌트 내용 분리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
4강 고객 컴포넌트(Component) 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
3강 깃(Git)을 이용해 소스코드 관리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
1강 Create React App으로 리액트 프로젝트 시작하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2018.12.31

1강 Create React App으로 리액트 프로젝트 시작하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]

React와 Node.js로 만드는 고객 관리 시스템 개발 강좌2018. 12. 31. 06:54
728x90
반응형

  React와 Node.js로 만드는 고객 관리 시스템 개발 강좌의 첫 번째 시간입니다. 이번 시간에는 Create React App을 이용해 리액트 프로젝트를 시작하는 방법에 대해서 소개하고자 합니다. CRA(Create React App)을 이용하면 별다른 환경 설정을 수행하지 않아도 매우 빠르고 간단하게 리액트 프로젝트를 생성할 수 있습니다. 이번 시간에는 빠르게 Create React App을 이용해 프로젝트를 구축해보도록 하겠습니다.


  기본적으로 리액트(React) 개발환경을 위해서는 node.js가 설치되어 있어야 합니다.


  ▶node.js 사이트: https://nodejs.org/


  저는 최신 버전의 노드인 11.6.0 버전을 설치했습니다.



  기본적인 설정으로 설치를 진행하시면 됩니다.



  설치 이후에는 node -v 명령어로 설치된 노드의 버전을 확인할 수 있습니다.



  node.js를 설치하면 패키지 매니저 도구 NPM이 자동으로 설치됩니다. 이를 이용해서 create-react-app를 설치하시면 됩니다.



  이제 특정한 폴더로 이동해서 React 프로젝트를 생성해주겠습니다. 명령어는 create-react-app {프로젝트 이름}입니다.


  리액트 앱을 만든 이후에는 해당 프로젝트 폴더로 이동하여 yarn start 명령어로 실행할 수 있습니다.



  실행 이후에는 다음과 같이 개발 서버가 구동 중인 것을 확인할 수 있습니다.



  기본 포트 번호는 3000번이므로 브라우저에서 localhost:3000으로 접속하시면 다음과 같이 리액트 앱의 내용이 출력됩니다.


728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

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

6강 Material UI를 적용하여 테이블 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2018.12.31
5강 고객 컴포넌트 내용 분리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
4강 고객 컴포넌트(Component) 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
3강 깃(Git)을 이용해 소스코드 관리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
2강 Visual Studio Code를 이용한 소스코드 작성 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31

노션(Notion)을 활용한 팀 프로젝트 관리

기타2018. 12. 31. 04:15
728x90
반응형

  노션(Notion)을 활용한 팀 프로젝트 관리 방법에 대해서 알아보도록 하겠습니다. 노션(Notion)은 최근에 슬랙(Slack)과 함께 프로젝트 일정 관리를 위한 목적으로 많이 활용되고 있습니다. 결과적으로 팀 내에서 메신저 기능으로는 슬랙을 사용하고, 프로젝트 일정 관리 및 업무 분장에 있어서는 노션을 사용하면 효과적입니다.


  ▶ 노션(Notion) 공식 사이트: https://www.notion.so/



  노션 사이트에 접속해서 [Desktop] 탭으로 이동하시면 다음과 같이 응용 프로그램으로 다운로드를 받을 수 있습니다. 노션은 브라우저만 이용해서도 사용할 수 있지만 데스크탑 응용 프로그램으로 설치해서 사용하는 것이 보다 간편하고 효율적입니다.



  데스크탑 프로그램으로 설치가 완료되면 다음과 같이 로그인을 수행해주시면 됩니다.



  로그인 이후에는 특정한 워크스페이스(Workspace)에서 다음과 같이 팀 내에서의 일정 및 업무들을 관리할 수 있습니다.









728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'기타' 카테고리의 다른 글

AWS VPC 안에 포함되어 있는 서비스들을 통째로 제거하는 방법  (2) 2019.01.03
AWS VPC를 이용해 EC2와 RDS를 안전하게 관리하기  (1) 2019.01.02
Freenom 서비스로 무료 도메인 호스팅 이용하기!  (2) 2018.12.31
Xshell 6 개인 무료 라이센스로 설치하여 사용하는 방법  (0) 2018.12.31
슬랙 챗봇 만들기 [협업 메신저 끝판왕 슬랙(Slack) 7강]  (2) 2018.12.23

Freenom 서비스로 무료 도메인 호스팅 이용하기!

기타2018. 12. 31. 04:14
728x90
반응형

  프로그래밍 개발을 공부하는 여러분들은 다양한 환경에서의 테스트를 위해 무료 도메인(Domain) 주소가 필요할 때가 있습니다. 말 그대로 도메인 주소만 필요할 때 프리넘(Freenom) 서비스를 이용하면 무료 도메인을 사용할 수 있습니다. 저 또한 가상 호스트(Virtual Host) 등의 다양한 기능의 테스트 목적으로 실제 도메인 배포 이전에 Freenom 서비스를 이용해 도메인 설정 테스트를 수행합니다.


  일단 공짜라서 좋아요.


  ▶ 프리넘(Freenom) 서비스 공식 주소: https://my.freenom.com/clientarea.php


  이 주소에 들어가서 바로 로그인을 수행하시면 됩니다. 저는 구글 계정으로 로그인을 수행했습니다.



  이제 메인 주소에서 바로 특정 도메인 주소를 입력하여 사용이 가능한지의 여부를 확인할 수 있습니다.



  저는 다음과 같이 사용하고자 하는 도메인 주소를 넣어서 확인을 해보았습니다. 



  그러면 무료로 사용할 수 있는 도메인 주소를 위와 같이 확인할 수 있습니다. 저는 .tk 도메인을 선택했습니다. 이를 선택한 이후에 결제(Checkout) 버튼을 눌러서 구매를 진행하시면 됩니다.



  그러면 위와 같이 기본적으로 3개월 사용 설정이 되는 것을 확인할 수 있습니다.



  이제 이메일 인증 이후에 해당 도메인을 사용할 수 있습니다.



  그리고 본인의 개인 정보를 입력한 이후에는 실제로 도메인을 구매할 수 있습니다.



  이후에 로그인이 된 상태에서 [Services] - [My Domains]로 가시면 구매한 도메인 목록을 확인할 수 있습니다.



  이후에 다음과 같이 방금 구매한 도메인에 대해서 [Manage Domain] 버튼을 눌러서 환경 설정을 진행할 수 있습니다.



  이후에 [Manage Freenom DNS] 탭에 들어가세요.



  그러면 다음과 같이 자신이 소유하고 있는 서버의 아이피 주소를 넣으면 우리가 구매한 도메인 주소가 특정 아이피 주소로 연결됩니다. 이러한 방법으로 매우 간단히 무료 도메인을 구매하여 사용할 수 있습니다.



  또한 가상 호스트(Virtual Host) 기능도 설정하여 사용할 수 있습니다. 예를 들어 www.도메인 주소.tk, admin.도메인 주소.tk, api.도메인 주소.tk와 같은 형태로 사용한다면 위와 같이 설정하시면 됩니다. 내용을 비워두면 우리가 구매한 기본 도메인 주소로 사용이 됩니다. 이상으로 Freenom을 이용해 무료 도메인 호스팅을 사용하는 방법에 대해서 알아보았습니다.

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'기타' 카테고리의 다른 글

AWS VPC를 이용해 EC2와 RDS를 안전하게 관리하기  (1) 2019.01.02
노션(Notion)을 활용한 팀 프로젝트 관리  (0) 2018.12.31
Xshell 6 개인 무료 라이센스로 설치하여 사용하는 방법  (0) 2018.12.31
슬랙 챗봇 만들기 [협업 메신저 끝판왕 슬랙(Slack) 7강]  (2) 2018.12.23
슬래커(Slacker)로 슬랙 봇 이용하기 [협업 메신저 끝판왕 슬랙(Slack) 6강]  (1) 2018.12.23

Xshell 6 개인 무료 라이센스로 설치하여 사용하는 방법

기타2018. 12. 31. 04:00
728x90
반응형

  Xshell 6은 정말 유명한 SSH, Telnet 접속 유틸리티입니다. 일반적으로 간단히 리눅스 서버 실습을 할 때는 퓨티(Putty) 등을 이용합니다. Xshell 6은 조금 더 무거운 접속 도구이지만 기능이 다양하고 사용하기에 편리하다는 점에서 많이 사용되고 있습니다. Xshell 6은 국내 유틸리티입니다. 따라서 설치를 위해서는 넷사랑(Netsarang) 공식 사이트에 접속하시면 됩니다.


  Xshell 6은 학생 개인의 경우 무료로 사용할 수 있습니다. 다음과 같이 무료 라이센스 페이지에 들어가시면 됩니다.


  ▶ 넷사랑 Xshell 6 무료 라이센스 다운로드: https://www.netsarang.co.kr/download/free_license.html



  Xshell 6 다운로드 버튼을 누르시면 다음과 같이 이메일 주소 등을 입력하고 개인 사용자로 등록할 수 있습니다.



  이후에 다음과 같이 이메일 인증을 수행하시면 됩니다.



  이후에 설치 프로그램 다운로드 및 설치를 진행하시면 됩니다.








  설치 완료 이후에 프로그램을 실행하면 됩니다.



  특정한 서버에 접속하고자 한다면 '세션(Session)'을 열어서 서버를 등록하면 됩니다.




  특정 세션에 대한 접속 설정을 할 때 공개키 인증 등 다양한 인증 방법 형태로 설정할 수 있습니다. 이후에는 다음과 같이 [세션 관리] 탭에서 특정 세션을 클릭하여 접속을 시도할 수 있습니다.



  인증 이후에는 성공적으로 로그인을 수행하여 해당 서버를 관리할 수 있습니다.


728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'기타' 카테고리의 다른 글

노션(Notion)을 활용한 팀 프로젝트 관리  (0) 2018.12.31
Freenom 서비스로 무료 도메인 호스팅 이용하기!  (2) 2018.12.31
슬랙 챗봇 만들기 [협업 메신저 끝판왕 슬랙(Slack) 7강]  (2) 2018.12.23
슬래커(Slacker)로 슬랙 봇 이용하기 [협업 메신저 끝판왕 슬랙(Slack) 6강]  (1) 2018.12.23
슬랙 앱 추가하여 사용해보기 [협업 메신저 끝판왕 슬랙(Slack) 5강]  (0) 2018.12.23

1. React 앱 구축하기 [리액트(React)로 SNS 웹 사이트 만들기]

리액트(React) SNS 프로젝트2018. 12. 29. 21:15
728x90
반응형

  리액트(React)는 라이브러리로서 별도의 사용 방법이 정해져 있습니다. 최신 가장 많이 사용되고 있는 자바스크립트 버전은 ES6입니다. ES6부터는 최신 프로그래밍 트렌드를 따르는 다양한 문법들이 추가되었습니다.


  흔히 리액트를 이용해 개발하는 사람들은 그러한 새로운 문법을 사용하기 때문에 웹 브라우저(Web Browser)가 ES6을 지원하지 않는다면 우리가 작성한 웹 사이트가 어떠한 사람에게는 동작하지 않고, 어떠한 사람에게만 동작하는 문제가 생길 수 있습니다. 그래서 바벨(Babel)을 이용하면 우리가 작성한 소스코드를 다양한 웹 브라우저 환경에 구애받지 않고 실행되도록 만들 수 있어요.


  또한 최근에는 상당히 복잡한 의존성 트리를 갖추어 다양한 기능을 제공하는 웹 서비스가 많습니다. 말 그대로 자바스크립트(JavaScript)의 복잡성이 생긴 상태입니다. 이러한 복잡성 문제를 해결하기 위해 등장한 개념이 웹팩(Webpack)입니다.


  웹팩(Webpack)은 모듈 번들러(Module Bundler)입니다. 그래서 프로젝트의 구조를 분석해 자바스크립트 모듈들을 번들로 묶어서 패킹할 수 있습니다. 실질적으로 웹팩은 특정한 메인 코드에서 출발하여 모든 import 구문 등을 분석하여 의존성을 파악해 로더를 이용해 처리하고 번들로 묶인 자바스크립트 코드 생성합니다.


  이러한 웹팩은 Node.js를 이용해서 구동시킬 수 있습니다. 이 때 NPM(Node Package Manager)를 이용해 설치하면 됩니다.


  결과적으로 리액트 프로젝트를 만들고자 한다면 웹팩, 바벨 등을 이용해서 직접 프로젝트를 구성해야 합니다. 하지만 이러한 과정은 초보자 분들에게 많은 지식을 요구한다는 점에서 학습에 방해요소로서 작용합니다. 그래서 우리는 CRA(Create React App)이라는 오픈소스를 사용해서 바로 React 프로젝트를 구축하여 실습을 진행해 볼 예정입니다.


※ Node.js와 NPM 설치 ※


  과거에는 Node.js를 설치한 이후에 NPM을 추가적으로 설치해야 했습니다. 하지만 현재는 Node.js를 설치하면 자동으로 NPM도 함께 설치가 됩니다. 그래서 Node.js가 설치되어 있지 않으신 분들은 바로 Node.js를 설치하시면 됩니다.


  ▶ Node.js 설치하기: https://nodejs.org/ko/


  저는 최신 버전인 11.6.0 버전으로 설치를 해보겠습니다.



  설치는 단순히 다음(Next) 버튼만 눌러도 성공적으로 진행됩니다.



  설치 완료에는 버전(Version)을 확인하는 명령어로 정상 설치되었는지 확인하시면 됩니다.



※ CRA(Create React App) 설치하기 ※


  NPM 명령어를 이용해서 CRA를 설치할 수 있습니다.


  npm install -g create-react-app



※ React 프로젝트 생성하기 ※


  저희는 강좌에서 간단한 형태의 SNS 서비스를 만들어 볼 예정입니다. 따라서 특정한 폴더로 이동하여 create-react-app 명령어를 이용하여 SNS라는 폴더를 만들어 보도록 하겠습니다.



  보시면 create-react-app는 yarn이라는 패키지 매니저를 이용해 설치됩니다. 그래서 결과적으로 yarn start 명령어를 이용해 프로젝트를 구동시킬 수 있습니다. 만약에 yarn이 없다는 오류 메시지가 출력되는 경우 다음의 명령어로 yarn을 설치할 수 있습니다.


  npm install --global yarn


  결과적으로 다음과 같이 yarn start 명령어로 앱이 구동되어야 합니다.



  실행 결과 기본 포트인 3000번 포트로 웹 사이트가 구동되는 것을 확인할 수 있습니다.



  실제로 브라우저를 통해 접속하면 다음과 같이 접속이 완료됩니다.



  이제 비주얼 스튜디오 코드(Visual Studio Code)와 같은 에디터(Editor)을 이용해서 해당 프로젝트 폴더를 여시면 됩니다. 그러면 다음과 같이 웹 사이트를 위한 온갖 리소스들이 기본적으로 미리 구축되어 있는 것을 확인할 수 있습니다.



  기본적으로 Create React App으로 생성된 프로젝트는 앱을 수정한 이후에 저장만 해도 알아서 웹 사이트에 적용된다는 특징이 있습니다.



  위와 같이 App.js 파일을 수정하여 Hello React!라는 메시지를 출력할 수 있도록 해봅시다. 그러면 브라우저를 수동으로 새로고침 하지 않아도 자동으로 브라우저가 새로고침 되면서 내용이 변경됩니다.



728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

티스토리툴바