안녕하세요 상훈입니다. 오늘 제가 구현한 내용은 해외 개발자들에게는 익숙한 Buy me a coffee☕ 입니다! 한국에서 제대로 처리되는 내용은 아직 없기 때문에 한국 버전으로 제가 만들어보았습니다. QR-code 를 이용한 방법입니다. 사용환경 🏠 - React.js, TypeScript 개발결과 🚀 1. Real Link with Netilfy 2. GithubLink 만약 같은 내용으로 링크, 혹은 텍스트만 변경하고자 하신다면, 2.GithubLink를 방문하셔서 소스를 다운로드 하신후 사용해주세요! 특별한 디자인 요소를 넣지않고 개발해놓았습니다. 간단한 자기 소개 내용으로 처리했습니다. - Kakao, Toss 버튼에 따라 각각의 QR코드가 띄워지게 처리했습니다! - 글을 작성하면서 떠오른 생각..

FrontEnd/React.js 2023. 2. 21. 16:14

안녕하세요 상훈입니다. 한빛미디어의 '나는 리뷰어다' 활동으로 위 책을 받게 되었고, 직접 코드도 따라 짜보게 되었습니다. e-book으로 받아 Google Play Book 에서 웹으로 읽으며 코딩 해보았습니다. 내가 별점을 매긴다면 ❔ ★★★★★★★☆☆☆ ( 7/10 ) 점 드리도록 하겠습니다. - 여러 API 에 대한 미흡한 소개 및 작성 - 프로젝트를 제대로 완료하지 못한 찝찝함 😎 결론부터 1. 어떻게 하면 좀 더 나은 환경의 로드 퍼포먼스를 볼 수 있을지 다시 생각하게 되었어요. 2. 몇 가지 우수한 API, Libraries 를 알게 되었습니다! (ex. Hygraph, auth0, ... ) 3. 현업자들도 프로젝트를 진행할때 계정 관련 소스들을 직접 건드리려고 하지 않고 외부에서 따로 사..

FrontEnd/React.js 2023. 2. 15. 17:59

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 안녕하세요 상훈입니다. Next.js + Auth0 를 사용하는데, 로그인 포맷을 띄우려고하는데 오류가 나왔습니다. 내 Application 에서 auth0의 issuerBaseURL == Domain 은 이렇게 써져있었고 [ dev-3c... ] 🤬에러발생 저는 아무생각없이 그대로 복+붙 해서 .env.local 에 작성하였었습니다. 여기서 문제가 발생하더라구요 🚀 해결방법 https:// 를 써주는 것을 잊지말고... base url 에 https:// 를 꼭 추가하자 이상입니다

FrontEnd/React.js 2023. 2. 15. 10:38

안녕하세요 상훈입니다. React.js 에서 onclick 이벤트로 state 값을 boolean 형태로 true/false 만들려고 하는데 아래의 무한 루프 에러가 발생하였다. Too many re-renders. React limits the number of renders to prevent an infinite loop. 😎 결론부터 {state ? '숨기기' : '관련영상'} //변경전 onClick = { !state } //변경후 onClick = { () => { !state }} 이렇게 처리하여 에러가 발생하지 않았다. 그냥 콜백함수로 처리했어야했다. 😶 처리하고나서 곰곰히 생각해보았는데.. 운동할때랑 자기 전, 그리고 출근할 때 문득 위 에러가 생각났는데, Callback Functio..

FrontEnd/React.js 2023. 2. 7. 10:15

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 안녕하세요 상훈입니다. Vue.js 를 사용하던 와중, 모달(modal) 팝업을 사용하려고 하는데, 음.. css 로 z-index를 설정하고 뭐하고~ 해도 모달팝업이 정상적으로 안나오더라구요? 그래서 공식문서를 조금조금 뒤져보곤 했습니다. 공식문서에서도 Teleport를 Modal-Popup 에서 사용했습니다. (맨 아래 링크) 그래서 알게 된 😎 How to Use 네, Vue.js 답게 사용자에게 편의성을 제공해주죠. 매우매우 간단합니다. 저는 이렇게 사용하였습니다. to 속성(attribute)이 태그의 대상을 나타내어 body 태그 ( 단 한개의 body가 있으니까요) 를 바라보게 되어 element의 최상단에..

FrontEnd/Vue.js 2023. 2. 4. 22:54

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 안녕하세요 상훈입니다. ✔ 환경 설명 - 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 경로에 위의 파일이 자동..

FrontEnd/Vue.js 2023. 1. 17. 18:34

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 안녕하세요 상훈입니다. ✔ 환경 이번 에러는 에러라고 하기에는 애매하고, 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! 이..

FrontEnd/Vue.js 2023. 1. 16. 15:21

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 안녕하세요 상훈입니다. ✔ 환경 Nuxt.js 3 에서 npm을 이용하여 pinia를 설치하는데 바로 오류가 출력되었습니다. code ERESOLVE ERESOLVE could not resolve while resolving: undefined@undefined .... ✔ 해결방법부터...! //package.json "overrides": { "vue": "latest" }, 이에 해당하는 내용을 추가해주시고, npm 을 이용하여 pinia를 재설치해주시면 됩니다! ✔ 서사 이번엔 Nuxt.js 3 에서 store 를 사용해보고자 pinia를 사용하게 되었습니다. 기존 Vue.js3 프로젝트에서는 그냥 vueSto..

FrontEnd/Vue.js 2023. 1. 13. 17:20