React-helmet Maximum call stack size exceeded 버그 수정
개인 프로젝트를 진행하는 도중에 maximum-call-stack-size-exceeded 에러를 마주하게 되었는데, 코드를 아무리 분석해봐도 디버깅을 할 수 없었다.
AWS S3에 Vue Application 배포하기
create-react-app test error 해결방법(yarn test | npm run test)
자바스크립트 call, apply, bind 차이점
하이차트에서 항상 data labels를 칼럼 상단에 위치시키는 방법
하이차트에서 항상 data labels을 칼럼 상단에 위치시키는 방법
React
React-helmet Maximum call stack size exceeded 버그 수정
개인 프로젝트를 진행하는 도중에 maximum-call-stack-size-exceeded 에러를 마주하게 되었는데, 코드를 아무리 분석해봐도 디버깅을 할 수 없었다.
create-react-app test error 해결방법(yarn test | npm run test)
create-react-app으로 프로젝트를 세팅하고 컴포넌트 테스트를 위해서 create-react-app에서 제공하는 테스트 방식으로 진행하려고 했으나 Error: Error watching file for changes: EMFILE라는 요상한 에러가 발생했다. 이 에러를 해결하는 방법을 알아보자.
Javascript
하이차트에서 항상 data labels를 칼럼 상단에 위치시키는 방법
하이차트에서 항상 data labels을 칼럼 상단에 위치시키는 방법
자바스크립트 call, apply, bind 차이점
자바스크립트 함수를 다루다 보면 this 키워드를 다뤄야 할 경우가 많이 생기게 됩니다. 이 this 키워드를 정확하게 이해하려면 함수와 메서드의 차이부터 제대로 짚고 넘어가야 됩니다.
자바스크립트 비동기 프로그래밍 - 콜백함수(callback function)
자바스크립트에서 비동기 처리를 하기 위한 방법에는 callback, promise 그리고 async/await 방식이 있습니다. 이번 포스팅에서는 callback 함수를 통한 비동기 처리 방식을 설명해보도록 하겠습니다.
디자인 패턴:: 자바스크립트로 구현한 싱글톤 패턴 (Singleton Patterns)
싱글톤 패턴(Singleton Patterns)는 디자인 패턴을 공부하려고 할 때 가장 먼저 접하게 되는 패턴 중 하나입니다. 애플리케이션에서 단 하나의 인스턴스만 생성하고 다른 클래스에서 전역적으로 접근하는 방식입니다.
디자인 패턴:: Simple Factory - Factory Pattern 1
자바스크립트로 구현해보는 팩토리 디자인 패턴(Understand the Factory Design Pattern in plain javascript)
Best practice of checking if variable is undefined
자바스크립트에서 undefined 체크하는 방법
자바스크립트 진수 변환 (convert from/to binary/decimal/hexadecimal in javascript)
자바스크립트로 진수 변환하는 방법은 생각보다 간단하다. 자바스크립트 빌트인 함수를 사용하면 쉽게 변환할 수 있다.
자바스크립트로 합병정렬 구현 (merge sort in javascript)
합병정렬(merge sort)는 평균 시간복잡도 __*O*(nlogn)__의 비교 기반 정렬 알고리즘이다. 대표적인 divide and conquer (분할정복) 알고리즘을 활용하여 구현하는 정렬 알고리즘 중 하나다. 합병정렬은 정렬 알고리즘 중 효율적인 정렬 알고리즘에 속한다.
자바스크립트 동등연산자(==)와 일치연산자(===) 차이
자바스크립트 동등연산자와 일치연산자의 차이를 알아보자
자바스크립트 호이스팅
자바스크립트 호이스팅에 대해서 알아보는 포스팅
Vue
AWS S3에 Vue Application 배포하기
AWS S3에 Vue Application을 빠르게 배포하여 서비스를 구성해봅시다.
Nuxt.js x Contentful x Netlify로 static blog 개발하기 3강
Nuxt.js와 Contentful로 구축된 static site를 netlify를 통해 배포하는 방법을 살펴보겠습니다.
vue.js Event Bus를 통해 컴포넌트간 통신하기 (Event Bus in Vue.js)
vue.js에서는 일반적으로 부모/자식간의 이벤트 통신하는 방식을 사용합니다. 하지만, 경우에 따라서는 서로 관련없는 독립적인 컴포넌트끼리 이벤트를 통신해야할 때가 생깁니다. 이 경우를 좀 더 편하게 도와주는 vuex라는 state 관리 라이브러리도 있지만 규모가 작을 경우에는 단순히 EventBus를 활용해서 간단하게 처리할 수 있습니다.
Nuxt.js x Contentful x Netlify로 static blog 개발하기 2강
Nuxt.js, Contentful, Netlify로 static blog를 개발해보는 강의입니다. nuxt.js는 기존의 vue 웹 애플리케이션에서 ssr을 다루는 프레임워크입니다. Contentful은 컨텐츠 관리를 도와주는 CMS 툴입니다. netlify란 애플리케이션을 배포하고 자동화하기 위한 플랫폼입니다. 위 도구들을 활용해서 매우 빠르고, 관리하기 쉬운 블로그 웹 애플리케이션을 개발해보겠습니다.
Nuxt.js x Contentful x Netlify로 static blog 개발하기 1강
Nuxt.js, Contentful, Netlify로 static blog를 개발해보는 강의입니다. nuxt.js는 기존의 vue 웹 애플리케이션에서 ssr을 다루는 프레임워크입니다. Contentful은 컨텐츠 관리를 도와주는 CMS 툴입니다. netlify란 애플리케이션을 배포하고 자동화하기 위한 플랫폼입니다. 위 도구들을 활용해서 매우 빠르고, 관리하기 쉬운 블로그 웹 애플리케이션을 개발해보겠습니다.
[nuxt] Markdown-It에 Highlight.js 적용하는 법
nuxt 프로젝트에서 markdown-it에 highlight.js를 적용해보자.
Css3
CSS Normalize & CSS Reset
모든 웹 브라우저는 HTML 엘리먼트들에 자체적으로 설정된 스타일을 반영합니다. 이 말은 브라우저마다 HTML 엘리먼트 스타일에 대한 처리과정이 조금씩 다르다는 것을 의미합니다. 예를 들어, 사파리와 크롬은 동일한 HTML 문서를 다르게 보여줍니다. 이러한 차이점은 내장된 브라우저 스타일링 때문입니다.
display: inline-block 속성 숨겨진 여백 제거
block 속성을 가진 태그 안쪽에 inline element가 있으면, 기본적으로 block 속성과 inline 속성 사이에 빈 여백이 존재한다.
[크로스 브라우징] IE9에서 자동으로 이미지 높이값을 default size로 계산하는 경우
[크로스 브라우징] IE9에서 자동으로 이미지 높이값을 default size로 계산하는 경우
Etc
리눅스에서 폴더 통째로 복사하기
원본폴더를 통째로(즉 하위폴더 및 파일들을 포함하여) 목적지폴더로 복사할 수 있다. 상황에 따라 하위로 복사되거나, 폴더명이 바뀌며 복사된다. 목적지폴더가 원본폴더의 상위폴더가 될 것인지, 아니면 원본폴더의 다른이름이 될 것인지는 상황에 따라 다르므로 주의가 필요하다. 맨뒤에 '/'를 붙이든 말든 결과에는 상관이 없다.
[MAC] 사용중인 포트 찾아서 Kill 하기
lsof 는 list open files 의 약자로 시스템에서 열린 파일 목록을 알려주고 사용하는 프로세스, 디바이스 정보, 파일의 종류등 상세한 정보를 출력해 준다.
Git
Algorithm
자바스크립트로 삽입정렬 구현 (insertion sort in javascript)
자바스크립트로 삽입정렬을 구현해보자. 삽입정렬은 O(n2)의 시간복잡도를 가지고 있는 정렬 알고리즘이다. 시간복잡도는 O(N2)이고, 성능은 그닥 좋지는 않지만 구현하기 쉽고 이해하기 쉬운 알고리즘이다.
자바스크립트로 선택정렬 구현(selection sort in javascript)
자바스크립트로 선택정렬을 구현해보자. 선택정렬은 O(n2)의 시간복잡도를 가지고 있는 정렬 알고리즘이다. 버블정렬, 삽입정렬과 같이 좋은 퍼포먼스는 내지 못하는 정렬 알고리즘 중 하나이지만, 이해하기 쉽고 구현도 쉽다는 장점이 있다.
자바스크립트로 피보나치 수열 구현 (fibonacci in javascript)
자바스크립트로 피보나치 수열을 구현해보자.
자바스크립트로 최대공약수 구하는 알고리즘 구현 (greatest common divisor in javascript)
자바스크립트로 최대공약수를 구하는 알고리즘을 구현해보자.
자바스크립트로 지그재그 숫자 출력 구현 (print zigzag number in javascript)
1~25 사이의 숫자를 지그재그로 화면에 출력하는 알고리즘입니다.
자바스크립트로 소수 구하는 알고리즘 구현(prime number in javascript)
1과 자신을 제외한 어떠한 정수로도 나누어지지 않는 수가 소수이다. 1 ~ 1000 사이의 숫자 중에 소수만을 구하는 알고리즘을 구현해보자.
자바스크립트로 구현한 버블정렬 알고리즘 (bubble sort in javascript)
버블 정렬 알고리즘(Bubble Sort Algorithm)은 가장 기본적인 정렬 알고리즘 중 하나다. 빈번하게 등장하는 알고리즘이지만, 성능이 그리 좋은 편이 아니므로 실제로는 잘 사용하지 않는다.
자바스크립트로 구현한 탐욕 알고리즘 (greedy algorithm in javascript)
탐욕 알고리즘이란 매 순간마다 최적의 해를 구해내는 알고리즘입니다. 하지만, 해당 순간에는 최적일지 몰라도 전체적인 측면으로 봤을 때 도출된 해가 최적의 조건이라고는 보장할 수 없다.
[codewars] Stop gninnipS My sdroW!
Write a function that takes in a string of one or more words, and returns the same string, but with all five or more letter words reversed (Just like the name of this Kata). Strings passed in will consist of only letters and spaces. Spaces will be included only when more than one word is present.
[codewars] Find The Parity Outlier
You are given an array (which will have a length of at least 3, but could be very large) containing integers.
Equal Sides Of An Array
You are going to be given an array of integers.
[codewars] Decode the Morse code
In this kata you have to write a simple Morse code decoder. While the Morse code is now mostly superceded by voice and digital data communication channels, it still has its use in some applications around the world.
[codewars] Array.diff
Your goal in this kata is to implement a difference function, which subtracts one list from another and returns the result.
[codewars] String Reordering
codewars kata
[codewars] Will you make it?
codewars kata
년도를 세기로 변환하기
The first century spans from the year 1 up to and including the year 100, The second - from the year 101 up to and including the year 200, etc.
[codewars] 배열의 평균값 구하기
배열의 평균값 구하기
