.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'라는 명칭이 있는지 검색해보는 ..

Running the Development Server Next.js 의 개발 서버를 실행하는 법이다. 1. 최초 실행 시 프로젝트를 처음 생성하고, 최초로 서버 실행하기 전에만,터미널에서 아래처럼 'pnpm i' 명령어를 통해, install을 해주고,그 다음에 pnpm dev를 입력한다. pnpm ipnpm dev pnpm i는 프로젝트를 처음 생성하고, '환경 준비(패키지 설치) 단계'라고 생각하면 된다.pnpm i를 실행하면, package.jason을 읽고, 필요한 라이브러리들을 알아서 다운받아 설치한다.설치되는 곳은 node_modules 폴더. 일반적으로 다른 사람과 협업을 하면서, package.jason이 바뀌지 않는 이상, 다시 pnpm i 를 실행할 일은 없다. 2. 최초 실행 ..

https://nextjs.org/learn?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=home Learn Next.js | Next.js by Vercel - The React FrameworkNext.js by Vercel is the full-stack React framework for the web.nextjs.org Next.js 를 어디서 배워볼까 하다가, Next.js 홈페이지를 갔더니, 따라할 자습서가 있다. Next.js Foundation Course Vercel 을 가입하고 로그인 하면, 진행상황도 저장이 되니 한번 해볼만 한 것 같다. 몇 가지 강의를 찾아봤는데, 찾는데 더 오랜 시간이 걸릴 것 같다. 공식 홈페이..

찾아보니 도쿄마라톤은 도쿄 됴쿄청사에서 시작인 것 같습니다. 일단 코스맵을 찾아본 건, 스타트지점 찾아보고, 비행기하고 숙박 예약하려고 ㅎㅎㅎ 나리타 국제공항에서는 도쿄 도청을 찍었을 때, 넉넉히 1시간 30분~2시간 가까이 걸리는 것 같고, 유튜브를 검토해봐도, 실제 나리타 공항에서 도쿄 시내로 스카이라이너로 1시간 20분 소요라고. 하네다 국제공항에서는 도쿄 도청까지 대략 1시간 정도 걸리는 것 같습니다. 모노레일로 공항에서 도쿄시내까지 약 30분 내외라고.. 하네다 공항은 중심지에 가까워서 숙소 이동이 좀 유리할 것 같습니다. 다만, 국제선 옵션이 나리타만큼 다양하지 않을 수 있다고 하네요. 아무래도 나리타 공항이 국제선이 많아서... 스케줄이나 요금 선택이 조금 더 넓을 것 같네..

안녕하세요. 스페이스차일드입니다. 와.. 저에게도 이런 일이!! 2026년도 도쿄마라톤 대회 신청을 했는데, 당첨이 되었습니다. 같이 신청한 러닝 메이트가 먼저 메일을 받고 열어봤는데 탈락이라서, '아 역시 경쟁률이 치열하구나' 했는데, 이렇게 좋은 일이!! 그런 일 없겠지만, 혹시라도 주최측 맘 바뀔까봐 "넌 사실 탈락인데, 오류였어!!" 이런거 할까봐 바로 결제 해버렸습니다. 기부에 동참도 하고, 마스터 카드로 하면 출발지에서 짐 맡기는 비용 ($11달러)까지 면제 되는데, 하필 가진게 BC카드 밖에 없네요 ㅜㅜ 다른 카드로 해도 되고, 페이팔 결제도 가능합니다. 마스터 카드로 하면, 참가권만 결제 해도 짐 맡기는 비용까지 함께 결제가 되고, 저처럼 다른 카드로 하면, 참가권 ..

1. 내 맥(Mac)에 설치된 Git 버전 확인법 Git은 오픈소스도구이므로, 최신버전으로 유지하는 것을 권장하는 편Git은 자동으로 업데이트 되지 않는다 맥(Mac)은 Xcode를 설치하지 않아도 기본적으로 Git이 설치되어 있다.macOS 내장 Git은 보통 최신 버전보다 낮은 편이다. git --version 2. Git 실행경로 확인 (Mac 기본버전 / Homebrew 설치버전) 내 맥(Mac)에 설치된 Git이 Mac 기본 버전인지, Homebrew를 통해 설치한 버전인지 확인법 /usr/bin/git. /opt/homebrew/bin/git which git 3. Homebrew로 Git 최신버전 설치하는 법brew install git 4. 3번에서 Homebew로 Git 최신..

Homebrew는 자동으로 최신버전으로 업데이트 되지 않는다. 터미널에서 직접 명령어를 실행해서 관리해줘야 한다. 1. 현재 Homebrew 버전 확인 내 Mac에 Homebrew를 설치했던가?아래 명령어를 터미널에 쳐 보면 된다. 결과를 알려줄 때, 최신 버전이 얼마인지 함께 알려주면 좋겠지만, 그렇진 않다 brew --version 2. Homebrew 자체 업데이트 Homebrew라는 프로그램 자체를 최신 버전으로 갱신한다. brew update Homebrew 자체 업데이트가 끝나고 나면,아래처럼 유통기한 지난(?) 패키지들도 리스트업 해준다. brew outdated 명령어를 치면, 좀더 상세하게 얼마나 유통기간이 지났는지 최신 버전을 알려준다brew outdated 3. 설치된 패키지 업..

VSC에서 너무 과한 코드 자동완성 기능이 떠서,오히려 귀찮거나실습하는데 방해가 될 때 Visual Studio Code 오른쪽 하단에 작은 코파일럿 로고가 있다.클릭해서, Code Completions - All files를 클릭해서 꺼주면 된다. 끝.

JSX (JavaScript XML)JavaScript 안에서 HTML 같은 문법을 쓸 수 있게 해주는 확장 문법HTML 처럼 보이지만 실제로는 JavaScript브라우저는 JSX를 직접 이해하지 못함- Babel 같은 Code Transformer가 JSX를 React.createElement 형태의 JavaScript 코드로 변환하는 식중괄호 {} 안에 변수나 함수 호출 결과 등을 넣을 수 있음JSX는 내부적으로 컴파일 될 때, 첫 글자가 소문자면 HTML 태그, 대문자면 React 컴포넌트로 취급함- 공식가이드에서도 컴포넌트는 PascalCase(대문자로 시작하는 단어 조합)로 작성할 것을 권장 React는 JSX 사용이 필수가 아니다.공식문서에서도 선택(optional)이라고 말하고 있다.하지만 ..

React를 처음 공부할 때, CDN 방식, 개발환경 방식(번들러, npm) 두 가지가 있다. CDN 방식의 특징HTML 안에서만 임시로 React를 사용할 수 있음React, ReactDOM이 전역변수로 제공됨로컬(Mac)에는 아무것도 설치되지 않음 (기존 설치해 둔 Node.js, npm 미활용)HTML 파일을 열면 React가 실행되는 것처럼 보이지만, 사실은 CDN에서 받아온 JS를 실행하는 것 npm 설치 방식과의 차이npm 방식은 Node.js 환경에 React 패키지를 설치해서 프로젝트 내부에 node_modules/react 형태로 저장CDN 방식은 로컬에 설치 하지 않고, 실행할 때마다 네트워크를 통해 React 코드를 불러옴 리액트 React를 처음 경험/실습 해볼 때, 리액트 설치..

Node.js구글 V8 엔진 위에서 만든 JavaScript 실행환경Node.js를 설치하면 JavaScript 실행환경이 생김브라우저 밖(서버, CLI, 데스크톱)에서도 JS 실행 가능JavaScript를 어디서든 돌릴 수 있는 작업장 같은 느낌 npm (Node Package Manager)Node.js와 함께 설치되는 패키지 관리자Node.js 설치시 자동으로 설치됨React, Express 같은 라이브러리 설치 / 업데이트 / 관리 역할 수행 nvm (Node Version Manager)여러 버전의 Node.js를 설치 / 전환할 수 있게 해주는 버전 관리 도구Node.js + npm 버전을 함께 관리 Node.js와 npm 버전, nvm으로 관리되는 모든 버전 확인 방법(맥 환경(zsh..

애플 인텔리전스 옵션에 보면 Chat GPT를 사용하겠냐는 옵션이 있는데, 이때, Chat GPT 로그인을 이메일로 해두면, 맥에서 따로 Chat GPT 앱을 다운 받아서 같은 메일로 로그인을 하려고 할 때 충돌이 생기는 것 같습니다.   애플 인텔리전스 Chat-GPT 익스텐션에서 로그인 되어 있던 부분을 로그아웃 하면, Chat GPT 스탠드 얼론 버전에서 에러 없이 해당 이메일 계정으로 로그인 할 수 있습니다.    2024년 12월 26일 현재 버전이니, 참고하시고 혹시 변동 사항 있으면 댓글로 알려주세요 :)

안녕하세요. 스페이스차일드입니다. 2024 JTBC 마라톤도 끝나고 이제 겨울이네요.내년 마라톤 대회를 위해서, 혹은 겨울철 체계적인 훈련을 위해서저처럼 가민 스마트워치 구입하려고 블랙프라이데이 기다리고 계신 분 많으시죠? 오늘 드디어 2024년도 가민 블랙프라이데이 할인 정보가 떴습니다! 재미있는 사실은 2024년 11월 14일 현재, 가민 홈페이지에도 소식은 업데이트 되지 않았고,오직 보도자료로만 소식을 알렸다는 점입니다.(똑같은 뉴스내용만 가득 도배 중 ㅎㅎ) 포러너 시리즈와 로드 바이크용 컴퓨터를 할인한다고 하는데,제가 제일 궁금한 피닉스8의 할인 정보는 아직 없네요. 이번 피닉스8이 스쿠버다이빙을 지원하게 되면서,저로서는 드디어 러닝용 시계와 다이빙용 시계를 동시에 해결할 수 있는 제품이 나온 ..

안녕하세요. 후하후하 스페이스차일드입니다. 올해는 제가 처음 하프마라톤을 뛴지 딱 10년째 되는 해였습니다.그래서 작년, 2023년에 내년에 다시 하프마라톤 완주를 하겠다는 글을 남겼습니다.   I'm on Threads as @spacechild7. Install the app to follow my threads and replies.https://www.threads.net/@spacechild7?invite=0    역시 성공법칙 중의 하나죠?선언의 법칙. 선언하면 이뤄진다.    그렇게 선언을 하고 1년 뒤 하프마라톤을 다시 한번 완주하게 되었습니다.예전에 가열차게 달리다가 부상을 당한 이후, 꽤 오랬동안 10km는 뛰었어도, 하프마라톤은 뛰지 않았습니다.무릎 부상에 대한 걱정이 많이 되었기 때..

안녕하세요 스페이스차일드입니다. 자꾸 포스팅이 밀리네요? 어느새 아침 저녁으로 뛰기 좋은 선선한 가을입니다. 가을이 오기 전, 브룩스 하이페리온 맥스를 신상 버전이 나오는 시점에 맞춰 할인받아 구매했습니다. 21.9만원짜리 제품인데, 할인과 쿠폰 등을 먹여서 15만원 정도에… 다른 신발과 번갈아가며 신다보니 100K 정도 신었고, 10K 대회도 얼마 전에 이 신으로 소화했습니다. 오늘은 그 후기를 좀 남겨볼까 해요. 우선 디자인과 컬러도 너무 맘에 드는 브룩스 하이페리온 맥스. 바닥이 단단해서 발목 흔들림은 적은 신 같습니다. 처음 제품을 개봉해서 바닥을 꾹꾹 눌러봤을 때는 글리세린보다 더 몰랑한거 아닌가 하는 생각도 많이 했는데, 적당한 단단함이 글리세린보다는 더 반발력을 만들어주는 것 같습니다. 참고..