220228 TIL

2022. 3. 1. 01:16코딩/TIL

1. 리액트란 프론트엔드 라이브러리,프레임워크이다. 

자바스크립트 없이 HTML,CSS만 이용하는 정적 페이지라면 프론트엔드 라이브러리를 사용할 필요는 없다. 

현재 트렌드는 단순 웹페에지가 아닌 웹어플리케이션, 유저의 행동에 따라 동적인 화면을 보여줘야 하고 동적으로 UI 관리 > 기존 JS나 제이쿼리로는 부족 

그래서 수많은 DOM,상태값,업데이트값에 대한 관리를 최소한으로 줄이고, 오직 기능개발&UI를 구현하는데 집중할 수 있도록 새로운 JS 형태들이 등장 

 

프론트엔드 라이브러리 3대장은 Angular(타입스크립트 기반 프론트엔드 웹 애플리케이션 프레임워크), Vue. React(페이스북에서 개발. 단일 웹 페이지나 모바일 앱에서 화면에 표시되는 뷰 부분의 개발에 사용되는 JS 라이브러리) 

 

2. React 코드 복습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--아래 두 줄은 React 실행 코드-->
    <!--사이트를 배포할 때는 development.js를 production.min.js로 변경해주어야 한다.-->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>리액트 테스트</title>
   
</head>
<body>
    <div id="mydiv"></div>

        <script type="text/babel"> // babel은 자바스크립트 컴파일러. 최신 버전 자바스크립트 문법이라든지, 리액트가 사용하는 JSX 문법을 브라우저가 이해할 수 있는 JS 문법으로 변환해준다.
        //  이 방법은 사이트를 느리게 만들고 프로덕션에는 맞지 않다.
            class Hello extends React.Component { // React 컴포넌트 클래스는 Hello
                render() { // 화면에서 보고자 하는 내용을 반환. React는 설명을 전달받고 결과를 표시한다.
                    return <h1>Hello World!</h1>
                }
            }

            ReactDOM.render(<Hello/>, document.getElementById('mydiv'))
        </script>
</body>
</html>
 
 

3. openzepplin 

스마트컨트랙트 개발을 위한 라이브러리. 

 

4. -g 옵션 없으면 그 프로젝트에서만 사용할 수 있다는 단점이 있다. 

 

5. 클라이언트 인터넷망 서버 

클라이언트가 서버로 메시지를 보내고 싶다. 그러면 클라이언트는 출발지 IP(자기 자신의 IP)에서 목적지 IP(서버 IP)로 메시지를 보내기 위해 세 요소를 가지고 있다. 

그런데 중간에 인터넷 망은 굉장히 복잡한 구조로 구성되어 있다. 

일단 IP는 지정한 IP주소(목적지 IP주소)에 데이터를 전달할 수 있도록 규칙을 만들었으며(Internet Protocol) Packet 이라는 통신 단위로 데이터를 전달한다. 

 

클라이언트 IP : 100.100.100.1 

서버 IP : 200.200.200.2 

클라이언트 > 서버 전달하고자 하는 메시지 : Hello World 

 

클라이언트 > 인터넷망 > 서버 로 Hello World 메시지가 잘 도착했다고 하자. 

그럼 클라이언트도 메시지를 보낸 대가를 받아야 하는데, 이는 서버 측에서 클라이언트 > 서버 메시지 보낼때와 마찬가지로 

출발지(서버) 200.200.200.2 > 목적지(클라이언트) 100.100.100.1 + 메시지 OK 라고 인터넷 망을 통해서 패킷을 전달해야 한다. 

 

BUT ! 위에서 인터넷 망이 복잡하다고 하지 않았나. 

만약 나(클라이언트)가 상대방(서버)에게 Hello World 라는 메시지를 던졌는데(출발지 IP와 목적지 IP도 잘 설정) 

상대방의 PC가 꺼져있는 상황이라면 나의 메시지를 보지 못한다는 것. (비연결성) 

그리고 내가 상대방에게 던진 메시지는 잘 설정되어있어도 엉뚱한 곳으로 갈 수 있다는 것이다. 

 

내가 인터넷망에 패킷을 던졌는데 패킷이 사라지거나 패킷을 여러개 보냈는데 순서대로 도착하지 않는다 > 비신뢰성 

 

예를 들어 나는 Hello World 라고 순서대로 인터넷망에 던졌다 

일반적으로 패킷은 1500byte 정도 되는데, 만약 Hello World가 총 3000byte 라고 치자. 

그러면 Hello 1500 World 1500 해서 2번으로 나눠서 보내야 한다. 

그런데 이렇게 패킷의 용량이 커지게 된다면, 나는 Hello World로 보내고자 했지만, 패킷들은 중간에 인터넷망 내의 다른 노드를 탈 수 있다(어! 이 노드가 더 빨리 도착할 거 같은데?나는 이 노드를 써야지!) 하고 World Hello로 목적지 IP에 메시지가 도착할 수 있다는 것이다. 

 

 

6. // SPDX-License-Identifier: MIT

pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";

contract MintAnimalToken is ERC721Enumerable {
    constructor() ERC721("h662Animals", "HAS") {}

    function mintAnimalToken() public {
        uint256 animalTokenId = totalSupply() + 1;

        _mint(msg.sender, animalTokenId);
    }
}

'코딩 > TIL' 카테고리의 다른 글

220311 TIL  (0) 2022.03.11
220308 TIL  (0) 2022.03.08
220302 TIL  (0) 2022.03.08
220301 TIL  (0) 2022.03.01
220215 TIL  (0) 2022.02.15