차근차근

0. From, Event Handling form태그를 이용하고 post방식을 사용한다. 결과화면은 다음과 같다. 위 작업을 마쳤을 때 추가하기를 눌러도 아무일이 일어나지 않는다. Node.js Express에서 파일 업로드 요청 처리와 DB에 데이터 삽입하는 코드를 추가로 작성하여야 한다.

0. AWS(RDS) 고객에 대한 정보를 저장하기 위해서는 MySQL같은 DB 시스템이 필요하다. AWS의 RDS 서비스를 이용하면 MySQL과 같은 관계형 데이터베이스를 쉽고 빠르게 구축할 수 있다. Workbench를 통해 접속 하여 DB를 볼 수 있다. 1. DB테이블 구축 및 Express와 연동 database 관련 내용은 github에 올리면 안된다. .gitignore 처리를 해서 올라가지 않도록 처리한다. 아래의 형식에 맞게 내용을 채워넣는다. nodejs 와 mysql 을 연결하기 위해서 다음 명령으로 mysql 을 설치해준다. 그 후 다음과 같이 코드를 작성한다. 이제 연결이 완료되었기 때문에 workbench에서 데이터를 하나 추가하면 client쪽에서는 추가된 데이터까지 보여준다.

0. Life Cycle 1) constructor() 2) componentWillMount() 3) render() 4) componentDidMount() 컴포넌트가 생성될 때 위와 같은 순서로 진행된다. 1. API Loading Material UI의 Progress 를 이용해보겠다. 그 중 Circular Determinate를 이용할 것이다. 데이터를 불러오는 동안 지연이 일어난다면 progress 모양이 다음과 같이 나올 것이다.

0. 서버 개발환경 구축하기 React부분을 Client폴더를 만들어 그곳으로 옮긴다. package.json 과 server.js를 작성한다. package.json server.js npm run dev 명령어를 통해서 실행시킨다. localhost:3000 으로 들어가면 다음과 같은 화면이 뜬다. localhost:5000/api/hello 으로 들어가면 다음과 같은 화면이 뜬다. 정상적으로 작동이 됨을 알 수 있다. 1. REST API 구축하기 위와 같이 서버 개발환경을 구축했으면 이제 REST API를 구축해보겠다. REST API는 최근 상당수 웹서버 프레임워크에서 기본적으로 지원하는 기능으로써 서버와 클라이언트가 웹 프로토콜을 기반으로 하여 데이터를 효과적으로 주고 받을 수 있게 해준다. ..

0. React 리액트(React)는 UI를 효과적으로 구축하기 위해 사용하는 자바스크립트(JavaScript) 기반의 라이브러리이다. 리액트는 대화형 UI를 작성하기에 유리하다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 한다. 캡슐화된 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성할 수 있다. 기존의 소스코드를 불필요하게 다시 작성하지 않고 새로운 기능을 개발할 수 있다. 클라이언트 렌더링(그때그때 데이터를 받아오는 방식) 뿐만 아니라 서버 사이드 렌더링(서버에서 미리 만들어서 클라이언트로 보내주는 방식)도 지원한다. 그래서 Ajax등과 같은 비동기 방식과 비교했을 때 검색 엔진 최적화(SEO) 등에 있어서 유리한 형태로 소스코드를 작성할 수 있다. 이러한 검색엔진 최적화 문제는..