[TIL]2023.3.16

오늘은 코딩테스트와 과제를 해결하면서 공부를 했다.
추가로, 처음으로 최종면접이 잡혔다!! 가고 싶은 기업이라서 잘 준비해서 좋은 결과를 만들어야겠다!!

공부한 내용을 간단히 정리해서 올려본다.
대외비일 것으로 예상되는 코드 및 내용은 삭제하고 직접 구현한 내용과 공부한 내용만 기록한다.

Cors 문제 해결

• 상황 : DataHandler.js 리액트 파일을 사용하기 위해 static폴더에 리액트 개발환경을 세팅
• 문제 : 리액트는 localhost:3000 python서버는 localhost:7779로 CORS문제가 발생
• 문제해결
  • Python서버에서 CORS 미들웨어 추가\

# cors를 위해 추가
from fastapi.middleware.cors import CORSMiddleware
# CORS 미들웨어 추가
app.add_middleware(
    CORSMiddleware,
    allow_origins=["<http://localhost:3000>"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

• 클라이언트 프록시 설정

//package.json
"proxy": "<http://localhost:7779>"

• .env설정

//.env
REACT_APP_SERVER=

//사용
fetch(`${process.env.REACT_APP_SERVER}/api/loadPointCloud`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
      },
      body: JSON.stringify(frameNum),
    })

 

디코딩

        try {
          // UTF-8문자열의 data를 받아서 바이너리 데이터로 디코딩
          const binary = atob(data);
          // ArrayBuffer 생성
          const buffer = new ArrayBuffer(binary.length);
          // ArrayBuffer를 DataView로 변환 후 view에 할당
          const view = new DataView(buffer);
          // 바이너리 데이터의 각 바이트를 순회하면서 view에 8비트(1바이트)로 저장
          for (let i = 0; i < binary.length; i++) {
            // 1바이트 아스키 코드를 구한 후 DataView 객체의 i번째 바이트에 해당하는 위치에 저장
            view.setUint8(i, binary.charCodeAt(i));
          }
          // 각각의 x, y, z 좌표를 저장할 빈 배열 pointsData를 생성
          let pointsData = [];
          // DataView에서 12바이트씩 읽으면서 각각의 x, y, z 좌표를 읽어와 pointsData에 저장
          for (let i = 0; i < view.byteLength; i += 12) {
            // 32비트(4바이트) float 타입의 값을 읽어와 반환
            // true를 사용해 little-endian byte order를 사용
            let x = view.getFloat32(i, true);
            let y = view.getFloat32(i + 4, true);
            let z = view.getFloat32(i + 8, true);
            pointsData.push([x, y, z]);
          }
          setPoints(pointsData);
        } catch (error) {
          console.log("디코딩 실패!");
        }

디코딩 과정 요약

• atob() 함수를 통해 UTF-8 문자열의 data를 받아서 바이너리 데이터로 디코딩합니다.
• ArrayBuffer 생성합니다.
• ArrayBuffer를 DataView로 변환 후 view에 할당합니다.
• 바이너리 데이터의 각 바이트를 순회하면서 1바이트 아스키코드를 구한 후 DataView 객체의 i번째 바이트에 해당하는 위치에 저장합니다.
• 각각의 x, y, z 좌표를 저장할 빈 배열 pointsData를 생성합니다.
• DataView에서 12바이트씩 읽으면서 각각의 x, y, z 좌표를 읽어와 pointsData에 저장합니다.
• 32비트(4바이트) float 타입의 값을 읽어와 반환 true를 사용해 little-endian byte order를 사용
• x, y, z 좌표를 구해서 points에 저장한다.
• atob()
  • atob() 함수는 base64로 인코딩 된 문자열을 디코딩하는 함수입니다.
  • 이진 데이터로 전환하기 위해 사용되며, 이진 데이터가 base64로 인코딩된 경우에 유용합니다.
• ArrayBuffer
  • ArrayBuffer는 일련의 연속된 바이트를 저장하기 위한 객체입니다.
  • 이진 데이터를 다룰 때 사용되며, 생성된 버퍼의 크기는 고정되어 있으며 변경이 불가능합니다.
• DataView
  • DataView는 ArrayBuffer에서 데이터를 읽고 쓰는 데 사용되는 인터페이스입니다.
  • 이진 데이터의 형식이나 바이트 순서 등을 지정할 수 있습니다.
• setUnit8()
  • setUint8() 메서드는 DataView 객체에 8비트(1바이트) unsigned integer 값을 저장하는 메서드입니다.
  • 첫 번째 매개변수는 저장할 위치(오프셋), 두 번째 매개변수는 저장할 값입니다.
• getFloat32()
  • getFloat32() 메서드는 DataView 객체에서 32비트(4바이트) float 값을 반환하는 메서드입니다.
  • 첫 번째 매개변수는 가져올 위치(오프셋), 두 번째 매개변수는 byte order를 나타내는 불리언 값입니다.
  • 이 값이 true인 경우 little-endian byte order를, false인 경우 big-endian byte order를 사용합니다.
• little-endian byte order
  • 작은 단위의 바이트가 먼저 저장되는 방식입니다.
  • 네트워크 프로토콜에서는 little-endian byte order를 사용합니다.
• big-endian byte order
  • 큰 단위의 바이트가 먼저 저장되는 방식입니다.
  • 이미지 파일 포맷인 JPEG는 big-endian byte order를 사용합니다.