React 서버

서버란?

유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램일 뿐입니다.

네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램

유튜브 서버 : 유저가 영상 달라고 하면 영상 보내주는 프로그램

입니다.

그래서 서버개발 별거아님

"누가 A를 요청하면 A를 보내주세요" 라고 코드짜는게 서버개발 끝입니다.

유저가 그냥 데이터달라고 떼쓰면 서버가 보내주진 않습니다.

서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야하는데

1. 어떤 데이터인지 (URL 형식으로)

2. 어떤 방법으로 요청할지 (GET or POST)

잘 기재해야 데이터를 보내줍니다.

데이터를 가져올 때는 보통 GET 고르면 되고

데이터를 서버로 보낼 때는 POST 고르면 됩니다.

그리고 어떤 데이터를 보고싶은지 URL만 잘 기재하면 되는데

예를 들어서 쇼미더럭키짱이라는 네이버웹툰을 보고싶으면

https://comic.naver.com/webtoon/list?titleId=783054 여기 URL로 GET요청하면 보내줍니다.

예를 들어서 독립일기라는 네이버웹툰을 보고싶으면

https://comic.naver.com/webtoon/list?titleId=748105 여기 URL로 GET요청하면 보내줍니다.

URL을 어떻게 알았냐고요?

네이버 웹툰 서버개발자에게 물어보거나 URL이 기재된 html 페이지를 찾아보거나 그러면 됩니다.

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는

간단한 브라우저 기능을 AJAX라고 합니다.

그거 쓰면 새로고침 없이도 쇼핑몰 상품을 더 가져올 수도 있고

새로고침 없이도 댓글을 서버로 전송할 수도 있고

그런 기능을 만들 수 있는 것임

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import styled from "styled-components";
import { Nav, Tab } from "react-bootstrap";

function Detailon(props) {
 let [count, setCount] = useState(0);
 let [alert, setAlert] = useState(true);
 let [탭, 탭변경] = useState(0);

 let [num, setNum] = useState("");
 useEffect(() => {
   let 카운터 = setTimeout(() => {
     setAlert(false);
   }, 2000);
   return () => {
     clearTimeout(카운터);
   };
 });

 useEffect(() => {
   if (isNaN(num) == true) {
     alert("그러지마세요");
   }
 }, [num]);

 let { id } = useParams();

 let 찾은상품 = props.shoes.find(x => x.id == id);

 return (
   <div className="container">
     {alert === true ? (
       <div className="alert alert-warning">2초이내 구매시 할인</div>
     ) : null}
     <button
       onClick={() => {
         setCount(count + 1);
       }}
     >
       업데이트
     </button>
     <input
       onChange={e => {
         setNum(e.target.value);
       }}
     ></input>

     <div className="row">
       <div className="col-md-6">
         <img
           src="https://codingapple1.github.io/shop/shoes1.jpg"
           width="100%"
         />
       </div>
       <div className="col-md-6">
         <h4 className="pt-5">{props.shoes.title}</h4>
         <p>{props.shoes.content}</p>
         <p>{props.shoes.price}</p>
         <button className="btn btn-danger">주문하기</button>
       </div>
     </div>

     <Nav variant="tabs" defaultActiveKey="link1">
       <Nav.Item>
         <Nav.Link
           eventKey="link0"
           onClick={() => {
             탭변경(0);
           }}
         >
           {" "}
           버튼0
         </Nav.Link>
       </Nav.Item>
       <Nav.Item>
         <Nav.Link
           onClick={() => {
             탭변경(1);
           }}
           eventKey="link1"
         >
           버튼1
         </Nav.Link>
       </Nav.Item>
       <Nav.Item>
         <Nav.Link
           onClick={() => {
             탭변경(2);
           }}
           eventKey="link2"
         >
           버튼2
         </Nav.Link>
       </Nav.Item>
     </Nav>

     <TabContent code={탭}></TabContent>
   </div>
 );
}
function TabContent(props) {
 if (props.code == 0) {
   return <div>내용0</div>;
 }
 if (props.code == 1) {
   return <div>내용1</div>;
 }
 if (props.code == 2) {
   return <div>내용2</div>;
 }
}

export default Detailon;

```jsx