잘 되어있는 React를 사용하고 있는데, 왜 Next.js가 필요할까요??오늘 다루어 볼 주제는 Next.js의 라우팅인데, 먼저 Next.js가 무엇인지 알아봅시다.Next.js 란?Next.js는 Vercel에서 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 기능들을 제공합니다. 리액트는 클라이언트 사이드에서만 작동하기 때문에, 첫 화면을 제대로 표시하기 위해 실행 초기에 성능 부담이 생기기도 하고 SEO 효과를 거의 볼 수 없었습니다.이 문제를 해결하기 위해 웹 어플리케이션을 서버에서 미리 렌더링해두는 방법을 연구하기 시작했고,서버 사이드 렌더링을 통해 리액트 앱을 HTML 페이지로 미리 렌더..

졸업 프로젝트로 부분해설을 지원해주는 도슨트 어플리케이션을 제작하고 있습니다. 도슨트 어플리케이션이라고 하면.. 해설 정보를 번역하고 오디오 해설을 들을 수 있도록 해주어야겠지요. 웹앱으로 제작하고 있으니 react와 google cloud API를 이용해 구현하는 방법을 알아볼까요? 목차 이번 글은 다음과 같은 순서로 이루어져 있어요. 구현해야 할 사항 파악하기 서버에서 해설 데이터 받아오기, react-query를 이용해 받아온 데이터 캐싱 translate API를 이용해 캐싱한 해설 번역해 표시 text-to-speech API를 이용해 해설 음성 데이터로 받아오기 Audio 컴포넌트 제작, 일시정지/배속 등 기능 구현 결과 확인! 👍 전체적인 흐름을 그림으로 표시하면 다음처럼 될 거예요. 1. ..

Index Roboflow를 이용한 yolov5 custom training tflite로 변환 리얼타임 카메라로 그림의 중요한!부분을 감지한 뒤 부분별 해설을 제공하는 모바일 어플을 제작하고자 합니다. 관람객이 그림을 카메라로 비추면, 그 그림 안의 부분들을 object detection으로 찾으려고 합니다. 우선 custom training을 위해 colab으로 yolov5 학습을 시키는 과정입니다. 결과물은 pt 파일로 나오는데, 이걸 tflite로 변환시켜 flutter에서 플러그인을 이용해 리얼타임 카메라와 연결할 예정입니다. Custom Object Detection 다양한 곳에서 많고 훌륭한 데이터셋을 제공하고 있지만... 미술작품을 부분별로 감지하려면 그리고 원하는 부분에 대한 설명을 하려..

YOLO (You Only Look Once) is a popular real-time object detection algorithm that can be used to detect objects in images and video. 모바일 환경에 custom object detection model 적용하기 object detection 모델 트레이닝 TensorFlow / PyTorch 이용 mobile-friendly format으로 모델 변환 TensorFlow Lite / Core ML 등 사용 앱에 적용 테스팅 최적화 size reducing / speed improvement Cross-platform development framework에 ML model 적용 데스크탑이나 서버 환경에 ..

데이터베이스 과제 하다가 텍스트 파일을 불러와 한번에 넣고 싶어서 LOAD DATA INFILE '/home/유저명/Desktop/Drivers.txt' INTO TABLE Drivers; 데스크탑에 있는 텍스트 파일을 Drivers 테이블에 넣으려고 했더니 권한 관련 에러 my.cnf 내용을 수정해 주어야 한다 파일 위치 찾기가 힘들었는데 내 경우 Macintosh HD > opt > homebrew > etc > my.cnf 이 경로에 있었음 파인더로 찾고 싶은 경우 Cmd + Shift + . 하면 opt 파일 보일 것이다 해당 파일 vi 로 열어서 [mysqld] 아래에 secure_file_priv = "" 을 넣어서 모든 경로에서 접근할 수 있도록 수정 이후 mysql.server stop m..