LearnApplyShare

Archives

2020 November

[react] CRA앱 런타임에 마지막 커밋 정보 표시

2020 November 11 - [react, commit, craco, child_process]

CRA 앱 런타임에서 해당 앱의 정확한 버젼을 확인하여 비교해 보아야할 필요가 있었다. 간단하게 현재 런타임의 커밋정보를 로그상에 표시하려면 어떻게 해야할까. 런타임 중에 동적으로 커밋버젼을 확인하는 것은 불가능하므로 웹팩 컴파일타임을 커밋정보를 확인하고 이를 환경변수로 전달하는 방법이면 가능하다.

[js] `e` 를 이용한 숫자표기법이 필요한 이유

2020 November 11 - [js, number, float]

자바스크립트는 문법적으로 여러가지 애매한 특징들을 가지고 있다. 특별히 소수점 처리가 범상치 않다는 것은 이미 대충은 알고 있을 것이다. 왜 유독 14 에 0.1 을 곱할 경우만 결과가 이상하게 떨어지는 걸까? 위 문제가 현실 세계에서 어떤 문제를 발생시킬 수 있을 지 직접 예시를 통해 확인해 보자.

2020 October

Redux 를 넘어 SWR 로(2)

2020 October 05 - [react, swr]

앞서 첫번째 글에서는 Redux 를 사용할 때 일반적으로 경험할 수 있는 몇가지 문제들을 언급하였습니다. 이번 글에서는 SWR 은 무엇이고 SWR 이 어떻게 Redux 를 대체할 수 있는 지에 대해 설명해 보겠습니다. SWR은 무엇인가? SWR…

Redux 를 넘어 SWR 로(1)

2020 October 03 - [react, swr]

이 글에서는 오랫동안 Redux 를 이용한 상태관리를 해오다가 최근 SWR을 만나고, 프로젝트에서 Redux 의존성 모듈을 완전히 제거하기 까지 이른 과정과 경험을 공유하고자 합니다. 이 글이 도움이 되실 독자들 Redux…

2020 September

자바스크립트와 타입스크립트를 사용할 때 마음가짐

2020 September 10 - [JavaScript, TypeScript]

자바스크립트는 타입이 없기 때문에 타입오류를 오직 런타임시에만 확인 가능하다는 약점이 있습니다. 개발자는 모든 함수나 변수의 타입을 정확하게 인지하고 코딩을 할 수가 없습니다. 그렇기 때문에 우리는 자바스크립트 코딩을 할 때 본인도 모르게 수많은 타입에러 가능성들을 마치 지뢰를 설치하듯 여러 로직들 가운데 심어두게 됩니다. 결국 우리는 언제나 런타임에 언제 터질 지 모르는 타입에러에 대한 불안감에서 벗어날 수가 없습니다

페이스북 광고 웨비나 후기

2020 September 10 - [facebook, ads, marketing]

타게팅 설정은 띠로 하지 않고 최대한 넓게 잡는 것이 더 광고효율이 높음. 페북 머신러닝이 타게팅을 알아서 잘 해주는 것 같음. 광고효율을 높이려면 광고소재가 사실상 중요. 캠페인 목표에 따라 주목해야할 성과지표가 달라지는 것

리액트 리얼타임 상태관리 SWR

2020 September 04 - [react, swr]

리액트를 이용한 개발시 가장 힘들고 귀찮은 부분이 바로 컴포넌트간의 상태관리라고 해도 과언이 아닐 것이다. 리액트는 기본적으로 컴포넌트간 공유해야할 상태가 있다면 프롭을 통해 위에서 아래로 전달한다. 부모 컴포넌트에서 자식 컴포넌트로 상태 전달의 불편함을 해소하기 위해 리액트는 Context API 를 제공한다. Context API 의 기본컨셉은 부모의 상태를 프롭을 통한 전달없이도 자식 컴포넌트들이 해당 상태를 접근할 수 있게 하는 것이다.

2020 August

canvas 이미지 다운로드

2020 August 14 - [js, download, canvas]

canvas 의 이미지를 클라이언트에서 바로 다운로드 하는 방법 dom 구조가 아래와 같을 때, 이렇게 처리한다. a 태그의 속성을 이용하는 것이 포인트! Ref https://stackoverflow.com/questions/812662…

2020 July

RegExp 객체의 exec 사용

2020 July 29 - [js, regexp]

주어진 문자열에서 매칭되는 문자열을 전부 찾아내는 방법 메소드는 실행될 때마다 다른 결과를 순차적으로 리턴한다. 전체 문자열을 대상으로 매칭되는 문자열이 없을 때까지 주어진 문자열을 순회하며 매칭된 문자열을 찾아야 한다. Ref https…

리액트 컴포넌트 npm 패키지 만들기

2020 July 28 - [react-library]

리액트 라이브러리를 만들고 배포하는 작업 진행시 참고한다. 리액트 컴포넌트는 결국 순수한 자바스크립트 객체이기(함수는 일급객체) 때문에 일반적인 npm 모듈을 만드는 과정과 동일하다. 한가지 특이할 점은 리액트 컴포넌트 내부에서 jsx…

2020 June

PWA 를 만드는 방법

2020 June 26 - [pwa]

웹앱이지만 앱처럼 디바이스에 설치가능 모바일장비 & 데스크탑 장비 모두 설치가능 앱처럼 설치 가능하지만 앱스토어나 플레이스토어에 등록할 필요가 없다

자동 코드 포매팅

2020 June 19 - [standard]

프로젝트 코드의 포매팅 스타일을 일관되게 유지하면 코드 가독성을 높이는데 크게 도움이 된다. 자동 포매팅 도구들은 여러가지가 있다. eslint, prettier, standard…

[js] parse url

2020 June 15 - [js, URL, url-parse]

URL 스트링 파싱할 때 옛날엔 url-parse 모듈을 이용했었는데.. 요즘은 URL 객체가 기본적으로 지원이 되는구나! 브라우져와 노드 모두 사용가능하구나! 👍

[react] useEffect 사용시 로직의 흐름

2020 June 04 - [react, hook, useEffect, order]

useEffect hook 을 사용할 때 호출순서를 확인한다. 출력 결과는?? Note) 호출 이후 즉시 은 다시 렌더링된다 값이 변경되지 않을지라도 은 호출과 동시에 렌더링된다. 하지만, Virtual dom 에 의해 dom…

[js] generator 의 yield* 문법

2020 June 03 - [generator, yield]

generator 에서 문법의 의미를 알아보자. 아래와 같이 제너레이터 안에서 for ~ of 를 이용해 이터레이터의 요소를 반복적으로 해야 할 경우 아래와 같이 로 축약하여 사용할 수 있다.

AWS Amplify x GitHub 기반 CI/CD 설정

2020 June 02 - [AWS, amplify, GitHub, CI/CD]

GitHub의 특정 레포지토리(애플리케이션)를 AWS Amplify 에 등록한 후 특정 브랜치를 연결 설정 하면 해당 브랜치에 코드가 푸시될 때 자동으로 배포가 수행된다. 하지만 master…

2020 May

Python 스터디

2020 May 23 - [python, syntax]

python 을 새롭게 공부하면서 특별히 기억할 만한 요소들을 정리해 본다. 변수의 선언 없이 바로 사용 다른 언어들(C/C++, JAVA, JavaScript)과 다르게 변수의 특별한 선언없이 바로 사용 comment 연산자 power…

텍스트 줄임 처리 .. (ellipsis)

2020 May 20 - [gatsby, utterances]

일반적으로 텍스트의 양이 많아서 주어진 영역을 벗어나면 아래와 같이 표시된다.. 해당 영역을 벗어나는 텍스트를 잘라내기 위해 스크립트를 이용하는 것도 가능하다. 하지만 해당 영역의 너비가 달라져서 뿌려줘야 할 텍스트의 길이가 늘어나거나 줄어들 경우 스크립트를 다시 수정해야하는 불편함이 있을 수 있다.

About this blog..

2020 May 15 - [about]

기술로 사람들의 일상을 변화시키는 일에 관심이 있습니다. 일상을 바꾸는 힘은 가볍고 기발한 창의적 아이디어로부터 시작됩니다. 그리고 그 아이디어는 인간과 사회를 바라보고 이해하는 인문학적 통찰력에 기반합니다.

Gatsby 블로그 페이징처리(dynamic routing)

2020 May 13 - [gatsby, dynamic-route]

요즘 여기저기서 개츠비에 대한 칭찬이 많아서 꾸준히 관심을 가지고 있었다. Dan Abramov 의 핑크빛 블로그에 대한 인상도 좋았고 무엇보다도 리액트 기반인 만큼 필요할 때 어렵지 않게? 주물럭 거릴 수 있을 것이라 기대하고 개츠비 블로그로 이사를 결심하였다.

JavaScript 세미콜론 사용

2020 May 07 - [js, semicolon]

자바스크립트는 문장(statement)의 구분을 위해 세미콜론 `;` 을 사용한다. 일반적으로 코드의 가독성을 위해 한줄에 하나의 문장만 사용한다.

2020 April

[react] 컴포넌트별 scoped 스타일 사용

2020 April 29 - [react, react-scoped-css]

css 는 언제나 전역으로 사용되기 때문에 리액트 컴포넌트별로 css 를 사용하더라도 경우에 따라 실렉터가 충돌날 수 있다. 이를 해결하기 위한 다양한 방법이 있겠지만 이 글에서는 사용방법이 간단한 scoped-css-loader 모듈을 이용하는 방법을 소개한다.

RxJS 의 이해와 사용

2020 April 24 - [react, RxJS]

RxJS 는 이벤트 기반 프로그래밍에서 함수형 프로그래밍을 이용해 보다 선언적으로 이벤트를 처리할 수 있도록 도와준다. RxJS는 모든 이벤트를 observable…

redux-saga 가 해결하는 문제

2020 April 23 - [react, redux-saga, generator]

본 글에서는 redux-saga 를 알고 싶지만 왠지 높아 보이는 진입장벽으로 마음이 불편한 개발자들을 위해 작성되었다. redux-saga 가 필요한 이유와 redux-saga 가 어떤 문제를 해결하는 지에 대한 이해를 돕고자 한다. redux…

[react] Context api 사용 방법

2020 April 21 - [js, react, context]

Context api 를 이용하면 mobx, redux 없이도 애플리케이션 상태를 공유할 수가 있다. 하지만 상태를 업데이트하기 위해서는 공유되는 컨텍스트 안에 상태 변경 메소드까지 포함하여야 하는데 이를 통해 애플리케이션의 전체 상태를 관리하기가 불편할 수 있다.

[react] mobx 개발환경 설정

2020 April 19 - [js, react, mobx]

create-react-app 으로 시작해서 mobx 를 사용하기 위한 기본적인 세팅방법 기록해 둠 1. 앱생성 2. CRA 기본 앱 설정 추출 3. mobx, mobx-react 설치 4. 데코레이터 사용 설정 preset 설치 package…

[mobx] enforceActions

2020 April 17 - [js, mobx]

mobx 는 우리를 의 늪에서 꺼내 주었다. 충분한 자유함과 유연함은 좋지만 그 것이 좋은 것이 되려면 언제나 책임을 전제로 해야한다. observalbe…

[react] React.memo

2020 April 17 - [js, react, memo]

함수형 컴포넌트는 부모 컴포넌트가 렌더링될 때 무조건 함께 같이 렌더링이 됩니다. 하지만 함수컴포넌트의 경우 props 가 다르지 않다면 항상 같은 결과를 리턴하므로 부모 컴포넌트가 re-render 되더라도 함수 컴포넌트의 props…

[react] render props

2020 April 17 - [js, react, render-props]

react 에서 코드 재사용을 위해 적극적으로 권장하는 방법 Render Props. 리액트는 prop 을 통해서 primitive…

2020 February

play sound with JavaScript

2020 February 28 - [js, sound]

안 되는 줄 알았는데.. 찾아보니 간단히 되는구나! 요즘 웹으로 정말 안되는 게 없는 듯~ Ref. https://stackoverflow.com/questions/9419263/playing-audio-with-javascript

2020 January

npm 버젼의 캐럿(^) 의미

2020 January 29 - [npm, version]

아웃사이더님이 잘 정리해주신 글 보고 배운 내용 요약 npm 버젼 의미 MAJOR: 하위호환성이 보장되지 않는 변경사항 발생시 MINOR: 하위호환성 보장 하면서 기능추가 PATCH: 하위호환성 보장 하면서 버그수정 npm…

electron 시작하기

2020 January 17 - [electron]

엘렉트론 소개 js 로 데스크탑 애플리케이션을 만들자! Nodejs + Chromium 일렉트론은 기본적으로 Nodejs 프로젝트 2014년 github 에서 Atom…

2019 December

[js] buildErrorHandler

2019 December 27 - [js, error]

프로젝트 공통에서 계층 구조적으로 에러를 핸들링하고자 하고자 한다면 함수를 이용할 수 있다 구체적인 설명은 귀찮아서 생략한다.

[js] custom Error

2019 December 27 - [js, error]

js 에서 제공하는 클래스는 기본적으로 아래와 같이 문자열을 인자로 받는다 객체타입을 사용해 에러메세지를 입체적으로 정의하고자 한다면 클래스를 아래와 같이 확장하여 사용한다.

[kubernetes] 기본 명령어

2019 December 27 - [kubernetes, command]

쿠버네티스 설치 https://kubernetes.io/docs/tasks/tools/install-kubectl/ 기본 명령어들 컨테이너 목록 확인 컨테이너 삭제 컨테이너 ssh 접속 kubectl 로그 확인 컨테이너의 파일을 로컬로 복사 ex…

[elm study] Types

2019 December 17 - [elm, type]

타입선언 함수 정의시 아래와 같이 타입을 선언한다 타입 변수 ts의 generic 과 비슷하게 일반적인 타입 형태(list…

2019 November

[mac] 기본 shell 변경

2019 November 22 - [mac, shell]

실수로 잘 사용하던 기본 shell 을 바꿔먹어서 이상한 shell 이 나타나 무척 당황했었다; 맥에서 기본 shell을 변경하는 방법을 간단히 정리하고 넘어간다. 맥 기본 bash 사용 기본 설치된 shell 목록 확인 Ref. https://www…

npm 모듈 배포

2019 November 22 - [npm, publish]

처음으로 npm 모듈 배포를 실습해 보았다. 몰라서 고생했던 내용들만 내 맘대로(내가 이해한 만큼만) 축약해 정리해 본다. 배포명령 프로젝트 루트 경로에서 모듈 배포는 언제나 패키지명&버젼명이 유일해야 한다. 인증 npm 모듈을 배포하려면 우선 npm…

2019 October

[js] clipboard 읽기&쓰기

2019 October 08 - [Frontend, js]

클립보드에 데이터를 읽고 쓰는 방법 클립보드에 데이터 쓰기(execCommand 이용) 크롬에서 정상 동작 클립보드 데이터 읽기(execCommand 이용) 크롬에서 정상 동작 파이어폭스 미지원 클립보드 데이터 읽기(clipboard API…

2019 September

[now] Node 서버 배포

2019 September 09 - [zeit, now, deploy, node]

작년 이 맘때 now 서비스를 사용하는 방법을 간단히 포스트 한적이 있다. 당시에는 1.0 버젼이었는데 최근? 2.0으로 버젼 업이 되면서 소소하게 적잖은 부분이 변경되었다. 최근 2.0 내용에 맞춰 express 서버를 간단히 now…

[vue] link 내용 요약본

2019 September 08 - [Frontend, vue, js, nuxt]

아래와 같이 특정 URL의 부가정보를 가져와서 간략하게 보여주는 뷰를 작성해 보았다. https://news.v.daum.net/v/20190907135442277 코드 함수는 이전 포스트 를 참고한다.

URL 메타 정보 긁어오기

2019 September 06 - [js, Frontend]

특정 URL의 타이틀, 이미지, 설명 정보를 간단히 긁어오는 웹스크래핑 소스를 작성해 보았다. 브라우져에서 사용할 경우에는 CORS 문제로 url의 응답을 가져오는데 제한이 있을 수 있다. 그럴 경우에는 URL…

[js] await 뒤에 동기함수가 오면?

2019 September 05 - [js]

async/await 를 사용할 때, 일반적으로 프라미스를 리턴하는 비동기함수의 응답을 기다릴 때 비동기 함수 앞에 await 를 사용한다. 하지만, await 다음 함수가 프라미스를 리턴할 지 일반적인 value…

[Frontend] 파일 다운로드 downloadWithFetch

2019 September 04 - [frontend]

별도 서버의 도움없이 클라이언트에서 파일 다운로드를 처리하는 함수를 찾아 보았다. downloadWithAxios 는 있는데 downloadWithFetch 가 없어서 하나 만들어 보았다. 파일 다운을 실행할 때마다 document.body…

[nuxt] 공통 에러 페이지 error.vue

2019 September 04 - [Frontend]

nuxt 에서 처리되지 않은 예외는 모두 넉스트의 기본 에러페이지로 처리된다. 넉스트의 기본 에러 출력화면을 커스터마이징 하려면 아래와 같이 파일을 추가한다 prop error.vue 에 전달되는 prop은 클래스의 인스턴스가 아닌 error…

2019 August

[js] 함수내에서 자신의 이름 참조하기

2019 August 23 - [js]

디버깅용 로그를 남길 때 실행 중인 함수스코프 내의 해당 함수 이름을 참조하고 싶을 때가 있다. 함수 스코프 내에서 해당 함수의 이름을 참조하려면 어떻게 해야할까? 아래 방법이 가능하다 함수의 name 속성은 ES6부터 지원하지만 strict…

[vue] v-html 에서 필터 흉내내기

2019 August 15 - [vue, typescript]

vue 에서 text 를 화면에 렌더링하기 위해서는 머시태그나 v-html 을 사용한다. 특별히 html 태그사용이 필요한 경우 을 이용해 html 문자열을 렌더링해야 한다. 뷰는 template 태그 영역 내에서 간단하게/직관적으로/readable…

[vue] 뷰 컴포넌트 이름이 필요한 이유

2019 August 14 - [vue, typescript, nuxt]

뷰 컴포넌트 이름이 필요한 경우를 전혀 찾지 못하다가 필요한 경우를 발견해서 기록을 남겨둔다. 뷰 컴포넌트의 이름을 정의하는 2가지 방법(class based) 1. @Component 에 등록하는 방법 2. 클래스 이름으로 정의하는 방법…

2019 July

[js] console.log 를 이용한 디버깅시 주의사항

2019 July 18 - [js]

웹개발시 일반적으로 디버깅시 를 많이 사용하는데 주의해야 할 사항이 있다. 아래 코드를 보자 위와 같이 객체 자체를 직접 콘솔에 찍을 경우 브라우져(크롬)는 에 대한 참조를 이용해 console…

[js] 랜덤 문자열 생성함수

2019 July 18 - [vinillajs]

간단하게 랜덤문자열을 생성하는 함수 오늘 갑자기 테스트코드에서 오류가 발생해서 봤더니.. forEach 루프 안으로 들어오지 않는 문제가 있었다. 잘 돌던 코드가 갑자기 왜 안 된거지..??? 갑자기 js…

[js] Octal literals are not allowed in strict mode

2019 July 17 - [es6, strict]

과 같은 리터럴을 사용할 때 만날 수 있는 오류이다. 관련 디테일을 들여다 보자 원래 과 같이 으로 시작하면 8진수, 같이 로 시작하면 16진수 표기가 맞다. js스펙이 원래 이랬는데.. ES6부터는 8진수 표기를 , 16진수는 ,…

[funtional] ramdajs 의 렌즈(lens)

2019 July 16 - [ramdajs, funtional]

ramdajs 에서 제공하는 lens 에 대한 개념을 소개한다. lens 는 복잡한 객체(특별히 depth가 깊은 구조)를 다룰 때 아주 유용하다. 다음과 같은 객체의 내부 y속성 값을…

[js] array 를 초기화하는 방법

2019 July 11 - [js, array, initilaize]

배열을 초기화하는 가장 쉬운 방법은 다음과 같다. arr 가 const 로 선언되어 있다면 아래와 같이 처리할 수 있다. 그런데 뷰에서는 length 를 초기화하는 방법으로 인한 변이가 reactive 하지 않기 때문에 splice…

[js] getQueryParam

2019 July 03 - [js, utils, replace]

여기 소스 살펴보다가 replace 를 이렇게 활용할 수도 있구나.. 인상적이어서 공유해 봅니다 쿼리스트링을 파싱하여 리턴하는 유틸함수(원본 소스를 일부 수정함) URL이 아래와 같을 때 http://www.11st.co.kr/product…

2019 June

[js] generator 를 이용한 iterator 구현

2019 June 07 - [generator, iterator]

iterable 하지 않은 객체를 iterable 하게 만들려면 에 이터레이터를 리턴하는 함수를 작성해야 한다. ES6에서는 generator 를 이용하여 손쉽게 iterator를 리턴하는 함수를 작성할 수 있다. coll 은 아직 iterable…

2019 May

[js] 클래스 decorator의 호출시점에 대하여

2019 May 30 - [js]

decorator를 이용하면 클래스 정의를 보다 예쁘게 할 수 있다. 그렇다면 decorator가 호출되는 시점은 정확히 언제일까? 다음 예제를 통해서 확인해 보자. 결과는 아래와 같다. 결론 객체가 생성될 때 가장 먼저 decorator…

[js] 자바스크립트 scope 퀴즈

2019 May 23 - [js]

자바스크립트의 함수단위 스코프, 동적 this 바인딩, lexical scope 등 자바스크립트에서 scope 에 대한 개념을 정확히 이해하기 위해 알아야 할 사항들은 상당히 많다. 특별히 아래 퀴즈들을 통해 나는 자바스크립트 scope…

[js] https 에 사용자 인증을 설정할 때 문제

2019 May 15 - [js]

크로스도메인 요청을 보낼 https 서버가 인증정보(id/pw)를 요구하는 경우에 필자가 경험했던 문제를 정리한다. 시나리오 현재 화면()에서 특정 데이터를 가져오기 위해 로 요청을 보내야 한다고 가정하자. 그리고 프론트에서는 fetch…

[js] var와 let, const의 차이

2019 May 15 - [js]

var와 let의 구체적인 차이점을 확인해 보자 누구나 아는 내용 let, const 는 ES6부터 사용가능 var, let 은 변수 const는 상수 var 는 동일한 변수를 여러번 선언 가능하지만, let, const…

2019 April

[nodejs] GraphQL 클라이언트 소개

2019 April 25 - [graphql]

본 글에서는 Nodejs 에서 간단히 GrahpQL 서버에서 데이터를 fetch 하는 클라이언트 작성 방법을 소개한다. 필요 모듈 ts-node ts 를 컴파일 없이 바로 실행 type-script 본 예제에서는 단순히 import…

2019 March

[nodejs] EACCES: permission denied, mkdir

2019 March 25 - [error]

특정 npm 모듈을 글로벌 설치할 때 아래와 같은 오류를 종종 만나곤 한다. sudo 를 이용해 수행하더라도 설치 과정에서 내부적으로 쓰기 권한이 없어 오류가 발생하는 것으로 보인다 해결책 아래와 같이 옵션을 추가해 본다 Ref https…

[vscode] 단축키로 터미널 명령 실행

2019 March 13 - [vscode]

vscode 에서 단축키를 이용해 터미널 명령을 바로 실행하는 방법은 여러가지가 있겠지만 특별히 Command Runner 익스텐션을 사용하는 방법을 공유한다. Command Runner 설치 vscode extension 메뉴에서 Command…

[mac] 화면캡쳐

2019 March 01 - [mac]

전체화면캡쳐 파일로 저장 클립보드로 저장 Note) 파일저장 경로는 데스크탑 선택윈도우 or 특정영역드래그 파일로 저장 클립보드로 저장 Note) 선택윈도우냐 특정영역드래그(default)냐는 스페이스키로 토글 동영상 캡쳐 Note…

2019 February

[nodejs] import 구문 사용

2019 February 14 - [nodejs]

노드에서 import 구문을 사용하고자 할 경우 세팅 방법 @babel/preset-env 설치 .babelrc 설정 테스트 babel-node 를 이용하면 컴파일과 동시에 바로 실행할 수 있다 기타 preset-env 는 Babel7.x…

[mac] 터미널 프롬프트 포맷 변경

2019 February 14 - [mac]

터미널 프롬프트의 포맷을 변경하려면 파일을 만진다. ~/.bash_profile 에 아래 내용 추가 위와 같이 설정을 하면 아래와 같은 프롬프트를 얻을 수 있다 프롬프트 설정시 아래와 같은 값을 사용할 수 있다 Ref http://osxdaily…

2019 January

[js] optional-chaining 사용설정 방법

2019 January 31 - [js]

설치 .babelrc 에 아래 설정 추가 vscode 에서 문법오류 optional-chaining 사용 설정을 완료하고 VSCODE에서 해당 문법을 사용하려고 하면 문법오류라고 지적을 해준다. 물론 현단계에서 optional-chaining…

[js] 소요시간 측정

2019 January 31 - [js]

js 속도 튜닝이 필요할 경우 특별히 스크립트의 소요시간을 체크하고자 할 때 간단하게 사용할 수 있는 함수를 소개한다. 사용법 실행 결과 timelog.js…

[js] ManDay 계산

2019 January 11 - [js]

어떤 작업을 수행했던 시작과 끝 시간이 주어지고 해당 기간에 소요된 공수를 일단위로 계산한 결과가 필요할 때 아래와 같이 계산할 수 있 다 요건 주5일(월~금) 하루 8시간 근무를 기준으로 계산한다 점심시간(12~1…

2018 December

[Nextjs] Nextjs 를 시작 해야하는 이유

2018 December 08 - [react, nextjs]

SPA 앱을 만들려는 노력은 더 이상 특별한 일이 아닙니다. 다행히도 SPA앱을 간단하게 만들 수 있도록 도와주는 여러 프로젝트들이 있습니다. Create React App 이 그 좋은 예 입니다 그러나 CRA…

[React] super(props) 를 써야하는 이유

2018 December 03 - [super, props]

이 글은 Dan Abramov의 Why Do We Write super(props)? 글을 충분한 의역으로 번역한 것입니다. 번역이 일부 자연스럽지 않은 부분이 있을 수도 있습니다. 정확한 내용은 원문을 참고하기 바랍니다 최근 Hooks…

2018 November

[JEST] Nextjs 에서 jest 사용하기

2018 November 29 - [jest, TDD, node, Nextjs]

Nextjs 프로젝트에서 지난 포스트의 방법대로 jest 구성을 하니 Nextjs 프로젝트를 빌드할 때 아래와 같은 오류가 발생했다. 구글링 결과 Nextjs 에서 jest…

[JEST] ES2015 모듈 사용하기

2018 November 28 - [jest, TDD, node]

테스트 대상이 되는 모듈을 테스트하기 위해서는 테스트코드에서 일단 해당 모듈을 불러올 수 있어야 한다. 하지만 JEST 는 기본적으로 ES6의 , 구문을 사용할 수 없다. 해당 구문을 사용하려면 , 를 commonjs…

[Nodejs] EUC-KR 웹페이지 웹스크래핑

2018 November 10 - [nodejs]

Node 는 자바스크립트 기반이므로 기본적으로 UTF-8 인코딩을 사용한다. EUC-KR 인코딩을 사용하는 웹사이트를 스크래핑할 경우 한글이 깨지는 문제가 발생할 수 있다. 본 글에서는 EUC-KR…

[js] BASE64 인코딩/디코딩

2018 November 07 - [BASE64]

클라이언트와 서버간에 한글이 포함된 전문을 주고 받을 때 한글이 깨지게 되는 경우가 종종 있다. 한글 인코딩이 깨지지 않기 위한 손쉬운 방법은 문자열을 서버로 전달하기 전에 BASE6…

[react] 컴포넌트의 mount 여부 체크

2018 November 02 - [react]

아직 mount 되지 않은 혹은 unmount 된 컴포넌트에 나 를 수행하려고 하면 아래와 같은 오류가 발생한다 난 전에 해당 컴포넌트의 mount…

nprogress 소개

2018 November 02 - [nprogress]

프론트엔드 개발할 때 언제나 필요한 기능 중 하나가 서버의 응답을 기다리는 동안에 보여줄 진행중 표시이다. 특별히 개발 프레임웍에 종속적이지 않고 모든 웹개발 프로젝트에서 간단히 사용 가능한 nprogress…

[js] 배열에서 특정 요소 제거

2018 November 01 - [array, js]

배열의 특정 요소를 제거하는 2가지 방법 결론 2번째 방법은 조건에 따라 여러 개를 한꺼번에 삭제하는 것도 가능하다. 읽기도 쉽고 코드도 더 짧다. 를 이용하자

2018 October

Node.js CORS setting

2018 October 30 - [nodejs, cors]

Express 서버를 사용할 경우 cors 미들웨어를 이용해 간단하게 CORS 설정을 할 수 있다. 모든 요청에 대한 CORS…

Next.js + Sass

2018 October 28 - [nextjs, sass]

Next.js 에서 scss를 사용하려면 next-sass 플러그인을 추가로 설치해야 한다. next-sass 플러그인을 설치하고 사용하는 방법은 다음과 같다. next-sass 세팅 모듈 설치 사용방법 파일 생성 export default…

[json-server] 30초 안에 RESTful API서버 만들기

2018 October 27 - [json-server]

프론트엔드 개발자에게 백엔드서버 구축은 여간 귀찮은 일이 아니다. 백엔드 구축이 귀찮은 분들에게 json-server 라는 신박한 녀석을 소개한다. json-server 는 내부적으로 lowdb 라는 단순한 데이터베이스를 이용하며 최소한의 REST…

[React] 함수형 컴포넌트와 클래스기반 컴포넌트의 차이점

2018 October 21 - [react]

함수형 컴포넌트 순수 자바스크립트 함수를 이용하여 컴포넌트를 정의한 것 클래스기반 컴포넌트 를 상속받은 클래스를 이용하여 컴포넌트를 정의한 것 차이점 구분 함수형 컴포넌트 클래스기반 컴포넌트 장점 코드를 간결하게 작성할 수 있다. N/A…

mime type 설정

2018 October 16 - [mime-type]

HTTP 응답헤더 중 Content-Type 은 서버의 특정 자원이 어떤 용도에 필요한지에 대한 부가정보를 제공한다. 브라우져는 이 정보를 기반으로 해당 자원을 어떤 용도로 해석하고 표현해야 할 지 결정한다. 한 예로 svg…

npm 최신버젼으로 업그레이드

2018 October 13 - [npm]

오랜 만에 create-react-app을 이용해 react 개발을 시작하려고 하는데 시작부터 npx 가 갑자기 나온다. 근데 내 windows 머신에는 npx를 사용할 수 없었다. npm5.2 부터 사용이 가능 하다고 한다. 로컬의 npm 버젼은…

2018 September

[java] ArrayList vs LinkedList vs Vector

2018 September 19 - [ArrayList, LinkedList, Vector]

각 자료구조에 대한 차이를 정확히 알아야 적절한 자료구조를 선택할 수 있다 구분 ArrayList LinkedList Vector 동기화 미지원 미지원 지원 검색 빠름 느림 빠름 추가/삭제 무겁다 가볍다 무겁다 지원버젼 java1.2 java1.…

[java] HashMap 사용법

2018 September 19 - [HashMap]

java에서 HashMap 사용법 기본 사용법 참고) 위에서 객체 생성시 사용된 유형 매개변수는 jdk1.5 이상부터 사용 가능 jdk1.4 에서 사용할 경우 아래와 같은 오류 발생 출력 순회방법 출력 Ref https://wikidocs.net…

사용 중이던 npm 패키지 버젼 업그레이드

2018 September 06 - [nodejs, npm]

으로 npm 프로젝트를 생성한 후 처음으로 필요한 npm 패키지를 설치할 때 를 사용하면 기본적으로 최신 버젼의 패키지가 설치된다. 하지만 시간이 흘러 사용 중이던 모듈을 최신버젼으로 업그레이드하고자 할 때 를 사용하면 package.json…

[js] The "new Function" syntax

2018 September 04 - [Function]

함수를 정의할 때 일반적으로 사용하는 방법은 아니지만 자바스크립트는 함수를 동적으로 정의하는 방법을 제공한다. 어짜피 함수의 동작이라는 것이 입력으로 받아들이는 패러미터와 (외부변수를 사용할 경우엔) 함수가 정의될 당시의(Lexical…

[js] slice, substr, substring

2018 September 03 - [string, slice, substr, substring]

자바스크립트에서 문자열의 일부를 추출하고자 할 때 사용할 수 있는 함수는 slice, substr, substring 3가지가 있다. 이 글에서는 3가지 함수의 용법을 정확히 이해하고 어느 경우에 어떤 함수를 사용하는 것이 좋을 지 안내한다 slice…

js 진수변환

2018 September 02 - [진수변환]

10진수 -> 16진수 // 아래와 같이 리터럴에서 직접 사용도 가능 (123).toString(2); // === “1111011” Ref http://unikys.tistory.com/334

Highest Value Palindrome

2018 September 02 - [palindrome]

흔한 팰린드롬(좌우대칭 문자열) 관련 문제이지만 이틀 동안 너무 고생했던 문제ㅠ https://www.hackerrank.com/challenges/richie-rich/problem 문제 0~9 까지 숫자로 이루어진 문자열과 자연수 k…

Forming a Magic Square

2018 September 01 - [array, magic-square-forming]

문제 아래와 같이 가로/세로/대각선의 합계가 모두 같은 행렬을 magic-square 라고 한다. 특정 3x3 행렬이 주어질 때 아래와 같이 magic-square 로 변환할 수 있다. 이 경우 변경이 필요한 숫자는 5,8,…

Caesar Cipher

2018 September 01 - [string, encrypt]

문제 caesar 암호화 방법은 아래와 같다. 숫자 3이 주어 진다면 먼저 아래와 같이 알파벳의 순서를 3칸 rotation…

안전한 비밀번호 체크

2018 September 01 - [string]

문제 비밀번호 문자열이 주어질 때 안전한 비밀번호를 만들기 위해 추가로 입력해야 할 문자의 최소 개수를 구하라 https://www.hackerrank.com/challenges/strong-password/problem 안전한 비밀번호 조건…

2018 August

삼항연산자 사용시 주의사항

2018 August 31 - [ternary-operator]

주어진 배열에서 양수의 개수를 구하고자 할 때 reduce를 이용하여 아래와 같이 양수의 누적값을 카운트할 수 있다. 함수의 결과값을 잠시 예측해보자. 양수의 개수는 2가 맞지만 위 코드의 실행결과는 1이 된다. 왜 일까? 문제는 표현에 있다. a…

[js] How reduce() works

2018 August 31 - [array, reduce]

초기값 없는 경우 다음 예제를 보자 첫번째 인자로 주어진 콜백함수는 총 4번 호출되며 이때 콜백함수에게 전달되는 인자와 결과값은 아래와 같다.(참고로 콜백함수를 호출할 때 3,4번째 인자는 생략가능하다) callback accumulator…

Day of the Programmer

2018 August 31 - [calendar, leap-year, Gregorian, Julian]

Day of the Programmer 매해 256번째 날은 국제 프로그래머의 날이다. 일반적으로 9월 13일이고 윤년의 경우에는 9월 12일이 된다. 256은 2의 제곱으로 표현 가능한 자연수 중 356을 넘지않는 최대값이다. 또한…

[어려운문제] max array sum

2018 August 31 - [array, max-array-sum]

이웃하지 않은 2개 이상의 요소로 이루어진 부분집합 중 요소의 합계가 가장 큰 값을 구하는 문제 https://www.hackerrank.com/challenges/max-array-sum/problem 이 경우 subset 합계들의 최대값…

java 파일처리

2018 August 30 - [java, file]

자바는 뭐 이런 거 하나 하는게 이렇게 힘드냐. 왠지 정이 안가.. 파일읽기 함수 파일쓰기 함수 폴더생성 함수

[알고리즘] Quick sort

2018 August 29 - [algorithm, quick-sort]

퀵소트는 아래와 같은 방법으로 정렬을 진행한다 배열의 요소 중 임의의 값을 pivot 으로 지정 pivot 값을 기준으로 pivot보다 작거나 같은 값들은 왼쪽에 큰값들은 오른쪽에 위치시킨다 각 왼쪽과 오른쪽 배열에 대해서 요소의 개수가 0 또는…

[js] Array.prototype.sort

2018 August 28 - [array, sort]

자바스크립트는 Array.prototype.sort 를 통해 언어 차원에서 기본적인 정렬 기능을 제공한다. 배열의 sort 함수는 특별히 정확한 사용법을 익혀두는 것이 중요하다 sort…

[js] mutable vs immutable

2018 August 28 - [immutable, js, array, function]

자바스크립트에서 제공하는 배열 함수는 original 배열의 상태를 변경시키는(mutable) 함수도 있고 기존 상태를 변경시키지 않고(immutable…

expo 개발환경 세팅

2018 August 27 - [expo, react-native]

Expo는 React Native 를 사용하여 기본 iOS 및 Android 프로젝트를 구축 할 수 있는 빌드&테스트 환경을 제공한다. 장점 Xcode, Android Studio 없이도 iOS, Android 앱 개발이 가능하다. Windows…

jekyll 블로그 tag 기능 추가

2018 August 10 - [jekyll, tags]

Intro 얼마 전에 추가했던 카테고리 기능만으로는 왠지 아쉬움이 있어 태그 기능을 추가하기로 했다. 지킬블로그는 모 하나 기능 붙이려면 여간 귀찮은 게 아니다. 관련하여 여러가지 글들을 읽어 보았지만 johngrib…

[scss] 주요 문법 정리

2018 August 10 - [scss, syntax]

변수 사용 scss css & 현재 적용 중인 실렉터 참조 scss css @mixin 재사용 가능한 css 블럭을 설정 scss css @content @mixin 구문 안에서 사용되며, @include 문의 중괄호 안에 정의된 내용을 참조 scss…

[linux] apt-get 사용법

2018 August 09 - [apt-get]

Intro 리눅스에서 대표적인 패키지 관리 프로그램인 apt-get 명령 사용법 명령어 apt-get…

[linux] 디렉토리 구조

2018 August 09 - [linux, directory]

Intro 상세내용을 다루지는 않고 실용적인 내용만 소개한다. 디렉토리별 용도 /bin 시스템 사용자들이 주로 사용하는 기본적인 명령어 예) mv, cp, rm 등과 같은 명령어들 /boot 리눅스 부트로더(Boot Loader) /dev…

[fontello] 무료 아이콘 사용

2018 August 09 - [fontello, icon]

intro 화면 디자인시 아이콘 사용은 거의 필수적인데 적절한 아이콘을 찾지 못해 허덕이던 중 fontello.com 이란 곳을 발견하고 사막에서 오아시스를 만난 것 같이 기뻣다. 그림1 내가 사용해본 바 fontello…

[jekyll] Invalid CP949 character 오류

2018 August 08 - [jekyll, encoding, CP949]

Intro 맥에서 jekyll 블로그 테마를 커스터마이징 했었다. 당시에는 문제가 없었는데 windows7 로컬환경에서 블로그를 가져와 빌드를 해보니 아래와 같은 오류가 발생했다 도대체 이 오류는 뭘까 @.@ 인코딩 관련 오류인 것 같긴한데 main…

[linux] 활용 팁

2018 August 08 - [linux, tip]

2개 명령을 한 번에 실행 을 이용하면 두개 명령을 한번에 실행할 수 있다 표준 출력을 파일로 저장 를 사용 표준출력을 파일에 append 를 사용 현재 linux 시스템 모니터링 현재 사용 중인 shell 종류 확인 자주 사용하는 명령어 top…

[웹팩4] tree shaking 적용 방법

2018 August 05 - [tree-shaking, webpack, import]

intro 웹 사이트의 성능 최적화를 위한 많은 시도가 있지만 특별히 tree shaking 은 무엇인지 알아보고 웹팩4에서 어떻게 이를 활용할 수 있는지에 대해 알아보자 tree shaking…

2018 July

jekyll 블로그 테마 변경

2018 July 27 - [jekyll, 테마변경]

테마를 변경하고자 할 때 가끔 집안의 가구 배치를 바꾸면 새로운 기분이 드는 것 같이 블로그의 옷도(theme) 가끔씩 갈아 입혀주면 기분전환에 좋다. 지킬 블로그를 처음 개설하고 디폴트 테마인 minima…

[React] 코드 스플리팅

2018 July 26 - [code-splitting, react]

Code Spliting 왜 필요한가 webpack 을 이용하여 spa 애플리케이션을 만들면 결국 모든 소스파일이 하나의 파일로 (ex, index.bundle.js…

npm command

2018 July 21 - [npm, command]

npm 모듈 삭제 node_module 폴더에서 패키지 삭제. package.json 에서 내용을 삭제하지는 않는다 package.json 에서까지 삭제하려면 or 옵션을 주어야 한다 dependency 에서 삭제 devDependency…

[React] life-cycle method

2018 July 13 - [react, life-cycle]

life-cycle 메소드 순서 컴포넌트를 생성 할 때 컴포넌트를 제거 할 때 컴포넌트의 prop이 변경될 때 state가 변경될 떄 도식 Ref. https://velopert.com/1130

[js] 배열의 마지막 요소 참조

2018 July 06 - [js]

일반적으로 배열의 마지막 요소를 아래와 같이 인덱스 참조로 접근할 수 있지만, 배열이 특정 객체의 속성으로 depth 가 깊어지면 코딩이 불편해 진다. 이럴 때 활용할 수 있는 좀 더 깔끔한 표현을 찾아보았다. (es…

[express] https 세팅

2018 July 06 - [express, https, SSL]

private key 생성 self-signed 인증서 생성 https 설정 Ref. http://blog.saltfactory.net/implements-nodejs-based-https-server/

[mongoDB] 자동 백업

2018 July 06 - [mongoDB, database, backup, 백업]

backup.sh 작성 외부 몽고디비를 백업 crontab 에 등록 입력 후 반복작업 등록 등록된 계획 확인 복구 외부 몽고디비 서버로 복원 ex) Ref 리눅스 크론탭(Linux Crontab) 사용법 MongoDB 백업하고 복구하기

2018 June

[mongoDB] 모니터링 툴

2018 June 28 - [mongoDB, database, monitoring]

간단하게 몽고디비 상태를 모니터링할 수 있는 도구들 mongostat 초당 쿼리 개수 확인 Ref) https://docs.mongodb.com/manual/reference/program/mongostat/ mongotop 초당 콜렉션 별 read…

ramdajs 주요 함수

2018 June 27 - [functional, ramdajs]

흔히 사용될 수 있는 ramdajs 함수들을 알아본다 R.append 배열의 끝에 특정 요소를 추가한다 vs vanillaJS R.prepend 배열의 처음에 특정 요소를 추가 vs vanillaJS R.insert…

[linux] 셀스크립트 작성 방법

2018 June 20 - [shell, linux]

초간단 hello.sh 예제 첫번째 줄에 입력하고 2번째 라인부터 스크립트 작성 실행권한을 부여한 후 아래와 같이 실행 if 조건문 사용예제 에서 공백문자 유무가 엄격함 Ref. http://blog.naver.com/PostView.nhn…

[js] 프라미스 then 함수가 프라미스를 리턴할 때

2018 June 20 - [promise, then]

프라미스 체이닝에서 프라미스를 리턴하고 전달받을 경우에 대한 동작에 대해서 알아본다 CASE1) then 함수에서 문자열을 리턴하는 경우 앞서 리턴한 값을 다음 then 함수에서 인자로 받는다 실행결과) CASE2) then…

iOS 에서 입력컨트롤 테두리 그림자 제거

2018 June 11 - [border, shadow, ios]

문제 입력 컨트롤의 테두리를 보시면(border-top) 어두운 그림자가 드리어져 있다 이후{: width=“300”} 해결책 아래 스타일을 사용 결과 그림자가 사라지고 훨씬 깔끔해 졌다 이후{: width=“300”} Ref. https…

remote 호스트의 mac address 얻어오는 방법

2018 June 11 - [macaddress, ARP]

문제 서버에서 클라이언트의 mac address 를 알아낼 수 있을까 결론 같은 네트웍망에 물려있다면 가능하지만, 서로 다른 네트웍망에 속해 있다면 불가 배경지식 ARP란? Address Resolution Protocol IP…

[mongoDB] aws ec2 에서 mongoDB 세팅하기

2018 June 06 - [aws, mongoDB, ec2]

mongodb 설치 root 권한으로 전환 입력 후 아래 내용 저장 yum 으로 설치 mongodb 서버시작 및 접속 서비스 시작 서비스 중지 서비스 재시작 서버접속 mongodb 보안 설정 설정을 수정하려면 root…

[mongoDB] 명령어

2018 June 05 - [mongodb, command]

몽고디비 시작 및 접속(Linux) 서비스 시작 서비스 중지 서비스 상태확인 몽고디비 시작 및 접속(Windows…

2018 May

[AWS-EC2] 리눅스에 nodejs 설치

2018 May 31 - [aws, ec2, nodejs, linux]

EC2 업데이트 프롬프트가 뜨면 ‘y’를 입력 설치에 필요한 패키지들 먼저 설치 Github 저장소에서 Node를 내려받고 어떤 버전의 노드를 설치할 것인지 선택한다. 명령을 사용하면 전체 노드 버전을 확인할 수 있다. 근데 위 git…

[vscode] java 사용시 세팅 관련

2018 May 30 - [vscode, java]

특정 jar를 인식하지 못할 때, 작업폴더의 루트 경로의 파일에서 아래처럼 필요한 jar 파일들을 명시해 준다. 나 과 같이 설정은 안되더라 확장자별 인코딩을 변경하려면, 작영 영역 설정에서 아래와 같이 세팅한다. gw…

[알고리즘] 야근지수

2018 May 08 - [algorithm]

Problem 회사원인 수민이는 많은 일이 쌓여 있습니다. 수민이는 야근을 최소화하기 위해 남은 일의 작업량을 숫자로 메기고, 일에 대한 야근 지수를 줄이기로 결정했습니다. 야근 지수는 남은 일의 작업량을 제곱하여 더한 값을 의미합니다. 수민이는…

[알고리즘] 특정날짜 요일 구하기

2018 May 08 - [date]

Problem 2016년 1월 1일은 금요일입니다. 2016년 A월 B일은 무슨 요일일까요? 두 수 A,B를 입력받아 A월 B일이 무슨 요일인지 출력하는 getDayName 함수를 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN,MON…

[알고리즘] 피보나치 수

2018 May 04 - [피보나치수열, fibonacci]

Problem 효진이는 멀리 뛰기를 연습하고 있습니다. 효진이는 한번에 1칸, 또는 2칸을 뛸 수 있습니다. 칸이 총 4개 있을 때, 효진이는 (1칸, 1칸, 1칸, 1칸) (1칸, 2칸, 1칸) (1칸, 1칸, 2칸) (2칸, 1칸, 1칸) (…

Srting.prototype.replace 에서 function 활용

2018 May 03 - [replace]

Problem 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. A를 3만큼 밀면 D가 되고 z를 1만큼 밀면 a가 됩니다. 공백은 수정하지 않습니다. 보낼 문자열 s…

What is Elm?

2018 May 03 - [elm]

Charles Scalfani의 글을 통해 Elm을 알게 되었다. 이 글을 꼼꼼히 번역해보고 싶지만, 바쁜 일정을 핑계로 번역은 다음으로 미루고 일단 몇가지 인상깊은 문장들을 중심으로 summary…

[알고리즘] 소수 찾기

2018 May 02 - [prime]

Problem 1부터 n까지 모든 소수를 찾는 알고리즘 Concept 2부터 n까지 자연수를 요소로 갖는 배열 생성 빈 배열 를 생성 배열의 첫번째 요소()를 배열에 추가 배열에서 의 배수를 모두 제거 위 3~…

2018 April

Blockchain 학습 로드맵

2018 April 27 - [blockchain, roadmap]

Intro 요즘 뜨거운 관심을 받고 있는 블록체인 발을 담가볼 준비가 되었다면 5 Technology Trends to Learn in 2018 If You Want a Great Career 에서 소개하는 학습로드맵을 참고해 보자 LoadMap

마크다운 주요 문법 정리

2018 April 23 - [markdown, syntax]

마크다운 이미지 중앙정렬 방법 {: refdef: style=“text-align: center;“} 자바 vs 자바스크립트 {: refdef} 링크 새창으로 열기 네이버{:target=“_blank…

What exactly is Node.js?

2018 April 23 - [nodejs]

Node.js는 자바스크립트 실행 환경입니다. 멋진 말입니다. 그런데 그것이 의미하는 바는 무엇이며 어떻게 동작이 된다는 말일까요? Node.js는 자바스크립트를 이용해 프로그램을 작성하기 위해 필요한 모든 것을 가지고 있습니다. {: refdef…

postman 을 이용한 request 캡쳐

2018 April 20 - [postman]

모바일에서 HTTP request 캡쳐 capturinghttprequests postman의 proxy 를 사용 모바일 장비와 postman이 설치된 PC가 동일한 네트워크 망내 물려 있어야 함 크롬에서 HTTP request…

[python] SimpleHTTPServer

2018 April 20 - [SimpleHTTPServer, python]

Problem 로컬에 서버가 설치되어 있지 않지만 간단하게(3초 안에) 웹서버를 띄우고 싶다 Solution python 이 설치되어 있다면, DOCUMENTROOT_ 경로에서 를 실행한다. 브라우져에서 로 붙어 본다. Ref. http…

[js] getter와 setter 를 설정하는 방법

2018 April 19 - [getter, setter]

getter와 setter 를 이용하면 객체의 속성값을 읽고 쓰는 방법을 새롭게 정의할 수 있다 아래 코드를 먼저 보자 객체는 아래 3가지 속성을 갖는다 — 숫자값 — 에 1을 더한 값을 리턴하는 getter…

[mySQL] 테이블 수정 쿼리

2018 April 16 - [mysql, query]

이름 바꾸기 컬럼 속성 수정 특정 컬럼 인코딩 수정 컬럼 이름 바꾸기 CHANGE는 컬럼 속성뿐아니라 이름도 바꿔준다 컬럼 추가 ALTER TABLE tablename ADD 컬럼이름 컬럼속성 특정 컬럼 뒤에 새로운 컬럼 추가 num…

[windows] 특정 폴더에서 cmder 바로 열기

2018 April 12 - [windows, cmder]

Problem 윈도우에서 기본으로 제공되는 터미널은 Copy & Paste 및 창사이즈 조절에 제한이 있어 불편 터미널에서 cd 명령을 이용해 특정 경로로 이동하는 것도 귀찮고 Solution 잘 알려진 윈도우용 터미널 cmder…

크롬 개발자도구를 이용한 js beautify

2018 April 02 - [chrome, beautify]

Summary 난독화된 js를 디버깅해야 할 경우 크롬 개발자도구의 beautify 기능을 간단히 이용할 수 있다. 특별히 오프라인 환경에서 beautify 도구를 사용할 수 없을 때 유용함 난독화된 $.clone…

2018 March

ramdajs 라이브러리 forEach 버그

2018 March 31 - [ramdajs, forEach]

예시 결과 질문 forEach 매뉴얼{:target=“_blank”} 을 보면 첫번째 인자 함수가 패러미터를 1개만 받는다고 나와있는데.. 저 경우에는 왜 3개를 받는 걸가? 버그라고 봐야하지 않을까

AMD 모듈 로드시 순서 관련

2018 March 21 - [AMD, module]

예시 설명 위와 같이 모듈들을 불러 올때 mn.js가 실행되는 스코프에서는 vue.js 에서 사용한 전역변수를 참조할 수 없다 vue.js, mn.js, util.js 의 실행 순서가 보장되지 않기 때문에 물론 mn.js 모듈 정의 시 vue.js…

[crossBrowsing] 이벤트 처리시 주의사항

2018 March 21 - [event]

문제 아래와 같이 event객체를 직접 참조하면 firefox에서 오류 발생 크롬에서는 정상 해결책 아래와 같이 패러미터로 전달된 이벤트 객체를 사용해야 한다 chrome & firefox 외 브라우져는 테스트 안 해봄

Bookmark

2018 March 17 - [bookmark, reference]

Frequently pyhon 프로그래밍 강좌{:target=”_blank”} Medium{:target=”_blank”} es6 vs es5{:target=”_blank”} es5 core{:target=”_blank”} partial.js…

telegra.ph 에 대하여

2018 March 17 - [telegraph]

telegra.ph 란 익명 기반 글 호스팅 서비스 https://telegra.ph Beauty is coming from simplicity 특성 한번 publish…

jekyll 사이트 favicon 추가하기

2018 March 17 - [favicon]

jekyll 테마 변경 가이드 https://jekyllrb.com/docs/themes/#overriding-theme-defaults{:target=“_blank”} 기본테마 경로 해당 테마의 기본 템플릿 자원(아래…


Written by min9nim - Email GitHub Twitter

who writes practical code and builds useful things.