1. React 프로젝트 Express 설정

• 먼저 express, cors를 설치한다.
• root 경로에 server.js 파일 생성 후 작성한 코드다. 참고 링크

  const express = require('express')
  const path = require('path')
  const app = express()
  

app.use(express.json()) const cors = require('cors') app.use(cors())

app.use(express.static(path.join(dirname, './build'))) app.get('/', (res, req) => { req.sendFile(path.join(dirname, './build/index.html')) })

app.get('*', (res, req) => { req.sendFile(path.join(__dirname, './build/index.html')) })

app.listen(8000, () => { console.log('Listening on 8000') })

****

### 2. Nginx 설치
- AWS EC2 인스턴스 환경에 따라 Nginx를 설치한다.

$ sudo yum install nginx // Amazon Linux 1 환경 $ sudo amazon-linux-extras install nginx1.12 // Amazon Linux 2 환경

****

### 3. React 앱 build
- 프로젝트 내부 root에서 `yarn install`후 `build`를 생성한다. (두 과정은 새로운 버전 배포할 때마다 이뤄져야 한다.)

$ yarn install $ yarn run build

사실 여기서부터 삽질의 연속이었다... 

### 오류와 삽질의 연속...
`build`를 하면 `Creating an optimized production build..`에서 멈추고 진행이 끝나지 않았다. 꽤나 큰 규모의 플젝이라면 빌드시 소스맵을 생성하게 되면 메모리 부족 현상일 일어날 수 있다고 해서 소스맵 관련 설정을 추가했다.

#### 빌드시 GENERATE_SOURCEMAP 옵션 off
하지만 이 방법도 해결되진 않았다. 그래도 나중에 참고할 일이 있을 것 같아 기록한다.
[소스맵이란?](https://velog.io/@racoon/React-build-%EC%8B%9C-sourcemap-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0) 
[스택오버플로우](https://github.com/coreui/coreui-free-react-admin-template/issues/178)
[관련 링크](https://progdev.tistory.com/26)

// GENERATE_SOURCEMAP=false 추가 "scripts": { "start": "node server.js", "build": "GENERATE_SOURCEMAP=false react-app-rewired build", ... 중략 },

#### 메모리 스왑을 통한 메모리 부족 현상 처리
aws ec2 프리티어의 t2.micro를 사용하는데 이건 RAM이 1GB밖에 안돼서 빌드 규모가 커져도 진행이 안된다고 한다. 그래서 부족한 부분을 디스크의 일부를 대신 사용하도록 설정해줬다.

1. sudo dd if=/dev/zero of=/mnt/swapfile bs=1M count=2048
2. sudo mkswap /mnt/swapfile
3. sudo swapon /mnt/swapfile

   그러고 build 실행하니 아래 에러 발생…
   > FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
   

heap size 때문에 문제가 발생해 리눅스 서버에서 bashrc에 아래 코드로 설정을 추가했다.

vi ~/.bashrc

// bashrc에 아래 설정 추가
export NODE_OPTIONS="--max-old-space-size=8192"

source ~/.bashrc

filezilla로 build 파일 전송

위의 방법으로도 해결이 안되어서 생각해낸 방법이 build 파일만 filezilla를 통해 ec2에 전송하는 것이었다. filezilla 다운로드 및 접속은 링크를 통해 설치했다.

근데 react 플젝 폴더 권한이 root여서 filezilla에서 root로 로그인해야했다. (터미널에서 해당 폴더 권한을 711로 바꿔줘도 ec2-user로 변경되지 않았음)

filezilla에서 root 로그인을 위한 설정을 터미널에서 하다가 에러를 만났다.

$ service sshd restart Error: No space left on device

그래서 링크를 참고해 볼륨을 수정해줬다. 그런데 리사이즈하다가 또 에러를 만났다...

$ sudo resize2fs /dev/xvda 1 resize2fs: Device or resource busy while trying to open /dev/xvda

그래서 아래의 방법으로 변경해줬다. 관련 링크

$ sudo resize2fs /dev/xvda 1
resize2fs: Device or resource busy while trying to open /dev/xvda

드디어 해결!

아까 막혔던 filezilla에서 root 로그인을 위한 설정을 다시 했다.

$ service sshd restart

근데 웬걸? root 계정에서 쉽게 ec2-user로 권한 설정 변경이 되는 것 아닌가?

$ sudo chown -R ec2-user /home/ec2-user/kollus-analytics-portal-sample

그 후 로컬에서 프로젝트 build 후 build된 파일은 filezilla를 통해 ec2에 옮겼다.

로컬에서 build시 제대로 안되는 경우

npm run build시 어떤 지시사항이 나오는 경우가 있다. 그래서 위 사진처럼 serve -s build명령어를 입력했다. 만약 안되는 경우 serve 패키지가 없는 거라 npm i -g serve로 먼저 설치한다. 따라해보니 Serving이라는 메세지와 함께 5000번 포트에서 제대로 동작한다.

4. NginX 설정

Nginx와 관련된 설정 파일들은 /etc 하위에 존재하므로, sudo 권한을 이용해서 파일 생성과 수정 등을 해야 한다.

nginx.conf 수정

• nginx.conf 내에서 React 프로젝트의 build로 바로 이어지게 설정할 수도 있지만, 설정들을 깔끔하게 관리하기 위해서 일반적으로 선호되는 방식은 /etc/nginx 내에 sites-enabled 디렉토리를 생성하여 여기에 각 서비스의 설정을 넣고 nginx.conf가 이들을 확인하도록 하는 것이다.
• 지금은 앞서 말한 대로 sites-enabled 디렉토리에 따로 설정을 만들어줄 것이므로, server 블럭 행들은 모두 주석 처리(행 앞에 #) 하도록 한다. 그리고 server 블럭 바로 위에 아래와 같이 include /etc/nginx/sites-enabled/*.conf;를 추가함으로써 sites-enabled 하위의 설정 파일들을 포함하도록 한다.

  $ sudo vi /etc/nginx/nginx.conf
  

// /etc/nginx/nginx.conf 파일 수정 ...

include /etc/nginx/conf.d/.conf; (✨ 코드 추가) include /etc/nginx/sites-enabled/.conf;

server {

listen 80 default_server;

listen [::]:80 default_server;

server_name _;

root /usr/share/nginx/html;

# Load configuration files for the default server block.

include /etc/nginx/default.d/*.conf;

location / {

}

error_page 404 /404.html;

location = /40x.html {

}

error_page 500 502 503 504 /50x.html;

location = /50x.html {

}

}

...

#### sites-available, sites-enabled 설정
일반적인 방식은 sites-available 디렉토리에 필요한 파일들을 작성한 후 이들과 연결되는 symbolic link(symlink)를 sites-enabled에 추가하는 것이다. 때문에 /etc/nginx 내부에 두 디렉토리를 모두 생성해 준다. 그리고 sites-available 내에 원하는 이름으로 설정 파일을 생성해 열도록 한다.

$ sudo mkdir /etc/nginx/sites-available $ sudo mkdir /etc/nginx/sites-enabled $ sudo vi /etc/nginx/sites-available/원하는 파일명.conf

지금은 도메인 등록도 되어있지 않고, HTTPS를 위한 준비도 되어있지 않으므로, HTTP에 해당하는 port 80에 대해서 아주 기본 설정만 포함한다.

server { listen 80; location / { root /home/ec2-user/#######/#######/build; index index.html index.htm; try_files $uri $uri/ /index.html; } }

- location 뒤의 `/`는 directive라고 하는 부분인데, IP 주소나 도메인의 뒷부분인 URI에 대응된다. `/`만 쓰면 `‘/’`로 시작하는 모든 URI에 해당한다는 것으로 현재 설정은 이 인스턴스의 IP 주소로 port 80을 통해 들어오는 모든 URL을 연결시켜주는 것이다.
- root 행에는 아까 Git을 통해 가져온 프로젝트 내부의 `build 디렉토리 경로`를 입력한다.

#### sites-enabled > symlink 생성 및 Nginx 설정 테스트
- 아래와 같은 내용이 출력되면 설정의 문법이 정상적이라는 것이다.

$ sudo ln -s /etc/nginx/sites-available/이전에 설정한 파일명.conf /etc/nginx/sites-enabled/이전에 설정한 파일명.conf $ sudo nginx -t

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful

#### Nginx 동작
이제 Nginx를 동작시키고, 웹 브라우저에서 AWS EC2 인스턴스 IP 주소를 입력하면 build한 React 앱으로 연결되는 것을 확인할 수 있다.
(AWS EC2 인스턴스 IP 주소로 바로 연결할 때 https로 들어가지는데, 현재는 http만 설정했기 때문에, http로 수정하면 들어가질 것이다.)

$ sudo systemctl start nginx

만약, `500 Internal Server Error`가 발생한다면, build까지의 경로로 접근할 때 거치는 디렉토리들에 대해 외부에서의 실행 권한이 없어서 발생하는 문제일 가능성이 높으므로, 홈 디렉토리인 /home/ec2-user의 권한을 others의 실행 권한을 포함한 711로 설정한다.

$ chmod 711 /home/ec2-user

#### Express 서버 구동
나의 경우 프로젝트 서버 관련 파일이 server.js고 package.json에 서버 구동 관련 설정을 해놨다.
따라서 ec2에서 `yarn start`명령어를 통해 서버를 구동시켰다.
``` tsx
"scripts": {
    "start": "node server.js", // (*)
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
      ... 중략
  },

큰 흐름

• 로컬에서 프로젝트 build
• 프로젝트 업뎃시 ec2에서 git pull (main에 머지한 거 아니면 특정 브랜치 선택!)
• 혹시 pull 하고 ec2에서 플젝 내에 node_modules 폴더 없다면 yarn install
• 빌드 파일만 따로 fileZilla 통해서 전달 (원래는 ec2에서 yarn run build)
• nginx 동작 시키기 sudo systemctl start nginx
• express 서버 동작시키기 yarn start
• 혹여나 ec2 용량이 부족하다면 아래 명령어 실행 ```

1. sudo dd if=/dev/zero of=/mnt/swapfile bs=1M count=2048
2. sudo mkswap /mnt/swapfile
3. sudo swapon /mnt/swapfile ```

• 마지막으로 aws ip주소로 접속~ -> http://aws ip 주소:8000/(port번호는 플젝에서 express 8000으로 설정했기 때문에 마지막이 8000)

이로써 Nginx로 React 앱 배포 성공 !!!

1. 인스턴스 생성

• AWS EC2 접속해 나의 경우 무난한 linux 서버를 선택했다.
• 인스턴스 유형은 프리티어, 나머지 옵션은 기본값을 선택했다.
• 보안 그룹에서 Nginx로 react를 배포하기에 http를 추가했고 node.js 개발에서 사용한 서버 포트 번호를 설정했다. (가려져 있는 건 사용중인 ip다)
  • 키페어 생성 및 설정
    • 프라이빗 키(.pem)을 보안된 위치인 .ssh 하위 디렉터리에 저장
      • 필자의 경우 ssh 폴더가 존재하지 않아 따로 생성했다. 관련 링크
      • 프라이빗 키(.pem)의 권한 설정

// ssh 하위 디렉토리에 프라이빗 키 이동
mv ~/Downloads/key이름.pem ~/.ssh/key이름.pem

// 프라이빗 키 권한 설정
chmod 400 ~/.ssh/key이름.pem

2. 인스턴스 연결

• AWS 페이지 > 인스턴스 선택 > 연결 > ssh 클라이언트 연결 방법에 나와 있는 예시 복사 후 터미널에 입력

  ssh -i [프라이빗 키(.pem)경로] [AMI의 사용자 이름]@[인스턴스의 퍼블릭 DNS]

3. github 연동 (ssh)

• ssh key 생성을 위해 .ssh 폴더로 이동 후 keygen 명령어를 통해 .pub의 공개키를 생성

  cd ~/.ssh
  ssh-keygen -t rsa -C github계정 메일(example@github.com)

• ls 명령어 입력 > id_rsa.pub 파일 생성됨

  cat id_rsa.pub
  ssh-rsa 어쩌구저쩌구~~~ 내 메일 계정

• github에 ssh key 등록 (settings > SSH and GPG keys > New SSH Key 후 복붙)

4. 필요한 package 설치

• root 권한으로 설치가 가능하기에 전환 후 필요한 패키지 설치 참고 AWS 공식문서

  sudo su
  

// yarn, node.js 설치 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash . ~/.nvm/nvm.sh nvm install --lts node -e "console.log('Running Node.js ' + process.version)"

// git 설치 sudo yum update // 초기에 package 들을 update 해준다. sudo yum install git

- 마지막으로 프로젝트 코드를 clone한다.

git clone [url]

// 특정 branch만 clone하고 싶은 경우 git clone -b {branch_name} --single-branch {저장소 URL} ex) git clone -b javajigi --single-branch https://github.com/javajigi/java-racingcar

오늘 한 것

• 오늘 한 일

오늘 배운 것

뭐 배웠지

기술명

• 서술

에러 해결

에러명

원인

• 원인 쓰자

해결

• 해결방법

에러 원인

5000번 포트가 현재 다른 프로세스에서 사용중이기에 해당 포트를 사용하는 현재 서비스를 시작할 수 없다는 에러 메세지 (에러 포트 번호가 5000번이 아닐 수도 있음)

해결 방법

5000번 포트를 사용하는 프로세스를 찾고, 필요하지 않은 경우 종료를 해야 한다.

(1) macOS에서 포트 사용하는 프로세스 찾기 및 죽이기

// 터미널에 활성화된 프로세스 리스트 출력
lsof

// 특정 포트 사용 중인 프로세스 조회
lsof -i TCP:5000

COMMAND     PID          USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
ControlCe  1495 baekjeongyeon   23u  IPv4 0xb1ac9a99ec85b0cb      0t0  TCP *:commplex-main (LISTEN)
ControlCe  1495 baekjeongyeon   24u  IPv6 0xb1ac9a9ebac2a583      0t0  TCP *:commplex-main (LISTEN)
Google    13434 baekjeongyeon   46u  IPv6 0xb1ac9a9ec6ffc883      0t0  TCP localhost:51824->localhost:commplex-main (CLOSE_WAIT)

// 원하는 프로세스 죽이기 (kill 명령어로 강제로 종료 및 -9는 kill의 강제 종료 시그놀인 9번을 사용한다는 의미)
kill -9 1495

그런데 자세히 보면 command 종류가 node가 아닌 ControlCe였다..!

(2) macOS Monterey 관련 이슈 해결

Monterey로 업데이트 하면서 생긴 문제 같다.

• 시스템 환경 설정 - 공유 - AirPlay 수신 모드 항목의 체크를 해제

• 이후에 5000번 포트 사용 프로세스 조회시 깔끔하게 없어짐

참고 자료(Reference)

apple.developer

오늘 한 것

• Node.js + Express로 임시 서버 생성 및 리액트 연결

  // terminal
  npm install nodemon -g
  

// project npm install express nodemon concurrently

- AWS EC2 인스턴스 생성 및 서버에 NGINX를 통한 배포 (진행중)

<br />

### 오늘 배운 것
### nginx와 express는 무엇이고 왜 쓰는지?
**nginx**
- 동시 접속 처리에 특화된 웹서버로 클라이언트로부터 http 요청을 받아 요청에 해당하는 파일을 http 통신을 통해 응답해주는 프로그램
- 웹서버 특성상, WAS와는 다르게 정적 컨텐츠 호스팅에 특화되어있고 이 밖에 리버스 프록시, 캐싱, 로드 밸런싱, 미디어스트리밍 등 유용한 여러 역할을 수행한다.
- 가벼움과 높은 성능 지향

**리버스 프록시 서버**
- 내부 애플리케이션과 외부 클라이언트 사이에 자리 잡아 클라이언트 요청을 적절한 서버로 보내주는 역할
- Node.js나 tomcat 같은 많은 어플리케이션들은 스스로 서버와 같은 역할을 하지만 Nginx에서 제공하는 로드 밸런싱, 보안, 가속화 등의 이유로 Nginx 사용
![](https://velog.velcdn.com/images/raccoon-ccoder/post/3402eab4-8e20-4607-9f9e-98310b712348/image.png)
![](https://velog.velcdn.com/images/raccoon-ccoder/post/8e5b945f-0589-4b77-bf2c-c00081f45913/image.png)

**express**
- Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크
- 쉽게 말하면 NodeJS를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체

### node.js 사용시 nodemon 설치해서 사용하는데 nodemon은 뭐지?
nodemon
- node.js를 이용하는 파일들은 수정을 해도 반영이 바로 안되고 서버를 재시작해줘야 반영이 되기 때문에 번거롭다. nodemon은 코드가 수정될 경우 자동으로 서버를 재시작 해주기 때문에 편리하게 사용할 수 있다.

### concurrently 라이브러리는 뭐고 언제 써?
concurrently
- 리액트와 익스프레스를 동시 실행해주는 역할을 한다.

<br />

### 에러 해결
### Error: listen EADDRINUSE: address already in use :::5000
원인 -  5000번 포트가 현재 다른 프로세스에서 사용중이기에 해당 포트를 사용하는 현재 서비스를 시작할 수 없다는 에러 메세지 (에러 포트 번호가 5000번이 아닐 수도 있음)

해결 - 5000번 포트를 사용하는 프로세스를 찾고, 필요하지 않은 경우 종료를 하거나 macOS Monterey 관련 이슈일 경우, 시스템 환경 설정 - 공유 - AirPlay 수신 모드 항목의 체크를 해제한다.

### Can't find .ssh directory 
mkdir -p ~/.ssh 로 직접 생성하기

오늘 한 것

• 차트 css 수정 및 부제목 추가
• card collapse하는 설정 버튼 css 수정 및 아이콘 hover시 nametag 띄워주는 tooltip 추가
• 최초 렌더링시 화면을 가득 채우기 위한 차트 필터 초기값 설정

오늘 배운 것

initializeState - Recoil에서 state initialization 하기

function MyApp() {
  function initializeState({set}:MutableSnapshot) {
    set(myAtom, 'foo');
  }

  return (
    <RecoilRoot initializeState={initializeState}>
      ...
    </RecoilRoot>
  );
}

• MutableSnapshot을 통해 상태를 초기화하기 위한 선택적인 initializeState  prop을 취한다. 이는 모든 atom을 미리 알고 있고, 상태가 동기적으로 설정되어야하는 서버사이드렌더링과 호환되는 경우 지속되는 상태를 로딩하는데에 유용할 수 있다.
  • 나는 비동기 처리를 위해 react-query를 사용하였기에 queryClient.fetchQuery로 데이터를 불러와 set함수를 통해 초기값을 설정하였다.

const initializeState = async ({set}: MutableSnapshot) => {
  const broadcastKeyList = await queryClient.fetchQuery('api 주소')

  set(broadcastTimeAtom, {
    broadcastKey: broadcastKeyList[broadcastKeyList.length - 1],
    timeGroup: '5m',
    timeGroupNumber: 60 * 5,
  })

  set(joinChartFilterAtom, [...broadcastKeyList.slice(-5)])
}

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot initializeState={initializeState}>
      // 생략
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
)

queryClient.fetchQuery - 쿼리를 가져오고 캐시하는데 사용할 수있는 비동기 메서드

• useQuery와 거의 흡사하지만 일부 옵션은 해당 메서드에서 사용이 불가하다.

에러 원인

TypeScript는 기본적으로 객체의 프로퍼티를 읽을 때, string타입의 key 사용을 허용하지 않는다. 아래의 코드에서 에러가 발생한 이유는 string literal타입만 허용되는 곳에 string 타입을 사용했기 때문이다.

// 객체를 기본값으로 가진 recoil atom 생성
const chartFilterAtom = atom({
  key: 'chartFliterAtom',
  default: {
    chatCount: true,
    joinCount: true,
    likeCount: true,
    joinAndLeave: true,
    chatTotal: true,
  },
});

// atom 상태를 변경할 수 있는 setChartFilter 함수에서 이전 상태를 filters라는 인자로 전달 받아 string 타입의 key로 객체 프로퍼티 접근 시 에러 발생
const [chartFilter, setChartFilter] = useRecoilState(chartFilterAtom);
setChartFilter(filters => {
    for(const key in filters) {
        console.log(`${filters[key]}`) // error !
    }
})

해결 방법

Index Signature 선언하기

아래 코드처럼 객체에 index signature를 추가함으로써 string타입과 literal type 모두를 사용해서 객체에 접근할 수 있다. 아래처럼 index signature가 선언된 경우 모든 프로퍼티가 해당 타입에 속해야 한다.

interface IChartFilter {
  [key: string]: boolean // index signature 추가, key는 정해진 키워드가 아니며 변경 가능하다.
  chatCount: boolean
  joinCount: boolean
  likeCount: boolean
  joinAndLeave: boolean
  chatTotal: boolean

  // Error case
  iAmWrongType: number // error! Property 'iAmWrongType' of type 'number' is not assignable to string index type 'boolean'.
}

const chartFilterAtom = atom<IChartFilter>({
  key: 'chartFliterAtom',
  default: {
    chatCount: true,
    joinCount: true,
    likeCount: true,
    joinAndLeave: true,
    chatTotal: true,
  },
})

const [chartFilter, setChartFilter] = useRecoilState(chartFilterAtom);
setChartFilter(filters => {
    for(const key in filters) {
        console.log(`${filters[key]}`) // ok
    }
})

[번외] String과 String literal의 차이

아래의 TypeScript 코드에서 b와 c는 string 타입이지만 a는 "Hello World"타입이다. b변수는 let으로 선언되어 재할당이 가능해 어떤 문자열이든 넣을 수 있기에 컴파일러는 이 변수를 string 타입으로 추론한다. 그리고 c변수는 명시적으로 string 타입으로 선언했기에 string 타입이다.

const a = "Hello World"
let b = "Hello World"
const c: string = "Hello World"

하지만 a의 경우 컴파일러는 string이 아닌 더 좁은 타입(narrowed type)으로 선언한 것으로 추론한다. 이것을 Literal Narrowing이라고 한다.

따라서 a의 타입을 string이 아닌 string타입을 좁혀 만든 string litreal type이다. 여기서 '좁힌다'의 의미는 무한대의 경우의 수를 가질 수 있는 string 타입보다 훨씬 구체적인 string의 부분 집합, "Hello World"만을 허용하는 타입을 선언했다는 뜻이다.

아래와 같이 명시적으로 literal type을 선언하면 let으로 선언된 변수도 "Hello World"타입만을 허용하도록 만들 수 있다.

type HelloWorldType = "Hello World" // literal type

let a: HelloWorldType = "Hello World" // ok
a = "hahaha" // compile error: "hahaha"는 "Hello World"가 아니기 때문.

String Literal의 유용함

string literal 타입은 열거형 타입처럼 사용할 때 매우 유용하다. 예를 들어 마우스 이벤트를 처리하는 함수가 있다고 하자. 마우스 이벤트의 종류는 이미 정해져 있을 것이다. JavaScript의 방법대로 이벤트 이름을 string타입으로 받을 수 있다. 하지만 오타 혹은 유효하지 않은 이벤트 이름으로 인해 발생하는 런타임에러를 사전에 방지할 수 없다.

function handleEvent(event: string) {}
handleEvent("click")
handleEvent("clock") // compile error: 오타. 컴파일 타임에 발견할 수 없다.
handleEvent("hover") // compile error: 유효하지 않은 이벤트 이름. 마찬가지로 컴파일 타임에 걸러낼 수 없다.

다음의 예제과 같이 string literal 타입 조합만을 허용하도록 하도록 수정한다. 여기서 |은 union type을 의미하며 두 개의 타입 이상을 결합할 수 있다.

type EventType = "mouseout" | "mouseover" | "click"
function handleEvent(event: EventType) {}
handleEvent("click")
handleEvent("hover") // compile error: Argument of type '"hover"' is not assignable to parameter of type 'EventType'.

이렇게 string literal 타입을 활용하면 "clock"과 어이 없는 오타를 컴파일 타임에 알 수 있으며, IDE에서 제공하는 suggestion 기능(ctrl + space) 편리함을 누릴 수도 있다.

Index Signature 선언으로 String key를 이용한 객체 접근

type ObjType = {
  [index: string]: string
  foo: string
  bar: string
}

const obj: ObjType = {
  foo: "hello",
  bar: "world",
}

const propertyName1 = "foo"
const propertyName2: string = "foo"

console.log(obj[propertyName1]) // ok
console.log(obj[propertyName2]) // ok

위와 같이 객체에 index signature를 추가함으로써 string타입과 literal type 모두를 사용해 객체에 접근할 수 있게 되었다. 참고로 index signature가 선언된 경우 모든 프로퍼티가 규칙을 따라야 하며 그렇지 않으면 에러 가 발생한다.

type ObjType = {
  [key: string]: string
  foo: string
  bar: number // error! Property 'bar' of type 'number' is not assignable to string index type 'string'.
}

참고 자료(Reference)

stckoverflow String과 String literal의 차이

오늘 한 것

• 대시보드 header에 card 컴포넌트들 collapse 효과 여부의 전역 상태를 관리하는 버튼 구현
• 차트 컴포넌트 필터 목록 역순으로 수정
• Bootstrap card css를 미리 만들어두었지만... 부장님과 상의 끝에 다른 쪽으로 방향을 바꾸는 것이 낫겠다 싶어 수정 또 수정..!
• 바 레이스 차트 필터 버튼 클릭시 드롭다운 안되는 에러 해결 -> Card 레이아웃 컴포넌트가 차트 컴포넌트 내에 포함되는 구조였고 차트 필터 변경시 컴포넌트가 리렌더링 되면서 Card 컴포넌트도 리렌더링되어 bootstrap으로 제작된 버튼 기능 오류 발생 -> 아예 대시보드 페이지에서 레이아웃 컴포넌트 + 차트 컴포넌트 이런 식으로 사용하는 것이 나은지 고민이다...

오늘 배운 것

리액트 라이브러리 사용시 label 태그에서 for -> htmlFor 속성 사용

Type '{ children: string; className: string; for: string; }' is not assignable to type 'DetailedHTMLProps<LabelHTMLAttributes, HTMLLabelElement>’

• class -> className인것처럼 label에서는 for -> htmlFor 사용해야 한다.

useQuery에서 받은 데이터 관련 옵션

{
      select: data => data.reverse()
}

• select : data 받아와서 reverse()하고 싶은 경우 옵션 설정

오늘 한 것

• Bootstrap card css 생성 및 레이아웃 적용
• card header에 차트 드래그 앤 드랍 및 삭제 버튼 디자인 적용 및 기능 구현
• 차트 드래그시 놓여질 위치 css 적용 (className=draggable-source--is-dragging)

오늘 배운 것

TypeScript에 string key로 객체에 접근하는 방법

TypeScript에서는 기본적으로 객체의 프로퍼티를 읽을 때, string타입의 key 사용을 허용하지 않기에 아래처럼 코드를 작성하면 컴파일 에러를 만나게 된다.

const obj = {
  foo: "hello",
}

let propertyName = "foo"

console.log(obj[propertyName]) // compile error!

따라서 객체에 index signature를 추가하여 해결한다.

type ObjType = {
  [index: string]: string
  foo: string
  bar: string
}

const obj: ObjType = {
  foo: "hello",
  bar: "world",
}

const propertyName1 = "foo"
const propertyName2: string = "foo"

console.log(obj[propertyName1]) // ok
console.log(obj[propertyName2]) // ok

참고 자료(Reference)

TypeScript에서 string key로 객체에 접근하기

오늘 한 것

• 포틀릿을 통한 차트 이동 구현
• gh-pages 배포시 cors 문제 해결 (야매로 한 거라 다시 봐야할 듯 싶다)
• Bootstrap Card 레이아웃 생성 및 Card header에 있는 특정 아이콘 클릭시에만 차트 드래그 앤 드랍 구현

오늘 배운 것

@shopify/draggable Draggable 속성

handle - 특정 버튼 클릭시에만 drag & drop 가능하게 구현 plugins: [Plugins.SortAnimation] - drag & drop 시 부드러운 애니메이션 및 주변 컴포넌트 상하좌우 움직이게 적용

<div class="box red">
    <div class="draggable-handle">
</div>

const sortable = new Sortable(containerEl, {
  draggable: '.box',
  handle: '.draggable-handle', // handle에 작성한 클래스 가진 요소를 눌렀을 때만 컴포넌트 이동 가능
  sortAnimation: {
    duration: 200,
    easingFunction: 'ease-in-out',
    horizontal: true
  },
  plugins: [Plugins.SortAnimation] // 상하 좌우로 주변 컨테이너 이동 (1.0.0@beta12버전부터 추가)
});

echarts 공백 제거 방법

grid - 속성으로 원하는 만큼의 공백을 제거한다.

grid: {
  left: 0,
  top: 0,
  right: 0,
  bottom: 0
}

에러 해결

react 프로젝트 gh-pages에 배포시 cors 문제 해결

개발 단계에서는 http-proxy-middleware 모듈을 이용해 proxy 설정으로 CORS 문제를 해결했지만 배포 단계에서는 지원이 되지 않기에 CORS 문제가 발생했다. 여러 방법을 사용해봤지만 다 안되었다... 당장 배포해서 회의 때 진행 상황을 보고해야 했기 때문에 일단 급하게 아래와 같은 방법을 사용했다.

해결 방법

axios 설정에서 withCredentials값을 false로 수정한다.

axios({
    method: 'get',
    url: `https://hello`,
    withCredentials: false, // withCredentials를 false로 설정
    params: {
      access_token: SECRET_TOKEN,
    },
  });

참고 자료(Reference)

echarts grid CORS - stackoverflow

오늘 한 것

에러 해결

터미널에서 Git id, password로 로그인 안되는 현상 해결

• 2021.08월 이후 id/pw 방식이 아닌 token을 이용해 로그인하기에 발생하는 문제로 아래의 방법으로 해결

해결 방법

1. 깃헙 접속해 로그인
2. Settings > Developer setting > Personal access tokens에서 새 토큰 생성
3. Note란에는 원하는 사용처 입력 후 expiration에서 사용 기간 선택 후 scope에서 repo 선택
4. token 선택되면 꼭 다른 곳에 복사 !!!! (한번 보고 보여지지 않음)
5. 로컬 컴퓨터의 깃에 등록

   git config --global user.name '깃헙 ID'
   git config --global user.password '복사한 토큰'

global로 등록하지 않고 git pull 사용할 때 다시 id/pw 입력하라 하면 본인 깃헙 아이디, 복사한 토큰을 패스워드로 전달하면 된다.

git clone 후 npm i 시 생기는 에러 (ERESOLVE could not solve) - 라이브러리 충돌 문제

• 아래 에러를 보면 react-query-devtools@2.6.3의 react-query@3.39.2 버전과 설치된 react-query@3.34.12 버전 차이로 인해 충돌이 일어났다.

해결 방법

해당 프로젝트에서 react-quert-devtools 라이브러리가 필요하지 않아 삭제하였고 package-lock.json 파일, node_modules 폴더 삭제 후 react-query는 2버전으로 낮춘 후 패키지를 다시 설치했다.

npm i --legacy-peer-deps

참고 자료(Reference)

stackoverflow 내 깃헙 정리 자료

해결 방법

1. jest-canvas-mock 라이브러리 설치

npm i --save-dev jest-canvas-mock

2. package.json에 아래 설정 추가

{
  "jest": {
    "setupFiles": [
      "jest-canvas-mock"
    ],
  }
}

참고 자료(Reference)

jest-canvas-mock 라이브러리 stackoverflow

해결 방법

1. package.json에 jest 관련 절대 경로 및 별칭 설정

"jest": {
    "moduleNameMapper": {
      "@test/(.*)": "<rootDir>/src/test/$1",
      "@/(.*)": "<rootDir>/src/$1"
    }
  }

2. 프로젝트 root에 jest.config.js 파일 생성 후 설정

module.exports = {
  "roots": [
    "<rootDir>/"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  }
}

오늘 한 것

• 채팅 api 연동 및 데이터 차트 컴포넌트에 뿌려주는 작업 드디어 끝!! 피드백 받으면서 api에 대해 모호했던 것들을 확실히 이해할 수 있었다.

오늘 배운 것

Date.toISOString()

자바스크립트 Date 객체를 ISOString(yyyy-mm-ddThh:mm:ss)형식의 문자열로 반환하는 방법 사용하는 api에는 time 데이터가 해당 형식으로 이뤄져 있는데 이상하게 현재 시간으로 조회해도 이전의 시간으로 변형되어 왜 그런건지 이해를 못해 개발을 하는데 좀 헤맸었다. 이유는 우리나라 Time Zone이 아니라 UTC타임존(zero offset)을 사용하기 때문이다. UTC를 기준으로 Date 객체를 가공하고 싶다면 setHours()가 아닌 setUTCHours()를 사용해야 한다.

const date = new Date();
console.log(date.toISOString()); // 2022-07-29T14:16:27.820Z

오늘 한 것

• 차트 컴포넌트 2개와 백엔드 채팅 api 연동을 통한 데이터 화면에 뿌리는 작업을 진행했다. 사용할 api가 한정적이었고 사용할 차트에 어떤 데이터를 어떻게 보여주는 것이 좋을지 고민하는 시간이 많았던 것 같다.

오늘 배운 것

• VSCode의 gitLens라는 extension을 사용해봤는데 코드마다 히스토리가 남겨져서 굉장히 편리했었다.
• 한 컴포넌트 내에서 여러 api를 호출해야 했어서 react-query의 useQueries 메소드 사용을 했다. 타입스크립트로 작성을 했기에 리턴타입에 있어서 에러가 있었고 관련 설정 파일을 별도로 작성해야 했다. 이 부분은 따로 글을 작성할 예정이다.
• useEffect + setInterval 사용시 setInterval에서 시간 보장 문제로 인해 useInterval이라는 커스텀 훅을 배웠다. 몰랐던 부분도 많아서 이것도 별도로 글을 작성할 예정이다.

1. package.json에서 간단한 설정

react-scripts 공식 문서를 참고해 package.json에 간단하게 설정

// package.json
{
    "proxy": "http://localhost:5051"
}

2. http-proxy-middleware 라이브러리 사용

해당 프로젝트에서는 websocket도 사용할 예정이었기에 다음과 같은 이유로 라이브러리를 선택하였다.

• websocket으로 서버와 통신시 protocol을 http가 아닌 ws를 사용
• 아래와 같이 proxy를 설정하면 websocket 요청들의 protocol이 http로 바뀐 상태로 서버에 전달되기에 websocket 사용 불가

  ws://apiserver.com:9000/socketio?...

따라서 http-proxy-middleware 모듈로 해결하였으며 socket.io에 대해서는 다른 url을 사용해야 하므로 router라는 옵션을 활용했다.

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = app => {
  app.use(
    createProxyMiddleware(
      ['/api', '/socket.io'],
      {
        target: 'https://도메인.com',
        changeOrigin: true,
        ws: true,
        router: {
          '/socket.io': 'ws://nginx:80'
        },
        pathRewrite: {
          '^/api/': ''
        }
      }
    )
  )
}

참고 자료(Reference)

http-proxy-middleware 라이브러리

오늘 한 것

• 사용중인 Metronic template 폴더 구조와 동일하게 변경
• CRA 기반 프로젝트 proxy 설정 및 회사 api 연동해서 라인차트에 데이터 렌더링

에러 해결

proxy 설정 후 url 변경되지 않는 문제

• proxy 설정을 했음에도 불구하고 프로젝트를 실행하면 반영되지 않았다.
• 구글링으로 해결방법을 찾았으며 방법은 간단했지만 해결 후 bootstrap 관련 문제로 좀 골치아팠다.
• 결론적으로 무작정 폴더를 날리는 건 썩 좋은 방법이 아닌 것 같다...
• 관련 링크

해결 방법

package.json에서 proxy 설정
react app 끄기
아래 명령어 차례로 입력

# rm -r package-lock.json
# rm -r node_modules
# npm install

proxy 설정 후 bootstrap 문제

• 위 방법으로 proxy 인식 안되는 문제 해결 후 프로젝트를 다시 돌리니 아래와 같은 오류를 만났다.

  ./src/_metronic/assets/sass/style.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/_metronic/assets/sass/style.scss)
  SassError: Undefined variable.
    ╷
  142 │       values: $utilities-border-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\bootstrap\scss\_utilities.scss 142:15  @import
  src\_metronic\assets\sass\_init.scss 19:9           @import
  src\_metronic\assets\sass\style.scss 9:9            root stylesheet

  해결 방법

• src/_metronic/assets/sass/_init.scss 파일에서 아래와 같이 설정
• 'scss/maps', 'scss/helpers' 및 'scss/utilities/api' 파일을 가져오지 않아 생긴 문제 같다.
• 관련 링크

  // 변경전
  // Bootstrap initializaton
  @import '~bootstrap/scss/functions';
  @import '~bootstrap/scss/variables';
  @import '~bootstrap/scss/mixins';
  @import '~bootstrap/scss/utilities';
  

// 변경 후 // Bootstrap initializaton @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @import "bootstrap/scss/helpers"; @import "~bootstrap/scss/utilities/api";

오늘 한 것

• 프로젝트에 연동할 api 명세서 정리
• 첫 코드 리뷰
• kibana 교육 (사용법 및 kibana 기본 용어)

새로 알게 된 것

• git graph, gitflow actions sidebar 사용
• 팀장님께서 알려주신 익스텐션인데 작업 단위로 flow를 볼 수 있어서 정말 편하다.

gitflow actions sidebar의 경우 간략한 사용법은 다음과 같다.

1. 프로젝트 소스 제어
2. 하단 gitflow action
3. feature:start (내가 할 작업 브랜치 자동 생성)
4. feature:finish - 완전히 코딩이 끝나고 더이상 커밋할 작업이 없을 경우 사용 (브랜치 자동으로 main 머지 해줌)

querySelectorAll라는 Document 메소드는 NodeList를 반환하는데 Array타입이 아니라 filter, reduce와 같은 Array 타입의 메소드를 사용할 수 없다. 따라서 NodeList를 Array.from()를 사용해 Array로 변환하여 사용하면 된다.

Array.from()

유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕은 복사로 진짜 array 생성해준다.

const arr = Array.from(container.querySelectorAll('[text-anchor="start"]'));
const res = arr.filter(e => !isNaN(Number(e.innerHTML)));