React와 Node.js를 활용한 고객 관리 시스템 개발 강의

응용프로그램이 웹으로 올라가는 경우가 많아지고있다.웹 기반의 고객 관리 시스템을 개발하겠다.React로 웹 사이트를 어떻게 구성하고 출력하는지 알 수 있고Node.js를 활용해서 사용자의 정보를 DB로 관리할 수 있도록 하겠다.Material UI같은 디자인 프레임워크

React 개발에 VS Code를 쓰겠다.management 폴더 내부를 보면 src, README.md, package.json와 같은 React App을 위한 환경설정 파일 및 폴더가 존재한다.management 폴더 안에서 다음 명령어로 앱을 구동할 수 있다.다음

프로젝트의 관리를 위해 Git 저장소를 생성하고 소스코드를 올리겠다.소스코드 올리기 전에 코드의 윤곽을 잡고 올리겠다.실질적으로 웹사이트의 화면에 대한 내용 출력을 담당한다.App.js의 App()을 다음과 같이 수정한다.위의 className은 CSS(디자인) 클래스

고객 컴포넌트를 만들어보겠다.한명의 고객에 대한 정보를 보여주는 기능이다.React 라이브러리는 HTML 문서를 효과적으로 보여주기 위한 라이브러리다.따라서 컴포넌트 개념이 사용된다. 컴포넌트는 웹 문서에서 어떤 내용을 보여주기 위한 기본적인 단위다.App.js의 Ap

지난 게시물에는 한명의 고객에 대한 출력을 다루어 보았다. 한명의 고객이 포함한 정보가 많으면 어떻게 해야할까?

MUI 버전이 업그레이드 되면서 withStyles를 사용할 수 없게되었다.sx로 스타일 입히는 방식으로 하니 정상동작한다.theme은 createTheme으로 하나 생성해서 사용한다.

포트를 이미 다른 프로세스가 사용중인 오류가 발생했다.5000번 포트를 사용중이었는데, 제어센터가 점유중이어서 그냥 피해서 5001번 포트를 사용하기로 했다.5001번 포트로 잘 듣고있다는 출력이 나왔다.접속도 잘 된다.

서버와 클라이언트를 구동하기 위한 스크립트를 작성해야한다.yarn dev를 했을 때 경로에 한글이 있으면 yarn을 찾지 못해서 문제가 발생할 수 있다.그러면 새 계정을 영어로 파주는데, 우리가 이전에 global하게 설치한 모듈들은 사용자에게 종속적이어서 새로 만든

constructor()componentwillCount()render()componentDidMount()props 혹은 state의 갱신 시에는 shouldComponentUpdate() 실행하여 render()를 불러오고 뷰를 갱신한다.React는 상태의 변화를

AWS는 기본적으로 후불 결제기 때문에 의도치 않은 결제를 막기 위해 AWS Cost Explorer를 자주 확인해야한다.RDS를 검색 후 DB 생성 버튼 클릭프리티어 선택하고 MySQL 선택DB 버전 선택가장 저렴한 인스턴스구성 선택스토리지 할당 기본 크기로 설정DB

DEFAULT 이후의 설정은 한글을 위한 설정이다.이미 테이블이 만들어졌다면 다음 명령어로 변경할수도 있다.server.js 안에 DB 정보를 하드코딩하면 안된다./database.json을 이그노어로 설정하고 파일을 생성한다.안에 다음 양식의 json을 입력한다.서버

components에 CustomerAdd.js를 추가한다.서버와의 통신 목적 라이브러리인 axios를 설치한다.나는 npm 설치에 오류가 발생해서 yarn으로 설치했다.form고객 추가 버튼을 누르면 onSubmit에 설정된 this.handleFormSubmit함수

react는 기본적으로 추가하기를 눌러도 전체가 새로고침되지 않는다.특정 변화된 내용만 수정된다.따라서, 고객 추가를 완료하면 고객 데이터를 다시 서버로부터 받아와서 화면에 출력해야한다.실제 배포 버전에서는 전체 페이지의 모든 데이터를 새로고침하는 코딩을 하면 안되지만

지난 게시물에서 새로운 항목 추가 시 전체 페이지를 갱신했다. 이는 single page application인 react에 효율적이지 않은 방식이다.따라서, 부모 컴포넌트의 상태를 갱신하여 필요한 부분만 갱신하도록 설정해야한다.부모에서 자식으로 함수를 props로 건

삭제를 구현하는 방법은 다양한데 2가지를 예로 들어보겠다.1\. 삭제 시 테이블에서 완전히 삭제한다.2\. 삭제 시 테이블에서 완전히 제거하지 않고, 삭제되었다고 체크만 한다. (이렇게 구현해보겠다.)어떤 녀석을 삭제할지 결정할 id를 넘겨주고 stateRefresh(

필요한 라이브러리와 객체를 설정한다.open state를 추가해서 dialog가 열려있는지 확인한다.열고 닫기에 따른 open 상태값을 변경한다.함수 선언 시 funcname = () => {} 이런식으로 구현하여 자동으로 바인딩 처리가 되게 한다.추가하면 닫히게 하기

필요한 경로에 설치해야한다. 여기서는 client코드 템플릿에 있는 css 부분 모두 복붙한다.AppBar에 해당하는 부분도 출력 코드 상단에 추가한다.mui 컴포넌트라 아닌 놈들은 sx가 안먹으니 style로 먹인다.상단에 추가한다."Noto Sans KR을 최고 우

handleValueChange 함수 상태 변경한다. InputBase name: 검색 문구를 여기서 정한 이름으로 다루겠다. value: 저장된 상태값 필터링