npm에 babble만의 라이브러리 올리기

Babble 페이지는 초기 유저들의 접근성을 높이기 위해 로그인 없이도 Babble의 모든 기능을 사용할 수 있게 만들어 놓았다.  

하지만 Babble의 메인 기능인 채팅을 서비스하려면, 이 유저가 어떤 유저인지 식별할 수 있는 최소한의 장치를 만들어놓아야 했다.

적어도 지금 내가 대화하는 상대방이 '익명의 유저 1'인지, '익명의 유저2'인지 나는 다른 사람들에게 어떤 유저로 보여지는지 알아야 대화를 이어나갈 수 있으니까 말이다. 

 

먼저 우리가 생각해 낸 아이디어는 아래와 같다.

1. 사용자가 채팅 방에 들어가기 전에 직접 닉네임을 설정하고 들어가기 (닉네임 설정을 하지 않으면 채팅방 입장이 불가)

2. 익명#{랜덤한 8자리 숫자}

3. 직접 랜덤 한글 닉네임 생성기 만들기

...

만약 이렇게 생성한 닉네임에 중복이 있다면, 채팅방 안에 들어가서는 닉네임 뒤에 #1과 같은 식별될 수 있는 값을 붙여주자!

 

위에 나온 아이디어 중, 1번의 경우에는 유저가 Babble 서비스를 이용함에 있어 '닉네임 입력'이라는 blocking(?)을 경험하기 때문에 '빠른 팀 매칭 서비스'라는 Babble의 모토에 다소 어긋난다고 판단했다. 그래서 일단 만들기 쉬운 2번으로 서비스하다가(랜덤 닉네임은 우리 서비스에서 다른 기능들보다 우선순위가 아니었기에) 최종 데모데이 전에 3번으로 변경하자고 결정했다. 종종 인터넷에서 보던 형용사 + 명사로 이루어진 웃긴 닉네임들을 보면서 재미를 느끼곤 했기에 '익명#숫자'로 이루어진 이름보다는 조금 더 다이나믹한 이름을 주어 유저에게 재미를 주고자 했다.

 

그리고 이러한 랜덤 닉네임 기능 자체를 오픈소스로 공개해 우리 서비스 뿐만아니라 다른 사람들도 사용할 수 있게 만들고 싶었다. 필요한 사람들이 가져다가 사용하면서 즐거움을 느꼈으면 좋겠다는 바램이 있다.

 

⛳️  본격 랜덤 닉네임 생성기 만들기

사실, 랜덤한 닉네임을 만드는 것 자체는 큰 어려움이 없었다. 

로직 자체도 어렵지 않다. 아니 사실 엄청나게 쉽다. 

재미있는 형용사와 명사들을 데이터에 집어넣고, 0부터 우리가 만들어놓은 데이터들의 길이 사이에서 랜덤한 숫자를 만들어 뽑는다. 그리고 붙여주면 된다. 구현한 상세 내용들은 아래에 github 링크를 남겨놓았으니, 궁금하신 분들께서는 보셔도 좋을 것 같다. 

 

1. Local에서 프로젝트 시작하기

개인 패키지 배포

// terminal
npm init

Organization 패키지 배포

// terminal
npm init --scope=@organization-name

// example 
npm init --scope=@woowa-babble

만약 Organization에 배포해야하는데 scope를 정해주지 않았다면 아래의 명령어로도 다시 세팅해줄 수 있다.

// terminal
npm config set @SCOPE_NAME:registry REGISTRY_PATH

 

위 command를 terminal에 쳐 npm 초기 설정을 하면 된다. 아래는 설정에 필요한 내용들이다.

아래의 내용 말고도 엄청 다양한 옵션들이 있다.(여기에서 보다 많은 옵션들을 볼 수 있다.) 이런 옵션들을 다 사용하면 좋겠지만, 우리는 최소한의 내용만 패키지에 포함했다. 배포하는 데에는 아무 문제가 없다. 

 

name - 내가 원하는 패키지의 고유한 이름을 설정(다른 패키지들과 중복되지 않게!)

description - 패키지에 대한 간략한 설명(나중에 다른 사람들이 패키지 검색할 때 좋음)

keywords - 패키지를 검색할 때 사용할 키워드들(이 또한 나중에 다른 사람들이 패키지 검색할 때 좋음)

homepage - 따로 프로젝트 페이지가 있다면 그 링크를 넣으면 됨

repository - 프로젝트 code가 존재하는 저장소 링크(ex. 프로젝트 github 페이지)

bugs - 패키지에 문제가 있을 때 유저들이 보고할 수 있는 URL을 적으면 됨(없다면 github issue 링크 남기면 됨!)

license - 패키지의 라이센스를 지정함(별다른 제약사항을 두고싶지 않다면 MIT 라이센스를 추천!)

author - 패키지 제작자에 대한 정보 (1명만 지정 가능 - author 옵션을 넣지 않고 contributors만 넣어도 됨)

contributors - 패키지 제작에 기여한 사람들에 대한 정보 (다수 지정 가능)

main - 프로젝트의 진입점(entry point) → 우리의 경우에는 src/index.js 가 진입점이었다.

files - 패키지가 의존성으로 설치될 때, 같이 포함할 파일들에 대한 내용 (의존성이 많지 않다면 npmignore를 사용하는 편이 좋음)

... 

 

2. npm 로그인하기

npm에 가입되어있다면 로그인을, 가입되어있지 않다면 회원가입을 하면 된다. 

아래의 링크에서 진행할 수 있다. 주의해야 할 점은, 이메일 인증이 되어있어야 한다는 점이다.

https://www.npmjs.com/

npm

 

가입한 후, terminal 창에서 npm login을 통해 로그인할 수 있다.

// terminal
npm login

// 또는 
npm adduser

만약 로그아웃하고싶다면 아래 command로 확인 가능하다.

// terminal
npm logout

만약 로그인 된 유저가 누구인지 보고싶다면 아래 command로 확인 가능하다.

// terminal
npm whoami

 

 

3. npm 배포하기

개인이 배포하고싶다면, 아래와 같이 publish 명령어를 통해 배포할 수 있다.

// terminal
npm publish

 

하지만 우리는 npm에서 woowa-babble Organization을 만들어 사용하고 있었기 때문에, Organization을 통해 배포를 해야했다. 

Organization에 배포하는 것도 마찬가지로 어렵지 않다. 다만, Organization 이름을 제대로 붙여주어야 잘 배포된다. 

그리고 Organization의 registry가 공개여도 배포가 limited로 되어있으면 publish 명령어가 작동하지 않을 수 있다.

그럴 때에는 아래의 command로 공개 여부를 명시해 배포해주어야 한다.

// public access로 직접 명시해 배포
npm publish --access=public

 

이렇게 하면 배포가 완료된다.

만약 배포가 잘 되었는지 확인하려면 아래 명령어로 확인할 수 있다. 이렇게 배포된 패키지는 72시간 이내로만 unpublish 할 수 있다. 그 이후로는 삭제할 수 없으니, 잘못 올라갔다면 3일 이내에 unpublish 하도록 하자!

// 정보 보기
npm info

// 또는 아래와 같이 정보 명시
npm info @woowa-babble/random-nickname

 아래의 명령어를 통해 삭제할 수 있다.

npm unpublish

 

 

그렇게 우리는 아래의 패키지를 배포할 수 있었다. 추후에는(정말 나중에...) 다국어(영어) 지원도 해 볼 예정이다.

큰 라이브러리는 아니지만, 작게라도 이렇게 오픈소스에 기여해 볼 수 있다니, 정말 뜻깊은 경험이었다! 

 

https://www.npmjs.com/package/@woowa-babble/random-nickname

@woowa-babble/random-nickname

https://github.com/woowa-babble/random-nickname

GitHub - woowa-babble/random-nickname: 🎲 Random Nickname Generator! Easy and Fun!