여씨의 개발이야기

index.js 파일 var express = require('express'); var path = require('path'); var router = express.Router(); router.get('/', function (req, res) { res.send({ greeting: 'hihinode' }); }); router.get('/getFileList', function (req, res) { const fs = require('fs'); const dir = './public/template'; const folders = fs.readdirSync(dir).filter((f) => fs.lstatSync(path.join(dir, f)).isDirectory()); var cardA..

소스 정리 및 비교, 최적화 : https://prettydiff.com/?m=beautify Pretty Diff - The difference tool ↑ ↑ ↔ prettydiff.com 한글화되어있는 사이트인데 미리보기 화면으로 소스 정리할 수 있는 사이트 : http://html.segio.com/ko/ HTML 소스 태그정리 (segio.com) 대상 작업 (속성, 태그, 여백)을 선택한 후 아래에서 제거하십시오. 추가할 내용은 콜론으로 구분하여 입력하세요. 태그 삭제시 "!--/--"의 의미는 " " 태그를 의미합니다. html.segio.com 심플한 HTML, CSS 정리 사이트 : https://tools.arantius.com/tabifier Tools - Tabifier (HTML ..

텍스트 파일 읽기 const fs = require('fs'); const text = fs.readFileSync("source.txt"); const textSplitArr = text.toString().split('\n');//띄어쓰기로 나누고 싶을 때는 텍스트 파일 쓰기 const fs = require('fs'); const text = 'UTF-8로 저장될 텍스트'; fs.writeFileSync("target.txt", '\ufeff' + text, {encoding: 'utf8'}); 참고로 Node.js는 파일을 저장할 때 기본적으로 BOM 정보를 저장하지 않기 때문에 \ufeff를 텍스트에 앞에 명시해줘야 함.

📢 이 오류 좀 보세요! 필자는 vscode에서 spring boot dashboard를 사용중이다. 현재 Java + Vue 프로젝트를 제작하고 있는데, 프로젝트명이 바뀌면서 전체 파일들과 폴더부터 시작해 변수 prefix까지 이름을 바꿔야 할 일이 생겼다. 바꾸는 도중에 갑자기 해당 프로젝트가 spring boot dashboard에서 사라져버렸다. 🐞 오류가 나타난 이유? spring - maven 프로젝트는 또 안에 자식 프로젝트가 여러개가 있을 경우 pom.xml의 groupId로 프로젝트들을 그룹핑한다. 그런데 필자는 파일들마다 특정 텍스트를 바꿨는데 groupId도 예외였을까? 물론 아니다. 🕸 어떻게 이 오류를 잡을까? 결론적으로, parent의 groupId, 해당 프로젝트의 groupI..

JS 강의를 듣는 도중에 나온 "Syntactic sugar". 직역하자면 문법적 설탕. 말 그대로 정말 달달하고도 매혹적인 놈이다ㅋ 정의를 내려보자면, 사람이 이해 하고 표현하기 쉽게 디자인된 프로그래밍 언어 문법. 또는 프로그래밍 언어를 더욱 더 간결하고 명확하게 표현이 가능하도록. 즉, sweeter하게 사용 할 수 있도록 도와주는 문법을 "Syntactic Sugar"라고 한다. In computer science, syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express. It makes the language "sweeter" for human..

프로그래밍을 하면서 내가 제일 싫어하는 부분 또 또 나왔다... 일상에서도 시간 계산을 못 해서 그런 지(?) 개발을 할 때도 동기, 비동기 순서 이런 거 나오면 딱 질색이거등요... 그래도 엘리쌤 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%..