일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
목록탈잉 강의 자료/2020_비전공자도 가능한 웹 프로젝트 (17)
SIMPLE & UNIQUE
3_1 목표 : 기존에 등록한 데이터를 수정 페이지 form에 노출한다. 입력 데이터를 변경하고, up date쿼리를 실행해 db를 수정한다. 1. sweetalert2 패키지를 설치해 alert 디자인을 수정한다. react 경로 C:\react200\client 에서 아래 명령어로 패키지를 설치한다. npm install --save sweetalert2 참고 : https://sweetalert2.github.io/#native_link# SweetAlert2 A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io Software..
2_5 목표 : 기존에 등록한 데이터를 수정 페이지 form에 노출한다. 입력 데이터를 변경하고, update쿼리를 실행해 db를 수정한다. 1. 등록페이지로 사용하던 react 파일에 수정 기능을 추가한다. 등록페이지와 수정페이지는 같은 컴포넌트를 사용한다. SoftwareView.js 파일에 아래 소스를 붙여넣는다. state에 수정에 필요한 변수들을 선언했고, node api를 호출해 기존에 저장한 데이터를 호출해 화면에 노출시키는 스크립트 코드가 추가됐다. import React, { Component } from 'react'; import {Link} from 'react-router-dom'; import axios from "axios"; import $ from 'jquery'; clas..
2_4 목표 : 파일과 이미지를 node서버 경로에 업로드하고, 업로드 경로를 db에 삽입한다. 이전 강에서 text 데이터 삽입을 구현했다. 2회차 4강에서는 이미지와 파일을 node 경로에 업로드하는 api를 구현한다. 업로드가 완료되면 업로드 경로를 DB table에 삽입한다. 1. 등록페이지 react 파일을 수정한다. SoftwareView.js 파일에 아래 소스를 붙여넣는다. state에 업로드 관련 변수가 추가되었고, 메뉴얼 파일과 메인/라벨 이미지를 선택하는 순간 node 서버의 파일 upload api를 호출하는 코드가 추가됐다. import React, { Component } from 'react'; import {Link} from 'react-router-dom'; import a..
2_3 목표 : 등록 페이지에 입력한 텍스트를, insert쿼리를 실행해 db에 삽입한다. cmd 또는 터미널을 열고 react 경로 C:\react200\client에서 아래 명령어로 jquery를 설치해 준다. 등록페이지에서 폼에 입력한 값들을 가공하거나 파라미터로 넘길때 jquery를 사용할 것이다. //react 경로로 이동 CD C:\react200\client npm install --save jquery 1. SoftwareView에 아래 소스를 붙여넣는다. 기존에 소스에서 submitClick(저장버튼)을 눌렀을 때, 데이터를 insert 하는 node Api를 호출하는 부분이 추가됐다. import React, { Component } from 'react'; import {Link} f..
2_2 목표 : RDS서버의 설정을 한국에 맞게 변경한다. DB서버의 시간을 한국 시간으로 변경한다. 한글 데이터가 깨지지 않도록 인코딩 설정을 한다. 더미 데이터를 삽입하고, 함수 생성 권한을 추가한다. 1. DB 시간을 한국 시간으로 변경한다. RDS 서버 세팅 후, 파라미터 그룹 설정을 변경하지 않았다면 아래와 같이 time-zone이 한국이 아닌 UTC로 되어있을 것이다. ## 참고 ## time-zone을 바꾸는 이유는 다양하지만, 이 사이트에서는 게시글을 insert/update 할 때 DB시간으로 등록/수정 시간을 삽입한다. 이때 한국시간으로 등록/수정하기 위해서 time-zone을 변경하는 것이다. select now(); SHOW GLOBAL VARIABLES LIKE '%zone%'; ..
2_1 목표 : AWS가입(결제카드입력) 후, RDS t2.micro(1년 프리티어) 인스턴스를 세팅한다. workbench에서 필요한 테이블 생성과 더미데이터 삽입을 한다. 2회차 1강에는 각자 AWS 계정을 만들고, RDS mysql 서버를 프리티어(1년무료) 버전으로 인스턴스를 생성한다. 그리고 테이블을 생성한다. 이전 강에서 설정한 DB접속 정보를 새로 가입한 서버 정보로 바꿔준다. 정상적으로 DB연결이 되는지 확인한다. 1. AWS 계정 생성은 aws 공식 홈페이지 가이드를 참고한다. 아래 링크를 참고해 가입하고, 결제수단을 등록한다. https://aws.amazon.com/ko/premiumsupport/knowledge-center/create-and-activate-aws-account/..