23. 01월 스크랩

1. GPT3Discord - 디스코드 내에서 GPT3 사용하게 해주는 봇 (링크)

• !g <prompt>: 바로 GPT3 프롬프트 입력
• !g converse: ChatGPT처럼 대화 하기
  • 채팅이 길어져서 대화한계에 도달하면, 봇이 GPT3를 이용해 대화를 요약해서 토큰을 줄이고 추가로 대화가능하게 만듦
• !draw <prompt>: DALL-E 로 이미지 생성하기
• 각 응답마다 Redo 버튼이 있어서 첫 프롬프트에서 다시 시작 가능
• 봇이 자동으로 DALL-E용 이미지 프롬프트를 최적화해서 더 좋은 이미지를 생성

2. 타입스크립트를 배우기에 좋은 오픈소스 프로젝트 (링크)

• Excalidraw https://github.com/excalidraw/excalidraw
• Cal.com https://github.com/calcom/cal.com
• Supabase https://github.com/supabase/supabase
• AppWrite https://github.com/appwrite/appwrite
• n8n https://github.com/n8n-io/n8n
• AppSmith https://github.com/appsmithorg/appsmith
• Directus https://github.com/directus/directus
• BudiBase https://github.com/Budibase/budibase
• Hasura https://github.com/hasura/graphql-engine
• Hoppscotch https://github.com/hoppscotch/hoppscotch
• Nest https://github.com/nestjs/nest
• Linen https://github.com/Linen-dev/linen.dev
• Medusa https://github.com/medusajs/medusa

3. Web ChatGPT - 최신 웹 검색 결과를 chagGPT에 반영할 수 있는 크롬앱 (링크)

• 원래 chatgpt는 2021년 4분기까지 데이터만 학습하여 최신 자료 반영이 안됨.
• 여기에 최신 웹 검색 결과를 컨텍스트로 제공하여 대답에 조합하여 반영함.
• 예를 들면 비교적 최근에 일어난 일론 머스크의 트위터 인수 (elon musk twitter buy)를 입력하면 chatgpt에 대답이 없다면 검색 결과를 조합 및 요약하여 대답을 할 수 있음.

4. 더 좋은 타입스크립트 프로그래머로 만드는 11가지 팁 (링크)

#1 {집합(Set)}이라고 생각하기
#2 선언된 타입과 좁혀진(narrowed) 타입의 이해
#3 옵셔널 필드 대신에 구분된 유니온 사용
#4 타입 단언을 피하기 위한 타입 명제 사용
#5 유니온 타입 분배 제어
#6 철저한 검사를 통한 컴파일시 처리되지 않은 케이스 체크
#7 interface보다 type을 사용 (글쎄?)
#8 적절한 상황에는 배열보다는 튜플을 사용
#9 추론된 타입이 일반적이거나 구체적이도록 제어
#10 추가 제네릭 타입 매개 변수를 만들기 위해 infer를 사용
#11 타입 조작으로 창의성을 발휘하여 DRY 상태를 유지

5. universe - HTML / CSS로 만들어진 무료 UI 엘리멘트들 (링크)

• 버튼/로더/체크박스/스위치/인풋/카드 등 636개의 컴포넌트
• 5232명의 컨트리뷰터
• 완전히 무료. 개인용/상업용 상관없이 이용 가능

6. 제품 디자인에 ChatGPT를 이용하는 법 : 8가지 실제 사례 (링크)

1. 제품 소개 작성
2. 제품 페이지의 카피 작성
3. 에러/성공 메시지 작성
4. 마케팅 카피 작성
5. 시각 디자인 아이데이션(Ideation)
6. 제품 페이지 코드 작성
7. 페이지의 작은 부분에 대한 코드 작성
8. 언어 번역하기

7. Monorepo 빌드 도구들 비교 - Bazel, Pants, NX, Earthly (링크)

• 모노레포 사용추세는 점차 증가중이지만, 변경/캐시/재빌드로 연관되는 문제들 때문에 어떤 툴을 선택하는지가 중요함
• 고려할 주요 기능 : 언어 지원 여부, 러닝 커브, 캐싱, 빌드 검사, 다재다능한가(Versatility)
• 여러분 조직이 개발 언어, 작업흐름, 코드 베이스 크기가 구글과 유사하다면 Bazel
• Bazel로의 마이그레이션 비용 및 Python 지원이나 BUILD 작성에 불만이라면 Pants
• 주로 JavaScript / TypeScript 라면 NX 도 훌륭한 선택
• 컨테이너화된 마이크로서비스거나 시스템 수준 종속성이 있다거나, 다소 비표준 작업이 있다면 Earthly

Monorepo에 대한 모든 것 - 링크

8. 웹 앱의 번들 크기를 줄이기 위해 할 수 있는 모든 것 (링크)

• 웹 번들러는 번들을 어떻게 최적화할까요
• 번들 크기 측정
• 번들 크기 문제 해결
  • ESModule이 아닌 종속성
  • TSConfig에서 CommonJS 모듈 타입
  • 코드에 사이드 이펙트 없음을 표시
  • imports, exports 문의 Type 한정자
  • Barrels
  • 지연 로딩
• 결론

9. 삶, 프로그래밍, 콘텐츠 제작 및 기타 모든 것을 위해 사용해야 하는 51가지 AI 도구 (링크)

• 해외 커뮤니티 DEV Community에서 좋아요 300개, 북마크 700개 이상을 기록한 인기 콘텐츠로 다양한 분야의 51가지 AI 도구를 소개
• 하기 내용은 본문 51가지 중 일부 내용

1. ChatGPT
2. Fireflies.ai : 음성 채팅을 녹음, 기록, 검색 및 분석해주는 도구
3. Hemingway : 작성한 글을 검토해주는 도구
4. Grammarly : 영어 작문의 철자법, 문법, 구두점, 명확성, 참여 및 전달의 문제를 조사하고 표절 사례를 찾고 발견된 오류에 대한 수정을 제공
5. Headlime : 자동 카피라이터

10. ImaginAlry - AI로 이미지 수정하기 (링크)

• 다양한 AI 기반 이미지 편집 기술을 하나로 묶어서 사용하기 쉽게 만든 것
• InstructPix2Pix 을 이용한 인스트럭션 기반 이미지 편집
  • 풍경 사진을 만든뒤 "make it winter", 과일 사진을 만든뒤 "replace the fruit with strawberries"
• Clipseg를 이용하여 프롬프트 기반 마스킹
  • AND,OR,NOT 및 {+-n*/}, "face AND NOT (bandana OR hair OR blue fabric){*6}
• CodeFormer를 이용한 얼굴 보정
• RealESRGAN을 이용한 업스케일링
• 이미지 타일링
• 이미지-to-이미지
• 아웃페인팅
• 리눅스/맥(M1)

11. Summer Afternoon - WebGL 실험 (링크)

• Procedural 3D 를 연습하기 위해 만든 웹 실험 페이지
• 화살표/마우스로 조작. 스페이스바/우클릭은 점프
• 멀티 플레이어 지원. 모바일에서도 잘 동작
• 5개의 숨겨진 비밀을 찾아보세요!
• Three.js + GSAP + Svelte + Houdini

12. iOS Shortcut에서 chatGPT 사용하기  (링크)

• Siri보다 뛰어난 "세계에서 가장 똑똑한 HomeKit 음성 비서" 만들기
• JSON으로 통신하는 음성비서를 만들기 위한 프롬프트를 GPT-3에 입력
• "비디오 찍는데 사무실이 어둡네. 뭐 해줄수 있어?" "전등을 켜드리겠습니다"
• OpenAPI는 1개 요청당 $0.014 정도니까 $1에 약 70개의 명령 전송 가능

13. GPT is all you need for the backend - GPT로 백엔드 만들기 (링크)

• 비즈니스 로직을 작성하기 위해 코드는 이상적인 수단은 아님
• LLM을 이용해서 백엔드+DB를 작성. API 호출시 이름으로 비즈니스 로직을 추론하고, 상태를 저장 가능
• 동작 방식
  • LLM에게 백엔드의 목적을 설명 ("To-Do 앱임")
  • DB상태의 초기 JSON BLOB를 작성 ({todo_items: [{title: "eat breakfast", completed: true}, {title: "go to school", completed: false}]})
  • API 호출 시작. 비즈니스 로직을 추론하고 상태를 업데이트하는 백엔드 완성
• 왜 이게 미래인가
  • 백엔드가 어떻게 생겼는지 몰라도 프론트엔드에서 반복 가능
  • 백엔드가 다른 포맷을 줘도 쉽게 변경 가능
  • API 이름에 오타를 내도 문제 없음
  • 콜드 스타트 없는 서버리스

14. git-sim - GIT 동작을 시각적으로 시뮬레이션하는 도구 (링크)

• 터미널 명령 하나로 Repo내의 Git 작업들을 시각적으로 보여주는 오픈소스
• Git 동작들을 이미지 또는 비디오(mp4)로 생성해서 보여줌
  • git-sim merge <branch> 입력하면 해당 머지가 일어나는 과정을 표시
• 실제로 적용하기 전에 어떻게 Repo에 반영되는지 보는 용도로 사용 가능
• Git 코맨드의 동작을 팀원과 공유 가능 및 문서화 자료로 사용
• 지원 커맨드 : log, status, add, restore, commit, stash, branch, tag, reset, revert, merge, rebase, cherry-pick