//Teacher × Coder × Blogger

힘센캥거루

기술과 교육, 그 경계에서 고민하며 일상의 모든 순간을 코드로 기록합니다.

최신 글 보기 소개 읽기

classTeacher{

subject: [ "지구과학", "정보·컴퓨터"]

skills: ["Python", "JavaScript", "Arduino"... ]

passion: "실험하고 기록하기"

}

게시글

카테고리

2021

시작

Nextjs

OpenAI를 이용한 실시간 오디오 서비스 만들기

Deepseek R1이 나왔지만, 여전히 Open AI가 제공하는 API가 훌륭하고 매력적인 것은 두말할 필요 없다.오늘은 Open AI의 Realtime API를 이용해 실시간 오디오 웹 서비스를 만들어보려고 한다.1. Realtime API란?OpenAI에서 202...

Deepseek R1 설치 및 웹 서비스 구현하기

중국에서 Deepseek R1을 오픈소스로 풀어보는 것을 보고 나도 한번 로컬 환경에서 구동해보고 싶다는 생각이 들었다.그래서 한번 설치해보고, 웹 서비스로는 어떻게 만들수 있을까 찾아 보았다.설치 환경은 맥북 M1 16Gb 모델이다.1. Ollama 설치Ollama는...

ReactMarkdown으로 AI SDK 메세지 꾸미기

지난 글에서 Vercel의 AI SDK를 이용한 chatGPT 서비스를 만들어보았다.그런데 대화를 해보면 글이 뭔가 밋밋하다.뭐라고 하는지는 알겠는데 글이 너무 바짝 붙어있다.그냥 간단하게 className으로 whitespace-pre-wrap을 써줘도 이쁘게 바뀌긴...

Nextjs에서 외부 스크립트 로드 상태 확인하는 법

1. 문제인식Nextjs에서 Script의 로드 여부를 onLaod와 useState를 이용해 확인했더니 문제가 생겼다.예를들면 아래와 같은 예제이다."use client"; import Script from "next/script"; import { useState ...

Nextjs에서 TOC 구현하기

오늘은 남들 다 달려있는 TOC를 만들어보기로 했다.나는 지금 마크다운으로 쓴 글을 next-mdx-remote로 컴파일해서 보여주고 있다.rehype-slug로 이미 제목 태그마다 모두 아이디가 부여되어 있으니 이미 반은 준비되어 있다.일단은 useEffect와 qu...

Nextjs에서 카카오 맵 API 써보기

가끔은 그런날이 있다.'어... 아까 과속 단속 카메라 앞에서 빠르게 지나간 것 같은데?'그런데 과속단속 카메라 위치를 보려고 해도 잘 찾아지지 않았다.그래서 한번 만들어보기로 했다.1. 경기 공공 데이터내가 주로 가는 곳이 경기도였기에, 경기 공공 데이터를 써보기로 ...

힘센캥거루

2025년 1월 20일

10분

1 2 3 4 5