CodeHoon

안녕하세요 상훈입니다.

AWS - MySQL - DBeaver
ec2 Ubuntu 에 올려진 MySQL에 DBeaver로 접속하는 도중 에러가 발생하였습니다.

Public Key Retrieval is not allowed

서버측 문제인줄 알고 계속 서버쪽을 뒤지고 방화벽 건드려보고 해도 안됐었다. 결국, 서버측 문제가 아니었다.

😎 해결방법

Driver properties - allowPublicKeyRetrieval 를 true 로 변경하고 test connection 을 시도해보도록 하자.

MySQL 8.0 버전이후부터 ssh 연결 시, publicKey를 사용할 경우 위의 옵션을 켜주어야한다고 한다.

그것도 모르고,,, ㅠ

도움이 되셨다면, 여유롭게 커피 한 잔 사주시면 감사합니다~

Buy me a Coffee ☕

안녕하세요 상훈입니다.

오늘 제가 구현한 내용은 해외 개발자들에게는 익숙한 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 ☕

안녕하세요 상훈입니다.

graphQL을 사용하는데, syntax highlight를 시키고 싶다면, 아래처럼 생긴 확장자를 사용하면 됩니다.

이 링크에서도 확인이 가능합니다. 참조해주세요!

감사합니다

안녕하세요 상훈입니다.

한빛미디어의 '나는 리뷰어다' 활동으로 위 책을 받게 되었고, 직접 코드도 따라 짜보게 되었습니다.
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으로 받도록 하였습니다.

결과물 이미지입니다.

이상입니다.

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

안녕하세요 상훈입니다.

✔ 환경

- Firebase / FireStore : v9
- Vue.js3 : Javascript JDK (web)

✔ 에러 발생

파이어베이스(Firebase) - 파이어스토어(FireStore)에 데이터를 insert 혹은 read 하려고하는데 아래 그림과 같은 에러가 발생하였다.

FirebaseError: Missing or insufficient permissions. 

✔ 해결방법

처음 규칙에 들어가보신다면, 저부분이 false로 되어있으실 겁니다.

해당 부분을 true 로 변경해주고, 재테스트 해주세요!

저는 insert를 구현하고 있었고, 해당 내용은 정상적으로 insert 되었습니다

collection 에도 정상적으로 들어온것을 확인하였습니다.

✔ 추가 코드 안내

혹시 몰라서 코드도 첨부합니다.
Vue.js3 - typescript - pinia

// db 정보 선언
const app = initializeApp(firebaseConfig); //위에서 firebaseconfig (키 넣는거 설정 완료)
const db = getFirestore(app);
const itemsDb = collection(db, 'items') // items collection으로 선언

// insert
const docRef = await addDoc(itemsDb, {
    uid: payload.uid,
    type: payload.type,
    speed: payload.speed,
    score: payload.score,
    createdAt: new Date().getTime(),
    updatedAt: new Date().getTime()
});

이상입니다.

참고