남남이루의 고군분투 🌳

1. Billing우선 가장 먼저 해야할 일은 API key 발급과 billing method를 연결하는 것입니다.저는 처음 가입할 때 18$를 무료로 받았고, limit에 18$가 써있었지만 만료된 것인지 API 호출을 해도 429에러를 뱉더라구요. 결국 구글링을 하다 보니, 무료 사용분이 만료되어도 limit에는 사용가능한 것처럼 뜨기도 한다는 것을 알게 되어 결국 card를 연결하고 보증금을 10달러 정도 넣었습니다. 토이 프로젝트로 연결을 하는 것이라, 가장 최소 금액으로 맞추기 위해 세팅은 이렇게 했습니다. 한 달에10달러가 넘어가면 request가 거절되도록 했어요. (기본 세팅은 $120) 2. API 키 발급https://platform.openai.com/api-keysAPI 콜을 하기 ..

새로 레포를 만들어서 git init 할 때마다 default가 master로 되어 있다면로컬 Git 설정 변경하기방법 1. config 설정 cmd 명령어git config --global init.defaultBranch main방법 2. config 설정 파일 수정하기git config --global -e : 로컬 Git 설정 파일 열기.gitconfig 파일 내부에 아래 내용을 입력하기[init]defaultBranch = main이미 만든 프로젝트의 로컬 default 브랜치를 master에서 main으로 변경하려면로컬 브랜치를 main으로 변경하고, 원격 저장소에 반영하기 git branch -m master main // 로컬 브랜치 변경git push -u origin main // ..

Next.js 폴더 트리 == url path 그간의 React 프레임워크를 사용한 개발에서는 별도의 라우팅 처리를 하게 되면 폴더 구조와 url path에 차이가 나기 마련이었다. ex. URL : xx.com/board/detail/1 실제 폴더 구조 : board ㄴ [id].jsx 그러나 Next는 폴더 구조를 그대로 가져가서 라우팅을 해줄 수 있다. 위 예시의 폴더 구조라면 {baseUrl}/board/1 이런식으로 주소에 접근하면 board의 하위 페이지를 불러오게 되는 것이다. 이 주소는 애플리케이션 내부에서 href의 값에 쓰일 때도, router에 들어가는 url 주소값에서도 동일하게 사용된다. 파일 위치가 "app/page.tsx" 라고 할 때, app폴더의 가장 상단인 page.tsx..

global 환경 세팅 파일 : .gitconfig// gitconfig 파일 vscode로 열기git config --global -e[user] name = namnameeroo email = nami.skageec@gmail.com[core] editor = code autocrlf = true[alias] st = status ss = status -s hist = log --graph --all --pretty=format:'%C(yellow)[%ad]%C(reset) %C(green)[%h]%C(reset) | %C(white)%s %C(bold red){{%an}}%C(reset) %C(blue)%d%C(reset)' --date=short ba = branch -a..

Intro 풀스택 인턴으로 근무하며 Web Frontend 개발을 처음 했을 때, 도대체가 JavaScript 파일에서 DOM을 조작하는 코드가 HTML의 스크립트 태그 선언 위치에 따라 언제는 페이지에 반영이 되고, 언제는 안 되는 오류를 겪은 적이 있다. 당시 (본인 제외 유일한 개발자였던) 백엔드 사수는 "스크립트 태그 위치 바꾸면 되던데요?"라고 해주셔서 해결은 했으나, 당시에는 그 이유를 명확히 밝히지 못했었다. 웹 사이트의 디자인을 맡는 것이 CSS, 구조를 맡는 것이 HTML이라면, 살아 숨쉬는 Action을 담당하는 것이 JavaScript라고 비유하곤 한다. 이 때 JavaScript가 서버와 데이터를 왔다리 갔다리 하기 위해서는 JS파일의 비동기 처리를 확실하게 이해해야 한다. "Jav..

프로젝트 계기 최근 가족들의 티켓팅을 몇번 도와주며, 반복적으로 폼을 채우는 일이 잦았다. 필요한 인적사항을 미리 메모장에 정리해두고, 때가 됐을 때 누구보다 빠르게 내용을 한 줄씩 복붙하는 것이 관건이었다. 별거 아니지만, 어떤 내용을 클릭이나 단축키만으로 클립보드에 복사하는 프로젝트를 시작해보려고 한다. 기대 효과 - 전체 프로젝트 사이클을 경험하고, 정리함으로써 실무에서 기초가 될 지식들을 단단하게 만든다. - 로컬 환경에 데이터를 저장하고, 불러오는 동작을 익힌다. - CSS를 빠르게 입힐 수 있는 라이브러리를 탐색하고 적용한다. - 일단 작게 만드는 훈련의 일환! 완벽한 애플리케이션보다 어찌저찌 재밌게 하나의 애플리케이션을 완성해봄으로써 작은 성공을 경험한다. 기술 Set - React (202..