프론트 엔드/Javascript

[Node.js] Node.js로 디스코드 봇 만들기

Node.js를 사용해서 디스코드 봇을 제작하는 방법을 알아보겠습니다. 노드JS 이외에도 파이썬, 자바 ,Go 등 다양한 언어로 제작할 수 있으나, 현 시점에서는 Node.js를 기준으로 설명드리겠습니다. 디스코드 봇을 만들기 위해 서버를 돌려줄 기기 혹은 서비스가 필요합니다. 개인 PC로도 충분히 되지만, 24시간으로 돌릴 서비스에 windows10을 사용하는 것은 추천하지 않고, 개인 PC를 사용하는 것도 더더욱 추천하지 않습니다. GitHub - marshallku/Discord-IU-Bot: IU Bot for Discord IU Bot for Discord. Contribute to marshallku/Discord-IU-Bot development by creating an account on..

[Javascript] 정규표현식 - 정규표현식이란? RegExp 와 플래그

알고리즘에서 문자열관련 코딩 테스트를 풀다보니 정규표현식이라는 개념이 나왔습니다. 물론 정규표현식을 사용하지 않더라도 다양한 메서드를 통해 문제를 풀어나갈 수 있지마 언젠가는 이런 문법이 필요해지는 경우가 올 것이기 때문에 이전에 정리한 정규표현식을 업그레이드 한다는 마음으로 포스팅을 작성해보겠습니다. 1. 정규표현식 이란? 정규표현식이란 무엇인가 부터 알아볼 필요가 있을 것 같습니다. MDN에서는 다음과 같이 정의하고 있습니다. "정규 표현식은 문자열에 나타내는 특정 문자 조합과 대응시키기 위해 사용되는 패턴이다. 자바스크립트에서, 정규 표현식 또한 객체이다." 간단히 말해 문자열에서 특정한 문자를 찾아내기 위해 사용되는 하나의 패턴이라고 볼 수 있습니다. 자바스크립트에서는 이 뿐만 아니라 프로그래밍 ..

[Javascript] Object, key, values, entries, assign

이번시간에는 자바스크립트의 자료구조와 자료형에대해 알아보는 시간을 가져보겠습니다. 개별 자료 구조에서 한발 뒤로 물러나서 순회(iteration)에 관해 이야기를 나누고자 합니다. 자바스크립트에서 순회에 필요한 메서드로는 map.keys(), map.values(), map.entries()에 대해 알아봅시다. 이 메서드는 포괄적인 용도로 만들어졌기 때문에 메서드를 적용할 자료구조는 일련의 합의를 준수해야 합니다. 커스텀 자료구조를 대상으로 순회를 해야 한다면 이 메서드들은 쓰지 못하고 직접 메서드를 구현해야 합니다. keys(), values(), entries()를 사용할 수 있는 구조는 다음과 같습니다. Map 함수 Set 함수 Array 함수 일반 객체에서도 순회 관련 메서드가 존재하는데, key..

[Javascript] 디바운싱과 쓰로틀링

디바운스와 쓰르톨링모두 웹에서 발생하는 이벤트를 제어하는 방법중 하나입니다. 예를 들어서 스크롤 이벤트의 경우 스크롤링을 할 때마다 발생하는데, 그 때마다 같은 작업을 실행하게 되면 성능 문제가 발생할 수 있습니다. 디바운스와 쓰로틀링을 적절한 상황에 사용한다면 그런 상황이 발생하지 않도록 방지할 수 있습니다. 두개의 용어가 약간 생소할 수 있는데 간단히 정의해보면 쓰르톨링: 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것 디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출되도록 하는 것 디바운싱 (Debouncing) resize 이벤트 시 실행되야할 내용을 작업하면서 디바운스를 실제로 사용해보았습니다. resize 이벤트는 브라우저의 크기를 줄이..

[Javascript] Promise.all 이란?

Promise자체의 뜻은 약속이라는 뜻입니다. 여기서 all이라는 것이 붙으면 어떤 뜻일까요? Promise.all Promise.all 이라는 뜻은 모든 프라미스가 이행될 때까지 기다리다 그 결과 값을 담은 배열을 반환하는 매서드입니다. Promise란? 위 그림은 동기와 비동기에 대한 설명을 담은 그림입니다. 데이터를 요청하고 응답이 들어올 때까지 다른 task들을 처리할 수 있도록 하는 것이 바로 비동기입니다. prmise는 위의 비유와 같이 진동벨과 같은 역할을 한다고 생각할 수 있습니다. 사장님과 손님의 진동벨을 연결하는 것과 같이, 프로미스(Promise)는 '제작 코드'와 '소비코드'를 연결해주는 특별한 자바스크립트 객체입니다. '제작 코드'와 '소비 코드'에 대한 설명은 아래에서 코드를 보..

[Javascript] 자바스크립트 엔진, V8

Javascript 엔진? 개발자가 자바스크립트에 대한 코드를 짜면 이 자바스크립트 코드를 해석하고 실행시켜줘야 하는데, 바로 이것이 자바스크립트 엔진의 역할을 담당한다. 자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하기 위해 안들어진 일종의 프로세스 가상머신인 것이다. WebPack 에서는 자바스크립트 엔진을 다음과 같이 정의한다. 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다. 자바스크립트 엔진은 전통적인 인터프리터일 수 있고, 특정한 방식으로 바이트코드로 JIT 컴파일을 할 수 있다. 여러 목적으로 자바스크립트 엔진을 사용하지만 대체적으로 웹 브라우저에서 사용된다. 자바스크립트 엔진의 역할 자바스크립트 엔진의 역할은 어떤 역할을 담당해주는 것일까? 자바스크립트 ..

[Javascript] Event Loop

Event Loop? Event Loop란 자바스크립트에 기반인 동시성 모델이라고 합니다. 이벤트 루프는 코드 실행과 collecting(이벤트 수집) and processing events(이벤트 처리), queued sub-tasks(큐에 놓인 하위 테스크) 실행을 담당합니다. 이 모델은 C언어와 Java와는 확실히 다른 언어에 해당합니다. JS Engine 자바스크립트 엔진은 Memory Heap(메모리 힙)과 Call Steak(콜 스택)으로 구성되어 있습니다. 자바스크립트는 단일 스레드 프로그래밍(single thread Programming)언어 인데, 이 의미로는 Cell Steak이 하나라는 이야기 입니다. Memory Heap: 메모리 할당이 일어나는 곳 (즉 우리가 프로그렘에 선언한 변..

[Javascript] OOP vs FP란 무엇인가?

OOP Object Oriented Programming의 약자로 class와 object에 기반한 프로그래밍 페러다임(디자인 패턴) 입니다. OOP는 관련된 데이터끼리 묶어 class를 형성하고 그 안에서 object instance를 만듬으로써 프로그램을 디자인 해줍니다. OOP의 장점 OOP는 코드의 재사용률을 높이고 코드를 간결하게 함으로써 유지보수가 쉽다는 장점이 있습니다.(DRY pinciple) 데이터를 안전하게 보존시킬 수 있습니다.(encapsolution(캡슐화)과 abstraction(추출화) 등) 대표적인 언어 C++, Java, Python, Javascript 등 ✨ Features Encapsulation (캡슐화) 캡슐화는 객체의 내부 로직은 감추고 외부에는 상대적으로 안정적..

[Javascript] null과 undefined의 차이

Javascript의 null과 undefined의 차이점 null과 undefined는 둘 다 변수에 값이 없는 것을 나타내지만, 둘의 의미는 꽤 다릅니다. undefined는 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체) 라고 말할 수 있습니다. 즉 undefined는 자료형이 없는 상태입니다. 따라서 typeof를 통해 자료형을 확인해보면 null은 object로 undefined는 undefined가 출력되는 것을 확인해볼 수 있습니다. // typeof typeof null; // 'object' // null의 문자열 typeof undefined; // 'undefined' // undefined의 무낮열 null == undefined..

[Javascript] Javascript와 Node.js의 차이

코드깍는 노인 - 유튜브 이글은 코드깍는 노인님의 유튜브 동영상을 보고 분석한 글입니다. 결론 Javascript는 프로그래밍(Programming) 언어 Node.js: Javascript 프로그래밍 기반으로 컴퓨터내에서 구동시켜주는 일종의 프로그램이다. 설명 nodeJs는 chrome의 자바스크립트 엔진인 v8을 이용합니다. 자바 스크립트는 스크립트 언어로써 특정한 환경(브라우저) 에서만 사용가능한데 nodejs를 통해 특정한 환경(브라우저) 없이도 실행을 도와줍니다. Javascript는 크롬(Chrome) 같은 브라우저에서만 사용되는 것이 아닌 브라우저 밖, 즉, 내 컴퓨터 에서 다양한 용도로 확장하기 위해 만들어진 바로 Node.js입니다. node.js를 이용해 Express 같은 라이브러리를..

변수 타입 (var, let, const)와 스코프 연산자(scope) 개념

var, let, const 의 차이 var은 function scope(함수블록 {}이외 모든 변수는 전역 변수)이고 let과 const는 block scope(모든 코드 블록 -if, for 등에서 선언된 변수는 해당 코드 블록 내에서만 유효)임 var은 재선언 및 재할당이 가능하고, hoisting이 가능하다. var은 초기값이 없으면 자동으로 undefined를 초기값으로 메모리 할당하므로 에러가 발생하지 X let은 한번 선언 한 후로는 재선언이 불가능하다. 다만 재할당은 가능, const는 상수로서 변하지 않는 값이기에 재선언 및 재할당이 불가능하다. let & const는 hoisting이 불가능(Template Dead Zone이 선언과 초기화 사이에 생긴다.) 단, const로 변수선언을..

[Javascript] Javsacript ES6 주요 특징

ES6 주요 특징 class 전격 지원 let, const 문법 화살표 함수(Arrow Function) Modules Promise 비구조화 할당(Destructuring Assignment) 템플릿 리터럴(Template Literals) 매개변수 기본값 설정 1. class 전격지원 기존의 Javascript는 다른 객체지향 언어와는 달리 prototype을 기반으로 class를 묘사했는데, es6 문법에서는 new라는 키워드로 class 생성이 가능하다. class Cat { // constructor constructor(name) { this.name = name; } sayHi() { console.log(`Hi! ${this.name}`); } } const dd = new Cat("DD"..