Tags

Frontend

러닝 자바스크립트 - ES6 위크맵/위크셋/이터레이터/제너레이터

5 minute read

‘러닝 자바스크립트’를 읽었다. 책만 본다고 개발 실력이 늘지는 않지만 코딩만 한다고 개발 실력이 느는 것 또한 아님을 새삼 느꼈다. ES6를 주로 ES5나 ES3에서 이관된 문법이나 개념에 대해서만 알고 있었던 거다. 그래서 ES6에서도 익숙하지 않은 개념들에 대해서 정리했다..

오리진이 다른 리소스를 서비스워커로 캐싱하기

2 minute read

Vue CLI3의 vue add pwa 명령어를 실행하면 쉽게 PWA를 설정할 수 있습니다. 이것만으로 빌드 시 생성되는 파일이 서비스 워커에 의해 캐싱이 됩니다. 여기에 추가로 교차 오리진에서 호출하는 리소스를 캐싱 해본 경험을 정리했습니다.

자바스크립트에서 큐와 스택 자료구조 구현하기

4 minute read

자료구조 및 알고리즘을 공부하면서 자주 사용되는 자료구조인 큐와 스택을 자바스크립트로 구현해보고 BOJ에서 문제를 풀어보면서 자바스크립트에서 어떻게 구현하고 활용하는 것이 유리한지 정리해보았습니다.

CSS 박스 모델

1 minute read

CSS는 HTML요소를 화면에 출력하는데 크게 인라인 (inline) 박스와 블록 (block) 박스로 구분합니다.

어떻게 const로 선언한 객체의 속성값이 바뀌는 것일까

1 minute read

const 키워드를 사용하여 선언된 변수는 블록 범위의 상수입니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 그러나 상수가 객체 또는 배열인 경우 해당 속성이나 항목을 업데이트하거나 제거할 수 있습니다.

이벤트 위임(Event Delegation)

1 minute read

이벤트 위임이란 DOM의 이벤트 버블링(Event Bubbling) 특성을 활용해 이벤트 리스너를 하위 요소에 추가하는 대신 상위 요소에 추가하는 기법입니다. 다음과 같은 이점이 있습니다. 각 하위 항목에 이벤트 핸들러를 연결하지 않고 상위의 단일 요소에만 핸들러가 필요...

SSR과 CSR의 장단점

less than 1 minute read

SSR(Server Side Rendering)과 CSR(Client Side Rendering)의 장단점을 정리해 보자

타입과 문법, 스코프와 클로저 YOU DON’T KNOW JS 책을 읽고

1 minute read

클로저를 이해하고 있다고 생각했지만 실제로 말로 설명이 되지 않는다는 걸 깨닫고 이 책을 읽기 시작했다. 클로저 외에도 평소에 모르고 넘어갈 수 있었던 부분도 알게되서 생각보다 많은 도움이 된 책이다. 완벽하게 기억에 남을 때까지 반복해서 읽어야겠다.

Back to Top ↑

JavaScript

러닝 자바스크립트 - ES6 위크맵/위크셋/이터레이터/제너레이터

5 minute read

‘러닝 자바스크립트’를 읽었다. 책만 본다고 개발 실력이 늘지는 않지만 코딩만 한다고 개발 실력이 느는 것 또한 아님을 새삼 느꼈다. ES6를 주로 ES5나 ES3에서 이관된 문법이나 개념에 대해서만 알고 있었던 거다. 그래서 ES6에서도 익숙하지 않은 개념들에 대해서 정리했다..

자바스크립트 ES6와 호이스팅(Hoisting)

2 minute read

ES6에서 let과 const는 호이스팅이 발생하지 않는 것처럼 보여서 호이스팅이 발생하지 않는다고 이해할 수 있지만 사실은 그렇지 않다. 이게 무슨 의미인지 정리했다.

BOJ에서 JavaScript로 문제를 풀 때 메모리와 시간 제한 적용하기

4 minute read

BOJ에서 JavaScript로 문제를 풀때 시간 초과(TLE)와 메모리 초과(MLE) 문제를 자주 경험해왔습니다. 대부분의 알고리즘 강의나 문제풀이가 Python, C++, Java 위주로 구현되어 있기 때문일겁니다. BOJ 역시 JavaScript 풀이가 적고 같은 풀이라도 언...

자바스크립트에서 큐와 스택 자료구조 구현하기

4 minute read

자료구조 및 알고리즘을 공부하면서 자주 사용되는 자료구조인 큐와 스택을 자바스크립트로 구현해보고 BOJ에서 문제를 풀어보면서 자바스크립트에서 어떻게 구현하고 활용하는 것이 유리한지 정리해보았습니다.

어떻게 const로 선언한 객체의 속성값이 바뀌는 것일까

1 minute read

const 키워드를 사용하여 선언된 변수는 블록 범위의 상수입니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 그러나 상수가 객체 또는 배열인 경우 해당 속성이나 항목을 업데이트하거나 제거할 수 있습니다.

이벤트 위임(Event Delegation)

1 minute read

이벤트 위임이란 DOM의 이벤트 버블링(Event Bubbling) 특성을 활용해 이벤트 리스너를 하위 요소에 추가하는 대신 상위 요소에 추가하는 기법입니다. 다음과 같은 이점이 있습니다. 각 하위 항목에 이벤트 핸들러를 연결하지 않고 상위의 단일 요소에만 핸들러가 필요...

타입과 문법, 스코프와 클로저 YOU DON’T KNOW JS 책을 읽고

1 minute read

클로저를 이해하고 있다고 생각했지만 실제로 말로 설명이 되지 않는다는 걸 깨닫고 이 책을 읽기 시작했다. 클로저 외에도 평소에 모르고 넘어갈 수 있었던 부분도 알게되서 생각보다 많은 도움이 된 책이다. 완벽하게 기억에 남을 때까지 반복해서 읽어야겠다.

Back to Top ↑

Trading Bot

프론트엔드 개발자의 Docker 입문기

9 minute read

트레이딩 봇 애플리케이션 구동에 필요한 복잡하고 번거로운 설정 과정을 자동화하기 위한 힌트를 얻기 위해서 깃허브의 Topics에 trading bot을 검색해 보니 깃허브 스타(Star) 수가 1k 이상인 프로젝트들은 대부분 도커(Docker)와 관련된 설정이 포함되어 있는 것을 ...

트레이딩 봇 2.0 개발 후기

2 minute read

시뮬레이션 grademark은 자바스크립트(JavaScript) 및 타입스크립트(TypeScript)에서 알고리즘 거래 백테스팅을 위한 툴킷입니다. 이 모듈의 백테스팅 로직을 살펴보면 시간 순으로 정렬된 캔들 형식의 데이터와 전략을 주입하면 타이프레임(Timeframe) 마다 포...

Account has insufficient Available Balance

1 minute read

문제 Account has insufficient Available Balance, … XBt required 토이 프로젝트로 진행 중인 트레이딩 봇의 로그에 BCHUSD의 계약 수량을 계산하는데 계정에 사용 가능한 잔액이 부족해서 거래소로부터의 거래가 거절되었다는 에러...

자동매매 알고리즘 개발과 트레이딩 봇 실전 6개월

1 minute read

처음에는 막막하기만 했던 기본 캔들 데이터 생성을 인플럭스DB (InfluxDB)를 사용해서 쉽게 구현할 수 있었다. 다음은 언제 사고 언제 파는 게 좋을지를 과거 데이터를 통해 시뮬레이션 해보기 위해서 거래소에서 제공하는 REST API를 통해서 2017년부터 현재까지의 캔들 데...

InfluxDB를 활용한 주식차트 만들기

2 minute read

이 글은 2020년 10월경 진행하면서 기록한 내용을 바탕으로 재작성되었습니다. 이전 글에서 진행했던 Amazon Athena SQL로 캔들 데이터 생성하는 방법은 SQL 구문이 길고 복잡하고 비용이 많이 들었다. 구글 검색을 통해서 실시간 데이터 처리에 용이한 ...

Amazon Athena SQL로 캔들 데이터 생성하기

4 minute read

이 글은 2018년 4월경 테스트를 진행하면서 기록한 내용을 바탕으로 작성했습니다. 암호화폐 시장을 경험하면서 알고리즘 매매에 흥미가 생겼다. 알고리즘 매매를 위해서는 가장 기본이 되는 캔들 데이터가 필요했다. 어떻게 실시간 시장 데이터를 가공해서 캔들 데이터...

Back to Top ↑

CSS

CSS 박스 모델

1 minute read

CSS는 HTML요소를 화면에 출력하는데 크게 인라인 (inline) 박스와 블록 (block) 박스로 구분합니다.

CSS 기본 정리

6 minute read

이 글은 freeCodeCamp의 Basic CSS를 공부하면서 주요 내용을 정리한 글입니다.

Padding Hack으로 반응형 SVG 만들기

3 minute read

지역과 관련된 데이터를 시각화하기 위해 SVG와 d3 함수를 이용해서 표현한 지도에 패딩 핵(Padding Hack)이란 기법을 통해서 반응형으로 구현한 경험을 정리하자.

Back to Top ↑

trouble shooting

블로그 마이그레이션(1) 우분투에 Ruby 설치하기

1 minute read

기존의 익숙치 않은 기술 스택을 사용한 블로그 운영에 부담을 느껴 글에만 집중할 수 있도록 jekyll 기반으로 마이그레이션을 진행했습니다. 이번 글에서는 첫 번째 단계로 우분투에서 rvm (Ruby Version Manager) 및 루비 설치 과정에 대해서 기록 했습니다.

Amazon Linux2 OS에 레드마인을 설치하는 방법

3 minute read

AWS 코드 커밋(CodeCommit)에 구성된 모든 프로젝트들의 이슈 추적과 코드 리뷰 등을 위해 레드마인(Redmine)을 Amazon Linux2 OS에 설치하는 과정에 대한 기록과 이에 대한 후기입니다.

Account has insufficient Available Balance

1 minute read

문제 Account has insufficient Available Balance, … XBt required 토이 프로젝트로 진행 중인 트레이딩 봇의 로그에 BCHUSD의 계약 수량을 계산하는데 계정에 사용 가능한 잔액이 부족해서 거래소로부터의 거래가 거절되었다는 에러...

IE 11 Syntax Error - Script1002

1 minute read

vue-pivottable 컴포넌트의 스타일을 수정하고 최종적으로 프로젝트에서는 import { VsPivottable, VsPivottableUi } from 'vs-pivottable'과 같이 커스텀 된 형태로 사용하고 싶었다. 그런데 Internet Explorer 11에서 ...

Back to Top ↑

CodeCommit

Amazon Linux2 OS에 레드마인을 설치하는 방법

3 minute read

AWS 코드 커밋(CodeCommit)에 구성된 모든 프로젝트들의 이슈 추적과 코드 리뷰 등을 위해 레드마인(Redmine)을 Amazon Linux2 OS에 설치하는 과정에 대한 기록과 이에 대한 후기입니다.

SSH로 GitHub / CodeCommit 연결하기

2 minute read

비밀번호 인증 지원 종료 2021년 8월 13일부로 비밀번호 인증 지원이 종료되어 이전에 사용하던 방식을 사용할 수 없게 되어서 이 기회에 SSH 접속 방식으로변경 하게 되었다.

Back to Top ↑

PS

LIS (Longest Increasing Subsequence) - 최장 증가 부분 수열

6 minute read

백준에서 문제 해결 능력을 키우면서 최장 증가 부분 수열문제를 풀게 되었다. 최장 증가 수열이란 주어진 수열의 부분 수열 중에서 숫자가 오름차순으로 정렬 되는 가장 긴 부분 수열을 의미한다. 문제를 풀면서 공부한 내용을 정리했다.

자바스크립트에서 큐와 스택 자료구조 구현하기

4 minute read

자료구조 및 알고리즘을 공부하면서 자주 사용되는 자료구조인 큐와 스택을 자바스크립트로 구현해보고 BOJ에서 문제를 풀어보면서 자바스크립트에서 어떻게 구현하고 활용하는 것이 유리한지 정리해보았습니다.

Back to Top ↑

BOJ

LIS (Longest Increasing Subsequence) - 최장 증가 부분 수열

6 minute read

백준에서 문제 해결 능력을 키우면서 최장 증가 부분 수열문제를 풀게 되었다. 최장 증가 수열이란 주어진 수열의 부분 수열 중에서 숫자가 오름차순으로 정렬 되는 가장 긴 부분 수열을 의미한다. 문제를 풀면서 공부한 내용을 정리했다.

BOJ에서 JavaScript로 문제를 풀 때 메모리와 시간 제한 적용하기

4 minute read

BOJ에서 JavaScript로 문제를 풀때 시간 초과(TLE)와 메모리 초과(MLE) 문제를 자주 경험해왔습니다. 대부분의 알고리즘 강의나 문제풀이가 Python, C++, Java 위주로 구현되어 있기 때문일겁니다. BOJ 역시 JavaScript 풀이가 적고 같은 풀이라도 언...

Back to Top ↑

Git

SSH로 GitHub / CodeCommit 연결하기

2 minute read

비밀번호 인증 지원 종료 2021년 8월 13일부로 비밀번호 인증 지원이 종료되어 이전에 사용하던 방식을 사용할 수 없게 되어서 이 기회에 SSH 접속 방식으로변경 하게 되었다.

Back to Top ↑

Vue

vue-pivottable v0.4.1 업데이트

3 minute read

작년 오픈소스 아카데미 컨트리뷰톤 참여를 계기로 2019년 8월 22일 첫 커밋(Commit)으로 시작해 NPM에 배포해서 관리 중인 오픈소스 vue-pivottable의 가이드 문서를 README.md에서 VuePress 기반의 웹 사이트로 구성하고 있습니다. 문서를 업데이트하...

VSCode에서 Vue 개발 환경 구성하기

2 minute read

Vue CLI 3로 생성한 프로젝트에서 VSCode의 확장 플러그인과 커스텀 설정을 통해 IntelliSense와 ESLint를 활용할 수 있다.

Back to Top ↑

Closure

타입과 문법, 스코프와 클로저 YOU DON’T KNOW JS 책을 읽고

1 minute read

클로저를 이해하고 있다고 생각했지만 실제로 말로 설명이 되지 않는다는 걸 깨닫고 이 책을 읽기 시작했다. 클로저 외에도 평소에 모르고 넘어갈 수 있었던 부분도 알게되서 생각보다 많은 도움이 된 책이다. 완벽하게 기억에 남을 때까지 반복해서 읽어야겠다.

Back to Top ↑

VsCode

VSCode에서 Vue 개발 환경 구성하기

2 minute read

Vue CLI 3로 생성한 프로젝트에서 VSCode의 확장 플러그인과 커스텀 설정을 통해 IntelliSense와 ESLint를 활용할 수 있다.

Back to Top ↑

SVG

Padding Hack으로 반응형 SVG 만들기

3 minute read

지역과 관련된 데이터를 시각화하기 위해 SVG와 d3 함수를 이용해서 표현한 지도에 패딩 핵(Padding Hack)이란 기법을 통해서 반응형으로 구현한 경험을 정리하자.

Back to Top ↑

NPM

비공개 NPM 저장소 구성하기

2 minute read

오픈소스 Sinopia를 사용해서 Prvate NPM 저장소를 구성하고 스코프 문제를 해결한 경험을 정리하자.

Back to Top ↑

IE

IE 11 Syntax Error - Script1002

1 minute read

vue-pivottable 컴포넌트의 스타일을 수정하고 최종적으로 프로젝트에서는 import { VsPivottable, VsPivottableUi } from 'vs-pivottable'과 같이 커스텀 된 형태로 사용하고 싶었다. 그런데 Internet Explorer 11에서 ...

Back to Top ↑

Athena

Amazon Athena SQL로 캔들 데이터 생성하기

4 minute read

이 글은 2018년 4월경 테스트를 진행하면서 기록한 내용을 바탕으로 작성했습니다. 암호화폐 시장을 경험하면서 알고리즘 매매에 흥미가 생겼다. 알고리즘 매매를 위해서는 가장 기본이 되는 캔들 데이터가 필요했다. 어떻게 실시간 시장 데이터를 가공해서 캔들 데이터...

Back to Top ↑

SQL

Amazon Athena SQL로 캔들 데이터 생성하기

4 minute read

이 글은 2018년 4월경 테스트를 진행하면서 기록한 내용을 바탕으로 작성했습니다. 암호화폐 시장을 경험하면서 알고리즘 매매에 흥미가 생겼다. 알고리즘 매매를 위해서는 가장 기본이 되는 캔들 데이터가 필요했다. 어떻게 실시간 시장 데이터를 가공해서 캔들 데이터...

Back to Top ↑

InfluxDB

InfluxDB를 활용한 주식차트 만들기

2 minute read

이 글은 2020년 10월경 진행하면서 기록한 내용을 바탕으로 재작성되었습니다. 이전 글에서 진행했던 Amazon Athena SQL로 캔들 데이터 생성하는 방법은 SQL 구문이 길고 복잡하고 비용이 많이 들었다. 구글 검색을 통해서 실시간 데이터 처리에 용이한 ...

Back to Top ↑

TypeScript

자동매매 알고리즘 개발과 트레이딩 봇 실전 6개월

1 minute read

처음에는 막막하기만 했던 기본 캔들 데이터 생성을 인플럭스DB (InfluxDB)를 사용해서 쉽게 구현할 수 있었다. 다음은 언제 사고 언제 파는 게 좋을지를 과거 데이터를 통해 시뮬레이션 해보기 위해서 거래소에서 제공하는 REST API를 통해서 2017년부터 현재까지의 캔들 데...

Back to Top ↑

Redmine

Amazon Linux2 OS에 레드마인을 설치하는 방법

3 minute read

AWS 코드 커밋(CodeCommit)에 구성된 모든 프로젝트들의 이슈 추적과 코드 리뷰 등을 위해 레드마인(Redmine)을 Amazon Linux2 OS에 설치하는 과정에 대한 기록과 이에 대한 후기입니다.

Back to Top ↑

vue-pivottable

vue-pivottable v0.4.1 업데이트

3 minute read

작년 오픈소스 아카데미 컨트리뷰톤 참여를 계기로 2019년 8월 22일 첫 커밋(Commit)으로 시작해 NPM에 배포해서 관리 중인 오픈소스 vue-pivottable의 가이드 문서를 README.md에서 VuePress 기반의 웹 사이트로 구성하고 있습니다. 문서를 업데이트하...

Back to Top ↑

Docker

프론트엔드 개발자의 Docker 입문기

9 minute read

트레이딩 봇 애플리케이션 구동에 필요한 복잡하고 번거로운 설정 과정을 자동화하기 위한 힌트를 얻기 위해서 깃허브의 Topics에 trading bot을 검색해 보니 깃허브 스타(Star) 수가 1k 이상인 프로젝트들은 대부분 도커(Docker)와 관련된 설정이 포함되어 있는 것을 ...

Back to Top ↑

Shell

BOJ에서 JavaScript로 문제를 풀 때 메모리와 시간 제한 적용하기

4 minute read

BOJ에서 JavaScript로 문제를 풀때 시간 초과(TLE)와 메모리 초과(MLE) 문제를 자주 경험해왔습니다. 대부분의 알고리즘 강의나 문제풀이가 Python, C++, Java 위주로 구현되어 있기 때문일겁니다. BOJ 역시 JavaScript 풀이가 적고 같은 풀이라도 언...

Back to Top ↑

Big Decimal

Back to Top ↑

Workbox

오리진이 다른 리소스를 서비스워커로 캐싱하기

2 minute read

Vue CLI3의 vue add pwa 명령어를 실행하면 쉽게 PWA를 설정할 수 있습니다. 이것만으로 빌드 시 생성되는 파일이 서비스 워커에 의해 캐싱이 됩니다. 여기에 추가로 교차 오리진에서 호출하는 리소스를 캐싱 해본 경험을 정리했습니다.

Back to Top ↑

PWA

오리진이 다른 리소스를 서비스워커로 캐싱하기

2 minute read

Vue CLI3의 vue add pwa 명령어를 실행하면 쉽게 PWA를 설정할 수 있습니다. 이것만으로 빌드 시 생성되는 파일이 서비스 워커에 의해 캐싱이 됩니다. 여기에 추가로 교차 오리진에서 호출하는 리소스를 캐싱 해본 경험을 정리했습니다.

Back to Top ↑

Cache

오리진이 다른 리소스를 서비스워커로 캐싱하기

2 minute read

Vue CLI3의 vue add pwa 명령어를 실행하면 쉽게 PWA를 설정할 수 있습니다. 이것만으로 빌드 시 생성되는 파일이 서비스 워커에 의해 캐싱이 됩니다. 여기에 추가로 교차 오리진에서 호출하는 리소스를 캐싱 해본 경험을 정리했습니다.

Back to Top ↑

Reference

나의 크롬 북마크, 유용한 링크 모음 tools편

less than 1 minute read

며칠전 rvm 및 rbenv로 루비를 설치하면서 만난 오류들을 해결하는 과정이 커맨드 치고 기다리는 시간의 반복이라 이 지루함을 극복하기 위해 크롬의 북마크를 정리했다. 왜 tools 라고 분류하고 남겼는지를 기억하기 위해서 정리 했다.

Back to Top ↑

Jekyll

블로그 마이그레이션(1) 우분투에 Ruby 설치하기

1 minute read

기존의 익숙치 않은 기술 스택을 사용한 블로그 운영에 부담을 느껴 글에만 집중할 수 있도록 jekyll 기반으로 마이그레이션을 진행했습니다. 이번 글에서는 첫 번째 단계로 우분투에서 rvm (Ruby Version Manager) 및 루비 설치 과정에 대해서 기록 했습니다.

Back to Top ↑

학습방법

나의 학습방법

1 minute read

얼마 전, “어떤 학습 방법을 주로 사용하시나요?“라는 질문을 받았습니다. 그 답변을 준비해봤습니다.

Back to Top ↑

개발자 학습

나의 학습방법

1 minute read

얼마 전, “어떤 학습 방법을 주로 사용하시나요?“라는 질문을 받았습니다. 그 답변을 준비해봤습니다.

Back to Top ↑