전체 글

시작은정적인 포트폴리오 사이트를 만들려고 다른 레퍼런스를 찾다 문득 그런 생각이 들었다. 포트폴리오가 모여 있는 사이트가 있으면 좋지 않을까? 자신의 이력도 공유할 수 있고!!! 다른 사람들은 뭐하고 사나 구경도 하고그렇게 시작되었다. 예전부터 프론트와 백앤드를 모두 만들어 실 사용되는 서비스를 운영해보고 싶다는 생각을 했었다.회사 다니면서 둘 다하기엔 벅찼고 잠시 휴식기를 가지는 지금이 바로 적기였다! 프론트와 백앤드를 둘 다 구현해보고 싶었던 이유는 풀스택 개발자가 되기 위해서는 아니다 ㅎㅎ...(하나만 제대로 하기에도 벅차다)프론트엔드 개발자도 백앤드에 대한 이해도가 있다면 백앤드 개발자와의 소통이 더 원활하지 않을까라는 생각과서비스를 A부터 Z까지 운영해보고 싶었다. 프론트 기술 스택은 예전 회..

이미지 업로드가 느려 사용자에게 로딩 중임을 알려줄 로딩 UI가 필요했다. 이미지를 업로드하는 과정에서 시간이 걸려, 사용자가 이미지가 업로드되는 동안 아무런 표시가 없어 이미지가 업로드되고 있음을 인식하기 어려웠다. 그래서 사용자에게 업로드 중임을 명확히 알리기 위해서 로딩 UI가 필요했다. 나는 이미지 업로드 시 상단에 progressBar를 통해 업로드 진행률을 표시하기로 결정했다. spinner, skeleton 등 로딩 UI 중에 progressBar를 선택한 이유는 다른 UI를 가리지 않고 전역에서 로딩 상태를 관리하여 표시하고 싶었다. OnUploadProgress를 활용해 ProgressBar에 진행률 업데이트하기 ProgressBar 전역 상태관리 이미지 업로드뿐만 아니라 저장하기 등의..

저번 글에서 가비아에서 도메인을 구매했다! 가비아 도메인 구매 오늘은 드디어 도메인을 구매해 볼 시간이다! 가비아에서 구매를 진행했다. 웹을 넘어 클라우드로. 가비아 그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브 www.gabia.com 원하는 도메인을 입 sollogging.tistory.com 오늘은 구매한 도메인을 EC2 서버에 연결해 보겠다. Amazon Route 53 | DNS 서비스 | AWS Amazon Route 53는 가용성과 확장성이 뛰어난 도메인 이름 시스템(DNS) 웹 서비스입니다. Route 53는 사용자 요청을 AWS 또는 온프레미스에서 실행되는 인터넷 애플리케이션에 연결합니다. aws.amazon.com Route 53에서 호스팅 영역 생성을 해준다. 도메인 이름에는 구매..

오늘은 드디어 도메인을 구매해 볼 시간이다! 가비아에서 구매를 진행했다. 웹을 넘어 클라우드로. 가비아 그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브 www.gabia.com 원하는 도메인을 입력하고 적절한 가격에 원하는 도메인을 선택한다. 신청하기를 누르고 정보를 입력한다. 정보를 입력하고 결제를 하면 결제를 하면 이제 foliohub.me는 1년 동안 나의 도메인이다 ㅎㅎ 저도 이제 도메인이 있답니다 ㅎㅎ

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한테 물어봤더니..