웹에 해당되는 글 17건

[Nomad] ReactJS로 영화 웹 서비스 만들기 1

웹/React.js 2024. 1. 1. 18:59

노마드코더 강의 1일차.

심심해서 만들어보는 React JS 강의 수강

 - ReactJS로 영화 웹 서비스 만들기

  1. 준비물

     > 바닐라 JS에 대한 기초 지식, Visual Studio Code

     > 바닐라 JS 기초 강의 참고(무료)

     > React JS : https://unpkg.com/react@18/umd/react.production.min.js

     > React-Dom : https://unpkg.com/react-dom@18/umd/react-dom.production.min.js

     > Babel : https://unpkg.com/@babel/standalone/babel.min.js

 

Jsx format로 자동 변환
1. Vscode > Prettier - Code formatter 설치
2. Ctrl + P > User settings
3. Default formatter 검색
4. 없음 -> Prettier - Code formatter 변경
5. Format on Save 검색
6. 체크
7. Ctrl + S 로 저장 시 자동으로 구조변환됨

  

* Vanilla Js vs React Js 코드 비교

1. Vanilla JS
<!DOCTYPE html>
<html>
    <body>
        <span>Total Clicks: 0</span>
        <button id="btn">Click me!</button>
    </body>
    <script>
        let counter = 0;
        const button = document.getElementById("btn");
        const span = document.querySelector("span");
        function handleClick() {
            counter += 1;
            span.innerHTML = 'Total Clicks: '+counter;
        }
        button.addEventListener("click", handleClick)
    </script>
</html>

 

2. React Js
<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>      <!--React : React JS 엔진 역할-->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <!--React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
    <script>
        const root = document.getElementById("root");
        const h3 = React.createElement(
            "h3",
            {
                id: "title",
                onMouseEnter: () => console.log("mouse enter"),
            },
            "Hello I'm a span"
        );       //span element 생성
        const btn = React.createElement(
            "button",
            {
                onClick: () => console.log("I'm clicked"),
                style: {
                    backgroundColor: "tomato",
                }
            },
            "Click me"
        );
        const container = React.createElement("div", null, [h3, btn]);
        ReactDOM.render(container, root);
    </script>
</html>

 

 - React JS가 좋은 점은 addEvenetListener를 각각 선언할 필요가 없이, 각 요소별로 기재하면 됨

 

3. React Js (JSX, Babel 사용)
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <!--React : React JS 엔진 역할-->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <!--React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- JSX 인식을 위한 Babel -->
  <script type="text/babel">
    const root = document.getElementById("root");
    /* 1. React 방식
        const h3 = React.createElement(
            "h3",
            {
                id: "title",
                onMouseEnter: () => console.log("mouse enter"),
            },
            "Hello I'm a span"
        );       //span element 생성 
        */
    // 2. JSX 방식 (JavaScript Extension. HTML 문법과 흡사하기 때문에 React 방식보다 익숙함)
    const Title = (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello I'm a span
      </h3>
    );
    /* 
        const btn = React.createElement(
            "button",
            {
                onClick: () => console.log("I'm clicked"),
                style: {
                    backgroundColor: "tomato",
                }
            },
            "Click me"
        );
        */
    const Button = (
      <button
        style={{
          backgroundColor: "tomato",
        }}
        onClick={() => console.log("I'm clicked")}
      >
        "Click me"
      </button>
    );
    const container = React.createElement("div", null, [Title, Button]);
    ReactDOM.render(container, root);
  </script>
</html>

 

4. React Js (렌더링 할 때에도 JSX 형태로 사용)
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <!--React : React JS 엔진 역할-->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <!--React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- JSX 인식을 위한 Babel -->
  <script type="text/babel">
    const root = document.getElementById("root");
    const Title = () => (
      //arrow function
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello I'm a span
      </h3>
    );
    const Button = () => (
      <button
        style={{
          backgroundColor: "tomato",
        }}
        onClick={() => console.log("I'm clicked")}
      >
        Click me
      </button>
    );
    //Component는 반드시 대문자로 시작해야함(사용자 정의 tag가 됨)
    const Container = () => (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(<Container />, root);
  </script>
</html>

 

5. React Js (변경 시 마다 Render 하도록 추가. 좋은 소스는 아님)
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <!--React : React JS 엔진 역할-->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <!--React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- JSX 인식을 위한 Babel -->
  <script type="text/babel">
    const root = document.getElementById("root");
    let counter = 0;
    function countUp() {
      counter += 1;
      render();
    }
    function render() {
      ReactDOM.render(<Container />, root);
    }
    function Container() {
      return (
        <div>
          <h3>Total Clicks: {counter}</h3>
          <button onClick={countUp}>Click me</button>
        </div>
      );
    }
    render();
  </script>
</html>

 

6. React Js (userState를 사용해서 ReRednering 까지 modifier로 수행하도록 처리)
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <!--React : React JS 엔진 역할-->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <!--React-dom : 생성된 React 요소를 HTML에 배치하는 역할-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- JSX 인식을 위한 Babel -->
  <script type="text/babel">
    const root = document.getElementById("root");
    function App() {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        //   setCounter(counter + 1); //값을 바꾸고 리렌더링함
        setCounter((current) => current + 1); //counter+1과 동일한 결과를 출력하지만 current가 확실히 현재 값이라는 것을 보장할 수 있다 (다른 값에 의해 counter가 변경될 수 있기 때문)
      };
      return (
        <div>
          <h3>Total Clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>

 

 

'웹 > React.js' 카테고리의 다른 글

[Nomad] ReactJS로 영화 웹 서비스 만들기 6  (4) 2024.01.07
[Nomad] ReactJS로 영화 웹 서비스 만들기 5  (83) 2024.01.06
[Nomad] ReactJS로 영화 웹 서비스 만들기 4  (79) 2024.01.05
[Nomad] ReactJS로 영화 웹 서비스 만들기 3  (75) 2024.01.04
[Nomad] ReactJS로 영화 웹 서비스 만들기 2  (2) 2024.01.02
,

HTTP vs 웹소켓 단순 비교

웹 2021. 12. 17. 11:13

1. HTTP

 - 클라이언트의 요청이 있을 때에만 서버가 응답해서 정보를 전송하고, 연결을 끊는 형태

 - 단방향으로 통신한다.

 - 실시간성 정보가 필요한 것이 아니라면 HTTP 통신으로 구현해도 충분

 - 매 요청을 보낼 때 마다 header - body와 관련된 정보 셋이 필요하기 때문에 불필요한 정보가 많다.

 

2. 웹소켓

 - HTTP 연결 때 매번 발생하는 3, 4 handshaking 비용이 필요 없다. (다만 최초 handshake는 HTTP와 동일)

 - 모든 브라우저가 지원하는 것은 아니나 SockJs, Socket.io같은 오픈소스 라이브러리를 통해 어느정도 지원이 가능하다

 - 새로고침 하지 않아도 최신 데이터가 적용된 웹화면을 볼 수 있다

 - 단점으로는 HTTP 보다 구현이 복잡하며, 연결이 끊어졌을 때의 상황을 따로 구현해야하며, 연결을 유지하는 것 자체가 서버 리소스를 사용하기 때문에 서버 환경에 부담이 갈 수 있다

 - 프로토콜은 websocket, websocket secure를 사용

 - 포트는 HTTP(80), HTTPS(443)과 동일한 포트 사용

 

3. HTTP vs 웹소켓

HTTP 웹소켓
비 연결성(stateless) 연결 지향(Stateful)
매번 연결 맺고 끊는 과정의 비용 한번 맺은 연결을 계속 유지
request - response 구조 양방향 통신

 

 

'웹' 카테고리의 다른 글

Angular.js vs Vue.js 차이점  (106) 2024.01.16
,
1 ··· 3 4 5 6

티스토리툴바