SIMPLE & UNIQUE

2_1 목표 : AWS가입(결제카드 입력) 후, RDS t2.micro(1년 프리티어) 인스턴스를 세팅한다. workbench에서 필요한 테이블을 생성하고, 더미데이터를 삽입한다. 1. AWS사이트(aws.amazon.com/ko/)에 접속해, 회원가입을 한다. 참고 : aws 정식 가입 가이드 링크 https://aws.amazon.com/ko/premiumsupport/knowledge-center/create-and-activate-aws-account/ AWS 계정 생성 및 활성화 결제 정보 페이지에서 결제 방법에 대한 정보를 입력한 다음, 확인 및 추가(Verify and Add)를 선택합니다. 참고: AWS 결제 정보에 다른 청구지 주소를 사용하려면 [확인 및 추가]를 선택하기 전에 [새 aw..

1_4 목표 : node서버에 이미 테이블과 데이터가 세팅되어 있는 튜터의 AWS DB서버(RDS)를 연결한다. SELECT문을 사용해 데이터를 조회하고, 조회 결과를 리스트 페이지에 출력한다. 1. 소프트웨어 툴 데이터를 노출할, SoftwareList 컴포넌트를 추가한다. C:\react200\client\src\components\SoftwareListManage\SoftwareList.js 앞 강에서 공공데이터 api를 호출해, 데이터를 화면에 노출했던 방법과 동일하다. 차이점은 앞 강에서는 외부 사이트에서 데이터를 가져왔고, 이번 강에서는 우리가 만든 node api를 호출해 데이터를 가져온다는 것이다. axios로 node 서버의 api경로를 호출한다. 그런데 localhost:5000/api..

1_3 목표 : 공통영역(header, footer)을 별도로 구현하고, header와 footer 사이에 라우팅된 페이지를 노출시킨다. 공공데이터 포털에 가입해서 API KEY를 발급 받는다. 발급 받은 KEY를 사용해 코로나19 예방접종센터 조회 API를 호출한다. 1. css, img파일 경로를 확인한다. C:\react200\client\src에 css와 img폴더를 아래와 같이 위치 시킨다. css와 img파일을 컴포넌트에서 상대경로로 import할 것이다. Footer폴더, Header폴더, App.js가 같은 경로(components폴더)에 위치해 있는 것을 확인한다. css폴더, img폴더가 components폴더와 같은 경로(src폴더)에 있는 것을 확인한다. 2. App.js 파일에 c..

1_2 목표 : create-react-app으로 react 서버를, express로 node 서버를 각각 구동한다. proxy를 설정한다. react페이지에서 get/post 방식으로 api를 호출해, node 서버의 json 데이터를 가져온다. 1. node.js 설치 nodejs 공식 사이트에서 최신버전이 아닌 이전 버전(14.4.0)을 설치한다. (검증된 버전) 아래 링크에서 윈도우(64비트)는 node-v14.4.0-x64.msi 파일을 Mac은 node-v14.4.0.pkg 파일을 다운로드 한다. https://nodejs.org/download/release/v14.4.0/ 설치확인 : 윈도우는 cmd > node -v로 버전 확인 ( win + r > cmd 실행) Mac은 터미널에서 no..