프로그래밍(Basic)/Javascript(TS,Node)

[바미] 바벨(Babel)에 대하여

1. 배경 1.1 크로스 브라우징 사용하는 말이 달라서 바벨탑이 실패했듯이, 브라우져마다 사용하는 언어가 달라서 프론트엔트 코드는 일관적이지 못할 때가 많습니다. 스팩과 브라우져가 개선되고 있지만, 여전히 인터넷 익스플로러는 프라미스를 이해하지 못합니다. 작년까지만 해도 사파리 최신 브라우져는 Promise.prototype.finally 메소드를 사용할 수 없었습니다. 히브리어로 바벨이 '혼돈'이란 뜻인 것처럼 프론트엔드 개발에서 크로스브라우징 이슈는 코드의 일관성을 해치고 초심자를 불안하게 만듭니다. 크로스브라우징의 혼란을 해결해 줄 수 있는 것이 바벨이죠. ECMAScript2015+로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 지켜주는데 타입스크립트, JSX처럼 다른 언어로 분류되는 것도..

[바미] Node SQL 파라미터 적용 방법.

오늘은 SQL을 사용하실 때 URL의 특정 값을 파라미터에 넣고 싶을 때 사용하는 방법에 대해 포스팅해보려 합니다. 위와 같은 URL이 있을 때 '카카오'를 SQL로 검색할 때 다음과 같이 작성해주시면 됩니다. app.get('/search=?', function(req, res) { let sql = 'select * from Company where Name = ?'; let params = req.query.name; conn.query(sql , params, function(err, row, fields){//row => 결과값 if(err){ console.log(err); } if(row.length > 0) { console.log("hey!!!!", req.query.name) } els..

[바미] 검색Form검색 이벤트 추가.

부트스트랩 기준으로 공유합니다. 검색 form Search Node.js const express = require('express'); const app = express(); const mysql = require('mysql'); // mysql 접속 설정 const conn = mysql.createConnection({ host : 'localhost', port : '3306', user : 'user', password : 'password', database : 'DB이름' }); app.get('/search=?', function(req, res) { let sql = '사용하실 SQL 쓰시면 됩니다.'; conn.query(sql , function(err, row, fields){/..

[바미] script 태그에 Node.js DB 데이터 넣기

보통 Node에서 DB데이터를 가져와 ejs 파일에 넣으려 할 때 태그를 사용하여 형태로 사용하실 겁니다. 카카오 맵을 사용하다보니

[바미] Array 중복된 id값 제거하기.

Array 내에 id 값이 중복된 것을 제거하는 작업은 정말 많이 쓰이죠. 여러 방법으로 제거 하는 방법을 알려드리겠습니다. let example = [{ id: "무지", value: "1" },{ id: "보르도", value: "2" }, { id: "무지", value: "1" }, { id: "콘", value: "3" }]; 위와 같은 배열이 있을 때 id값이 중복된 것을 제거 해보도록 하겠습니다. lodash _.uniqBy(example, "id"); lodash를 사용하면 위와 같이 한 줄로 가능합니다. 참고로 lodash 라이브러리는 자바스크립트로 개발시 가장 많이 사용되는 라이브러리 중에 하나입니다. array 를 다룰때 번거로움을 없애고 쉽게 사용할 수 있도록 해줄뿐만 아니라 obj..

[바미] RxJS - BehaviorSubject

안녕하세요. 오늘은 BehaviorSubject에 대해 알아보고자 합니다. 먼저 BehaviorSubject는 모든 새 구독에 저장하고 내보내는 현재 값의 개념이 있는 주제의 변형입니다 . 이 현재 값은 소스 Observable에 의해 가장 최근에 방출된 항목이거나 아직 방출되지 않은 경우 시드/기본값입니다. 항상 현재 값이 BehaviorSubject있어야 하므로 초기화 시 초기 값이 필요합니다. 구독 시 마지막으로 내보낸 값을 원하지만 시드 값을 제공하지 않으려면 대신 ReplaySubject 를 확인하세요. BehaviorSubject이 동작은 구독자가 값이 저장된 것보다 훨씬 늦게 구독하더라도 항상 마지막으로 내보낸 값을 직접 가져올 수 있음을 의미합니다 . 관찰자가 a BehaviorSubjec..

[바미] Javascript Observable에 대해 알아봅시다.

안녕하세요. 오늘은 Observable에 대해 알아보도록 하겠습니다. ObservaObservable Observable은 여러 값의 지연푸시 모음입니다. 그들은 다음 표에서 누락된 자리를 채웁니다. SINGLE MULTIPLE Pull Function Iterator Push Promise Observable 예제. 아래 예제는 구독(subscribe)됐을 때, 동기적으로 값 1,2,3을 즉시 넣고, 1초 뒤에 4를 넣고 끝내는 Observable입니다. import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(1); subscriber.next(2); subscriber.next..

[바미] Event 모듈에 대해 알아봅시다.

안녕하세요. 최근 팝업 시스템 관련된 작업을 하면서 알게된 모듈입니다. 팝업이 뜬 상태에서 변경된 데이터를 갱신하는데 있어 상당히 애를 먹었었는데 이를 조금이나마 해소시켜준 것이 Event 모듈입니다. Event 모듈이란 노드의 많은 객체는 이벤트를 발생시키는데, 이러한 객체들은 바로 events.EventEmitter라는 인스턴스를 이용하고 있습니다. 이벤트 이름은 띄어쓰기 대신 대문자로 문자를 구분하는 "카멜(낙타)표기법"을 사용하는 것이 정석이지만 강제는 아닙니다. 모든 메소드는 API 문서에서 볼 수 있으며, 여기서는 이벤트를 발생시키고 삭제하는 기본적인 메소드에 관해서만 알아보겠습니다. Node.js에서는 이벤트 모듈과 EventEmitter 클래스가 내장되어 있는데, 이를 사용하여 이벤트와 이..

[바미] Hoisting에 대해 알아보자!

Hoisting은 어쩌면 우리가 무의식적으로 사용하고있을 수 있다. Hoisting에 특징을 알아보자 모든 변수 선언은 호이스트된다. 호이스트란, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다. 쉽게 말하면 변수가 함수내에서 정의되었을 경우 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우는 전역 컨텍스트의 최상위로 변경됩니다. 말로하는것보다 코드로 이해하는게 더 빠르니 코드를 봅시다. const hoisting = () => { console.log("First-Name:", name); var name = "Marcus"; console.log("Last-Name:", name); } hoisting(); // First Name : undefined // Last Nam..