라이브러리? 이제 AI로 만들어보자

라이브러리를 만들었다. 그것도 AI로...

 

반 수제 라이브러리 kinn_yj/emojinga

 

맨날 웹과 확장 프로그램만 뚝딱거리다가 처음으로 AI를 이용해서 라이브러리를 만들어봤다.🧐

 

만드는 과정은 간단했다.

 

✅문제 직시

✅해결 플랜 구축

✅구현 ( AI )

✅최적화 ( 크로스 플랫폼 )

✅npm에 올려!!

 

 

위의 과정을 통해서 만들었다. 참고로 구현 뒤 최적화 과정은 리팩토링의 결과이다.

 

단계적으로 살펴보자.

 

1. 문제 직시✏️

문제의 직시는 간단했다. 원래 만들었던 이모지 앱의 폴더 구조를 간단화 하고 싶었고 일단 하드 코딩 된 이모지 JSON은 최대한 피하고 싶었다. 

 

내가 만든 이모지 확장 프로그램

2. 해결 플랜 구축📍

해결 방법은 간단했다. 일단 이모지 셋을 AI에게 모두 가져오라 시킨 뒤에 전부 객체로 가두고 거기에 키워드 같은 것들을 추가해서 export를 할 것이다. 그리고 그걸 참조할 창구를 만들어 배포를 하면 된다.

 

이걸 전부 안티 그래비티 ( 무료 플랜 )을 사용해서 만들었다. 

ai가 만들어준 이모지 set

이걸 쓰는 웹은 참고로 구현하기 전에 구축할 구조를 먼저 선정을 해서 거기에 코드를 담고 있다. 이 라이브러리는 구조가 간단해서 그럴 필요가 없었기에 그런 과정을 무시하고 진행을 했다.

 

참고로 웹 확장 프로그램에서 쓰이는 구조는 불렛프루프 구조이다. 나중에 더 포스팅 해볼 계획이다.

 

3. 구현 💻

구현은 처음에 일단 js의 환경에서 돌아가는 설정이었다. 이건 나중에 리팩토링에서 고치게 되는데 사실 이 문제는 맨처음에 내가 잘못 설정을 한 것이다. type script를 쓸 계획이 생길 줄 몰랐고 나중에 확장프로그램을 typescipt를 사용해서 계발을 하게 되어 리팩토링에서 고친 것이다.

 

 

4. 최적화 ✂️

위의 이야기가 최적화가 된다. type script를 만들어주기 위해 index.d.ts를 만들어서 interface를 만들었다.

 

이렇게 되면 이걸 쓰는 입장에서 typescript라면 불러오는 데이터의 type을 알 수 있게되고 가져올 수 있다. -> 문제가 생기지 않는다.

 

그렇게 하려면 일단 index.d.ts를 만들고 interface를 설정한 뒤 export를 하면되는데 이걸 하고 pakage.json의 types: index.d.ts 경로를 입력해줘야 한다. 그래야지 이 청사진 ( pakage.json ) 을 보고 빌드 시스템이 인식을 하고 찾아가서 interface를 조회를 한다. 참고로 types는 type: module과는 다른 거기 때문에 만에하나 type을 삭제하지는 말자

 

5. npm에 올려! 🚀

이건 사실 최적화 단계 전에 해야하는 일인데 순서상 이게 보기 편할 것 같아서 이렇게 했다.

 

npm에 올리는 방법은 간단하다.

 

1. npm 사이트 로그인( 회원가입 )

npm 사이트

2. 터미널에 npm login

npm login 후에 npm whoami를 하면 로그인 정보를 볼 수 있다. 

npm login

 

npm whoami

 

참고로 프로젝트를 처음부터 혼자서 만든다고 가정을 하면 이 단계 다음에 npm init을 해서 pakage.json을 만들어 줘야 한다.

 

물론 손으로 직접해도 되긴 함 ㅋㅋㅋㅋ

 

3. 버전 업데이트

항상 올리기 전에 버전을 업데이트해야한다. 1.0.1 -> 1.0.2 이런 식으로 

 

npm version patch

 

수동으로 버전을 설정하는 방법도 있다. 

 

npm version 1.2.1

만약 자기가 1.1.5 즈음에서 큰 변화가 있었을 때 1.2.1로 바꾸고 싶다면 이렇게 하면된다. 변경점은 두번째 숫자는 기능 추가일 때 첫번째 숫자는 큰 변경이 있을 시에 마지막은 버그 수정 쯤으로 생각하면된다.

 

버전을 다운그레이드 해서 다시 받아 오고싶을 때는 

npm version 0.9.0 --allow-same-version

 

이런 식으로 아랫 버전의 패치를 적용하면 된다 

 

참고로 올린 버전을 취소는 72시간 이내에만 가능하기 때문에 주의하자

npm unpublish <패키지명>@<버전>

 

 

4. 드디어 publish

배포는 주의 할 점이 있다. 일단 pakage.json의 name 이 나처럼 @kinn_yj/emojinga 이렇게 특정된 이름으로 설정을 한다면 npm에서 자동으로 이건 비공개이다라고 판단하고 유료 서비스로 등록할 가능성이 있기 때문에 주의해야한다.

 

이름에 관해선 그냥 "name" : emojinga 이런 식으로 해도되고 위 처럼 해도 된다. 둘 다 장단점이 있다. 내 방법은 중복을 쉽게 피하기 위해서 내 닉네임을 그냥 박아버린 것이다.

 

npm publish --access public

여기서 --access public이 바로 공개적으로 배포를 한다는 명령어이다.

 

참고로 npm login 과 함께 위의 배포의 과정에서 터미널에 인증이 뜨는데 ctrl 키패드를 누르고 마우스로 링크를 누르면 곧바로 그 링크로 들어가 인증을 할 수 있으니 참고하자

 

 

 

만들면서 들었던 생각 몇가지🧐

 

1. 다음에는 처음부터 크로스플랫폼을 생각하면서 만들자

2. 생각보다 다운되는 수가 꽤 많다.

3. 단순히 사용자를 일반 웹 사용자를 위한 웹을 개발할 때보다 ai도 쓰고 개발자도 쓰는 라이브러리를 개발하는 일은 정말 매력적인 일이라고 생각이 든다.

4. 코드 구현에 매몰되지 않고 ai와 함께 작업하는 일은 굉장히 효율적이고 생산성이 높은 일이라고 생각한다.

5. ai가 개발자를 대체한다. -> 개발자들이 ai를 이용하면서 간접적인 레벨업을 하고 개발 지식을 가진 기획자로서 재탄생한다. -> ai를 통해 개발자가 기획자가 되면서 전체적인 구조를 ai와 함께 짜내면서 생산성을 확보했고 그걸 통해 1인 기업의 시대가 더욱 가속화되는 것 같다.