여씨의 개발이야기

📢 이 버그 좀 보세요! 토이 프로젝트에서 .env 파일을 숨겨야 한다는 것을 잊고 있어 뒤늦게 적용시키는 과정에서 난관에 봉착하였다. 숨기는 과정에서 dotenv를 설치해 적용해야한다는 말을 듣고 import dotenv를 한 뒤에 dotenv.config()까지 했는데 프로젝트를 실행하려니 이러한 에러가 생기는 것이었다. 🐞 버그가 나타난 이유? 정말 간단한 문제였다. 해당 프로젝트는 create-react-app을 통해 생성한 react 앱인데, CRA를 통해 생성할 경우에는 당연히 dotenv를 내장한 채로 생성되기 때문에 굳이 위와 같은 import - 소스 적용 과정이 따로 필요없기 때문에 나타나는 에러였다. 🕸 어떻게 이 버그를 잡을까? 별다른 방법이 필요없이, 소스에는 import dote..

📢 이 버그 좀 보세요! 🐞 버그가 나타난 이유? 구글링을 해보니 특정페이지에서 다른페이지로 넘어갈 때 조건이 불충족해서 다시 이전 페이지로 이동할 경우에 중복이 되어서 Redirect가 된다는 원인이 많았다. 하지만 필자는 같은 레벨의 페이지로 이동할 경우에 발생하는 에러로 보여졌다. 🕸 어떻게 이 버그를 잡을까? 위의 오류에서 /roleManagement 에서 /roleManagementCreate로 이동할 때 같은 레벨로 이동하는 것이 아니라 /roleManagement/create로 이동하도록 path를 수정해주니 정상적으로 작동하였다. 이 경우가 아닐 경우 router.push.catch()와 같이 뒤에 catch문을 넣어주면 정상적으로 작동한다는 이야기도 있다. 추후에 다른 원인들도 추가로 업..

📢 이 버그 좀 보세요! 필자는 firestore에 문서를 삽입(setDoc)하는 과정에서 위와 같은 에러를 접하게 되었다. 🐞 버그가 나타난 이유? 구글링을 했을 때는 async, promise 관련 에러로 보였으나, 에러가 난 아래의 소스를 확인해 본 결과 말 그대로 type error였다. setDoc을 할 때 document의 id는 무조건 String형 데이터를 입력해야하나, Number형 데이터가 들어가고 있었던 것이다. const getProfile = async () => { try { const database = getFirestore(firebase); // firestore 접근 // Kakao SDK API를 이용해 사용자 정보 획득 let data = await window.Ka..

📢 이 버그 좀 보세요! let self = this; axios.post(process.env.xxxxx + '/user/update/adminPortal', self.xxxx) .then(function (res) { this.getData(); this.$router.push("/userList"); //$("#updateModal").modal('hide'); }) .catch(function (error) { console.log('Submit Failed', error) }) 위와 같이 axios.post 내에서 router.push를 하면 Cannot read properties of undefined (reading '$router') 에러가 뜬다. 🐞 버그가 나타난 이유? 참조 : htt..

📢 이 버그 좀 보세요! 다른 페이지에서는 잘 돌아가는 toDate 함수가 갑자기 properties를 찾을 수 없다며 오류가 났다. 구글링해보니 제일 많이 발생하는 오류 top 10에 속한다고 한다. 🐞 버그가 나타난 이유? 처음 페이지가 마운트 될 때 View의 props는 undefined 상태이기 때문에 undefined.toDate()가 properties of undefined 에러가 떴다. 🕸 어떻게 이 버그를 잡을까? &&연산자를 이용하자. &&을 통해 props를 통해 받은 값의 유무를 체크한 뒤에 아래 소스에서 selectedValue.grt_date가 undefined일 경우에는 뒤에 toDate()함수를 타지 않도록 처리한다. function View(props) { const { ..

📢 이 버그 좀 보세요! 🐞 버그가 나타난 이유? 위 버그는 모듈을 모두 import하기 전에 변수나 상수를 선언할 경우 발생하는 버그였다. 아래는 버그가 발생한 코드이다. import firebase from '../firebase'; import { getFirestore, collection, addDoc, serverTimestamp } from "firebase/firestore"; const database = getFirestore(firebase); //정보가 올바르면 아래 파이어스토어 접근 import Auth from "./auth"; function MainPage() { 🕸 어떻게 이 버그를 잡을까? import문 다음에 변수/상수를 선언해주자. import firebase from..

📢 이 버그 좀 보세요! 🐞 버그가 나타난 이유? 구글링을 해보니 해당 버그가 발생하는 이유는 render가 되는 과정에서 state를 변화하는 function이 있다면 re-render가 반복적으로 일어나 Too many re-render 버그가 뜨는 것으로 확인됐다. handleClickOpen 함수안에서 state 상태값을 변경하는 함수가 있다. 즉, props를 통해 전달받은 변수를 setState에 넣을때 무한루프가 걸린다고 보면 된다. ... const handleClickOpen = (value) => { setOpen(true); setSelectedValue(value); }; ... // onClick 이벤트내의 handleClickOpen함수가 바로 리랜더링을 유도하는 함수였다. {c..

📢 이 버그 좀 보세요! 배열로 된 데이터를 map을 이용해서 뿌려줄 때 위와 같은 오류가 났다. 🐞 버그가 나타난 이유? map으로 데이터를 뿌려주는데 unique한 키값이 없어서 나는 오류이다. 맵 리스트 데이터는 고유한 키값이 꼭 있어야 한다. 🕸 어떻게 이 버그를 잡을까? 당연 키값을 만들어주면 된다. firestore의 document의 id를 배열에 추가해주었다. const fetchCard = async () => { const database = getFirestore(firebase); //정보가 올바르면 아래 파이어스토어 접근 const q = query(collection(database, "users/SUE3vmEn1CixjZiBBxZZ/greetings")) getDocs(q).t..

📢 이 버그 좀 보세요! firestore를 연결하는데 계속 permission denied 에러가 떴다. 로그를 자세히 뿌려주지 않아서 구글링하는대로 AtoZ 방법을 모두 적용해보았으나 전혀 해결이 되지 않았다. (물론 firestore 규칙도 다 수정해주었다.) 🐞 버그가 나타난 이유? 말 그대로 permission 문제인데, firestore의 규칙 설정을 안 해줬을 때 제일 많이 생겨나는 오류라고 한다. 하지만 필자의 경우는 달랐다. 몇 시간동안 머리를 싸매고 소스코드를 이 곳 저 곳 수정해 본 결과 결국 문제의 원인은 가장 가까운 곳에 있었다. 바로 설정값이 들어있는 .env 파일의 값을 인식을 못 하는 것이었다. 🕸 어떻게 이 버그를 잡을까? .env 파일안에 있던 config 값을 바로 입력..

📢 이 버그 좀 보세요! 기존에 만들어져있는 Vue 프론트엔드 소스를 build하는 과정에서 위와 같은 오류가 났다. 🐞 버그가 나타난 이유? "Local package.json exists, but node_modules missing, did you mean to install?" 해석한 그대로 package.json이 있지만, node_modules 파일이 존재하지 않아 생긴 에러다. 🕸 어떻게 이 버그를 잡을까? node_modules를 설치해주면 위의 에러를 잡을 수 있다. > npm install ... -- 설치 뒤에 > npm run build -- 정상 작동함