CodeHoon

안녕하세요 상훈입니다.

ChatGPT OpenAI 의 API 를 사용하려고 하는데, 위와같은 에러가 발생하였습니다.

이와 같은 경우, 기준치 사용량을 초과했다는 뜻입니다. 

제 경우에는 반대로 billing 설정을 안해서 이렇게 되었더군요.. ㅎㅎ

그래서 Free Trial 에서 Upgrade 해주었습니다.

이상입니다.

ChatGPT가 활성화가 되면서 블로그의 값어치가 뚝 떨어졌다는 것이 느껴졌습니다.

기존에 10개의 글을 검색했을 때는 여러 블로그를 살펴보았지만, 지금은 저로서도 ChatGPT 를 사용하고 블로그를 들어가지 않게 되네요.

또한 Bing 의 AI 도 웹 서칭엔진 등을 이용하여 웹 스크래핑하기에 무척 뛰어나더군요. 그래서 있던 광고들을 모두 내렸습니다. 수익성이 거의 전무하다보니 그냥 내려버리는 게 나을 듯 싶더라구요.

이상 주저리 끝

안녕하세요 상훈입니다.

오늘 제가 구현한 내용은 해외 개발자들에게는 익숙한 Buy me a coffee☕ 입니다!

한국에서 제대로 처리되는 내용은 아직 없기 때문에 한국 버전으로 제가 만들어보았습니다.

QR-code 를 이용한 방법입니다.

사용환경 🏠

- React.js, TypeScript

개발결과 🚀

1. Real Link with Netilfy

2. GithubLink

만약 같은 내용으로 링크, 혹은 텍스트만 변경하고자 하신다면, 2.GithubLink를 방문하셔서 소스를 다운로드 하신후 사용해주세요!

특별한 디자인 요소를 넣지않고 개발해놓았습니다.
간단한 자기 소개 내용으로 처리했습니다. 

- Kakao, Toss 버튼에 따라 각각의 QR코드가 띄워지게 처리했습니다!

- 글을 작성하면서 떠오른 생각인데, 모바일 or 웹을 구분해서 버튼 클릭시 동작이 다르게 처리가 되면 좋겠다고 생각이 들었네요. 
추가 구현이 가능하면 구현하도록 하겠습니다.

여유롭게 커피 한 잔 사주시면 감사합니다~

Buy me a Coffee ☕

안녕하세요 상훈입니다.

한빛미디어의 '나는 리뷰어다' 활동으로 위 책을 받게 되었고, 직접 코드도 따라 짜보게 되었습니다.
e-book으로 받아 Google Play Book 에서 웹으로 읽으며 코딩 해보았습니다.

내가 별점을 매긴다면 ❔

★★★★★★★☆☆☆ ( 7/10 ) 점 드리도록 하겠습니다.

- 여러 API 에 대한 미흡한 소개 및 작성
- 프로젝트를 제대로 완료하지 못한 찝찝함

😎 결론부터

1. 어떻게 하면 좀 더 나은 환경의 로드 퍼포먼스를 볼 수 있을지 다시 생각하게 되었어요.
2. 몇 가지 우수한 API, Libraries 를 알게 되었습니다! (ex. Hygraph, auth0, ... )
3. 현업자들도 프로젝트를 진행할때 계정 관련 소스들을 직접 건드리려고 하지 않고 외부에서 따로 사용하려고 한다는 것을 알게되었어요! (기존엔 무조건 내가 만들려고했었음)

일단 잘 배웠습니다!

상세하게 배우지는 못했지만,,,
Nuxt.js는 해보았지만, Next.js는 아예 안해본 입장으로서 좋은 경험이었습니다.
(그렇다고 바로 적용하기는 어려울 것 같네요)

Nuxt.js 를 Vue.js 로 혼자 공부했던 적이 있었는데, 프레임워크의 기능들을 제대로 사용하지 못한 기분이 들었고, 이번 기회로 인해 좀 더 알게되었다는 생각이 듭니다.

이 책에서는 클론 코딩과 같은 느낌이 아니라, 대표적인 기능들만 잘게 쪼개어 몇 가지를 알려주신 듯한 기분이었습니다.

그래서 오히려 클론코딩 스러운 내용을 기대하고 보신다면 실망하실 수도 있어요ㅎㅎ.
- 그래도 읽어보시는 건 꽤나 멋진 선택이실 것 같습니다.

✔  책을 읽으며...

첫 번째로 중요하다고 느낀 것은, [서버와 클라이언트의 분리]🎎 부분이었습니다. (보안과도 관련되어있고)

서버에서의 역할과 클라이언트에서의 역할을 명확하게 구분 지을 수 있었습니다.

2번째로, Router를 이용하여 페이지에 로드 할때 기본적으로 동작하는 것들. (마치 Javascript 로 따지자면 document.ready~ 에 해당하는 내용과 같음) 이 생각보다 더 중요한 것처럼 느껴졌어요.

_app.js 와 같은 파일에서 Client 가 App을 사용할 때 기본적으로 실행되고, 거쳐야하는 것들. 등등...

마지막으로, React.js 에 대해 조금 더 알게되었습니다.

🤬  불편한 Styling

style 부분에서 너무나도 많은 컴포넌트를 import 하고 props를 내려주게 되어 오히려 불편하더라구요.
  → 리액트 자체가 아니라 ui 부분에서 특별히 공부를 많이 해야할 것처럼 느껴졌습니다. (내가 왜..? 라는 생각이 들정도)
  → 이 책에서는 css 파일을 git repo에 넣어놓고 독자들이 다운로드 할 수 있도록 진행했다면 더 편했을 것 같습니다. (서로가)

😥 내가 느낀 Next.js 의 단점

(책에 대한 비판이 아니고, Next.js에 대한 내용임을 미리 말씀드립니다.)

- React.js 기반이어서 그런지.. 코드가 Vue.js 에 비해서 너무 지저분합니다(대충 길어서 보기 힘들다는 뜻)  
  Typescript 까지 적용하면 얼마나 더 길어질지....무섭네요.

👍  마무리는..

제가 프론트엔드 개발자로서 아직 짧은 경력을 가졌지만, 음... Vue.js 에 익숙해진 눈과 머리가 살짝 React.js 의 코드를 불편하게 느끼는 것 같기도 하지만, 제가 기업급의 개발팀장이었다면 유지·보수 측면에서도 React 대신 Vue.js 를 선택할 것 같습니다.

그래도, React는 '자유롭다' 라는 장점이 있으니까요. 

이상입니다.

개발 내용

 "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

Next.js + Auth0 를 사용하는데, 로그인 포맷을 띄우려고하는데 오류가 나왔습니다.

내 Application 에서 auth0의 issuerBaseURL == Domain 은 이렇게 써져있었고 [ dev-3c... ] 

🤬에러발생

저는 아무생각없이 그대로 복+붙 해서 .env.local 에 작성하였었습니다.

여기서 문제가 발생하더라구요

🚀 해결방법

https:// 를 써주는 것을 잊지말고...

base url 에 https:// 를 꼭 추가하자

이상입니다

안녕하세요 상훈입니다.

React.js 에서 onclick 이벤트로 state 값을 boolean 형태로 true/false 만들려고 하는데 아래의 무한 루프 에러가 발생하였다.

Too many re-renders. React limits the number of renders to prevent an infinite loop.

😎 결론부터

<button type="button" onClick={} >
  {state ? '숨기기' : '관련영상'}
</button>

//변경전
onClick = { !state }

//변경후
onClick = { () => { !state }}

이렇게 처리하여 에러가 발생하지 않았다.
그냥 콜백함수로 처리했어야했다.

😶 처리하고나서 곰곰히 생각해보았는데..

운동할때랑 자기 전, 그리고 출근할 때 문득 위 에러가 생각났는데,

Callback Function을 위 onClick 내에 넣어줘야 무한루프 에러가 발생하지 않는다는 것을 깨달았다.

만약 콜백 함수가 아니라, 그냥 함수를 바로 써준다면, 위 !state 기능이 렌더링 되자마자 동작해버리고 또 동작하여 무한루프가 발생하는게 아닌가 싶었다.

공식문서에서도 자바스크립(Javascript)의 onClick 과는 다르다! 라고 써있었는데 간과한 것 같았다.

그리고 테스트를 실시해보았다.

1) onClick 내부에 바로 썼을 경우

<button type="button" onClick={setUpdateitem(!updateitem)}>clickevent</button>

2) 함수로 따로 빼서 사용

const updateItemWithClickEvent = () => {
    setUpdateitem(!updateitem)
    alert(updateitem)
  }

<button type="button" onClick={updateItemWithClickEvent}>clickevent</button>

3) 함수를 따로 빼기 + 호출

<button type="button" onClick={updateItemWithClickEvent()}>clickevent</button>

-> 무한루프 발생

4) 콜백함수 return 으로 선언

<button type="button" onClick={() => updateItemWithClickEvent}>clickevent</button> 
// 동작하지않음

<button type="button" onClick={() => updateItemWithClickEvent()}>clickevent</button> 
// 정상동작

당연한 얘기지만, [함수] 로 사용해야 정상적으로 동작한다. 

2) 상수에 함수를 할당해놓았기 때문에 정상동작함
4) CallbackFunction으로 함수를 호출해야 정상동작함

참고

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

Vue.js 를 사용하던 와중, 모달(modal) 팝업을 사용하려고 하는데, 음.. css 로 z-index를 설정하고 뭐하고~ 해도 모달팝업이 정상적으로 안나오더라구요?

그래서 공식문서를 조금조금 뒤져보곤 했습니다.
공식문서에서도 Teleport를 Modal-Popup 에서 사용했습니다. (맨 아래 링크)

그래서 알게 된 <Teleport>

😎 How to Use

네, Vue.js 답게 사용자에게 편의성을 제공해주죠. 매우매우 간단합니다.

<Teleport to="body" v-if="updateClicked">
  <UpdateItemModal @closeModal="closeModal" /> <!--모달 컴포넌트-->
</Teleport>

저는 이렇게 사용하였습니다.

 to  속성(attribute)이 태그의 대상을 나타내어 body 태그 ( 단 한개의 body가 있으니까요) 를 바라보게 되어 element의 최상단에 위치하게 된다고 합니다.

그래서 z-index 999 로 설정하고 출력하였더니 정상적으로 출력되었습니다. (이렇게 부족한 css 실력을 메웁니다.)

😶 부연설명 

- v-if 를 통해 어떤 내용을 클릭하면 modal 창이 출력되도록 설정하였습니다.
- closeModal 이벤트를  emit으로 받도록 하였습니다.

결과물 이미지입니다.

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

✔ 환경 설명 

- Vite, Vue3, typescript
- .env 파일에 firebase api key 를 넣어놓고 사용하려고 함  => 보안측면

✔ 방법

1. /.env 파일을 준비
2. /env.d.ts 파일을 준비
3. /src/firebase/index.ts  (:아무 경로나 상관없음) 을 준비

1. .env

1) .env에서는 key=value 형태로 작성하도록 합니다.
2) VITE_ 접두어(prefix) 를 적용하여 변수명을 입력합니다. 
    > 미작성시 호출못함

2. /env.d.ts

기본적으로 typescript 기반의 vite 프로젝트를 만들게 되면  root 경로에 위의 파일이 자동으로 생성되어져 있습니다.

/// <reference types="vite/client" />
interface ImportMetaEnv {
  env: {
    VITE_FIREBASE_API_KEY: string;
    NODE_ENV: 'development' | 'production';
  };
}

.env 에서 작성하신 변수명과 똑같이 작성해주세요.
( 실험해봤는데, NODE_ENV는 작성해도 안해도 상관없었습니다. MODE (개발,배포) 버전의 문제라서요.)

여기서 .d 가 의미하는건 declare(선언하다) 라는 뜻.
env의 타입(ts)을 선언(d)하겠다. 라는 의미인 것으로 저는 해석했습니다.

3. /src/firebase/index.ts  (:아무 경로나 상관없음)

저는 해당 파일을 firebase를 사용하는곳에다가 import 할 것이기 때문에 파일로 분리하였습니다.

보시면 상수 firebaseApiKey 를 할당할 때에 import.meta.env.VITE~로 해주었죠?

import.meta.env 를 통해서 환경변수에 접근이 가능합니다. (vite 공식문서에 있음)

그리고 이제 console 혹은 실제 서비스를 사용해보면 정상적으로 출력된것을 확인하실 수 있습니다.

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

✔ 환경

이번 에러는 에러라고 하기에는 애매하고, VSCode를 사용할 때에 발생할 수 있는 내용입니다.

프로젝트는 잘 구동되지만, 에러가 신경쓰였습니다.

Cannot find module './App.vue' or its corresponding type declarations.

src/main.ts 에서 [ import App from '@/App.vue' ] 부분에 밑줄이 그어지면서 에러라고 표기되었습니다.

✔ 해결방법

extensions - @builtin typescript - 설정(settings) - Disable(workspace) 를 해줍니다. 

그리고 reload VSCode! 

이제 빨간 에러문구가 뜨지않는것으로 확인하였습니다.

✔ 원인

이 extension이 .vue 파일을 제대로 읽어내지 못하기 때문인 것으로 보입니다.

진짜 별거 아닌데, 신경쓰여서..

이상입니다.