프론트 엔드

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

[Go] Go 언어 프로그래밍 입문 - Go는 어떤언어 인가?

1. Go 문법의 특징 Go문법의 주요 내용은 다음과 같습니다. Go 문법의 특징 변수와 상수 프로그램의 기본 흐름 제어(if, switch, for) 함수 패키지 시작 전에 기본적인 Go 선언 방법을 알아보자. // 1. 패키지 선언 pacakge main // 2.외부 패키지 임포트 import "fmt" // 3.main 함수 func main() { // 4. 외부 패키지 사용 fmt.Println("Hello World") } 1-1. Go 의 간결함과 유연함 Go는 문법 요소를 줄이고 유연함을 높였습니다. 그렇기에 적은 문법으로도 풍부한 기능을 구현할 수 있습니다. Go에서는 while문이 없기 때문에 for문만으로 반복을 표현할 수 있습니다. 또한 복잡한 if 문 대신에 switch문과 ca..

[Vue] Vue & React의 차이와 장단점

들어가기전 그동안 React를 사용해서 프로젝트를 개발한 적이 많았다. 주로 React를 많이 사용한 것 같다. 하지만 요즘들어서는 Vue로 추세가 기울어지고 있고 필자도 조금더 트랜드한 코드방식을 선호하고 있다. React와 Vue를 설명하자면 이렇게 설명할 수 있다. React는 라이브러리고 Vue는 프레임워크다. 리액트는 UI라이브러리인데 라이브러리라는 참조가 쉽고, 라이브러리의 일부분만 가져와 사용하는 게 편리하다. 또한 리액트는 UI라이브러리이기 때문에 리액트 자체만으로 전역 상태 관리, 라우팅, 빌드, 시스템을 지원하지 않는다. 리액트에서 앞선 기능들을 사용하기 위해서는 Redux, Mobx같은 상태관리 라이브러리를 사용해야 한다. 반면 Vue는 프로그레시브 프레임워크인데, 이 부분을 설명하자..

[React] 간단한 결제시스템 만들어보기

프로젝트 개발시 간단하게 결제시스템을 이용해고 싶다면 결제를 대행해주는 담당사의 API를 가지고 만드실 수 있습니다. 이런 간단한 Pay를 추가하는 방법을 알아보겠습니다. React에서 App.js, Home/index.js 와 Payment/index.js를 다음과 같이 작성해보세요. App.js import React from 'react'; import { Switch } from 'react-router-dom'; import { Route } from 'react-router-dom'; import Home from './Home'; import Payment from './Payment'; function App() { return ( ); } export default App; Home/in..

[React] React 상태관리에 대해 알아보자 -context api, redux, mobx, swr

React에서는 전역상태를 관리하는 라이브러리들이 상당히 존재합니다. 제일 유명한 상태관리 라이브러리로는 Redux(리덕스)라는 라이브러리가 존재합니다. 하지만 이 Redux를 포함한 여러가지의 상태관리 라이브러리가 존재하는데 오늘은 그것을 알아보려고 합니다. 1. 전역상태에 대한 정의 상태관리 라이러리를 소개하기 전에 먼저 전역상태가 무엇인가라는 것을 정의해보도록 하겠습니다. 우리가 다루어야할 상태가 무엇이 있는지를 정의하고 이를 구분할 수 있어야 함 어떤 상태가 들어가야하는자 기획을 생각하고 파악해볼 필요가 있음 상태를 나눌 필요가 없다면? 굳이 상태관련 라이브러리를 사용해야 하는가? 2. 글로벌 상태 관리란? 전역 상태관리를 사용하면 여러 구성 요소간에 데이터를 쉽게 전달/조작할 수 있습니다. (영..

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

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

[React] useRef 란?

이번시간에는 React에 상태를 제어하는 useState를 이어서 useRef라는 것을 배워보도록 하겠습니다. useRef란? useRef는 특정 DOM을 가리킬 때 사용하는 Hook함수 입니다. useRef를 사용하는 예로는 대상에 대한 포커스 설정, 특정 엘리먼트의 크기나 색상을 변경할 때 사용합니다. ref ref 자체의 뜻을 설명하자면 ref는 Javascript의 getElementById() 처럼 컴포넌트의 어떤 부분을 선택할 수 있게 해주는 방법입니다. DOM에 접근 할 수 있도록 하는 기능을 가진 hook이라고 보면 됩니다. 리액트에 있는 모든 컴포넌트는 reference element(래퍼런스 엘리먼트)를 가지고 있어서 어떤 컴포넌트에 ref={변수명}을 넣어준다면, 리액트에서 해당 컴포..

[React] useEffect란 ?

이번시간에는 React에서 제공하는 Hooks중 하나인 useEffect에 대해서 알아보도록 하겠습니다. 1.UseEffect란? useEffect Hook을 이용하여 우리가 React에게 컴포넌트가 렌더링 된 이후에 어떤일을 수행할지 정해줄 수 있습니다. useEffect는 기본적으로 몇 가지 조건에 의해 작동합니다. 페이지가 처음 렌더링 되고 난후 useEffect는 무조건 한번 실행됩니다. useEffect에 배열로 지정한 useState 값이 변경될 때 실행되게 됩니다. 즉 React에서는 우리가 작성한 함수를 기억했다가 DOM 업데이트 수행 이후에 이를 불러내서 실행해주게 됩니다. UseEffect를 컴포넌트 안에서 부르면? useEffect를 컴포넌트 내부에 두어 effect를 통해 앞전에 나..

[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)는 '제작 코드'와 '소비코드'를 연결해주는 특별한 자바스크립트 객체입니다. '제작 코드'와 '소비 코드'에 대한 설명은 아래에서 코드를 보..

svelt란 ? 공식문서 해석기 - React와의 차이점

이번 시간에는 요즘들어서 프론트엔드 프레임워크 3대장 React Vue Angular를 이어 새롭게 등장한 Svelte라는 프레임워크에 대해 포스팅 해보겠습니다. svelte는 아직까지는 정식으로 한글 문서를 제공하지 않지만 프레임워크 3대장이라고 불리는 다른 프레임워크보다는 상당히 낮은 러닝 커브를 가집니다. Svelte의 특징 Svelte라는 특징은 날씬한, 호리호리한이라는 뜻입니다. 단어의 뜻과 같이 상당히 적은 코드와 작은 용량을 가진다는 것이 장점입니다. Svelte는 다른 라이브러리에 비해서 가상돔(Virtual DOM)을 사용하지 않습니다. Svelte는 Reactive web app과 interface를 만드는 데 사용되는 일종의 Compiler(컴파일러)입니다. 여기서 주목해야 할 단어는..