Bruno > Postman Collection Import시 한글 깨짐 해결방법

Bruno는 API Testing Tool로, Postman의 대안 중 하나다. Postman은 유명하고 편리하지만 유료 서비스라 무료로 이용하면 한계가 있다보니 Bruno 또는 Hoppscotch를 선택하기도 하는데, Bruno는 Git으로 형상관리가 되다보니 무료인것 외에도 다른 장점도 존재한다. 하지만 사용하던 Postman Collection을 이전하려고 하면 Alphanumeric이 아니면 모두 -로 표시되어 당황하게된다... 몇개 안되면 그냥 참고 한글로 바꿀 수 있지만 import를 하는 이유는 귀찮아서니까! 이 문제를 해결하는 방법을 공유하려한다.

바로 나처럼ㅋㅋㅋ

 

1. Clone Bruno

Bruno는 커뮤니티 버전이 오픈소스이기 때문에 https://github.com/usebruno/bruno Github에가서 리포지토리를 Clone해오자.

git clone git@github.com:usebruno/bruno.git

 

2. Install NVM, NPM

Electron 프로젝트이므로, npm과 nvm을 먼저 준비해야한다.

npm, nvm 설치는 따로 검색해서하는 걸로하고, 내 블로그에서 다루진 않겠다.

 

3. Run Bruno

다 설치 했으면 Bruno 폴더로가서 아래 명령어들을 입력한다.

# use nodejs 18 version
nvm use

# install deps
npm i --legacy-peer-deps

# build packages
npm run build:graphql-docs
npm run build:bruno-query
npm run build:bruno-common

# bundle js sandbox libraries
npm run sandbox:bundle-libraries --workspace=packages/bruno-js

# run next app (terminal 1)
npm run dev:web

# run electron app (terminal 2)
npm run dev:electron

주의할 점은 web과 electron이 동시에 실행 되어야하므로, 터미널의 새탭에서 electron을 따로 띄워줘야한다는 것이다. Bruno가 열리는 걸 확인했다면 완료. dev 모드로 실행했기때문에 소스코드 변경 후 저장을 누르면 해당 변경사항이 즉시 반영되는 상태다.

 

4. Fix Source code

packages/bruno-aapp/src/utils/common/index.js를 열어서 normalizeFileName() 함수를 확인해보자. 이 녀석이 -사태의 원흉이다. 문제가 발생하고 있는 v1.33.0 버전(포스팅 시간 기준) 에는 이런 코드로 되어있다.

export const normalizeFileName = (name) => {
  if (!name) {
    return name;
  }

  const validChars = /[^\w\s-]/g;
  const formattedName = name.replace(validChars, '-');

  return formattedName;
};

 

아래와 같이 바꾸어주자.

 

내 경우 포스트맨 리퀘스트에 route 정보가 들어가있어서 user/{user_id} 이런식으로 적혀있었는데, Bruno는 리퀘스트 제목 그대로를 파일이름으로 사용하다보니 /가 파일 시스템에서 디렉토리로 인식하는 바람에 오류가나서 /를 \로 바꾸어주었다.

export const normalizeFileName = (name) => {
  return name.replaceAll('/', '_');
};

 

5. Import Postman Collection

뜬다 한글

저장을 누르고, 개발용으로 띄운 Bruno에서 import 작업을 마치고 만들어진 컬렉션 파일들을 복사해서 여러분의 Bruno에서 사용하면된다.