여씨의 개발이야기

Promise is a JavaScript object for asynchronous operation. - State: pending -> fulfilled or rejected - operation이 수행중일때 pending 상태 - operation 성공시 fulfilled / 실패시 rejected - Producer vs Consumer // 1. Producer // Promise는 클래스기 때문에 new로 생성 // 성공시 resolve(), 실패시 reject() // when new Promise is created, the executor runs automatically. // promise는 생성하는 순간, executor에 의해 자동으로 돌아가게 되어있음 const promise ..

요즘 회사에서 Vue.js 기반으로 한 웹 솔루션을 제작중인데 아무래도 Vue에서 권장하는 HTTP 통신 라이브러리가 axios여서 그런 지 솔루션에서도 axios를 이용해 api 통신을 하고 있다. 그러다 오늘 문득, Ajax와 Fetch, axios 이 세가지 통신 라이브러리에 대한 개념 정리가 필요하다는 생각이 들었다. 먼저 XMLHttpRequest(XHR)로 기반으로 제작된 Ajax에 대해 알아보자. 1. Ajax ajax란? Asynchronous javascript and xml의 줄임말로 직역하자면 비동기식 자바스크립트와 xml을 말한다. 자바스크립트를 이용한 비동기 통신으로, 클라이언트와 서버 사이에서 xml형태의 데이터를 주고받는 통신방법을 의미한다. jQuery에서 제공하는 $.aja..

최근에 지인에게 프로그래밍을 하는데 Context라는 말이 너무 추상적이어서 이해를 못 하겠다는 질문을 받았다. 어영부영 "어떠한 행위를 할 때 필요한 정보"라고 설명을 해줬지만 프로그래밍을 처음 접하는 지인에게는 이것 또한 상당히 막연하고 추상적인 개념인 것 같았다. 그래서 좀 더 찾아보고 설명해주고자 구글링을 했는데 정말 어썸(ㅋ)한 설명을 stackoverflow에서 발견했다. https://stackoverflow.com/questions/6145091/the-term-context-in-programming/28073970 The term "Context" in programming? I have been programming for some months now and a frequently u..

최근에 면접을 보러다니면서 가장 현타오고 자괴감 들던 것이 내가 사용하는 주력 언어에 대한 워크 플로우를 완벽하게 정리하여 타인에게 설명하는 것에 대한 실력이 부족하다는 것이었다. 하지만 자괴감이라는 감정에 굴복하지 않고 앞으로 나아가는 사람이 되기로 했으니까, 면접을 보고 난 뒤에는 꼭 복기를 하리라 다짐을 했다. 나의 주력 언어는 java 그리고 jsp이다. 요즘에는 프론트엔드에 관심이 생겨 react나 vue.js 스터디를 하고 있지만, 그래도 당신이 자신 있는 언어가 뭡니까? 라는 질문을 면접 중에 받게 된다면 주저없이 java와 jsp를 답 할 것이다. 그렇게 익숙한 언어였지만 놀랍게도 workflow를 설명하라는 문제에 답을 하지 못 했다. 이후 '시키는 대로 구현하면 되지'라는 안일한 생각으..

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(.....