여씨의 개발이야기

프로그래밍을 하면서 내가 제일 싫어하는 부분 또 또 나왔다... 일상에서도 시간 계산을 못 해서 그런 지(?) 개발을 할 때도 동기, 비동기 순서 이런 거 나오면 딱 질색이거등요... 그래도 엘리쌤 JS 강의 덕에 이전에 배웠던 동기와 비동기에 대해 복기하며 이해를 조금씩 하고 있었는데, async와 await 강의를 듣는 순간부터 멍때리는 시간이 많아졌다. promise? 그래 너. promise라는 클래스 너 이놈, asynchronous operation(: 비동기 연산자) 이라는 건 잘 알겠어... 안에서 이루어지는 작업이 성공 할 경우에 resolve, 실패할 경우에는 reject를 반환한다는 것도 okok,, 잘 알겠어. 대충 후속 처리 메서드(promise.then(...).catch(.....

🕵️ 디자인 패턴이란 ? 소프트웨어 디자인 패턴은 소프트웨어 공학의 소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책이다. 소스나 기계 코드로 바로 전환될수 있는 완성된 디자인은 아니며, 다른 상황에 맞게 사용될 수 있는 문제들을 해결하는데에 쓰이는 서술이나 템플릿이다. 즉 '효율적인 코드를 만들기 위해 등장한 방법론'이라고 생각하면 되겠다. 소프트웨어 디자인 패턴 - 위키백과, 우리 모두의 백과사전 소프트웨어 디자인 패턴(software design pattern)은 소프트웨어 공학의 소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책이다. 소스나 기계 코드로 바로 ko.wikipedia.org 이번 시간에는 아주 다양한 디자..

보통 우리는 같은 사이트 내에서 다른 페이지로 이동하고자 할 때는 아래와 같이 라우터를 이용해서 redirect하는 방식을 이용한다. this.$router.push("/about"); 하지만 우리가 알아보고자 하는 방법은 같은 사이트 내부가 아닌, 외부 URL을 redirect하는 것이다. 아래의 소스를 보겠다. 해당 소스는 vue앱에 /contact 경로가 있다고 가정할 때, 사용자가 /contact 페이지를 접속할 경우 외부 url인 https://www.google.com/contact/ 페이지를 접속하고자 한다. 가장 쉬운 방법으로는 /contact 와 연결된 소스에 window.location.href 속성을 사용하면 된다. Contact.js Contact Page 위의 소스에서, creat..

요즘 자주 기웃거리는 개발 커뮤니티에서 svelte에 대한 이야기 꽃을 피우는 걸 눈팅하는 도중, 도대체 이 프레임워크가 뭐길래?(프레임워크라고 하기 보다는 컴파일러라고 부르는 것이 더 명확하다고 한다.)라는 생각이 들었다. 그럼 바로 Svelte 공식 홈페이지부터 보러 가야지! https://svelte.dev/ Svelte • Cybernetically enhanced web apps Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work i..

github을 이용하다 보면 잘못해서 보안에 예민한 파일들이 올라갈 때가 있다. 이렇게 이전에 올라간 파일을 원격 저장소에서도 모두 제거하고 싶을 때, 로컬에서 일반적인 파일 삭제를 하고 난 뒤에 commit을 한다면 이전 기록에서 해당 파일을 조회할 수 있기 때문에 좋지 않은 방법이다. 이럴 때 아래와 같은 해결 방법을 사용할 수 있다. 기본적으로 Git에서 제공하는 filter-branch 툴을 사용하는 방법이 있다. 이 포스팅에서는 소개하지 않았지만 별도로 BFG Repo-Cleaner를 사용하는 방법 또한 있으니 따로 알아보면 될 것이다. 1. git filter 명령어 입력 1-1. 파일일 경우에는 아래와 같이 입력한다 git filter-branch --force --index-filter "..

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

은행이름 기본 제공 금리 추가 우대 금리 추가 우대 조건 국민은행 5.0% 1.0% ① 급여이체 우대이율 (연0.5%p) - 신규일이 포함된 월부터 만기 전전월까지 "급여이체실적 월 합산금액 50만원 이상"인 월이 6개월 이상인 경우 ② 자동이체 우대이율 (연0.3%p) - 신규일이 포함된 월부터 만기 전전월까지 자동이체 등 창구 이외의 채널을 이용하여 KB국민은행 입출금통장에서 적금으로 납입된 월이 6개월 이상인 경우 ③ 첫거래 우대이율 (연0.5%p) - 신규일 기준 예적금 상품을 보유하지 않은 경우 (단, 청약관련상품 제외) 기업은행 0.9% ① 종이통장 미발행한 경우 (연 0.3%p) ※ 가입채널(대면/비대면) 무관 ② 당행 급여이체 실적(월 50만원 이상)이 6개월 이상 있는 경우 (연 0.3%..

웹 랜더링에 대한 방식은 정말로 다양하다. 프론트엔드 개발을 하다보면 이에 대한 약어들을 많이 들을 수 있는데, 이번 포스팅에는 이러한 웹 랜더링의 트랜드를 잡고 있는 랜더링 기술에 대해 알아보겠다.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% 금리에 달하는 일반 적금과 비슷한 혜택을 받을 수..

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