여씨의 개발이야기

웹 랜더링에 대한 방식은 정말로 다양하다. 프론트엔드 개발을 하다보면 이에 대한 약어들을 많이 들을 수 있는데, 이번 포스팅에는 이러한 웹 랜더링의 트랜드를 잡고 있는 랜더링 기술에 대해 알아보겠다.CSR(Client Side Rendering)서버에서 HTML을 받아와서 JS주소를 서버로 요청해 동적으로 사용자에게 최종적인 어플리케이션을 보여준다. 대표적으로 SPA가 있다. 위 그림은 CSR의 순서를 나타낸다.1. User는 Website에 요청을 보낸다.2. Edge Caching은 HTML파일과 JS에 접근할 수 있는 링크를 빠르게 보낸다.3. 브라우저는 HTML, JS를 다운로드받는다. (이 때, User는 SSR처럼 페이지 조회를 할 수 없다.)4. 브라우저는 JS를 다운받는다.5. 다 다운로드..

이번 달 21일부터 은행 금리에 추가로 저축장려금까지 지원하는 '청년희망적금'이 출시된다고 한다. 금융위원회는 오는 9일부터 18일까지 가입 가능 여부를 사전에 체크할 수 있는 '청년희망적금 미리보기' 서비스를 제공한다고 한다. 참고로 이 서비스는 시중 은행 앱을 통해 이용할 수 있다. 청년희망적금은 만기가 2년이며, 만기일까지 매달 최대 50만원까지 자유롭게 납입할 수 있는 방식이다. 또한 만기까지 납입하는 경우에는 시중 은행의 금리가 5%에 추가로 저축장려금이라는 것을 받을 수 있는데, 이는 1년차에는 납입액의 2%를, 2년차에는 납입액의 4%까지 지원된다. 은행 금리에 저축장려금까지 합치면 매달 50만원씩 꽉 채워서 납입한다는 조건하에 최대 연 9% 금리에 달하는 일반 적금과 비슷한 혜택을 받을 수..

지난 주 일요일에 제과 실기 시험을 치렀다. 필자는 경기 인천권에서는 정보가 거의 없기로 악명높은 인천 한국외식조리전문학교 부평캠퍼스에서 시험을 봤는데, 악명이 높은 만큼 시험이 어떻게 나올 지 예상할 수 없을 수준으로 그 동안의 시험 출제 과목에 대한 자료가 없어 전 과목에 대한 자료를 전부 훑고 갔었다. 하지만... 그 와중에도 전혀 예상치 못 한 시험과목이 나와서 너무나 당황스러웠다... 😥 시험 장소 외관은 아래와 같이 생겼다. 부평역 다이소!가 있는 그랑프리 빌딩인데 부평역에서 집으로 갈 때 자주 타는 버스 정류장이 바로 앞에 있는 곳이라 친숙했다. (앞으로 매달 갈 일이 있을 거 같아요^^...!) 빌딩 입구 바로 앞에 제과 시험 장소라고 배너가 세워져 있기 때문에 별다른 어려움 없이 들어갈 ..

📢 이 버그 좀 보세요! 🐞 버그가 나타난 이유? 구글링을 해보니 특정페이지에서 다른페이지로 넘어갈 때 조건이 불충족해서 다시 이전 페이지로 이동할 경우에 중복이 되어서 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..