안녕하세요. 스페이스차일드입니다. 깃허브가 AI 모델링을 학습시키는데 공개(public)으로 올린 레포지터리 코드를 AI 학습용 데이터셋으로 활용하겠다고 했습니다. 내 코드가 남의 프로젝트에 마구 쓰인다면 기분이 좋지는 않겠죠. 아래 설정을 해두면 깃허브가 AI 모델 트레이닝에 내 코드를 사용하지 못합니다. 우선 아래 링크로 가서, privacy 항목을 찾아 스크롤 합니다. https://github.com/settings/copilot/features 그리고 아래 두 항목을 각각 블럭, 디스에이블드 해 주시면 되겠습니다. ㅇ Suggestions matching public code : Blocked ㅇ Allow GitHub to use my data for AI model trainin..

안녕하세요. 다다다다 스페이스차일드입니다. 러닝 페이스 앱을 하나 런칭했습니다. https://pace.spacechild.net/ 가민 워치를 쓰다보면, 페이스를 MM:SS/km로 표기해주는데, 트레드밀에서 쓸려면 시속으로 변환을 시켜줘야 합니다. 매일 매일 밖에서 뛰는 사람들은 상관이 없기도 하고, 또 자주 쓰는 트레드밀 속도는 외우기도 합니다. 하지만, 가민에서 아래 사진처럼 여러 개의 페이스가 뜨면, 바로 바로 시속으로 계산하기도 힘이 들죠. 그래서 만들어 봤습니다. 가능은 간단합니다. 페이스를 시속으로 자동 변환페이스, 시속을 입력하면 자동으로 10K, 하프, 풀 마라톤 예상기록 출력마라톤 목표 시간을 입력하면, 목표로 해야 하는 페이스와 시속을 출력 라이브 하기 전에, 왠만한 ..

안녕하세요. 스페이스차일드입니다. 바야흐로 대 AI 툴의 시대인 것 같습니다.자고 일어나면 새로운 툴이 나오네요. 제 취향의 이름을 가진 '안티그래비티(antigravity)'를 설치해봤습니다. VSCode의 설정들을 불러올 거냐는 질문에 YES를 택했는데, 아직 뭐 특별한 감흥은 없네요.그런가 보다... 하고 있습니다. 한가지 신기했던 것은 깃허브 연동과 레포지터리 생성을 'Agent'에서 대화형으로 할 수 있다는 점이었습니다. 진짜 AI 비서와 일하는 시대가 온 것 같은 기분이 들었습니다. 실제로 아래처럼 명령을 하니, 알아서 터미널 명령어를 실행시키네요. 물론 깃허브 로그인과 인증코드는 제가 입력하는 과정이 있었습니다. 처음에 제가 원하는 로컬 위치에 프로젝트가 생성이 안되었는데, 이..

안녕하세요. 스페이스차일드입니다. 2026 도쿄 마라톤 대회 사진이대회 하루가 지나고 드디어 올라오고 있습니다. 아래 링크에서 생년월일, 배번번호를 입력하면 조회가 가능하고,오늘부터 조금 더 작업이 되어서 사진이 추가될 거라고 합니다. https://g.allsports.jp/en/event/events/1709580/pages/1529055 신기하게도 저도 꽤 여러장 찍혀 있고,단독샷으로도 몇 장 찍혀 있네요. 한 장 당 거의 26달러, 4000엔 수준이고, 자기 배번으로 검색되는 모든 사진을 다운 받는 것은2.7천엔, 170달러 수준입니다. 다운 받고 싶은 사진 5~6장 정도만 있어도 스페셜 데이터 다운로드 하는 게 더 나을 것 같네요. 저도 지금 구매하지 않아서 정확하진 않지만,달리기를 했던..

안녕하세요. 스페이스차일드입니다. 국내 마라톤은 공식 기록 나오기 전에, 비공식 기록이라도 조회할 수 있는 링크가 날아오는데 도쿄 마라톤은 바로 날라오진 않더라구요? 검색을 해보니, 아래 링크에서 검색할 수 있습니다. https://runnet.jp/project/tokyo2026/results/ 東京マラソン2026「東京がひとつになる日。」東京マラソン2026の大会公式ウェブサイトです。コースマップ、エントリー情報などご確認いただけます。www.marathon.tokyo 일본어로 나오는데, 오른쪽 상단에 언어 설정을 한국어나 영어로 바꾸면 됩니다. 중간 탭인 '선수검색'으로 들어가서 배번을 입력해서 검색하는 것이 빠릅니다. 이름은 풀네임으로 정확히 넣어도 비슷한 이름들이 같이 나오니까, 배번이 가장 정확하겠습니..

저번에 유료 ChatGPT를 VSCode와 연동하는 법에 대해서 간단히 포스팅 했었습니다. 실제로 이 이후에, 맥용 ChatGPT도 VSCode와 연동해서 잘 쓰고 있고,VSCode 내에서도 Codex Extension 채팅창으로 재밌게 잘 쓰고 있습니다. https://spacechild.net/619 [ChatGPT] 유료 ChatGPT과 VSCode를 연동하는 법(CodeX 익스텐션)안녕하세요. 스페이스차일드입니다. ChatGPT 유료버전을 쓰고 있는데,GitHub Copilot에서 제공하는 ChatGPT 버전은 늘 단독 ChatGPT 버전보다 낮더군요. 오늘은 ChatGPT 단독 앱과 VSCode를 연동하는 방법에 대spacechild.net 오늘 예전에 누가 Cursor를 추천해준 게 생각..

안녕하세요. 스페이스차일드입니다. 어제 늦은 밤 퇴근하고 집에 와서,v0.dev 사이트에 접속해서 웹페이지 화면을 하나 만들어 봤는데,성능이 정말 대단하네요. https://v0.app/ v0 by VercelYour collaborative AI assistant to design, iterate, and scale full-stack applications for the web.v0.app Vercel 이 만든 서비스라고 하는데, 프론트엔드 페이지를 자동으로 생성해주고,리액트 코드를 바로 생성해주는 플랫폼입니다. 말 그대로 '딸깍'으로 웹 페이지의 프로토타입을 만들어내는 시대가 왔네요. 아무거나 하나 툭 던져 봤는데,한 10번 정도의 수정으로 만족스러운 결과물을 만들어내줬습니다. 더 재밌는건..

안녕하세요. 스페이스차일드입니다. 앱이나 웹서비스를 출시할 때,가장 중요하게 생각하는 것은 본인의 만족이나 즐거움, 그리고 수익(보상)이겠죠. 에드센스를 오랫동안 사용한 사람으로서, 때로는 광고보다는"옛다. 고생했다."는 식으로 Donation을 받는게 더 나을 때도 있다는 생각을 종종했습니다. 그러다가 "Buy Me A Coffee"가 떠올랐습니다.옛날에 개발자들이 이런거 달아놨을 때, 얼마나 멋있다고 생각했었는지.언젠가는 나도 저런 거 꼭 한번 가져봐야지 하는 생각을 했던 것 같습니다. 그래서 뭐 아직 붙일 서비스도 없고, 페이지도 없는데 냅다 질러버렸네요.그동안 뭘 그렇게 미루고 살았던가. 참고로 후원 플랫폼들은 많습니다.Buy Me a Coffee, Ko-fi, Patreon, Paypal 등등..

Next.js + Tailwindcss로 개발할 때 프론트엔드 개발의 시작은 HTML + CSS + JavaSript이고,웹브라우 저마다 설정된 default 값을 없애고 디자인 통일성을 위해서, reset.css 를 습관적으로 사용합니다. 그래서 next.js + tailwindcss 조합으로 프로젝트를 생성했을 때도 reset.css 파일을 생성해서 불러오거나,reset.css 파일 내의 초기화 내용을 globals.css 파일에 넣으려는 경우가 있는데, 많은 경우에서 에러가 납니다. 일단 결론부터 이야기 하면tailwind는 자체 리셋 시스템을 이미 내장하고 있습니다. Preflight라고 부른다는데, tailwind를 쓰는 순간 이미 'reset.css'가 적용된 상태가 되는 것이라고... ..

지난 포스팅에서, The Movie Database의 API를 발급 받았으니, 이제 발급 받은 API로 TMDB에 요청을 보내고, 또 회신을 받아봅시다. * TMDB의 API_KEY를 발급받지 않았다면 아래 포스팅을 참고합시다. https://spacechild.net/625 [TMDB] The Movie Database API Key 발급받는 법(무료, 개발용)The Movie Database (TMDB) https://www.themoviedb.org/ 'The Movie Database'는 전 세계 영화, TV 프로그램이 정리된 방대한 사이트입니다. 너무나도 감사하게도, 사람들이 고생해서 별도의 DB를 만들지 않고도 본인spacechild.net curl의 데이터가 뭐가 있는지 알고 요청할 수도..

API Call, API, Query, 그리고 서버 API 호출을 한다는 것은 API에 요청을 보내고, 데이터를 응답받는 일련의 과정을 말합니다. 이를 식당에 비유하면, API는 식당에서 주문할 수 있는 메뉴판(설명서)입니다.시킬 수 있고 받을 수 있는 주문이 정의되어 있습니다. 이것이 식당의 규칙입니다. * API (Application Programming Interface) 쿼리(query)는 이 메뉴판에 있는 음식을 고르는 행위입니다.API를 보고 그에 맞는 주문(요청)을 하는 것입니다. 여기서 API를 보고 규칙에 맞게 요리(데이터)를 주문(query)하는 것을 통틀어,API call(API 호출)이라고 부릅니다. 이때, 서버는 주방입니다.우리가 메뉴를 보고 주문 하면(API call)..

The Movie Database (TMDB) https://www.themoviedb.org/ 'The Movie Database'는 전 세계 영화, TV 프로그램이 정리된 방대한 사이트입니다. 너무나도 감사하게도, 사람들이 고생해서 별도의 DB를 만들지 않고도 본인들의 DB를 이용할 수 있게, API를 제공합니다. 그리고 이 API를 이용하기 위해서는, 개발자 개인별로 발행되는 'API_KEY'가 필요합니다. TMDB API Key 발급 받는 법 1. TMDB 사이트 가입부터 우선, 필수선행 조건. TMDB 사이트에 가입부터 해야 합니다. 2. API 발급 페이지로 이동하기 프로필 > 설정 > API로 이동합니다. 최종 도달하는 URL : https://www.themoviedb.org/set..

파비콘 (favicon) favorite icon의 줄임말이라고 하네요.저도 검색해보고 처음 알았습니다. 이제는 고인이 되어버린, 인터넷 익스플로러....IE 5 시절에 즐겨찾기를 하면 옆에 따라붙는 아이콘이라서 파비콘이라고 하네요. 요즘은 없으면 허전한거 같아요. 여러개의 탭을 열어놨을 때도 구분이 쉽고,사이트의 정체성을 나타내기도 하고요. 특히, 구글 크롬에서는 브라우저의 홈 화면에서 뜨기도 해서은근히 신경이 쓰이는 부분입니다. 파비콘의 규격 (확장자, 권장 사이즈) 전통적으로 기본 확장자는 .ico 요즘은 png, svg도 지원한다고 합니다. 파비콘의 기본 사이즈는 16x16 pixel 인데,앞에서 살펴본 것처럼 사이트의 정체성을 대표하는 성격이 점점 강해져서 한번 만들 때, 동일한 이미지로다..

프로젝트의 코드 구조를 터미널에서 파악하고 싶을 때,혹은 트리구조를 txt파일로 만들어서 공유하고 싶을 때 유용한 tree라는 앱이 있습니다. 설치하기 맥에 이미 홈브루가 설치되어 있다면, 터미널에서 아래 명령어로 설치가 가능합니다. brew install tree 아래와 같은 화면이 나오면서 설치 완료! 이제 원하는 위치에 가서 아래 명령어를 치면, 해당 폴더에 있는 파일들의 구조가 트리형식으로 표현이 됩니다. tree 필수 Tree 명령어 그냥 tree 명령어를 치면, 모든 하위 폴더 안의 내용까지 다 나오기 때문에 몇 가지 옵션 명령어를 익혀두면 편합니다. 1. 기본 : 모든 구조를 다 보여준다. tree 2. 디렉토리들만 보기 : 프로젝트 구조분석에 좋다. tree -..

.env 파일이란 무엇인가? .env 파일 형식은 간단한 key=value 쌍으로 이루어진 텍스트 파일이다 시스템의 환경 변수를 정의하는 데 사용되는 셀 스크립트 문법에서 유래했다고... .env는 'enviroment'의 약자인 것. .env 파일 형식을 사용하는 이유 보통 API_KEY를 저장한다던지, DATABASE_URL을 적어두는데 많이 사용한다. 민간함 정보를 코드에서 분리하여 하드코딩하는 것을 방지하는 목적이다.API_KEY=YOUR_SECRET_KEYDATABASE_URL=postgres://user:password@host:port/dbname .env 파일 작성하는 법 위처럼 변수 이름은 대문자와 언더스코어(_)로 구성하는 것이 관례다. 관례는 적당히 따라줘야 간지라는 ..

GitHub에 있는 리드미(readme) 파일은 마크다운 서식을 사용한다. * 참고로 readme 파일은 VSCode에서 직접 수정할 수도 있고, GitHub에서 수정할 수도 있다. Next.js로 프로젝트를 생성한 경우에, readme에 자동으로 실행방법 등이 기재되어 있을텐데, 이 내용은 살려두고, 그 위에 자신의 메모를 입력하고 싶을 수 있다. 그럴 때, 문단 구분선으로 ***. ---, ___ 등의 구분자를 사용할 수 있다. 나는 ___ 방식을 쓰는 편 참고로 이렇게 GitHub 홈페이지에서 직접 리드미 파일을 수정해줬다면, 맥 VSCode 터미널이나, 맥 터미널(프로젝트가 있는 폴더에서) 아래 명령어를 쳐서, 로컬-GitHub에서 쓰는 프로젝트 파일을 동기화 시켜줄 필요가 있다...

사전 준비 사항npm과 Node.js는 당연히 설치가 되어 있다고 가정합니다.나한테 Node.js가 있는지 없는지, npm이 있는지 없는지 모른다면 아래 글 참조https://spacechild.net/607 프로젝트 생성하기 1. 프로젝트(폴더)를 생성할 폴더로 이동한다 저는 보통은 Projects/ 밑에 프로젝트 폴더를 만드니까, Projects 폴더로 이동합니다. Next.js는 프로젝트 생성 명령어를 치면, 프로젝트가 생기면서 자동으로 폴더가 생성이 됩니다. 해당 폴더가 곧 프로젝트인 개념입니다. 2. 프로젝트 생성 명령어 실행 터미널에 아래 명령어 중 하나를 칩니다. 제일 많이 쓰는 건 npm 방식# npmnpx create-next-app@latest my-app# pnpmpnpm c..

안녕하세요. 스페이스차일드입니다. ChatGPT 유료버전을 쓰고 있는데,GitHub Copilot에서 제공하는 ChatGPT 버전은 늘 단독 ChatGPT 버전보다 낮더군요. 오늘은 ChatGPT 단독 앱과 VSCode를 연동하는 방법에 대해서 알아봅시다. 맥에 VSCode와 ChatGPT가 둘다 깔려 있다는 가정하에 진행합니다. 1. ChatGPT 하단의 저 모양을 클릭하면, work with...옵션에서 Code가 나옵니다. 설정한 적이 없으니 'Set up'이라고 나옵니다. 클릭 2. VSCode 내부 익스텐션 설치화면이 나오면서 CodeX가 나옵니다. ChatGPT를 만든 Open AI사가 만든 익스텐션이네요. 인스톨. 인스톨 하려고 하면, 이거 만든 애를 믿냐고 ..

맥에서 ChatGPT를 앱으로 사용하고 있습니다. 아주 유용하게 잘 쓰고 있는데, 최초 설정 때 분명히 무슨 옵션을 켰던 것 같습니다. 저는 평소에 맥에서 바탕화면(데스크탑)을 여러 개 쓰는 기능을 잘 쓰는데. 어느 날 갑자기, ChatGPT 앱이 어느 화면으로 전환을 해도 항상 따라오는 겁니다. 예를 들어, 한쪽 화면에서 ChatGPT를 쓰다가, 다른 화면에 띄워 놓은 VSCode로 돌아가면, ChatGPT가 따라와서 다른 화면에서도 같은 위치에 항상 떠 있는 식입니다. 여간 불편한게 아니더군요. 몇 번을 검색을 해 봐도 해결법이 제대로 나오지 않았는데, 오늘 에러난 챗GPT 앱을 끄려고 독에 있는 챗GPT 앱을 우클릭했다가 발견했습니다. ChatGPT 앱 우클릭 > Options ..

npm 패키지 배포란? npm은 Node.js 생태계의 대표 패키지 레지스트리입니다. npm에 패키지로 배포한다는 것은 내 프로젝트(코드/함수)를 하나의 라이브러리/모듈로 만들어서 다른 개발자가 npm install로 바로 가져다 쓸 수 있게 공개하는 것을 말합니다. npm은 전 세계 단일 네임을 사용하기 때문에, 같은 이름을 쓸 수 없습니다. 만약 npm에 패키지로 배포를 하려고 한다면, 같은 이름을 쓰는 패키지가 있는지 확인해봐야 합니다. npm에 내가 쓰려고 하는 패키지 네임이 있는지 확인하는 법 3가지 1. npmjs.com에서 직접 검색 해보기 https://www.npmjs.com/ 사이트에 들어가서 내가 원하는 이름을 검색해봅니다. 예를 들어 'ACE-BED'라는 명칭이 있는지 검색해보는 ..