전체 글 검색 결과
123 개의 검색 결과가 있습니다.
프로젝트 기록/자율 프로젝트

개발 리뷰 -9- 디바운스 처리를 위한 지연 검색

#1 디바운스 처리란?짧은 시간 내에 여러 번 발생하는 이벤트를 제한하고, 마지막 이벤트가 발생한 후 일정 시간이 지난 뒤에 한 번만 실행되도록 만드는 기술을 통칭함. #2 지연 검색의 핵심 아이디어1. searchKeyword와 debouncedKeyword 를 분리하여, searchKeyword가 변경 될 때마다 setTimeout을 설정한다.2. searchKeyword가 그 전에 변경되면, clearTimeout으로 해당 callback을 무효화한다.3. useEffect는 해당 useEffect가 다시 시작되기 직전에 불리는 로직이다. 따라서 시간순으로 나열하면 useEffect가 한 번 호출되었을 때는 return하지 않고, useEffect 사이에서 동작한다고 볼 수 있다. #3 구현한 예..

2025. 5. 13. 11:04
프로젝트 기록/자율 프로젝트

개발 리뷰 -7- vite proxy를 통한 개발 환경 인증 설정

#0 개요백엔드 API는 배포 환경에서 존재하고,FE 개발 중에 개발 환경에서 백엔드 API를 테스트에 이용하고 싶은 상황에서 설정이다. 두 가지 해결해야하는 문제점이 있다, 1. 배포 환경 FE 주소만 열어둔 백엔드의 CORS를 우회해야 한다.2, access 토큰을 사이트의 쿠키에 담아야 한다. #1 vite의 Proxy를 사용해서 우회하기server: { port: 5173, proxy: { "/api": { target: "https://k12b105.p.ssafy.io", secure: true, changeOrigin: true, configure: (proxy, _options) => { proxy.on(..

2025. 5. 2. 16:15
프로젝트 기록/자율 프로젝트

개발 리뷰 -1- Vite. 빌드 도구와 번들러

#1 Vite란 무엇인가?1. Vite는 빌드 도구개발 서버(3000, 5173 등)와 네이티브 ES 모듈을 활용하는 빌드 프로세스를 결합하여, 개발 중 복잡한 번들링의 필요성을 없앤다. 2. 네이티브 ES 모듈이란?ES6부터 도입된 JavaScript의 공식 모듈 시스템 이다.이전에는 require()(CommonJS)를 써야 했지만, 이제는 JS 표준에서 import, export 키워드를 사용함.브라우저가 직접 import 경로를 해석해서 모듈을 불러올 수 있음.더 이상 번들링 없이도 모듈을 사용할 수 있게 됨. 주요 특징으로는1) 코드 변경 시 자동 반영(HMR: Hot Module Replacement) 과2) 코드 분할: 코드를 더 작은 청크로 분할하여 필요한 경우에만 로드3) 트리 쉐이킹: ..

2025. 4. 14. 18:00
프로젝트 기록/음성 AI를 사용한 쇼츠 생성 사이트

개발 리뷰 -8- TTS 사용을 위한 GPU 서버 구매 및 설정 과정

#1 GPU 이용 사이트vast.ai 가 굉장히 gpu도 다양하고 싼 편이라고 함.https://cloud.vast.ai/?_gl=1*ovhih2*_gcl_au*Mjk4MDM1NDQ3LjE3NDM0ODE1NDA.*_ga*NDYwOTc2MTYuMTc0MzQ4MTU0MA..*_ga_DG15WC8WXG*MTc0MzQ4MTU0MC4xLjAuMTc0MzQ4MTU0MC42MC4wLjY3NjM5NzA3Ng 위와 같이 어떤 GPU에 얼마인지 나온다.중요한 건 GPU 메모리 뿐만 아니라, 인터넷 속도 또한 중요하다.일단 이번 프로젝트에서는 큰 모델 학습용이 아니라, 작은 모델 추론용이기 때문에 12GB 짜리를 찾아보려고 한다. 일단 목록 중에 가장 저렴하고 빠른 편인 GPU. 이제 미리 만들어 둔 자신의 환경에 맞는 ..

2025. 4. 2. 23:11
프로젝트 기록/음성 AI를 사용한 쇼츠 생성 사이트

개발 리뷰 -7- SSH키 발급 및 공개키를 통한 GCP 공통 사용

#1 개요RSA 암호화 기반으로 SSH 통신을 통해 GCP 환경을 공유하는 방식을 진행한다. 1) SSH 키를 생성하면 공개키와 암호키가 생기는데상대에게 내 공개키를 전달하면2) 공개키를 등록하여 접속을 허용하는 설정을 진행한다. #2ssh key-gen 위와 같은 명령어로 간단하게 만들 수도 있지만,GCP 공식 문서는 좀 더 복잡하게 설정한다. https://cloud.google.com/compute/docs/connect/create-ssh-keys?hl=ko#console SSH 키 만들기  |  Compute Engine Documentation  |  Google CloudSSH 키 생성 방법cloud.google.com 공개키를 등록하는 방법은1. GCP 콘솔에서 구현되어있는 UI로 쉽게 할..

2025. 3. 18. 17:21
프로젝트 기록/음성 AI를 사용한 쇼츠 생성 사이트

개발 리뷰 -4- CORS 정책은 왜 Postman 요청은 막지 않는가?

# 1 의문이 발생한 이유CORS는 내가 아는 개념 내에서는 '다른 출처(Origin)에서 리소스를 요청할 때 적용되는 보안 정책'이라고 글자로만 알고 있었다. CORS 허용을 백엔드에서 해주고 있기 때문에 깊은 생각 없이 백엔드에서 막아주는 보안 기술이라고 생각했다.  따라서 당연하게도 curl을 사용한 팀원이, 왜 curl을 보낸 origin과 백엔드 origin(출처)가 다른데 통신이 되냐는 질문에 대답하지 못 했다. 이후 팀원과 같이 찾아보며 알아간 내용을 정리하려 한다.정답보다는 찾아보는 과정에서 알게된 내용들을 순차적으로 작성하였다. #2 브라우저에서 보낸 request와 curl에서 보낸 request는 무엇이 다른가?1. 둘 다 클라이언트에서부터 보낸 request이다.브라우저에서 보낸 r..

2025. 3. 13. 09:35