여백 상쇄 (margin collapsing) 이해하기
프론트엔드 개발자라면 알고 있어야하는 여백 상쇄 (margin collapsing) 이해하기
프론트엔드 개발자라면 알고 있어야하는 여백 상쇄 (margin collapsing) 이해하기
‘러닝 자바스크립트’를 읽었다. 책만 본다고 개발 실력이 늘지는 않지만 코딩만 한다고 개발 실력이 느는 것 또한 아님을 새삼 느꼈다. ES6를 주로 ES5나 ES3에서 이관된 문법이나 개념에 대해서만 알고 있었던 거다. 그래서 ES6에서도 익숙하지 않은 개념들에 대해서 정리했다..
ECMAScript 3판을 다루는 ‘자바스크립트를 깨우치다’란 책을 읽었다. 그리고 이 책에서 말하는 영원히 변하지 않을 자바스크립트 초석 개념이라고 생각하는 3가지에 대해서 정리했다.
Vue CLI3의 vue add pwa 명령어를 실행하면 쉽게 PWA를 설정할 수 있습니다. 이것만으로 빌드 시 생성되는 파일이 서비스 워커에 의해 캐싱이 됩니다. 여기에 추가로 교차 오리진에서 호출하는 리소스를 캐싱 해본 경험을 정리했습니다.
AWS 빌링 데이터를 다루는 프론트엔드 개발자로 일하면서 백엔드에서 전달받은 숫자 데이터가 부동 소수점 연산의 함정과 지수 표기식(e notation)으로 표현되면서 생긴 이슈들을 해결하면서 빅 데시멀과 지수 표기법에 대해 정리해보았습니다.
자료구조 및 알고리즘을 공부하면서 자주 사용되는 자료구조인 큐와 스택을 자바스크립트로 구현해보고 BOJ에서 문제를 풀어보면서 자바스크립트에서 어떻게 구현하고 활용하는 것이 유리한지 정리해보았습니다.
CSS는 HTML요소를 화면에 출력하는데 크게 인라인 (inline) 박스와 블록 (block) 박스로 구분합니다.
CSS 포지션 absolute와 relative의 차이에 대해 정리하자
const 키워드를 사용하여 선언된 변수는 블록 범위의 상수입니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 그러나 상수가 객체 또는 배열인 경우 해당 속성이나 항목을 업데이트하거나 제거할 수 있습니다.
이벤트를 핸들러 내부의 this를 예제로 정리해보자.
이벤트 위임이란 DOM의 이벤트 버블링(Event Bubbling) 특성을 활용해 이벤트 리스너를 하위 요소에 추가하는 대신 상위 요소에 추가하는 기법입니다. 다음과 같은 이점이 있습니다. 각 하위 항목에 이벤트 핸들러를 연결하지 않고 상위의 단일 요소에만 핸들러가 필요...
SSR(Server Side Rendering)과 CSR(Client Side Rendering)의 장단점을 정리해 보자
브라우저 렌더링 과정은 크게 다음 4단계로 설명 할 수 있습니다.
자바스크립트 엔진, 런타임, 호출 스택, 이벤트 루프를 간단하게 정리했습니다.
사전 지식 클로저를 이해 하기 위해서 Scope, Scope Chain, Context 에 대한 이해가 선행되어야 합니다.
클로저를 이해하고 있다고 생각했지만 실제로 말로 설명이 되지 않는다는 걸 깨닫고 이 책을 읽기 시작했다. 클로저 외에도 평소에 모르고 넘어갈 수 있었던 부분도 알게되서 생각보다 많은 도움이 된 책이다. 완벽하게 기억에 남을 때까지 반복해서 읽어야겠다.
‘러닝 자바스크립트’를 읽었다. 책만 본다고 개발 실력이 늘지는 않지만 코딩만 한다고 개발 실력이 느는 것 또한 아님을 새삼 느꼈다. ES6를 주로 ES5나 ES3에서 이관된 문법이나 개념에 대해서만 알고 있었던 거다. 그래서 ES6에서도 익숙하지 않은 개념들에 대해서 정리했다..
ECMAScript 3판을 다루는 ‘자바스크립트를 깨우치다’란 책을 읽었다. 그리고 이 책에서 말하는 영원히 변하지 않을 자바스크립트 초석 개념이라고 생각하는 3가지에 대해서 정리했다.
ES6에서 let과 const는 호이스팅이 발생하지 않는 것처럼 보여서 호이스팅이 발생하지 않는다고 이해할 수 있지만 사실은 그렇지 않다. 이게 무슨 의미인지 정리했다.
AWS 빌링 데이터를 다루는 프론트엔드 개발자로 일하면서 백엔드에서 전달받은 숫자 데이터가 부동 소수점 연산의 함정과 지수 표기식(e notation)으로 표현되면서 생긴 이슈들을 해결하면서 빅 데시멀과 지수 표기법에 대해 정리해보았습니다.
BOJ에서 JavaScript로 문제를 풀때 시간 초과(TLE)와 메모리 초과(MLE) 문제를 자주 경험해왔습니다. 대부분의 알고리즘 강의나 문제풀이가 Python, C++, Java 위주로 구현되어 있기 때문일겁니다. BOJ 역시 JavaScript 풀이가 적고 같은 풀이라도 언...
자료구조 및 알고리즘을 공부하면서 자주 사용되는 자료구조인 큐와 스택을 자바스크립트로 구현해보고 BOJ에서 문제를 풀어보면서 자바스크립트에서 어떻게 구현하고 활용하는 것이 유리한지 정리해보았습니다.
const 키워드를 사용하여 선언된 변수는 블록 범위의 상수입니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 그러나 상수가 객체 또는 배열인 경우 해당 속성이나 항목을 업데이트하거나 제거할 수 있습니다.
이벤트를 핸들러 내부의 this를 예제로 정리해보자.
이벤트 위임이란 DOM의 이벤트 버블링(Event Bubbling) 특성을 활용해 이벤트 리스너를 하위 요소에 추가하는 대신 상위 요소에 추가하는 기법입니다. 다음과 같은 이점이 있습니다. 각 하위 항목에 이벤트 핸들러를 연결하지 않고 상위의 단일 요소에만 핸들러가 필요...
브라우저 렌더링 과정은 크게 다음 4단계로 설명 할 수 있습니다.
자바스크립트 엔진, 런타임, 호출 스택, 이벤트 루프를 간단하게 정리했습니다.
사전 지식 클로저를 이해 하기 위해서 Scope, Scope Chain, Context 에 대한 이해가 선행되어야 합니다.
클로저를 이해하고 있다고 생각했지만 실제로 말로 설명이 되지 않는다는 걸 깨닫고 이 책을 읽기 시작했다. 클로저 외에도 평소에 모르고 넘어갈 수 있었던 부분도 알게되서 생각보다 많은 도움이 된 책이다. 완벽하게 기억에 남을 때까지 반복해서 읽어야겠다.
트레이딩 봇 애플리케이션 구동에 필요한 복잡하고 번거로운 설정 과정을 자동화하기 위한 힌트를 얻기 위해서 깃허브의 Topics에 trading bot을 검색해 보니 깃허브 스타(Star) 수가 1k 이상인 프로젝트들은 대부분 도커(Docker)와 관련된 설정이 포함되어 있는 것을 ...
시뮬레이션 grademark은 자바스크립트(JavaScript) 및 타입스크립트(TypeScript)에서 알고리즘 거래 백테스팅을 위한 툴킷입니다. 이 모듈의 백테스팅 로직을 살펴보면 시간 순으로 정렬된 캔들 형식의 데이터와 전략을 주입하면 타이프레임(Timeframe) 마다 포...
문제 Account has insufficient Available Balance, … XBt required 토이 프로젝트로 진행 중인 트레이딩 봇의 로그에 BCHUSD의 계약 수량을 계산하는데 계정에 사용 가능한 잔액이 부족해서 거래소로부터의 거래가 거절되었다는 에러...
처음에는 막막하기만 했던 기본 캔들 데이터 생성을 인플럭스DB (InfluxDB)를 사용해서 쉽게 구현할 수 있었다. 다음은 언제 사고 언제 파는 게 좋을지를 과거 데이터를 통해 시뮬레이션 해보기 위해서 거래소에서 제공하는 REST API를 통해서 2017년부터 현재까지의 캔들 데...
이 글은 2020년 10월경 진행하면서 기록한 내용을 바탕으로 재작성되었습니다. 이전 글에서 진행했던 Amazon Athena SQL로 캔들 데이터 생성하는 방법은 SQL 구문이 길고 복잡하고 비용이 많이 들었다. 구글 검색을 통해서 실시간 데이터 처리에 용이한 ...
이 글은 2018년 4월경 테스트를 진행하면서 기록한 내용을 바탕으로 작성했습니다. 암호화폐 시장을 경험하면서 알고리즘 매매에 흥미가 생겼다. 알고리즘 매매를 위해서는 가장 기본이 되는 캔들 데이터가 필요했다. 어떻게 실시간 시장 데이터를 가공해서 캔들 데이터...
프론트엔드 개발자라면 알고 있어야하는 여백 상쇄 (margin collapsing) 이해하기
CSS는 HTML요소를 화면에 출력하는데 크게 인라인 (inline) 박스와 블록 (block) 박스로 구분합니다.
CSS 포지션 absolute와 relative의 차이에 대해 정리하자
이 글은 freeCodeCamp의 Basic CSS를 공부하면서 주요 내용을 정리한 글입니다.
지역과 관련된 데이터를 시각화하기 위해 SVG와 d3 함수를 이용해서 표현한 지도에 패딩 핵(Padding Hack)이란 기법을 통해서 반응형으로 구현한 경험을 정리하자.
기존의 익숙치 않은 기술 스택을 사용한 블로그 운영에 부담을 느껴 글에만 집중할 수 있도록 jekyll 기반으로 마이그레이션을 진행했습니다. 이번 글에서는 첫 번째 단계로 우분투에서 rvm (Ruby Version Manager) 및 루비 설치 과정에 대해서 기록 했습니다.
AWS 코드 커밋(CodeCommit)에 구성된 모든 프로젝트들의 이슈 추적과 코드 리뷰 등을 위해 레드마인(Redmine)을 Amazon Linux2 OS에 설치하는 과정에 대한 기록과 이에 대한 후기입니다.
문제 Account has insufficient Available Balance, … XBt required 토이 프로젝트로 진행 중인 트레이딩 봇의 로그에 BCHUSD의 계약 수량을 계산하는데 계정에 사용 가능한 잔액이 부족해서 거래소로부터의 거래가 거절되었다는 에러...
vue-pivottable 컴포넌트의 스타일을 수정하고 최종적으로 프로젝트에서는 import { VsPivottable, VsPivottableUi } from 'vs-pivottable'과 같이 커스텀 된 형태로 사용하고 싶었다. 그런데 Internet Explorer 11에서 ...
AWS 코드 커밋(CodeCommit)에 구성된 모든 프로젝트들의 이슈 추적과 코드 리뷰 등을 위해 레드마인(Redmine)을 Amazon Linux2 OS에 설치하는 과정에 대한 기록과 이에 대한 후기입니다.
비밀번호 인증 지원 종료 2021년 8월 13일부로 비밀번호 인증 지원이 종료되어 이전에 사용하던 방식을 사용할 수 없게 되어서 이 기회에 SSH 접속 방식으로변경 하게 되었다.
이렇게 하면 단일 컴퓨터에서 여러 GItHub/CodeCommit 인증정보를 매번 입력하지 않고 HTTPS 프로토콜로 리모트 저장소에 접근할 수 있다.
백준의 code.plus 문제집 <브루트 포스 - N과 M>을 풀면서 순열과 조합을 이해하고, 문제를 더 쉽게 해결할 수 있게 되서 그 내용을 정리했습니다.
백준에서 문제 해결 능력을 키우면서 최장 증가 부분 수열문제를 풀게 되었다. 최장 증가 수열이란 주어진 수열의 부분 수열 중에서 숫자가 오름차순으로 정렬 되는 가장 긴 부분 수열을 의미한다. 문제를 풀면서 공부한 내용을 정리했다.
자료구조 및 알고리즘을 공부하면서 자주 사용되는 자료구조인 큐와 스택을 자바스크립트로 구현해보고 BOJ에서 문제를 풀어보면서 자바스크립트에서 어떻게 구현하고 활용하는 것이 유리한지 정리해보았습니다.
백준의 code.plus 문제집 <브루트 포스 - N과 M>을 풀면서 순열과 조합을 이해하고, 문제를 더 쉽게 해결할 수 있게 되서 그 내용을 정리했습니다.
백준에서 문제 해결 능력을 키우면서 최장 증가 부분 수열문제를 풀게 되었다. 최장 증가 수열이란 주어진 수열의 부분 수열 중에서 숫자가 오름차순으로 정렬 되는 가장 긴 부분 수열을 의미한다. 문제를 풀면서 공부한 내용을 정리했다.
BOJ에서 JavaScript로 문제를 풀때 시간 초과(TLE)와 메모리 초과(MLE) 문제를 자주 경험해왔습니다. 대부분의 알고리즘 강의나 문제풀이가 Python, C++, Java 위주로 구현되어 있기 때문일겁니다. BOJ 역시 JavaScript 풀이가 적고 같은 풀이라도 언...
비밀번호 인증 지원 종료 2021년 8월 13일부로 비밀번호 인증 지원이 종료되어 이전에 사용하던 방식을 사용할 수 없게 되어서 이 기회에 SSH 접속 방식으로변경 하게 되었다.
이렇게 하면 단일 컴퓨터에서 여러 GItHub/CodeCommit 인증정보를 매번 입력하지 않고 HTTPS 프로토콜로 리모트 저장소에 접근할 수 있다.
작년 오픈소스 아카데미 컨트리뷰톤 참여를 계기로 2019년 8월 22일 첫 커밋(Commit)으로 시작해 NPM에 배포해서 관리 중인 오픈소스 vue-pivottable의 가이드 문서를 README.md에서 VuePress 기반의 웹 사이트로 구성하고 있습니다. 문서를 업데이트하...
Vue CLI 3로 생성한 프로젝트에서 VSCode의 확장 플러그인과 커스텀 설정을 통해 IntelliSense와 ESLint를 활용할 수 있다.
사전 지식 클로저를 이해 하기 위해서 Scope, Scope Chain, Context 에 대한 이해가 선행되어야 합니다.
클로저를 이해하고 있다고 생각했지만 실제로 말로 설명이 되지 않는다는 걸 깨닫고 이 책을 읽기 시작했다. 클로저 외에도 평소에 모르고 넘어갈 수 있었던 부분도 알게되서 생각보다 많은 도움이 된 책이다. 완벽하게 기억에 남을 때까지 반복해서 읽어야겠다.
Vue CLI 3로 생성한 프로젝트에서 VSCode의 확장 플러그인과 커스텀 설정을 통해 IntelliSense와 ESLint를 활용할 수 있다.
지역과 관련된 데이터를 시각화하기 위해 SVG와 d3 함수를 이용해서 표현한 지도에 패딩 핵(Padding Hack)이란 기법을 통해서 반응형으로 구현한 경험을 정리하자.
오픈소스 Sinopia를 사용해서 Prvate NPM 저장소를 구성하고 스코프 문제를 해결한 경험을 정리하자.
vue-pivottable 컴포넌트의 스타일을 수정하고 최종적으로 프로젝트에서는 import { VsPivottable, VsPivottableUi } from 'vs-pivottable'과 같이 커스텀 된 형태로 사용하고 싶었다. 그런데 Internet Explorer 11에서 ...
이 글은 2018년 4월경 테스트를 진행하면서 기록한 내용을 바탕으로 작성했습니다. 암호화폐 시장을 경험하면서 알고리즘 매매에 흥미가 생겼다. 알고리즘 매매를 위해서는 가장 기본이 되는 캔들 데이터가 필요했다. 어떻게 실시간 시장 데이터를 가공해서 캔들 데이터...
이 글은 2018년 4월경 테스트를 진행하면서 기록한 내용을 바탕으로 작성했습니다. 암호화폐 시장을 경험하면서 알고리즘 매매에 흥미가 생겼다. 알고리즘 매매를 위해서는 가장 기본이 되는 캔들 데이터가 필요했다. 어떻게 실시간 시장 데이터를 가공해서 캔들 데이터...
이 글은 2020년 10월경 진행하면서 기록한 내용을 바탕으로 재작성되었습니다. 이전 글에서 진행했던 Amazon Athena SQL로 캔들 데이터 생성하는 방법은 SQL 구문이 길고 복잡하고 비용이 많이 들었다. 구글 검색을 통해서 실시간 데이터 처리에 용이한 ...
처음에는 막막하기만 했던 기본 캔들 데이터 생성을 인플럭스DB (InfluxDB)를 사용해서 쉽게 구현할 수 있었다. 다음은 언제 사고 언제 파는 게 좋을지를 과거 데이터를 통해 시뮬레이션 해보기 위해서 거래소에서 제공하는 REST API를 통해서 2017년부터 현재까지의 캔들 데...
AWS 코드 커밋(CodeCommit)에 구성된 모든 프로젝트들의 이슈 추적과 코드 리뷰 등을 위해 레드마인(Redmine)을 Amazon Linux2 OS에 설치하는 과정에 대한 기록과 이에 대한 후기입니다.
작년 오픈소스 아카데미 컨트리뷰톤 참여를 계기로 2019년 8월 22일 첫 커밋(Commit)으로 시작해 NPM에 배포해서 관리 중인 오픈소스 vue-pivottable의 가이드 문서를 README.md에서 VuePress 기반의 웹 사이트로 구성하고 있습니다. 문서를 업데이트하...
트레이딩 봇 애플리케이션 구동에 필요한 복잡하고 번거로운 설정 과정을 자동화하기 위한 힌트를 얻기 위해서 깃허브의 Topics에 trading bot을 검색해 보니 깃허브 스타(Star) 수가 1k 이상인 프로젝트들은 대부분 도커(Docker)와 관련된 설정이 포함되어 있는 것을 ...
BOJ에서 JavaScript로 문제를 풀때 시간 초과(TLE)와 메모리 초과(MLE) 문제를 자주 경험해왔습니다. 대부분의 알고리즘 강의나 문제풀이가 Python, C++, Java 위주로 구현되어 있기 때문일겁니다. BOJ 역시 JavaScript 풀이가 적고 같은 풀이라도 언...
AWS 빌링 데이터를 다루는 프론트엔드 개발자로 일하면서 백엔드에서 전달받은 숫자 데이터가 부동 소수점 연산의 함정과 지수 표기식(e notation)으로 표현되면서 생긴 이슈들을 해결하면서 빅 데시멀과 지수 표기법에 대해 정리해보았습니다.
Vue CLI3의 vue add pwa 명령어를 실행하면 쉽게 PWA를 설정할 수 있습니다. 이것만으로 빌드 시 생성되는 파일이 서비스 워커에 의해 캐싱이 됩니다. 여기에 추가로 교차 오리진에서 호출하는 리소스를 캐싱 해본 경험을 정리했습니다.
Vue CLI3의 vue add pwa 명령어를 실행하면 쉽게 PWA를 설정할 수 있습니다. 이것만으로 빌드 시 생성되는 파일이 서비스 워커에 의해 캐싱이 됩니다. 여기에 추가로 교차 오리진에서 호출하는 리소스를 캐싱 해본 경험을 정리했습니다.
Vue CLI3의 vue add pwa 명령어를 실행하면 쉽게 PWA를 설정할 수 있습니다. 이것만으로 빌드 시 생성되는 파일이 서비스 워커에 의해 캐싱이 됩니다. 여기에 추가로 교차 오리진에서 호출하는 리소스를 캐싱 해본 경험을 정리했습니다.
며칠전 rvm 및 rbenv로 루비를 설치하면서 만난 오류들을 해결하는 과정이 커맨드 치고 기다리는 시간의 반복이라 이 지루함을 극복하기 위해 크롬의 북마크를 정리했다. 왜 tools 라고 분류하고 남겼는지를 기억하기 위해서 정리 했다.
기존의 익숙치 않은 기술 스택을 사용한 블로그 운영에 부담을 느껴 글에만 집중할 수 있도록 jekyll 기반으로 마이그레이션을 진행했습니다. 이번 글에서는 첫 번째 단계로 우분투에서 rvm (Ruby Version Manager) 및 루비 설치 과정에 대해서 기록 했습니다.
얼마 전, “어떤 학습 방법을 주로 사용하시나요?“라는 질문을 받았습니다. 그 답변을 준비해봤습니다.
얼마 전, “어떤 학습 방법을 주로 사용하시나요?“라는 질문을 받았습니다. 그 답변을 준비해봤습니다.