본문 바로가기

분류 전체보기361

Google Colab - 음성파일 텍스트로 변환하기 (Feat. Whisper) 음성 파일을 업로드하여 텍스트로 변환하는 프로그램을 만드는 중이다지난 시간에는 코랩을 세팅하는 포스팅을 올렸는데 오늘은 코랩을 이용한 프로그램을 만들어 볼 것이다. 지난 포스팅이 궁금하시다면 아래를 클릭해주세요👇👇👇 Google Colab 세팅하기음성 파일을 업로드하면 텍스트로 변환해주는 기능을 만드려고 한다.클로바 노트같은 유료서비스들이 있지만 만들어보기로 했다. (이런걸 지나치지 못하고)찾아보니 open ai 에서 공개한 오픈소devbirdfeet.tistory.com Google Colab - 음성파일 텍스트로 변환하기 사용된 기술1. 음성 파일을 텍스트로 변환하기 위해 Whisper API 를 사용하였다. 이놈은 언어별로 자동 변환해주고 심지어 번역도 할수있다.- 여담이지만 오픈AI .. 2025. 6. 12.
Google Colab 세팅하기 음성 파일을 업로드하면 텍스트로 변환해주는 기능을 만드려고 한다.클로바 노트같은 유료서비스들이 있지만 만들어보기로 했다. (이런걸 지나치지 못하고)찾아보니 open ai 에서 공개한 오픈소스인 whisper API 를 사용하면 변환이 매끄럽게 가능하다는 것을 알게 되었다.하지만 이 API 를 사용하기 위한 방법으로는 크게 세가지가 있었다. 1) 로컬 컴퓨터에 다운받아 사용 : GPU 10기가 이상 필요2) 구글 코랩 이용 : 무료지만 12시간 이후 세션이 끊김3) API 사용 : 비용 발생 두번째 방법인 구글 코랩을 사용해보려고 한다구글 코랩은 웹브라우저에서 실행하는 가상의 컴퓨터 기반의 파이썬 실행 환경이다.설치 없이 구글 드라이브처럼 쓰면 되고, 무료로 GPU까지 제공해줘서 머신러닝, 데이터 처리, .. 2025. 6. 11.
Next.js - tailwindcss 세팅하기 (feat. Vite, 여러 에러들) 넥스트.js 에 tailwindcss 세팅을 해보자!삽질을 너무 많이 해서 기록으로 남겨놓으려고 한다 :) 일단 기본 디렉터리를 보여주고 시작하려고 한다. 오늘의 주인공들을 기억해주시라 1. tailwindcss 설치하기 postcss 와 autoprefixer 도 함께 설치를 해주어야 한다package.json 에 이미 설치가 되어있다면 없는 놈들만 설치해주자$ pnpm add -D tailwindcss postcss autoprefixer **postcss 와 autoprefixer 를 함께 설치하는 이유1. PostCSSPostCSS는 CSS를 처리하기 위한 플랫폼 또는 도구입니다. PostCSS 자체는 아무 작업도 하지 않으며, 플러그인을 통해 CSS를 변환하거나 확장합니다.Tailwind CS.. 2025. 6. 7.
Next.js - vercel 배포하기 피그마 플러그인을 만드는 도중 Oauth 인증 과정에서 서버도메인이 필요하게 되었다.이전에 프론트 사이트로 몇번 배포했었는데, 기억이 가물가물..아카이브용으로 Next.js 로 만든 프로젝트를 vercel 배포과정을 정리해보았다(참고로 vercel 은 정적 페이지를 쉽게 빌드/배포 할 수 있는 호스팅 서비스를 제공하는 클라우드 플랫폼이다) Next.js - vercel 배포하기1. vercel 에 로그인을 하면 대시보드가 뜨고, add new 버튼 > project 를 선택해주자 2. 나는 이미 등록한 계정으로 깃 레포만 추가하는 거라 깃헙 앱 퍼미션을 클릭해주었다. 3. 모달 창이 뜨고, 로그인을 하고 나면 아래와 같은 세팅 페이지로 들어가게 된다. 스크롤 바를 굴려 아래로 내려가보자 4. 여기.. 2025. 5. 3.
JavaScript - 끄적거리는 자바스크립트 모듈 시스템의 역사 (CommonJS, AMD, UMD, ES6, TypeScript) 자바스크립트 모듈시스템의 역사를 보다보면 바퀴의 변천사와 같아보였다.(원시인들이 통나무를 굴려서 무거운 돌을 옮기다가 => 손수레가 나왔고 => 손수레를 밀다가 마차가 나오고 => 자전거 타다가 => 자동차까지) 특히 이 분야는 불편함을 한두개씩 보완하면서 진화하는 포켓몬과 같다고 할까나그래서 이번 포스팅은 그냥 두서없이 주절거려보았다혹시 읽으시다가 잘못된 점이 있으면 알려주시기를...⭐ 끄적거리는 자바스크립트 모듈 시스템의 역사 (CommonJS, AMD, UMD, ES6) js 원래 시작자체가 브라우저 내에서 쓰려고 만든 스크립트 언어이다보니 마구잡이로 실행이 된다.저렇게 한꺼번에 로드되다보니 순서도 보장안되고 스코프도 꼬임... // "먼저 다운받은 사람이 먼저 실행하긔 후후..." 그러다 보니 .. 2025. 5. 1.
Git - husky와 lint-staged로 커밋전 eslint 검사하기(feat.pnpm) eslint 설치까지 완료되었다eslint 검사을 하려면 3가지 방법 정도가 있다. (검사하는 타이밍에 따라 다른 방법을 사용한다고 본다)1. 직접 명령어로 검사하기2. 커밋전/푸시전 자동으로 검사하기3. 빌드 단계에서 검사하기 나는 2번째 방법인 커밋 전 자동으로 린트 검사를 실행 하도록 만들어주고 싶었다.깃훅(git hook) 이라는 친구가 있다. 깃의 특정 이벤트에 트리거링되어 실행되는 스크립트 모음집 이랄까이를 활용해서 커밋 전의 검사 동작을 추가할 수 있다. 이를 pre-commit 이라고 한다 준비물은 husky와 lint-staged 라는 라이브러리들 이다.이 둘을 믹스해서 세팅을 해보려고 한다.- husky 는 pre-commit 을 타이밍을 잡아낼 수 있고- lint-staged 는 스테.. 2025. 4. 27.
Next.js - GA4 pageview 추가하기 (Nextjs 셋업편) 사이드로 만들어 보았던 랜딩 페이지의 방문객이 어느정도 되는지 알고 싶었다.이러한 니즈로 방문객 수를 알아보고 싶으면 GA 를 프로젝트에 심어야 한다더라예전에 회사에서 전략팀이 주는 소스로 A/B테스트 정도로 코드에 심어서 테스트 요청을 해본 적은 있었지만GA 설정부터 시작해야한다. 분명 나같은 사람들이 많겠지. 그래서 직접 포스팅 해보려고 한다.해당 포스팅은  GA 페이지 내 설정 / Nextjs 프로젝트 내 설정 요렇게 두 파트로 나눠보았다. 지난 시간에는 GA 페이지 설정을 해보았고, 이번에는 Nextjs 프로젝트 내 설정을 해보려고 한다. GA 페이지 설정이 궁금하시다면 클릭👇👇👇 Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편)사이드로 만들어 보았던 랜딩 페이지의 방.. 2025. 4. 1.
Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편) 사이드로 만들어 보았던 랜딩 페이지의 방문객이 어느정도 되는지 알고 싶었다.이러한 니즈로 방문객 수를 알아보고자 하였더니 GA 를 프로젝트에 심어야 한다더라예전에 회사에서 전략팀이 주는 소스로 A/B테스트 정도로 코드에 심어서 테스트 요청을 해본 적은 있었지만GA 설정부터 시작해야한다. 분명 나같은 사람들이 많겠지. 그래서 직접 포스팅 해보려고 한다.해당 포스팅은  GA 페이지 내 설정 / Nextjs 프로젝트 내 설정 요렇게 두 파트로 나눠보았다.   Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편) 1. 구글 계정으로 텅~ 비어있는 GA 페이지로 진입해보자. 메뉴 패널 > 어드민 메뉴로 들어가보자  2. create 버튼을 눌러 property 를 클릭!  3. property.. 2025. 3. 30.
디자인패턴 - Flyweigh 디자인 패턴을 항상 공부하고 싶었다.하지만 그 시절의 나에겐 뭔가 어려웠고, 개념 자체가 이해가 잘 되지 않아 여러번 포기 했었던 것 같다.올해 초부터 이제 공부할 타이밍이구나를 느끼고, 강의를 찾아보게 되었다. 그동안 업무하면서 겪었던 경험들이 하나둘씩 떠오르면서,머리 속에 각각 떠돌아다니던 지식들이 패턴화되어 깔끔하게 정리가 되는 느낌이었다. 타입스크립트로 보는 GoF의 디자인 패턴 강좌 라는 유튜브 강의를 듣게 되었는데타입스크립트를 사용하여 이해도 되고 전반적으로 깨닫는 것이 많아서 학습 내용을 정리해보려고 한다. 디자인패턴 - FlyweighFlyweight동일한 객체를 중복하여 생성하지 않고, 미리 생성된 객체를 공유해서 사용한다는 개념의 패턴이다.공유할 속성과 아닌 속성을 구분해서 생각해 주어.. 2025. 3. 9.
반응형

티스토리툴바