Today I Learned

1. 프로젝트 트러블 슈팅

React에서 파일 업로드 시 서버와의 통신 에러

장장 이틀에 걸친 백엔드와의 통신을 위해 첫 포문을 열었던 파일 업로드..
우리가 하고자 했던 것은 이미지 파일과 JSON 맵을 같이 서버에 넘기고자 했다.
정말 수 많은 에러와 만났다. 가질 수 있는 모든 문제를 안고 있던 것이다.

처음 만난 에러는 파일 데이터를 JSON 방식으로 보내려 해서 발생한 에러.

이건 금방 찾아서 고쳤다. 파일은 json에 넣을 수 없다. 그래서 content-type에 multipart/form-data를 넣어주면 되었다.

"content-type": "multipart/form-data"

두 번째 문제는 헤더에 토큰을 담지 않았다.

나는 헤더에 토큰을 담는 형식을 처음 겪어보아 다른 프론트 분의 도움을 받아 해결했다.
토큰을 담지 않으면 보안적 문제가 있다고 한다.
하지만 이것만으로도 서버에 접근을 하지 못했는데, 이건 서버쪽에서 토큰의 8번째 문자부터 읽어와서 앞에 7글자를 붙여줘야 했다.

"Authorization": "Bearer " + token

세 번째 문제. 이제 서버에 접근은 가능하다.

하지만

“Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found”

이 에러가 우리 팀을 골치 아프게 했다. 서버의 문제라 생각돼 구글링을 하며 백단에서 별 방법을 써가며 뜯어고치면서 시도를 해봤으나 결과는 같았다. 그 과정에서 403과 401 등 에러를 만나고 모두 지쳐갔다.

하지만 이 문제는 의외로 프론트에서 해결이 되었다.
내가 그동안 변수에 {}를 넣어서 보내고 있었다. 하..

네 번째 문제. 이제 뭔가 보이는 것 같다.

data: {result: 'fail', msg: "Required request part 'data' is not present"}

data 라는 변수에 뭔가 잘 담기지 않았다.
수십분 간의 구글링을 통해 찾은 해법은 Blob으로 json파일을 stringify해서 formData에 넣어주는 것이었다.
formData에 json맵과 이미지를 같이 넣으려면 이렇게 해야했다..

그래서 Blob이 무엇인가 하고 찾아보니

데이터베이스 관리 시스템의 BLOB(Binary Large Object)에서 유래.
이진 데이터를 저장하기 위한 데이터 타입으로 이미지나 음성 등의 멀티미디어 데이터를 저장한느 용도로 사용된다.
자바스크립트 Blob 객체는 데이터 덩어리를 참조하는 용도로 사용합니다. 큰 데이터는 물론 작은 데이터도 다룰 수 있다.
즉, 이진 데이터는 물론이거니와 텍스트 데이터도 다룰 수 있다. Blob 객체는 메모리상의 데이터(바이트 배열)도 참조할 수 있으며 파일의 데이터도 참조할 수 있다.

보통 파일같은 큰 데이터를 다룰 때 쓰는 거 같은데 이 상황에선 JSON만 넣어서 쓰는 걸 보니 타입을 정해줄 때 쓰는 용도인가보다..

const formData = new FormData();
formData.append("data", new Blob([JSON.stringify(data)], {type: "application/json"}))
formData.append("imgFile", image);

트러블슈팅을 하며 느낀 점

처음으로 백과 프론트가 모여서 맞이한 트러블 슈팅이었다. 둘 중 어느 곳이 잘못됐던 간에 같이 해결하자고 모인건데.. 해결이 된 후 해결했다는 기쁨보다 누구의 잘잘못을 따지고 시간낭비 했다는 말이 나오자 매우 기분이 좋지 않았다.
다 배우는 입장이고 이 세계에선 빈번한 일인 것을..

2. CS 스터디

12장 병렬성과 비동기성(p.470 ~ p.474)

락

실제로 처리해야 할 문제는 여러 작은 연산으로 이뤄진 작업을 어떻게 원자적으로 만들 수 있을까 하는 문제다.
코드에서 중요한 부분을 상호 배제 메커니즘을 통해 원자적으로 처리하게 만들어야 한다.
이런 목표를 프로그램이 충돌을 피하기 위해서는 어드바이저리 락을 만들어서 달성한다.

• 트랜잭션과 작업 크기

  성능을 향상할 가장 좋은 방법은 여러 연산을 한 트랜잭션에 넣는 것이다. 각 연산을 독립적으로 수행하는 대신 한꺼번에 묶어서 처리한다.
  어떤 대상을 잠그는 시간을 최소화 해야한다. 락이 걸려있는 시간이 길면 동시성이 줄어들기 때문이다. 또한 락이 걸린 작업의 크기를 최소화 해야한다.

• 락 대기

  일부 운영체제는 블로킹이나 비블로킹 모드로 락을 요청한다. 블로킹은 시스템이 락을 할당할 수 있을 때까지 락을 요청한 프로그램을 일시중단시킨다. 논블로킹은 프록램이 계속 실행되고 나중에 락을 얻었는지 여부를 어떤 방식으로든 통지받게 된다는 것이다.

• 교착상태

  여러 락을 사용하는 경우 두 락이 맞물려 락 해제를 진행할 수 없는 상황을 교착상태라고 한다. 코드를 잘 작성하는 방법 외에는 훌륭한 방법이 없다.

To Do

1. 完) 프로젝트 열코딩

2. 完) CS스터디 정리하기

Always 完) 알고리즘 최소 한 문제 - 220323's Algorithm

Today's Short Report

제일 무서운 말. 이게 왜 되지?