brandy의 개발계발

주식 책 공유

bran_dy — Thu, 28 Jul 2022 13:44:36 +0900

https://blog.naver.com/unscripted87/222651213532

웹 TIL) label,검색쿼리구조,드롭다운,value

bran_dy — Sat, 11 Jun 2022 00:58:05 +0900

<h1>Forms Demo</h1>

<form action="/tacos">
  <label for="username">Enter a Username:</label>
  
  <p>
      <input id="username" 
             type="text" placeholder="username">
  </p>
  
  <p>
  <label for="password">Enter a Password</label>
       <input type="password" placeholder="passsword" id="password">
  </p>
  
  <p>
    <label for="color">Enter a color</label>
    <input type="color" id="color">
  </p>
  
  <p>
      <label for="number">Enter a number</label>
         <input type="number" 
         placeholder="enter a number" id="number">
  </p>
       
</form>

검색 쿼리 구조

쿼리 구조는 회사마다 다르다.

//유튜브 https://www.youtube.com/results?search_query=dog
// 네이버 https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=%EC%9E%94%EB%82%98%EB%B9%84

//Reddit https://www.reddit.com/search/?q=rabbit

<label> : 그동안 <label> 태그에 대해서 거의 잊다시피 했는데 웹부캠 강의를 들으면서 다시 한 번 상기할 수 있었다.

<label>은 UI항목(버튼,텍스트 등) 등의 설명을 나타내는 태그이며

<label> + <input>의 조합으로 쓴다. ScreenReader은 폼 입력에서 label을 읽어들어와 사용자가 입력해야 하는 텍스트가 무엇인지 설명한다.

위의 코드에서 만약 Enter a Password! 라는 문구를 커서로 클릭해보면 옆에 있는 password input 창이 활성화된다. 입력하라고 커서가 깜빡거린다. 나머지 항목들도 마찬가지이다.

그리고 <label>+<input>의 조합으로 쓸 때에는 반드시 태그 안에 id값을 지정해주어야 한다.

그런 다음 <label>에서는 id와 같은 값의 for 속성을 넣는다. (id가 color면 label for도 color)

그런데 MDN 공식 문서에 따르면 label for ~ 보다는 label calss로 정의하고 for을 분리시켜주는걸 권장한다.

드롭다운 메뉴 만들기

....

</select>

그리고 submit 버튼을 누르면 form 내의 주소로 다이렉트 되는데 내 코드의 경우 경로 설정을 해주지 않았기 때문에 경로를 찾을 수 없다고 뜬다.

value값은 데이터 전송 시 서버로 전송된다.

  <h2>More Inputs</h2>
  <form action="/birds">
    <input type="checkbox" name="agree_tos" id="agree">
    <label for="agree">I agree to everything</label>
    <p>
      <label for="xs">XS:</label>
      <input type="radio" name="size" id="xs" value="xs">
      <label for="s">S:</label>
       <input type="radio" name="size" id="s" value="s">
         <label for="m">M :</label>
       <input type="radio" name="size" id="m" value="m">
    </p> 
    <button>submit</button>

블록체인 TIL) 블록 구조,SHA256

bran_dy — Thu, 9 Jun 2022 00:48:54 +0900

1. 블록체인은 레코드(SQL에서 행,튜플)이기 때문에 데이터를 갖고 있다.

이전 해시

해시 : 블록의 지문 (이전 해시를 이용해 데이터를 표현하는 숫자. 64길이)

해시값을 통해 블록들이 암호화 링크로 연결되어있다.

2. SHA256 : 길이 64 (256 bit)

0~9,A,B,C,D,E,F 문자가 올 수 있다 (16진법 해시이기 때문)

텍스트 문서뿐만 아니라 어떤 디지털 문서에도 적용 가능

블록체인 해시, 토큰 등 연습 사이트

https://tools.superdatascience.com/blockchain/hash

Tools - SuperDataScience

tools.superdatascience.com

3. 해싱 알고리즘 조건

-단방향 (암호>복호는 가능하지만 복호>암호는 불가능)

-결정적(동일한 문서를 해싱 알고리즘에 적용하면 똑같은 해시값을 얻어야 한다)

-연산이 빨라야 한다

-쇄도 효과(Avalanche Effect) 동일한 문서에다가 아주 작은 변형. 즉 1비트에 변형을 가했을 때 아주 작은 변형이라도 해시 값이 완전히 달라져야 한다(안녕하세요,안녕하세요!의 해시값은 완전하비게 다르게 나온다)

-충돌 저항성(비둘기집 원리. A가 슬롯 B의 개수보다 많으면 충돌 발생. B보다 훨씬 큰 A를 B로 옮기면 충돌이 생기고 ~ ..하는데 가능성은 적다.)

블록체인 TIL) Truffle,Ganache를 React에 연동하기 + React 오류 해결

bran_dy — Thu, 9 Jun 2022 00:17:43 +0900

- truffle을 VSCode에 연동 성공하면 아래와 같은 폴더 구성이 완료됨

contracts파일, migrations 파일, test, client(Frontend)로 구성된다.

1. React에서 truffle을 사용해주기 위해 'truffle unbox react'를 사용해준다.

원래는 CRA(Create-React-App)을 통해 쉽게 React 프로젝트를 VSCode에서 구현할 수 있지만,

Contracts 안에서 SimpleStorage.sol에서 컨트랙트 파일 작성

Migrations.sol은 삭제하면 안된다.

2. Ganache 시작

가나쉐를 설치해주고(SW 설치 필요) Quick start를 통해 테스트용 주소 작성

그리고 이걸 설치하기 전에 윈도우 내부에서 설정 오류가 발생했었는데,

윈도우 설정 > 업데이트 기능에서 > 테스트용 앱 로드를 설정해주어야 가나쉐를 사용할 수 있다.

3. truffle-config.js 파일 작성

const path = require("path");

module.exports = {
  // See <http://truffleframework.com/docs/advanced/configuration>
  // to customize your Truffle configuration!
  contracts_build_directory: path.join(__dirname, "client/src/contracts"),
  networks: {
    development: {
      host:"127.0.0.1",
      port: 8545,
      network_id:"*",
    },
  },
  compilers:{
    solc:{
      version:"^0.7.0",
    },
  },
};

여기서 중요한 것이 compiler버전이다. 여기서 작성한 버전이 Migration.sol 버전과 SimpleStorage.sol 버전이 일치하지 않으면 오류가 발생한다.

이렇게 나중에 배포할 때 오류가 발생한다. 컨트랙트 버전들을 통일해주고 나니 정상적으로 컴파일 & 배포가 되었다.

그리고 !

나는 Brave 브라우저를 사용하는데, 왠지 모르겠지만 Metamask 지갑 연동이 잘 안된다.

그래서 크롬 브라우저를 따로 열어서 localhost:3000으로 따로 확인을 해야 한다.

4. React 오류 (Unhandled Rejection)

이거는 Metamask 지갑 문제이다. 아마 네트워크 설정이 잘못 되어있어서 발생하는 오류이다.

Ganache와 Truffle에 설정된 네트워크는 8545였는데, 나는 이전에 이더리움 메인넷으로 선택을 하니 위와 같은 오류가 발생했던 것이다. 그래서 네트워크를 Localhost 8545로 변경해주니

정상적으로 React 페이지에서 실행되는 것을 확인할 수 있었다.

* Truffle : 이더리움 개발 프레임워크

5.0 이상의 Node.js 설치 필요

npm을 통해 손쉽게 설치 가능 npm install (or i) -g truffle

- Truffle을 사용하는 이유는 solidity로 작성한 스마트컨트랙트의 컴파일, 컴파일한 스마트컨트랙트의 배포(migrate),배포한 스마트컨트랙트의 테스트(test) 파일을 사용하기 위함

=> 결국은 스마트컨트랙트를 테스트하기 위해 truffle을 사용하는 것이다.

* Ganache : 개발 편의를 위하여 test RPC를 손쉽게 구동시켜주는 어플리케이션

어플리케이션을 실행하면 7545번 포트로 test RPC가 구동되며, 마이닝이 활성화 되어있기 때문에 바로 컨트랙트를 배포하거나 트랜잭션 실행할 수 있는 환경이 갖춰진다 (이번 작업에서는 8545로 설정)

* RPC (Remote Procedure Call) 별도의 원격 제어를 위한 코딩 없이 다른 주소 공간에서 리모트의 함수나 프로시저를 실행할 수 있도록 프로세스 간의 통신을 하는 것. 위치에 상관없이 RPC를 사용하여 원하는 함수 실행 가능

Client/Server 구조를 기반으로 작동하며 각각의 클라이언트와 서버는 Remote Call을 하기 위한 프로시저에 대한 인터페이스를 통해 서로의 요청에 대한 이해를 할 수 있다.

참고 https://medium.com/@devAsterisk/truffle%EA%B3%BC-ganache%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-evm-smart-contract%EC%9D%98-%EA%B5%AC%ED%98%84-%EB%B0%8F-%EB%B0%B0%ED%8F%AC-2526bb150daa

220603 Web TIL) 시맨틱태그,EntityCode

bran_dy — Sat, 4 Jun 2022 01:52:46 +0900

1. 시맨틱 태그를 사용하는 이유

- html 코드를 작성할 때 웹 브라우저가 HTML의 소스코드만 보고도 어느 부분이 제목이고 어느 부분이 메뉴이고 본문인지를 쉽게 알 수 있게 하도록 하는 지표.

- 검색 엔진이 검색을 수행할 때에는 HTML 태그 내에 있는 태그를 분석하는데 태그들의 의미가 분명하다면 검색 엔진 입장에서 구분하기가 쉬워진다.

- 코드 가독성 및 유지보수가 쉬워진다. 모든 태그가 <div>로 되어있으면 어느 영역(헤더,바디,푸터 등)인지 알기 힘든데 시맨틱 태그를 이용하면 해당 영역에 접근하기 쉬워진다.

>> 결국은 코드를 쉽고 편하게 읽기 위해서 시맨틱 태그를 사용한다고 하자.

2. 시맨틱 태그의 종류

<header>,<nav>:웹페이지 메뉴 만들때 사용, <main>:메인 콘텐츠를 나타내는데 사용(nav,aside,section,article 등), <article>:개별 콘텐츠 나타냄,<aside>:좌우측 사이드 부분,<footer> 등

3. block과 inline의 차이

block : 새로운 줄로 시작하며 해당 줄의 가로를 다 차지한다 -> display:block 도 있음

inline : 태그 안의 글자 길이만큼의 영역만 화면에 표시한다.

4. <div>,<span>.<p>의 차이

<div>는 영역을 구분하는 요소로 사용되며 <span>은 옆으로 붙는다. <p>는 문자 단락을 구성한다.

5. <sub>는 H₂와 같이 기준값보다 아래에 있는 숫자를 표시한다.

수소를 표현하려면 H<sub>2</sub>로 표현해야 한다.

6. Entity Code : HTML에서 특수문자를 사용하기 위해 사용하는 코드

Entity Code를 왜 사용하냐면 컴퓨터가 문서를 읽어들일 때 예약문자와 문서내용을 구분하지 못해 생기는 문제를 해결하기 위해서이다.

https://entitycode.com/#about-content

Entity Code - A Clear and Quick Reference to HTML Entities Codes

About EntityCode The idea came from my constant need to add those hard to remember HTML entity codes, such as the copyright symbol ( © ), every time I’m developing a new website or writing a new article. Usually, I either open one of my previously done

entitycode.com

 도 Entity Code이며 다양한 종류가 있다.

7. <nav>로 메뉴 만들때

기본 형식

<nav>

</ol> or </ul>

</nav> 이런 식으로 작성. 이거는 기본 형식이니까 나머지는 더 추가하던가..해서 !

8. <div>,<article>,<section>의 차이?

셋 다 큰 차이는 없다. 똑같은 결과물을 도출해내기 때문에 얘네들의 차이가 뭐지..하고 궁금해서 찾아보았다.

article : 문서의 '독립적'인 부분. 따로 떼어놔도 의미가 사라지지 않고 그대로 존재해야 함

그래서 웹 상의 실제 내용을 넣는다. 블로그 포스트, 웹 사이트 내용, 뉴스 기사 등..

section : 콘텐츠의 덩어리

div : 영역 구분하기. 콘텐츠의 CSS를 적용하고 싶을 때 사용

<div>만 주구장창 쓰면 이 <div>는 어떤 의미로 쓰인건지 알기가 힘들다. 하나하나 찾으면서 봐야하는데 이렇다보니 유지보수도 힘들고 하는 문제점 때문에 시맨틱 태그가 생겨났으며, 이 시맨틱 태그들을 통해 코드만 봐도 '아 이 부분이구나!'할 수 있게 된 것이다.

그래서 각 영역에 맞게 <header>,<main>,<footer>로 큰 뼈대를 먼저 세워주고

공지사항이나 FAQ 같은 부분은 <article>을 써주고, 그 외 논리적인 구분을 <section>으로 한다.

굳이 구분이 필요없고 블럭 요소가 필요하면 <div>를 써줄 것

9. ~ <time datetime="2022-06-03">June 3</time>~ 이라는 코드가 있다고 해보자.

기계 판독 가능한 포맷에서는 datetime 시맨틱 요소를 사용해야 한다. datetime도 시맨틱 요소이다.

10. <figure>~</figure> : 캡션대상 지정

<figcaption> : 캡션 설명 붙이기

<div> 써도 되지만 일러스트나 다이어그램처럼 사람들의 시선을 끌기 위해 캡션 사용

(+ 비디오 캡션 같은 경우는 청각 장애가 있는 시청자가 비디오 콘텐츠에 더 쉽게 접근할 수 있도록 하는 것 외에도 실제로 비디오 효과 향상시키기 가능 등..의 이유로 비디오에 캡션을 단다)

한 줄 정리

시맨틱태그는 신문기사를 작성하는 것과 같다.

블록체인 TIL) 크립토좀비 lesson1 complete

bran_dy — Fri, 27 May 2022 00:08:13 +0900

pragma solidity ^0.4.25;

contract ZombieFactory {

    event NewZombie(uint zombieId, string name, uint dna);

    uint dnaDigits = 16;
    uint dnaModulus = 10 ** dnaDigits;

    struct Zombie {
        string name;
        uint dna;
    }

    Zombie[] public zombies;

    function _createZombie(string _name, uint _dna) private {
        uint id = zombies.push(Zombie(_name, _dna)) - 1;
        emit NewZombie(id, _name, _dna);
    }

    function _generateRandomDna(string _str) private view returns (uint) {
        uint rand = uint(keccak256(abi.encodePacked(_str)));
        return rand % dnaModulus;
    }

    function createRandomZombie(string _name) public {
        uint randDna = _generateRandomDna(_name);
        _createZombie(_name, randDna);
    }

}

알게된 내용

1. 모든 solidity 코드는 버전 선언으로 시작한다.

2. 상태변수 (state Variable) 컨트랙트 저장소에 영구 저장된다 = 블록체인에 기록된다.

uint 부호 없는 정수, int 부호 있는 정수

부호 없다는 말은 값이 음수가 되면 안된다라는 의미이다.

uint는 실제로 uint256을 뜻하며, uint8/uint16/uint32 등과 같이 uint를 더 적은 비트로 선언할 수도 있다.

특별한 경우가 아니라면 uint만 사용 !

3. 복잡한 자료형을 다루기 위해서 struct 구조체를 사용한다. 여러 특성을 가진 자료형들을 struct 안에 한 번에 선언할 수 있다.

4. string은 임의의 길이를 가진 UTF-8 데이터를 위해 활용된다.

5. 함수 인자명 앞에 _(언더바)를 기입하는 것은 전역변수와 구별하기 위하는데, 이것은 관례이다. (의무는 아님)

6. 구조체 배열 생성하고 활용하는 법

struct Person { 
	uint age;
    string name; 
} 

Person[] public people; 

// Person 구조체를 통해 새로운 Person을 생성하고 people 배열에 추가 
// 새로운 사람 생성
Person JeongHoon = Person(31,"JeongHoon"); 

// JeongHoon을 배열에 추가한다. 
people.push(JeongHoon); 

//위의 두 줄을 조합하여 people.push(Person(31,"JeongHoon"));

* array.push()는 무언가의 배열 끝에서 모든 원소가 순서를 유지하도록 한다.

ex) uint[] numbers;

numbers.push(5);

numbers.push(10);

numbers.push(15);

// numbers 배열은 [5,10,15]와 같다.

위의 코드에서는 아래 부분이다.

   struct Zombie {
        string name;
        uint dna;
    }

    Zombie[] public zombies;

    function _createZombie(string _name, uint _dna) private {
        uint id = zombies.push(Zombie(_name, _dna)) - 1;
        emit NewZombie(id, _name, _dna);
    }

7. view() , pure() 함수

view 속성을 가진 함수는 Storage 레벨에 있는 자료를 읽어서 보여줄 수는 있지만, 수정할 수는 없다.

pure() 함수는 Storage 레벨에 있는 자료를 읽어오지도 못한다. 함수가 앱에서 어떤 데이터도 접근하지 못한다.

> solidity 컴파일러에서 어떤 제어자를 써야하는지 경고 메시지를 통해 알려준다.

8. keccak-256

SHA-1,SHA-2에 내재하는 보안 취약점을 개선하고자 개발된 해시화 알고리즘.

고정 길이의 해시값(메시지 다이제스트)을 출력하고 256비트 16진수로 변환하여 반 랜덤인 반환값 출력. 기본적으로 같은 문자가 입력되면 동일한 결과값이 출력되므로 반 랜덤.

9. solidity 이벤트

solidity의 모든 코드들은 컨트랙트를 통해 클라이언트와 통신한다.

ex) 메타마스크로 누군가에게 1 ETH 전송하며, 이 때 금액을 전송하는 행위는 '전송' 버틈을 누름과 동시에 진행된다.

이 전송 버튼이 눌려졌을 때 컨트랙트의 실행 내용이 일어나는 것이고, 전송 버튼은 항상 클라이언트의 요청에 귀기울이고 있는 이벤트이다.

// 이벤트 선언 
event IntegersAdded(uint x,uint y,uint result); 
function add(uint _x,uint _y) public { 
	uint result = _x + _y; 
 
// 이벤트를 실행하여 앱에게 add 함수가 실행되었음을 알린다 
	IntegersAdded(_x,_y,result); 
    return result; 
}

// 클라이언트 측의 결과 
YourContract.IntegersAdded(function(error,result){ 
 // 결과와 관련된 행동 
}

Udemy로 리액트 공부하기

bran_dy — Wed, 25 May 2022 23:26:30 +0900

Udemy 강의를 통해서 React,Next,Typescript.js를 공부하고 있다.

아직은 리액트 단계이지만, 내가 놓치고 있었던 부분들을 다시 한번 챙겨준다.

예를 들자면 export default ooo에서 default의 의미 같은 것들.

진짜 내가 개발 개념이 좀 많이 엉망이었구나를 깨닫게 해주는 유데미 강의이다 !

블록체인 220520 TIL) createNewBlock(),createNewTransaction()

bran_dy — Sat, 21 May 2022 00:24:54 +0900

blockchain.js

function Blockchain() {

    this.chain=[];
    this.newTransactions=[];
};

//새로운 블록 만들기
Blockchain.prototype.createNewBlock = function(nonce,previousBlockHash,hash){ 
    const newBlock = { // Blockchain 안의 새로운 블록 
        index: this.chain.length+1, // 블록 넘버 
        timestamp:Date.now(), //타임스탬프=블록이 생성된 시점 
        transactions:this.newTransactions, //새로운 블록을 만들었을 때 모든 새로운 트랜잭션,UTXO가 담김
        nonce:nonce, //자격증명에서 온 단순한 값. PoW를 통해 적법하게 새로운 블록을 만들었다는 증거
        hash:hash, // newBlock 객체에서 온 값 > newTransactions를 해싱 함수에 매개변수에 전달 (현재 블록 데이터 해싱)
        previousBlockHash:previousBlockHash, //(이전 블록 데이터 해싱)
    };
    this.newTransaction=[]; // 새로운 트랜잭션 배열을 초기호해야 새롭게 다음 블록을 생성할 수 있음
    this.chain.push(newBlock); //새로운 블록을 체인에 추가
    return newBlock;
}

module.exports=Blockchain;

test.js

const Blockchain = require('./blockchain');

const bitcoin=new Blockchain();
console.log(bitcoin);

실행 결과

createNewBlock() 메소드 테스트

chain의 배열 안에는 한 개의 블록, 또는 한 개의 객체가 담겨있다.

블록은 매개변수로 넘긴 nonce,previousBlockHash,hash 값을 갖고 있다.

timestamp,index 값도 가지고 있다.

createNewBlock 메소드 안에 여러가지 테스트 데이터를 넣어보자.

마주한 에러 1)

JS에서 배열에 요소를 추가하려고 하는 함수에서 오류 = 배열 안에 데이터가 정상적으로 추가되지 못함

해결 방법 : 중간에 배열 이름을 바꿨었는데 나도 헷갈려서 처음에 했던 배열명으로 다시 하고 나니 해당 오류는 없어졌다.

마주한 에러 2)

TypeError:  is not a function

난 함수로 정의했는데? 왜 이런 오류가 발생했는지 해당 메소드를 주석처리하고 다시 보니

해결 방법 : 나는 getLastBlock 이라고 선언했는데

함수를 호출할 때 getlastBlock()이라고 호출한 것이다. 그래서 위와 같은 오류가 발생한 것이다.

정리하자면

메소드(함수) 선언 : getLastBlock()

메소드(함수) 호출 : getlastBlock() 으로 한 것이다.

미결 트랜잭션들을 추가하기 위해서는 새로운 블록을 생성해야 한다.

기존에 블록이 2개 있었는데, 미결된 3가지의 트랜잭션을 처리하기 위해 새로운 블록을 만들고

console.log(bitcoin.chain[2])로 확인해보니 미결된 트랜잭션들이 새로운 3번째 블록에 잘 추가된 것을 확인하였다.

데이터 해싱하기

블록체인에서는 SHA256(어떤 입력값이든 주어진 입력값에 대해 언제나 동일한 출력값 반환)

ex) 안녕하세요 2C68318E352971113645CBC72861E1EC23F48D5BAA5F9B405FED9DDDCA893EB4

안녕하세요를 SHA256 변환기에 넣을때마다 한 번은 2C, 한 번은 3P ~ 이런 식으로 나오는게 아니라

변환기에 '안녕하세요'를 넣을때마다 위와 같이 동일한 해싱 값이 나온다는 것이다.

SHA256을 사용하기 위한 npm 라이브러리 설치를 하려고 했으나 너무 오래된 라이브러리라 그런지,, Error가 발생하며

hash.js를 사용할 예정이다.

npm i sha 256--save

220518 TIL) 다시보는 let,const, 화살표 함수

bran_dy — Thu, 19 May 2022 00:31:00 +0900

* 해당 강의는 Udemy의 React 완벽 가이드를 수강하고 작성한 TIL 입니다.

외국 강의이지만, 자막 설명은 물론 설명이 너무 잘 되어있어서 복기하기에 좋은 강의입니다 :)

1. let과 const의 차이점

let은 값을 수정할 수 있지만 const는 값을 수정할 수 없다. 그리고 JS에서는 대부분 const를 사용한다

const는 값이 변하지 않는 상수 변수이다.

var을 사용하면 값이 바뀐 그대로 나온다.

var 부분을 let 으로 변경하여도 brandy 그리고 jeonghoon이 출력된다.

그런데 여기서 let > const로 변경하면 어떻게 될까?

TypeError가 발생한다. 상수 변수에다 값을 재할당(brandy > jeonghoon)하려고 했기 때문이다.

즉, const는 새로운 값을 할당할 수 없다는 것이 특징이다.

2. 화살표 함수

일반 함수 형식

function myFnc() { 
	... 
}

화살표 함수 형식

const myFnc = () => {
    ....
}

() 안에는 인수가 들어간다. function을 생략하기 때문에 일반 함수 형식보다 간결하다.

JS에서 갖고 있었던 키워드 this로 인해 생겼던 문제 해결. 우리가 항상 원하는 객체를 참조하는 것은 아니다.

인수가 하나라면 괄호 생략 가능 = (name)이 아닌 name으로도 가능 (인수가 하나일때만 가능!!!)

만약 인수가 없다면 () 빈 괄호로 냅둬야 한다.

3. 중괄호,return 생략 case

중괄호 생략

이때 return을 삭제해야 한다. 인수가 한 개인 경우 둘러싼 괄호를 제거해서 더 짧게 줄일 수 있다.

라우터 설치,Unexpected use of 'location' no-restricted-globals

bran_dy — Fri, 13 May 2022 16:52:16 +0900

1. 페이지 이동을 위해 npm install react-router-dom을 설치하고 코드도 계속해서 보았는데 설정한 path대로 URL이 출력되지 않고 빈 화면만 나왔다. 구글로 서치하던 중에 기존에 설치했던 react-router-dom을 uninstall하고 npm install react-router-dom@5 로 했더니 원하던 결과가 출력되었다.

Unexpected use of 'location'  no-restricted-globals

의 경우 스택오버플로우를 참고해보니 location 변수를 사용하는 곳 위에

// eslint-disable-next-line no-restricted-globals 를 추가하라고 한다.

그대로 따라해보니 리액트에서 오류메시지는 뜨지 않았다.