[react]

react/my-app에서 

npm install react-router-dom@6

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

설치하려고 보니, 위와 같은 에러가 떴는데, 이는 패키지 의존성에 있어서 취약해질 수 있다는 경고다.

package-lock.json을 살펴보니 이미 설치된 패키기라서 에러가 떴었다.

 

router란 무엇인가?

라우팅의 개념을 간단하게 알아보면 사용자가 요청한 링크주소
즉, URL에 맞는 페이지를 찾아서 보여주는 것

MPA 방식에서는 여러페이지를 분리해두고 페이지간의 이동으로 이 라우트 시스템을 구축을 하지만,
그러나 SPA 방식의 리액트에서 라우트 시스템을 구축하기위해 React Router를 사용

React Router 이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있습니다.
이 라이브러리는 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있습니다.
신규페이지를 불러오지 않는 SPA에서 각각의 URL에 따라 선택된 페이지를 렌더링 해주는 라이브러리 라고 볼 수 있습니다.

https://shape-coding.tistory.com/entry/React-React-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-React-Router-%EC%84%A4%EC%B9%98

 

리액트는 index.js가 가장 먼저 실행된다. index.html 는 html을 보여주는데,index.js에서 기능별 단위인 컴포넌트를 임포트하고,가장 기본 라이브러리인 react와 react-dom/client에서 React와 ReactDOM을 가져온다. react-router-dom에서 React 등을 가져와서 쓴다.react-router-dom은 

 

동적인 값 state리액트에서는 useState

 

* 로컬 포트가 제대로 안 닫히는 경우 포트 강제 종료하는 법

리액트를 공부중에 npm start 명령어로 홈페이지를 열려고했는데, 포트가 이미 사용중이라고 다른 포트로 열겠냐고 물어보길래, 찾아봤다. 다른 포트로 열어도 지장 없었으나 찾아봤다.

1. 먼저 netstat 명령어로 사용중인 포트를 확인해야한다. 그러기 위해 net-tools를 설치해야한다.

sudo apt-get install net-tools

2. netstat -nap

Linux 명령 netstat -nap에서 -nap 옵션은 활성 네트워크 연결 및 관련 프로세스에 대한 정보를 표시하는 데 사용됩니다. 옵션의 각 부분이 의미하는 바는 다음과 같습니다.

• -n: 이 옵션은 netstat에 호스트 이름과 포트 번호를 기호 이름으로 해석하는 대신 숫자 주소를 표시하도록 지시합니다. 이렇게 하면 DNS 조회를 방지하여 성능을 향상할 수 있으며, DNS 확인이 실패하거나 시간이 오래 걸리는 경우 더 정확한 정보를 제공할 수 있습니다.
• -a: 이 옵션은 netstat에 수신 및 비수신 소켓을 모두 표시하도록 지시합니다. 기본적으로 netstat은 활성 연결만 표시합니다. -a 옵션을 사용하면 청취 상태에 있는 소켓도 포함됩니다.
• -p: 이 옵션은 netstat에 PID(프로세스 ID)와 각 소켓 또는 연결을 소유하는 프로그램 이름을 표시하도록 지시합니다. 이 정보는 /proc 파일 시스템에서 검색되며 어떤 프로세스가 어떤 네트워크 리소스를 사용하고 있는지에 대한 통찰력을 제공합니다.

sudo netstat -nap | grep :3000

??????????:~$ sudo netstat -nap | grep :3000
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name 
tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      723198/docker-proxy 
tcp        0      0 172.17.0.1:48812        172.17.0.3:3000         FIN_WAIT2   723198/docker-proxy 
tcp        0      0 172.17.0.1:38376        172.17.0.3:3000         FIN_WAIT2   723198/docker-proxy 
tcp        0      0 172.17.0.1:48796        172.17.0.3:3000         FIN_WAIT2   723198/docker-proxy 
tcp        0      0 172.17.0.1:52712        172.17.0.3:3000         FIN_WAIT2   723219/docker-proxy 
tcp        0      0 172.17.0.1:48804        172.17.0.3:3000         FIN_WAIT2   723198/docker-proxy 
tcp        0      0 172.17.0.1:52726        172.17.0.3:3000         FIN_WAIT2   723219/docker-proxy 
tcp        0      0 172.17.0.1:38390        172.17.0.3:3000         FIN_WAIT2   723198/docker-proxy 
tcp        0      0 172.17.0.1:54664        172.17.0.3:3000         FIN_WAIT2   723198/docker-proxy 
tcp6       0      0 :::3000                 :::*                    LISTEN      723219/docker-proxy

grep은 특정 포트를 검색할 수 있게 해주는 search 명령어다.

Active Internet connections (servers and established)

• Proto: 이 열은 TCP(전송 제어 프로토콜) 또는 UDP(사용자 데이터그램 프로토콜)와 같이 연결에 사용되는 프로토콜을 나타냅니다.
• Recv-Q: 이 열은 로컬 소켓에서 수신되기를 기다리는 데이터의 양(바이트)을 표시합니다. 소켓과 관련된 수신 버퍼의 크기를 나타냅니다. 데이터가 네트워크에서 도착하면 애플리케이션이 읽을 때까지 이 버퍼에 저장됩니다.
• Send-Q: 이 열은 로컬 소켓에서 전송되기를 기다리는 데이터의 양(바이트)을 표시합니다. 소켓과 관련된 전송 버퍼의 크기를 나타냅니다. 애플리케이션이 소켓에 데이터를 쓰면 네트워크를 통해 전송될 때까지 이 버퍼에 저장됩니다.
• Local Address: 이 열에는 연결 로컬 끝점의 IP 주소와 포트 번호가 표시됩니다. TCP 연결의 경우 일반적으로 소켓이 로컬 시스템에 바인딩된 IP 주소와 포트 번호를 표시합니다.
• Foreign Address: 이 열에는 연결의 원격 끝점의 IP 주소와 포트 번호가 표시됩니다. 설정된 TCP 연결의 경우 일반적으로 로컬 시스템이 연결된 원격 시스템의 IP 주소와 포트 번호가 표시됩니다.
• State: 이 열은 연결 상태를 나타냅니다. TCP 연결의 경우 'ESTABLISHED', 'CLOSE_WAIT', 'TIME_WAIT' 등과 같은 상태가 포함될 수 있습니다. UDP 소켓의 경우 상태는 일반적으로 'NONE'입니다.
• PID/Program name: 이 열은 소켓을 소유한 프로세스의 프로세스 ID(PID)와 프로그램 이름을 제공합니다. 프로세스가 잘 알려진 서비스와 연결된 경우 숫자 PID 대신 프로그램 이름이 표시될 수 있습니다.

Active UNIX domain sockets (servers and established)

netstat -nap에 나오는 columns에 대한 설명

• Proto: 이 열은 TCP(전송 제어 프로토콜) 또는 UDP(사용자 데이터그램 프로토콜)와 같이 연결에 사용되는 프로토콜을 나타냅니다.
• RefCnt: 이 열은 소켓의 참조 횟수를 나타냅니다. 참조 카운트는 커널의 특정 소켓 구조에 대한 참조 또는 포인터 수입니다. 커널이 소켓의 메모리 할당 및 할당 해제를 관리하는 데 도움이 됩니다.
• Flags: 이 열은 소켓과 관련된 다양한 플래그를 표시하여 해당 상태나 속성을 나타냅니다. 플래그에는 청취 소켓의 경우 'LISTEN', 설정된 연결의 경우 'ESTABLISHED', 닫히기를 기다리는 연결의 경우 'CLOSE_WAIT' 등이 포함될 수 있습니다.
• Type: 이 열은 TCP 소켓의 경우 'STREAM', UDP 소켓의 경우 'DGRAM'과 같은 소켓 유형을 나타냅니다.
• State: 이 열은 연결 상태를 나타냅니다. TCP 연결의 경우 'ESTABLISHED', 'CLOSE_WAIT', 'TIME_WAIT' 등과 같은 상태가 포함될 수 있습니다. UDP 소켓의 경우 상태는 일반적으로 'NONE'입니다.
• I-Node: 이 열은 소켓과 관련된 inode 번호를 표시합니다. inode는 데이터 구조체이다

도커 시작 전의 3000포트는 검색 되지 않는다.

그러나 3000포트로 포트포워딩된 도커 컨테이너를 실행하면 아래와 같이 listen상태가 된다.

hd@tolfromj:~$ sudo netstat -nap | grep :3000
tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      1022392/docker-prox 
tcp6       0      0 :::3000                 :::*                    LISTEN      1022399/docker-prox

 

이후, 컨테이너에서 react로 html을 열면 아래와 같이 뜬다.

hd@tolfromj:~$ sudo netstat -nap | grep :3000
tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      1022392/docker-prox 
tcp        0      0 127.0.0.1:3000          127.0.0.1:38732         TIME_WAIT   -                   
tcp        0      0 127.0.0.1:3000          127.0.0.1:35664         ESTABLISHED 1022392/docker-prox 
tcp        0      0 172.17.0.1:36520        172.17.0.3:3000         ESTABLISHED 1022392/docker-prox 
tcp        0      0 127.0.0.1:38748         127.0.0.1:3000          ESTABLISHED 3966/chrome --type= 
tcp        0      0 127.0.0.1:3000          127.0.0.1:38748         ESTABLISHED 1022392/docker-prox 
tcp        0      0 127.0.0.1:35664         127.0.0.1:3000          ESTABLISHED 3966/chrome --type= 
tcp        0      0 172.17.0.1:55668        172.17.0.3:3000         ESTABLISHED 1022392/docker-prox 
tcp6       0      0 :::3000                 :::*                    LISTEN      1022399/docker-prox

 

홈페이지를 끈 상태

tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      1022392/docker-prox 
tcp        0      0 127.0.0.1:3000          127.0.0.1:33560         TIME_WAIT   -                   
tcp6       0      0 :::3000                 :::*                    LISTEN      1022399/docker-prox

 

만약 강제 종료하고 싶으면 해당 프로세스를 kill -9 명령어로 종료하면된다.

 

# kill -9 <PID>
sudo kill -9 1038112