일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 스컬킹점수계산
- mysql
- 구로파티룸
- 스페이스우일
- 옥길요거트
- 옥길파티룸
- 파티룸
- 광명파티룸
- 스컬킹
- 옥길동파티룸
- 스컬킹점수
- 휴식
- 개발자
- MBTI
- 취미
- 그릭요거트
- 웹개발
- 가장존경하는인물
- 존경하는위인
- 일
- 착한코딩
- 부천파티룸
- 코딩
- 해외여행
- 보드게임점수
- 서울파티룸
- 부천공간대여
- 옥길동요거트
- 옥길그릭요거트
- 보드게임점수계산
- Today
- Total
목록탈잉 강의 자료/react.js(프론트) + node.js(백앤드) 개발에서 배포까지 (15)
SIMPLE & UNIQUE
4_1 목표 : t2.micro 프리티어로 인스턴스를 생성하고, mobaXterm을 설치해 SFTP, SSH로 서버경로에 접속한다. 1. ec2 t2.micro 인스턴스를 생성한다. 2회차에서 AWS 가입을 하고 RDS 인스턴스를 생성했다. ec2 서버도 마찬가지로 1년동안 무료로 사용할 수 있는 t2.micro(프리티어) 서버를 생성할 것이다. 2회차때 가입한 계정으로 로그인한 후, EC2 대시 보드로 접속한다. 인스턴스 시작 버튼을 누른다. 단계1) 에서 ubuntu 18.04 버전을 선택한다. 단계2) 에서 t2.micro 프리티어 버전을 선택 후, [다음:인스턴스 세부 정보 구성] 버튼을 클릭한다. 단계3) 은 초기값 그대로 수정하지 않고 [다음] 버튼을 누른다. 더보기 단계4) 도 초기값 그대로..
3_3 목표 : 사이트 레이아웃에 어울리는 alert 디자인을 적용하고, 리스트페이지에서 삭제 기능을 구현한다. git 서버에 업로드하지 말아야 하는 파일들을 이해한다. 1. sweetalert2 패키지를 설치해 alert 디자인을 수정한다. react 경로 C:\Users\ljung\OneDrive\문서\taling0102\client 에서 아래 명령어로 패키지를 설치한다. npm install --save sweetalert2 참고 : https://sweetalert2.github.io/#native_link# SweetAlert2 A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's p..
3_2 목표 : 이미 등록된 데이터를 수정페이지 form에 노출시키고, 수정기능을 등록페이지 로직과 동일하게 구현한다. 1. 등록페이지 react 파일에 수정 기능을 추가한다. AdminSoftwareView.js 파일에 아래 소스를 붙여넣는다. state에 수정에 필요한 변수들을 선언했고, node api를 호출해 기존에 저장한 데이터를 호출해 화면에 노출시키는 스크립트 코드가 추가됐다. import React, { Component } from 'react'; import {Link} from 'react-router-dom'; import axios from "axios"; import $ from 'jquery'; class SoftwareView extends Component { constru..
3_1 목표 : 정합성 높은 데이터를 DB에 Insert 한다. 이미지 및 파일 업로드를 구현하고 흐름을 이해한다. 2회차 2강에서 text 데이터 삽입을 구현했다. 3회차 1강에서는 이미지와 파일을 node 경로에 업로드하고, 파일명만 text로 DB table에 저장할 것이다. 1. 등록페이지 react 파일을 수정한다. AdminSoftwareView.js 파일에 아래 소스를 붙여넣는다. state에 업로드 관련 변수가 추가되었고, 메뉴얼 파일과 메인/라벨 이미지를 선택하는 순간 node 서버의 파일 upload api를 호출하는 코드가 추가됐다. import React, { Component } from 'react'; import {Link} from 'react-router-dom'; impo..
2_2 목표 : AWS가입(결제카드입력), RDS t2.micro(1년 프리티어) 인스턴스를 세팅하고, workbench에서 필요한 테이블 생성과 더미데이터 삽입을 한다. 등록페이지를 구현한다. 2회차 2강에는 각자 AWS 계정을 만들고 RDS mysql 서버를 프리티어(1년무료) 버전으로 인스턴스를 생성한다. 그리고 테이블을 생성해 2_1강에서 설저한 node 소스에 host url와 계정 정보를 바꿔준다. 정상적으로 DB연결이 되는지 확인한다. 1. AWS 계정 생성은 aws 공식 홈페이지 가이드를 참고한다. 아래 링크를 참고해 가입하고, 결제수단을 등록한다. https://aws.amazon.com/ko/premiumsupport/knowledge-center/create-and-activate-a..
2_1 목표 : 이미 테이블이 세팅되어 있는 mysql 서버에서 데이터를 select 하고, react 페이지에 리스트로 노출시킨다. 다음 2회차 2강에서 각자 AWS 계정을 만들고 RDS mysql 서버를 프리티어(1년무료) 버전으로 인스턴스를 생성한다. 그리고 테이블을 생성해 더미 데이터를 삽입할 것이다. 2회차 1강에서는 이미 세팅이 완료된 작성자의 DB 서버에 접속해 실습한다. App.js에서 1회차에서 SoftwareTool 관련 부분을 주석처리해 놨었는데, 아래와 같이 주석을 해제한다. import React, { Component } from 'react'; import { Router, Route, Switch } from "react-router"; import Api_test from ..