여씨의 개발이야기

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

오늘도 이상한 업무가 생겼다... 이미 소스가 다 구성되어있는데 DB 이름을 바꾸라구요?ㅠ 아무튼 하라면 해야지... 하고 별 생각없이 유저친화적인 DBeaver를 실행해 여느때와 다름없이 DB 우클릭하여 이름 변경을 하려고 했다. 앵? 앵? 앵? 엥? 에엥? 근데 않되요 외..? 아차차... 잊고 있었는데 mysql은 직접적인 이름 변경이 안 됐다.. 그럼 어떡게해요?... 바로 DB를 Dump / Restore하는 방법이다. 1. 먼저 이름을 변경할 DB 우클릭을 한 후 도구 > Dump database를 실행한다. 2. dump할 DB와 하위 테이블, 뷰를 확인한 뒤 다음 버튼을 클릭한다. 3. 원하는 설정값을 부여한 뒤 Start 버튼을 클릭하여 Dump한다. 4. 새로 생성한 DB를 우클릭한 후..

📢 원인을 알아보자 덤프를 하려는 도중에 참조하는 놈이 invalid하다는 에러가 떴다. 이럴 땐 무조건 view의 ddl을 확인해서 수정되거나 사라진 table 또는 column 또는 function 등이 있는 지 확인해야한다. 😮 해결 방법 필자의 경우에는 참조하고 있는 테이블 중 하나가 데이터베이스 이름이 바뀌어서 나는 오류였다. view의 ddl을 복사해서 replace를 하면 해결된다. CREATE OR REPLACE ALGORITHM = UNDEFINED VIEW `데이터베이스명`.`뷰명` AS select ... from ... union select ... from ... where ...

요즘 여러 사이트를 보면 현재 페이지의 링크를 복사하는 버튼이 기본적으로 있는 편이다. 필자도 웹사이트를 만들면서 링크를 복사를 해야하는 상황이 생겨 어떻게 복사를 해야 할 지 고민을 해보게 되었다. textarea를 임시로 추가해 링크를 복사 및 붙여넣기를 한 뒤에 다시 body에서 삭제하는 방법을 알아내었다. 아래의 소스참고하도록 한다. const linkCopy = () => { var url = ''; var textarea = document.createElement("textarea"); document.body.appendChild(textarea); url = window.document.location.href; textarea.value = url; textarea.select(); d..

🥉 초보자 레벨로 이해하기 1-1. 정의 함수에 파라미터로 들어가는 함수. 순차적으로 실행하고 싶을 때 씀. 1-2. 예시 아래 소스에서는 addEventListener의 argument자리에 function(){...}이라는 anonymous function이 들어간 것을 볼 수 있다. 이러한 함수를 콜백함수라고 한다. 당연히 EventListener를 Add한 객체를 클릭했을 때 function(){...} 함수가 실행된다. document...addEventListener('click', function(){ // 버튼 클릭 시 이 부분에 들어가는 내용이 실행됨 }) 1-3. 특징 - 다른 곳에서 만든 함수도 콜백함수로 넣을 수 있음 - 콜백함수에 함수명을 아무렇게나 작명할 수도 있다.(무조건 an..

🤔 제작동기 토이프로젝트에서 상세 페이지 첫 진입시에 progress를 넣어야 할 부분이 생겼다. 원형 모양의 Progress bar를 제작하려고 한다. 📚 사용할 라이브러리들 1. mui - CircularProgress https://mui.com/api/circular-progress/ CircularProgress API - MUI API documentation for the React CircularProgress component. Learn about the available props and the CSS API. mui.com 👽 소스를 보자 import React from 'react' import {Box, Fade, CircularProgress} from '@mui/materia..

📢 이 버그 좀 보세요! 필자는 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..

📢 왜 이러는 걸까요? 친구와 같이 제작중인 React App에서 router로 연결한 특정 페이지들이 지속적으로 404에러를 뱉는다. 이상하게 localhost로 테스트해보면 잘 나오는 페이지인데, firebase로 배포하면 해당 에러가 나타났다. 💾 레퍼런스 다행히도 우리와 같은 현상을 겪는 이를 stackoverflow에서 발견할 수 있었다. https://stackoverflow.com/questions/48826489/react-production-router-404-after-deep-refresh-firebase React production router 404 after deep refresh firebase i have this routes in my index.js

📢 이 버그 좀 보세요! 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..

위와 같이 이미지와 텍스트가 주어져있을 때 이미지 위에 텍스트를 입히는 방법을 알아보고자 한다. 1. wrap, image, text div를 구성해준다. {id}님의 덕담보따리 2. 각 div에 맞춰 css를 넣어준다. .user-wrap { width: 100%; margin: 10px auto; position: relative; } .user-wrap img { width: 100%; vertical-align: middle; } .user-text { position: absolute; top: 40%; left: 50%; width: 100%; transform: translate( -50%, -50% ); font-size: 20px; font-family: 'ypseo'; text-alig..