리액트 status, ref import { useState } from "react";const Body1 = () => { const [formData, setFormDate] = useState({ name:"", gender:"", birth:"", email:"" }); const handlerChange = (e) =>{ console.log("현재:",e.target.name); console.log("수정:",e.target.value); setFormDate({ ...formData, [e.target.name] : e.target.value }); } return ( 회원 가입 ..
리액트 React는 사용자 인터페이스(UI)를 렌더링하기 위한 JavaScript 라이브러리UI는 버튼, 텍스트, 이미지와 같은 작은 요소로 구성React를 통해 작은 요소들을 재사용 가능하고 중첩할 수 있는 컴포넌트로 조합할 수 있음 1. 컴포넌트 (Component) ● React 컴포넌트는 마크업을 얹을 수 있는 JavaScript 함수, 즉 html을 반환하는 함수 ● 컴포넌트는 버튼과 같이 작을 수도 있고 전체 페이지와 같이 큰 경우도 있음 ● 컴포넌트는 함수 이름으로 부르며, 함수명은 반드시 첫 글자를 대문자로 작성해야 함 ○ html 태그는 소문자로 작성한다. 2. 루트 컴포넌트(Root Component) main.jsx 파일에서 아래와 같이 작성한 부분에 들어 있는..
리액트 설치
리액트 설치 ● 리액트를 학습할 수 있는 리액트 공식 사이트 reactjs 빠르게 시작하기 - React https://ko.react.dev/learn 빠르게 시작하기 – ReactThe library for web and native user interfacesko.react.dev● 18버전 시작하기 - React https://ko.legacy.reactjs.org/docs/getting-started.html 시작하기 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org 1. node.js 설치 2. Visual Studio Code 설치 3. react 설치 ● 리액트 기본..
HTTP 프로토콜
HTTP 프로토콜 ※ MDN Web Docs HTTP 상태 코드 - HTTP | MDNhttps://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Status HTTP 상태 코드 - HTTP | MDNHTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응답은 5개의 그룹으로 나누어집니다: 정보를 제공하는 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 그리고developer.mozilla.org
라우터 미들웨어 ★ 라우터 미들웨어 객체 만들어 사용하기 ● 라우팅 객체를 통해 라우트 코드 정리 1. 라우터 객체 만들기const router = express.Router(); 2. router 객체를 사용해 라우트 코드 작성router.route("/contacts") .get((req, res) => { ... }) .post((req, res) => { ...} ); router.route("/contacts/:id") .get((req,res) => {...}) .put((req, res) => {...}) .delete((req, res) => {...}) 3. app.js에서 router 객체를 미들웨어로 등록app.use(router); const express = requi..
Express ● HTTP 모듈을 사용해서 서버를 만들 수도 있지만 익스프레스에는 HTTP 모듈의 기능 외에도 다양한 기능 이 포함되어 있음 1. 설정 a. 새로운 작업 폴더 만들기 b. npm init c. package.json 파일 확인 - init 넣었던 내용으로 구성 2. EXpress 패키지 설치 a. 터미널 : npm i express> npm install express또는 > npm i express 3. nodemon 패키지 설치 서버 종료 및 재시작 반복 작업을 자동으로 package.json의 dependencies에는 포함되지 않음 개발용으로만 사용 nodemon은 앱 코드 자체에는 영향을 주지 않음npm i nodemon --save..
Express 라우팅
Express 라우팅 ● http 메서드 테스팅을 위해 ○ postman 설치 ○ 또는 vs code의 확장 이용 : thunder client 설치 1. express 실행 const express = require("express");const app = express();app.get("/", (req, res)=>{ res.send("Hello, Node!! Express Server");});app.listen(3000, () =>{ console.log("서버가 실행 중입니다.");});//test_server 폴더에 app.js 파일을 만들어 위 내용 입력// 터미널 : nodemon app.js// 브라우저 : localhost:3000 const express ..
라우팅
라우팅 ● 라우팅이란 클라이언트에서 들어오는 요청에 따라 그에 맞는 함수를 실행하는 것 ○ nodes.org/ko 사이트에서 ■ nodejs.org/ko/about로 요청하면 소개화면으로 이동 ○ 리스트 ● 라우팅을 이용하면 사용자가 입력하는 url에 따라 다른 내용을 보여 줄 수 있음● GET이나 POST,PUT,DELETE 같은 요청 메서드에 따라 처리할 함수를 다르게 연결할 수도 있음● 요청 메서드란 파일을 가지고 무엇을 할 것인지 나타내는 것이라 할 수 있음 //http 모듈로 서버 만들고 실행하기//브라우처 창을 이용하여 //응답 객체 확인 - 응답 헤더, 응답 본문, 응답 종료료const http = require("http");const server..