지난 글에서 HTML5의 input type을 알아보았습니다. HTML5 input에는 속성을 지정해 줄 수 있습니다. 이글에서는 속성에 대해 알아봅시다. 1.input 속성 소개 input 속성 설명 autofocus autofocus가 지정된 부분의 커서가 깜박인다. form input에 form 속성을 적용하여 form외부에 있는 input 속성을 지정한다. datalist 미리 지정된 값을 리스트 형식으로 불러온다. min and max input 값의 최솟값과 최댓값을 지정한다. range나 number type에 시용된다. multiple input 부분에 여러 개의 파일을 불러 올 수 있게 한다. pattern 지정된 패턴 값만 입력 가능하게 한다. ex) 010-1234-1234 등 pla..

이 글에서는 HTML5에서 추가된 다양한 input type에 관한 글입니다. form 태그 안에서 input은 다양한 값들을 받는데 그때의 type을 보도록 하겠습니다. HTML5 이전에는 자바스크립트로 만들어야 했던 부분들이 input type이 추가되면서 자바스크립트를 사용하지 않아도 되었습니다. 다양한 input을 추가해준 개발자들에게 감사하며 input type에 대해 알아볼게요 브라우저마다 같은 input이라도 모양이나 지원하는 것이 다를 수 있습니다. 저는 크롬에서 테스트 했습니다. 1. input type 총 13개의 input type을 소개할 것입니다. 너무 많기에 나눠서 설명하겠습니다. input 설명 color 색상값을 입력할 때 사용한다 date 날짜를 입력할 때 사용한다. dat..

이번글은 HTML의 기본구조에 대하여 알아볼게요. 이 글은 백견불여일타 HTML5 & CSS3 책을 공부하고 제가 정리한 내용을 작성한 것입니다. 먼저 HTML5가 되면서 새로 추가된 태그를 알아볼게요 HTML5에서 많은 태그들이 추가 되었지만 구조를 잡는데 사용되는 태그들 위주로 알아볼게요' 1. HTML5에 새로 추가된 태그들 HTML 태그 속성 웹 페이지의 본몬을 정의할때 사용 arricle의 내용을 보충해 주는 역활을 하는 컨텐츠 삽입 (서브메뉴, 광고, 부가정보) 이미지나 사진 코드 등을 보여줄 때 사용 푸터를 정의할 때 헤더를 정의할 때 메인 메뉴 및 서브 메뉴를 성의할 때 섹션을 정의할 때 2. HTML5 문서 기본구조 HTML은 크게 세 부분으로 나눈다. header: 메인 메뉴를 담당하는..

이전 글에서 웹에서 입력한 데이터를 DB에 저장하였습니다. 이번 글에는 저장한 데이터를 불러오는 작업을 해보 할게요. 1. 준비 이전 글에서 한 코드를 그대로 이어서 사용하도록 하겠습니다. 2. 웹 페이지 수정하기 DB에서 데이터를 가져와 화면에 뿌려주는 버튼을 만듭니다. import React from "react"; export default class Example3 extends React.Component { constructor(props) { super(props); this.state = { data: "", }; } onclick = () => { fetch("http://localhost:3001/data", { method: "post", //통신방법 headers: { "conten..

이전 글에서는 React로 만들 웹에서 express서버로 데이터를 주고 받는 방법을 알아보았다. 이번 글은 React에서 express로 보낸 데이터를 query문을 사용하여 DB에 저장하는 방법에 대하여 알아보자!! 이번 글까지 따라 오게 된다면 간단한 회원가입과 로그인을 만들 수 있게 됩니다. 1. 준비 mysql React에서 express로 데이터를 주고 받는 방법 React에서 express로 데이터를 주고 반는 방법에 대해서 알고 있다는 전제로 진행됩니다. mysql이 설치되어 있어야 진행할 수 있어요!!!! 2. database만들기 및 express에 연결하기 1) 새로운 데이터베이스 만들기 mysql> create database hello; 데이터베이스를 만듭니다. 저는 hello라는..

이전 글에서 React에서 Express로 데이터 보내는 방법을 했다 Express에서 req를 사용해 보았다. 이번 글에서는 res를 사용하여 React로 보내는 방법을 알아볼거다 1. 준비 이전 내용을 했다면 따로 준비할 것은 없다. 2. server.js 수정 const express = require("express"); const app = express(); const port = 3001; // { res.send("Hello World!"); }); app.post("/text", (req, res) => { const text1 = req.body.inText; console.log(text1); //////추가 내용///// const sendText = { text: "보내기 성공",..

React와 Express를 연동하는 방법을 해보겠습니다. 1. 준비과정 create-react-app 앱이름 으로 앱을 만들고 npm start 하여 앱을 실행시켜줍니다. react로 앱을 처음 만들고 실행한 상태로 진행합니다. 2. Express 설치 및 Hello worlde 실행 위에서 설치한 앱의 경로에서 아래의 명령어를 실행하여 설치하여 줍니다. - 설치 공식문서 - npm install express --save *참고로 --save 종속 항목 목록에 저장하는 것입니다. 프로젝트를 git으로 다른 곳에서 작업할 때 express를 새로 받아야 하지만 --save로 종속 항목 목록에 저장되어 있으면 "npm install" 명령어로 알아서 받을 수 있게 해 줍니다. 설치가 완료되면 아래와 같이..

class로 작성되어 있던 내용을 hooks로 다시 적어보았다. hooks로 간단하게 input onChange를 사용하는 예시는 아래의 글을 참조하기 바란다. https://wonyoung2257.tistory.com/32 1. 기본 UI 준비 Example2.js import React from "react"; export default class Example2 extends React.Component { state = { text: "텍스트", }; render() { return ( {this.state.text} ); } } Example2 컴포넌트를 위와 같이 작성해줍니다. App.js import React from "react"; import Example2 from "./Example..