분류 전체보기에 해당되는 글 281건

[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
,

30년 전 Billboard hot 10 파헤치기 [1994-01-07]

Billboard Hot 파헤치기/30년전 Billboard Hot 10 2024. 1. 1. 00:01
  • 1

  • Hero

    Mariah Carey
  • ChatGpt 리뷰
  • ▶ Mariah Carey의 'Hero'는 정말 멋진 노래입니다. 멜로디가 아름다운 곡으로 감동적인 느낌을 줍니다. 라이브버전이 더 좋습니다. 가사는 의미가 깊고, 인생의 고민과 고통을 다루고 있습니다. 마리아 케리의 목소리는 매력적이고, 노래를 더욱 감동적으로 만들어줍니다. 나는 이 노래를 정말 좋아합니다!
  • 2

  • All For Love

    Bryan Adams/Rod Stewart/Sting
  • ChatGpt 리뷰
  • ▶ 브라이언 어뎁스, 로드 스튜어트, 스팅의 'All For Love'는 정말 멋진 노래입니다. 이 노래는 감성적인 멜로디와 강렬한 보컬로 사랑의 감정을 잘 담아냈습니다. 또한 이 노래는 세 명의 멋진 아티스트들이 함께 만든 곡이기 때문에 더욱 멋진 노래가 되었습니다. 전체적으로 보았을 때, 'All For Love'는 정말 멋진 노래로 추천합니다.
  • 3

  • All That She Wants

    Ace Of Base
  • ChatGpt 리뷰
  • ▶ 애스 오브 베이스의 'All That She Wants'는 전세계적으로 대중적인 인기를 얻은 곡입니다. 멜로디가 매력적이고 리듬이 신나게 느껴지는 곡으로, 듣기 좋은 노래로 잘 알려져 있습니다. 또한 메시지가 명확하고 이해하기 쉽기 때문에, 많은 사람들이 이 곡을 좋아합니다. 전체적으로 보면, 이 곡은 정말 멋진 곡이라고 말할 수 있습니다.
  • 4

  • Again

    Janet Jackson
  • ChatGpt 리뷰
  • ▶ Janet Jackson의 Again은 감동적이고 에너지 넘치는 곡으로, 자신의 인생을 되돌아보고 자신의 감정을 표현하는 멋진 곡입니다. 멜로디가 아름다운 곡이며, 자신의 감정을 깊게 느끼게 합니다. 가사는 감동적이고 매력적이며, 이 곡은 당신의 인생을 되돌아보고 당신의 감정을 표현하는데 적합합니다. 당신이 인생의 의미를 찾고 자신의 감정을 표현하고 싶다면, Janet Jackson의 Again을 꼭 들어보세요!
  • 5

  • Gangsta Lean

    DRS
  • ChatGpt 리뷰
  • ▶ DRS의 'Gangsta Lean'은 멋진 트랙입니다. 음악은 심플하고 감각적이며 멋진 랩과 멜로디로 이루어져 있습니다. 비트는 스릴을 주는 느낌이 들며 멋진 랩과 함께 잘 어울립니다. 전체적으로 들으면 스트레스를 풀고 기분이 좋아집니다. 나는 이 곡을 추천합니다!
  • 6

  • Breathe Again

    Toni Braxton
  • ChatGpt 리뷰
  • ▶ Toni Braxton의 'Breathe Again'는 정말 멋진 노래입니다. 가사는 매력적이고 멋진 멜로디로 이루어져 있습니다. 노래는 당신이 슬픔과 스트레스를 느끼고 있을 때 기분을 바꿔주는 멋진 음악입니다. 나는 이 노래를 정말 좋아합니다!
  • 7

  • Whoomp! (There It Is)

    Tag Team
  • ChatGpt 리뷰
  • ▶ 태그 팀의 'Whoomp! (There It Is)'는 기분 좋은 리듬과 감각적인 멜로디로 인기를 끌었습니다. 멜로디는 감각적이고 리듬은 스텝 별로 생각하기 쉽고 재미있습니다. 이 곡은 당신이 즐길 수 있는 좋은 음악입니다.
  • 8

  • What's My Name?

    Snoop Dogg
  • ChatGpt 리뷰
  • ▶ 스눕 독의 'What's My Name?'는 놀라운 음악과 가사로 많은 사랑을 받고 있습니다. 멜로디가 즐거운 느낌을 주고, 가사는 매력적이며 의미가 깊습니다. 스눕 독의 목소리는 정말 놀라운 것입니다. 이 음악은 들으면 즐거움을 느낄 수 있습니다. 스눕 독의 'What's My Name?'는 강력한 음악으로 사랑받고 있습니다.
  • 9

  • I'd Do Anything For Love (But I Won't Do That)

    Meat Loaf
  • ChatGpt 리뷰
  • ▶ 미트 로프의 《I'd Do Anything For Love (But I Won't Do That)》은 전 세계에서 사랑받는 곡입니다. 이 곡은 멜로디가 강렬하고 연주가 매력적이며, 작곡과 작사가 절묘하게 조화를 이루고 있습니다. 메이트 로프의 목소리는 이 곡의 매력을 더해주며, 감동적인 메시지를 전달합니다. 이 곡은 미트 로프의 작품 중 가장 잘 알려진 곡 중 하나이며, 그의 연주는 전 세계의 사랑을 받고 있습니다.
  • 10

  • Said I Loved You...But I Lied

    Michael Bolton
  • ChatGpt 리뷰
  • ▶ 마이클 볼턴의 'Said I Loved You...But I Lied'는 정말 아름답고 멋진 노래입니다. 멜로디가 정겨워서 들으면 마음이 아름답게 느껴집니다. 가사는 진심으로 사랑하는 사람을 위해 만들어졌는데, 마이클 볼턴의 목소리는 이 노래를 더욱 아름답게 만들어줍니다. 마이클 볼턴의 'Said I Loved You...But I Lied'는 사랑하는 사람과 함께 들으면 좋은 노래입니다.

'Billboard Hot 파헤치기 > 30년전 Billboard Hot 10' 카테고리의 다른 글

30년 전 Billboard hot 10 파헤치기 [1994-02-04]  (17) 2024.01.29
30년 전 Billboard hot 10 파헤치기 [1994-01-14]  (4) 2024.01.08
30년 전 Billboard hot 10 파헤치기 [1993-12-31]  (1) 2023.12.25
30년 전 Billboard hot 10 파헤치기 [1993-12-24]  (4) 2023.12.18
30년 전 Billboard hot 10 파헤치기 [1993-12-17]  (3) 2023.12.11
,

최신 Billboard hot 10 파헤치기 [2023-12-26]

Billboard Hot 파헤치기/최신 Billboard Hot 10 2023. 12. 28. 07:02
  • 1

  • All I Want For Christmas Is You

    Mariah Carey
  • ChatGpt 리뷰
  • ▶ 마리아 케어리의 'All I Want For Christmas Is You'는 연말에 적합한 감성적인 노래로, 모든 사람들이 즐길 수 있는 크리스마스 음악입니다. 이 노래는 음악의 색깔과 멜로디가 좋아, 마리아 케어리의 목소리는 매력적이고 반짝이는 감성을 느낄 수 있습니다. 이 노래는 크리스마스를 더욱 특별하게 만들어줄 것입니다.
  • 2

  • Rockin' Around The Christmas Tree

    Brenda Lee
  • ChatGpt 리뷰
  • ▶ 브렌다 리의 "Rockin' Around The Christmas Tree"는 정말 좋은 크리스마스 곡입니다. 멜로디가 신나고 즐거운 느낌이 들며, 브렌다 리의 음색이 아주 매력적입니다. 또한 이 곡은 여러 세대를 연결하는 크리스마스 노래로 유명합니다. 나는 이 곡을 정말 추천합니다!
  • 3

  • Jingle Bell Rock

    Bobby Helms
  • ChatGpt 리뷰
  • ▶ 보비 헬무스의 징글 벨 락은 정말 멋진 곡입니다. 이 곡은 정말 신나고 감각적이며, 여름에도 즐길 수 있는 이상적인 겨울 노래입니다. 멜로디는 정말 좋고, 보비 헬무스의 감성적인 보컬은 이 곡에 더욱 특별한 느낌을 줍니다. 전체적으로 보비 헬무스의 징글 벨 락은 정말 좋은 곡입니다.
  • 4

  • Last Christmas

    Wham!
  • ChatGpt 리뷰
  • ▶ 밤!의 라스트 크리스마스는 절제된 음악과 음색, 그리고 절묘한 멜로디로 이루어져 있습니다. 이것은 그들의 명곡 중 하나이며, 이것은 여러분의 크리스마스 시기를 즐길 수 있는 좋은 노래입니다. 밤!의 라스트 크리스마스는 감미로운 멜로디와 밝은 감정을 느낄 수 있는 좋은 음악입니다. 이 노래는 가사가 좋고 멜로디가 좋아 많은 사람들이 좋아합니다. 밤!의 라스트 크리스마스는 여러분의 크리스마스 시기를 더욱 특별하게 만들어 줄 것입니다.
  • 5

  • A Holly Jolly Christmas

    Burl Ives
  • ChatGpt 리뷰
  • ▶ 버를 아이브스의 "A Holly Jolly Christmas"는 정말 좋은 음악입니다. 목소리가 따뜻하고 정겨운 느낌이 들리는 곡이며, 이 시절의 추억을 생각하게 해줍니다. 또한, 가사가 매우 감미롭고 좋습니다. 모든 사람들에게 추천합니다!
  • 6

  • Lovin On Me

    Jack Harlow
  • ChatGpt 리뷰
  • ▶ 잭 할로우의 'Lovin On Me'는 정말 재미있고 즐거운 노래입니다. 음악은 매우 멋지고 멋진 리듬과 감성적인 멜로디로 가득합니다. 가사는 매우 독특하고 재미있고, 잭 할로우의 목소리는 매우 아름답고 감동적입니다. 이 노래는 당신의 하루를 더 즐겁게 만들어줄 것입니다. 정말 추천합니다!
  • 7

  • It's The Most Wonderful Time Of The Year

    Andy Williams
  • ChatGpt 리뷰
  • ▶ 이 노래는 앤디 윌리엄스의 가장 아름다운 곡 중 하나입니다. 멜로디가 즐거운 느낌을 주고, 가사는 가을과 겨울의 따뜻함을 느낄 수 있습니다. 이 곡은 연말에 즐거운 마음을 느끼기에 적합합니다. 이 곡을 들으면 가을과 겨울의 이야기를 느낄 수 있고, 연말에 좋은 마음을 느끼게 해줍니다.
  • 8

  • Let It Snow, Let It Snow, Let It Snow!

    Dean Martin
  • ChatGpt 리뷰
  • ▶ 딘 마틴의 'Let It Snow, Let It Snow, Let It Snow!'는 감미로운 멜로디와 이쁜 보컬로 따뜻한 감성을 주는 곡입니다. 따뜻한 시간을 보내고 싶은 분들에게 추천합니다.
  • 9

  • Feliz Navidad

    Jose Feliciano
  • ChatGpt 리뷰
  • ▶ 조세 펠리시아노의 펠리즈 나비다는 정말 멋진 곡입니다. 이 곡은 매력적인 멜로디와 연주로 인해 즐거운 느낌을 주고 있습니다. 또한 가사는 매우 감미롭고 이로 인해 이 곡은 정말 좋은 곡입니다. 나는 이 곡을 적극 추천합니다!
  • 10

  • Sleigh Ride

    The Ronettes
  • ChatGpt 리뷰
  • ▶ 론네트스의 'Sleigh Ride'는 여름이나 겨울에 들으면 좋은 노래입니다. 멜로디가 즐거운 느낌을 주고 있어 듣기 좋습니다. 론네트스의 목소리는 음악과 함께 즐거운 느낌을 주고 있습니다. 이 노래는 여름과 겨울 모두 즐길 수 있는 좋은 노래입니다.

'Billboard Hot 파헤치기 > 최신 Billboard Hot 10' 카테고리의 다른 글

최신 Billboard hot 10 파헤치기 [2024-01-20]  (16) 2024.01.21
최신 Billboard hot 10 파헤치기 [2024-01-02]  (3) 2024.01.04
최신 Billboard hot 10 파헤치기 [2023-12-19]  (3) 2023.12.21
최신 Billboard hot 10 파헤치기 [2023-12-12]  (4) 2023.12.14
최신 Billboard hot 10 파헤치기 [2023-12-05]  (4) 2023.12.07
,
1 ··· 13 14 15 16 17 18 19 ··· 94

티스토리툴바