React와 Node.js로 고객 관리 시스템 만들기 1

반응형

환경설정

 

1. Node.js(백엔드 개발에 사용되는 소프트웨어 플랫폼) 다운로드

2. express(Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크) 다운로드

3. ejs(Node.js 진영에서 많이 사용하는 템플릿 엔진) 다운로드

4. visual studio code 다운로드

5. React.js(웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용) 다운로드

6. yarn(의존성관리 javascript 패키지 매니저) 다운로드 <- react 의존성 관리

 

 

 

 

1. 다운받은 ejs로 템플릿을 불러오기 위해 express --ejs 디렉토리명(프로젝트명)를 터미널에 입력해준다.

그러면 이렇게 알아서 템플릿을 불러온걸 알 수 있다.

 

2. 서버를 가동시키기 위해 cmd를 켜서 내가 원하는 파일로 지금 내 위치를 바꾼 다음 yarn start를 입력해줌 

 

 

첫번째 기능 만들기: 고객 컴포넌트(한명의 고객에 대한 정보를 보여주기 위한 기능)

Component란?

웹 문서에서 어떠한 내용을 보여주는 기본적인 단위

 

설명은 주석을 통해서 정리해놨으니 주석 보면서 이용하시면 됩니다.

 

Customer.js

 

 

App.js

결과 값:

 

 

 

-----------------------------------------------------------------------------------------------------------------------------------

 

 

위에 코드를 구조화

 

Customer.js

App.js

 

결과 값:

둘다 결과가 같음을 알 수 있다.