본 내용은 React를 활용한 고객 관리 시스템(1) 의 내용과 이어서 설명한다. 우선 server.js는 어떤 역할을 하는지 살펴보자. 크게 세가지를 중심으로 살펴보면 된다. post 요청이 들어왔을때 어떻게 처리하는지, delete 요청이 들어왔을때 어떻게 처리하는지, DB는 어떻게 연결하는지. 부가적으로 cors라는 라이브러리를 설치하여 사용하였는데 cors는 Cross-Origin Resource Sharing의 약자로 웹을 개발하는 초보자의 입장으로서 한번씩 겪을 것이라고 생각된다. 이는 나중에 따로 다루도록 하고 현재는 위에서 언급한 세가지를 중심으로 server.js의 소스코드를 확인해보도록 하자. 원하는 DB에 연동하기 위해 DB에 정보가 담긴 database.json 파일을 하나 생성하여..
리액트와 node.js express, mysql을 이용하여 간단한 프로젝트를 만들었다. (유튜브- 동빈나의 고객 관리 시스템) 클라이언트로 React를 활용하고 서버는 Node.js express, 그리고 DB는 RDS의 mysql을 사용하여 간단한 고객 관리 시스템을 개발한다. 강의 내용을 이해하고 응용하고자 클래스형 컴포넌트들로 작성한 코드들을 함수형 컴포넌트로 수정하였고 Node.js express를 서버단에 다른 포트번호를 이용하여 API 서버를 구축하여 REST API 방식으로 CRUD작업을 진행하였다. 또한 DB는 RDS를 이용하지 않고 기존에 있던 mysql workbench를 이용하여 편리하게 제작해보았다. 폴더의 구조는 다음 그림과 같다. 프로젝트 customer management 폴..
처음으로 웹으로 무언가를 만들어보기 위해 리액트, node.js express를 공부하며 유튜브에서 어떤 강의를 듣던 중 클라이언트의 React 부분이 모두 클래스형 컴포넌트로 선언하며 설명하였다. 이것을 함수형 컴포넌트를 사용하여 만들어보면서 리액트를 학습하는 시간을 가져보았다. 클래스형 컴포넌트에서는 다음과 같이 작성된 형태였다. 이것을 함수형 컴포넌트로 만들어 리액트 훅 useState()와 useEffect를 사용하여 변경해보았다. 수정할 때마다 여러 에러 문구가 콘솔창에 출력됐다. 위 문구이외에도 uncaught typeerror: response.json is not a function, uncaught (in promise) syntaxerror: unexpected token < in js..
AWS EC2에서 Git을 설치하고 리액트 프로젝트를 생성하기 위해 node 최신버전을 받아보도록 하자. 먼저 Git을 설치하도록 한다. git을 설치하는 명령은 다음과 같다. sudo yum install git git 설치가 정상적으로 이루어졌는지 git --version으로 확인해보도록 하자 다음은 node를 설치해보겠다. node 설치 또한 어렵지 않다. sudo yum install curl curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash - sudo yum install -y nodejs node -v 순서대로 입력해주고 마지막에 설치가 잘 되었는지 버전을 확인하도록 하자. 여기까지 모두 정상적으로 설치가 되었..