Project

patch-package 라이브러리를 유용하게 쓰고 있었으나 loading창이 커스텀이 불가능하여 loading 시 틀 밖으로 삐져나가는 문제가 있었다! 이 라이브러리를 일부 수정해서 사용하기 위해 patch-package를 사용해 봤다! patch-packge는 node_modules에 수정한 사항이 git으로 관리되어 다른 사람들이 실행해도 수정사항이 동일하게 적용되게 해 준다. patch-package Fix broken node modules with no fuss. Latest version: 8.0.0, last published: 7 months ago. Start using patch-package in your project by running `npm i patch-package`. T..

Google Cloud 1. Google API Console에서 새 프로젝트 만들기 Google API Console 로 들어가 로그인 후 새 프로젝트를 만든다. 2. OAuth 동의 화면 사용자 인증 정보 들어가기 API 및 서비스 클릭! OAuth 동의 화면에서 User Type은 외부로 설정해 준다.(외부로 설정해야 google 계정이 있는 모든 사용자가 앱을 사용할 수 있다고 한다.) 앱 등록 수정 - OAuth 동의 화면에서는 * (별표시, 필수)만 입력해주고 넘어갔다 범위는 userinfo.email, userinfo.profile을 추가했다. 테스트 사용자를 추가하면 끝이다! OAuth 동의 화면 완성! 3. 사용자 인증 정보 - OAuth 클라이언트 ID OAuth 클라이언트 ID를 생성..

react-quill에서 에러 발생 react-quill을 아래처럼 static import를 하니 에러가 발생했다. import ReactQuill from 'react-quill' import EditorToolbar from '../toolbar/EditorToolbar' ⨯ node_modules/quill/dist/quill.js (7661:11) @ document ⨯ ReferenceError: document is not defined 에러가 발생한 이유는 react-quill가 로드되는 시점에 document가 정의되지 않았기 때문이다. dynamic import를 통해 모듈을 동적으로 import 했다. dynamic import를 사용하면 react-quill을 서버 측 모듈에 포함하..

무엇을 만든 거죠? 닉네임을 뭘로 하면 좋을까? 내 이름으로 할 수도 없고 뭐 재밌는 거 없나? 싶으셨죠? 이때 ChatGPT API를 활용한 닉네임 생성기가 여러분의 고민을 해결해 줄 수 있습니다! https://nickname-maker.pages.dev/ 닉네임 생성기 - 닉네임 추천 닉네임 생성 사이트. 원하는 키워드나 스타일을 입력하고 닉네임을 추천받자! nickname-maker.pages.dev 어떻게 만든 거죠? chat gpt api를 활용해서 뭔가 만들어보고 싶었다...! 하지만 시작은 거창하게 만들어보려 했으나 끝은 비약했고 api가 유료라는 점과 아이디어 한계로 간단하게 닉네임 생성기를 만들어봤다. 백앤드는 express를 사용해 서버를 구성하고 aws lambda에 배포를 했다...

웹 사이트를 만들었다면 내 사이트를 널리 알려야 하지 않는가?! 사이트를 알리기 위해서는 검색엔진 최적화(SEO) 작업을 해야 한다. 등록을 안 한다고 해서 검색엔진이 못 찾는 건 아니지만 다음과 같은 이류로 등록하는 것이 더 좋다고 한다. 검색 엔진에서 웹 페이지가 노출될 확률이 높아진다. 검색 결과에서 상위에 노출로 트래픽 증가로 이어진다. 검색엔진에 사이트를 제출하면 검색엔진이 웹 사이트를 적절하게 색인화하고 검색 결과에서 보다 높은 우선순위를 부여할 수 있다. 웹 페이지의 내용이 변경되거나 새로운 페이지가 추가되면 검색엔진에 이를 알려 색인을 업데이트할 수 있다. 이를 통해 최신 정보가 검색 결과에 반영되어 사용자에게 더 유용한 결과를 제공할 수 있다. 네이버에 사이트 등록 1. 네이버 웹마스터 ..

처음 썼는데 할당량 초과라고요?! OpenAI를 사용하려고 api 키를 발급받아 사용했더니 아래와 같은 429 에러가 발생했다. 내용을 보니 현재 할당량을 초과했으니, billing details를 확인하라는 것이다! 나는 한번도 쓴 적이 없는데 초과했다고?! 띠용?! 확인해 보니! Credit remaining $0 남은 크레딧이 없으니 결제해서 써야 한다 ㅋㅋㅋㅋㅋ 분명 처음에 무료로 크레딧을 준다고 했는데...? Add payment details를 클릭해서 사용량을 확인해 보니 Expired로 만료되어있었다. 조건이 정확하게 무엇인지 찾지 못했으나 가입 시? 예전에는 18달러를, 최근에는 5달러를 줬다고 한다. 조건이 뭔가 싶어 공식 문서를 찾아보다가 못 찾고 본체인 Chat gpt한테 물어봤더니..

엄청 간단하다. 그럼 바로 시작! 프로젝트 생성 프로젝트에 대한 세팅이 끝났다면 이 과정은 넘어간다 mkdir test cd test yarn init -y // or npm init -y package.json에 필요한 설정들을 해준다. { "name": "@solb/bottom-sheet", "version": "1.0.0", "description": "This is a bottomsheet created with pure JavaScript using Web Components.", "repository": { "type": "git", "url": "git+https://github.com/y-solb/bottom-sheet" }, "keywords": [ "javascript", "typesc..

회사에서 유용하게 사용하던 bottom-sheet가 있어 이를 다른 사람들과도 공유하고 싶어 라이브러리로 만들게 되었다! 또한 npm에 올려 다른 사람들에게 소스 리뷰, 버그 등을 공유받고 싶은 마음도 있었다. 글로벌하게 사용되었으면 해서 영어로 문서화해 두었다..! + 문제점이나 개선 사항은 issue로 남겨주시면 수정해 보겠습니다 💪 bottom-sheet 관련 소스는 기존 포스팅에서 수정과 함께 typescript를 적용시켰다! @solb/bottom-sheet 순수 자바스크립트로 만든 bottom-sheet로, 모바일 웹이나 앱에서는 bottom-sheet 형태로 나타나고 웹에서는 모달 형태로 나타난다. 자세한 Demo는 여기서 확인할 수 있다 (👉 Demo) 이 컴포넌트는 web componen..