여씨의 개발이야기

요즘 여러 사이트를 보면 현재 페이지의 링크를 복사하는 버튼이 기본적으로 있는 편이다. 필자도 웹사이트를 만들면서 링크를 복사를 해야하는 상황이 생겨 어떻게 복사를 해야 할 지 고민을 해보게 되었다. 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..

node 버전 변경하는 방법을 계속 못 외우고 매번 찾다가 이 기회에 따로 정리해두려고 한다. nvm(node version manager)란 ? 여러개의 노드 버전을 사용할 수 있는 도구 1. 깃헙에서 nvm 설치 https://github.com/coreybutler/nvm-windows/ GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go. A node.js version management utility for Windows. Ironically written in Go. - GitHub - coreybutler/nvm-windows: A node.js v..

내용 출처 : https://www.youtube.com/watch?v=TTLHd3IyErM front-end 개발자가 되기 위해선 총 다섯가지를 학습해야한다 basic tools : 개발을 하기 위한 기본적인 툴 Computer MacOS Windows Linux Text Editor VS Code : 강력한 extend와 무료 라이센스가 큰 장점 IntelliJ : 강력한 리팩토링 기능까지 지원하나 라이센스를 별도로 구입해야 함 Atom Sublime Text Browser Chrome Edge Safari Firefox Terminal Powershell Bash zsh front-end : 프론트엔드 스킬 HTML HTML은 웹의 Structure이다. Tags Page Structure Sema..

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