LearnApplyShare

옵시디안은 로컬 파일시스템을 이용하기 때문에 브라우져 익스텐션을 사용하기 위해서는 별도 설정 과정이 필요합니다.

옵시디안은 로컬 파일 시스템을 이용하기 때문에 장비간 동기화가 이루어지지 않는다. 서로 다른 장비간 데이터 동기화를 위해서는 별도 설정이 필요하다. 옵시디안 싱크라는 유료 서비스도 있지만 옵시디안 깃을 이용하여 무료로 데이터 동기화를 설정하는 것도 가능하다.

Mac 에서 ssh 접속시도시 발생하는 오류

odroid 에서는 lmsensors 를 사용할 수 없으며 아래와 같은 명령어를 사용한다.

우분투에서 방화벽을 관리하는 명령어들 모음

ubuntu 터미널에서 깃 브랜치를 표시하는 방법

바닐라 js 를 이용해 간단하게 랜덤 문자열을 만들어내는 방법 예시)

yarn berry 전역 설정을 변경하려면 ~/.yarnrc.yml 파일에서 yarnPath 설정 부분의 라인을 제거한다

전체 화면을 캡쳐해서 클립보드에 복사해 넣는 방법입니다.

CRA 프로젝트의 환경변수는 `.env`, `.env.production`, `.env.development` 등의 파일로 정의할 수 있다. 환경변수의 개수가 적지 않을 때는 문제가 없겠지만 보통 애플리케이션의 규모가 커짐에 따라 환경변수의 개수도 함께 증가하게 된다.

리액트 프로젝트에 SWC 를 적용하며 경험한 삽질을 공유한다. Background 지난 FEConf2021 에서 강동윤님의 발표를 통해서 SWC 에 대하여 처음 알게 되었다. https://min9nim.vercel.app/2021-11-0…

MacOS 를 업데이트하고 나면 꼭 뭐 하나씩 되던 것이 안 되는 것 같다. 이번에는 리액트 프로젝트에서 커밋을 만들 때 husky 의 pre-commit 이 돌면서 아래와 같이 에러를 뿜었다 pre-commit 의 내용은 아래와 같다. yarn…

다음과 같이 suspense 모드를 사용하는 커스텀 훅이 있다고 해보자 그리고 테스트케이스를 아래와 같이 작성했다. 우선 undefined 에서 current 를 읽을 수 없다는 이상한 오류가 뜬다면 react 버젼과 react-test…

Background 특정 로직에서 A함수가 B함수보다 반드시 먼저 호출되어야 함을 보장하는 테스트케이스를 작성하고 싶다. 어떻게 작성할 수 있을까 Solution 간단하게는 jest 에서 제공하는 toHaveBeenCalledBefore…

혹시 버젼 업그레이드하고 이상한 문제 터질까봐, 미루고 미루던 macOS Monterey 업데이트를 마쳤다. 별 문제가 없나 싶었는데.. 웹스톰에서 문제가 터졌다. 일단 웹스톰에서 명령어 설정하는 곳에서 프로젝트, node interpreter…

RESTful API 를 이용하는 프론트엔드 개발의 어려움 JavaScript 의 런타임에러가 프론트엔드 개발자들을 오랫동안 괴롭혀 온 것 같이, RESTful API…

react-query 에서 suspense 모드를 사용할 때, reqct-query 가 리턴하는 데이터는 undefined 일 수 있기 때문에, 이후 로직에서 data 를 사용할 때는 data 가 undefined…

[A5] 왜 나는 React를 사랑하는가 https://www.youtube.com/watch?v=1ZHunr78Ias&list=PLZl3coZhX98p6gwel6QW86QUwuAmTEZBo&index=…

지주 사용되는 lerna 주요 명령어들을 살펴본다. 패키지별 명령 실행 package.json 의 scripts 설정에 a 명령어가 있는 모든 패키지들의 a 명령을 수행 특정 scope 에 속한 a 명령어만 실행. 이 때 scope 은 package…

자주 사용하는 터미널 명령어들에 별칭을 생성해서 사용하면 손가락 건강에 이롭다.

팀 단위로 화면을 개발하는 프로젝트를 진행을 할 경우, 통일감 있는 디자인을 만들기 위해 디자인 표준은 꼭 필요한 요소이다. 이를 보통 디자인시스템이라고 하는데, 디자인시스템을 준비하고 갖추어 가는 과정은 힘들고 고되지만 UI의 품질을 높이고 개발생산성을 위해 더 이상 늦출 일이 아닐 것이다. 이 글에서는 디자인시스템을 새롭게 시작하고자 할 경우 해당 보일러플레이트 프로젝트를 구성하는 방법을 간단히 소개한다.

여러 프로젝트에서 반복적으로 사용되는 공통모듈이 있다면 Don't repeat your code 원칙에 따라 npm 모듈로 배포해서 사용하고 싶어진다. npmjs 를 통해 패키지를 만들고 배포할 수 있지만 npmjs 는 비공개 레포의 패키지 지원에 대해서는 유료 플랜을 사용해야 한다.

내가 애정하는 함수 `oneOf`

동적 타입언어인 js 는 타입정의를 하지 않아도 되기 때문에 편하고 빠르게 코딩을 할 수 있다는 장점이 있습니다. js…

비트코인에 대한 스터디. 지속적 업데이트 예정

리액트는 렌더링시 오류가 발생할 경우 오류가 발생했던 일부 컴포넌트만 렌더링을 하지 않는 것이 아니라 전체 화면 모두를 아예 렌더링하지 않는다. 잘못된 화면을 사용자에게 보여주는 것보다는 아예 보여주지 않는 것이 더 나은 사용자경험이라는 판단에서이다. 이것은 리액트가 화면을 렌더링할 때 오류를 만나면 아무것도 그리지 않기 때문에 사용자는 그저 흰화면을 보게 된다는 의미이다.

CRA4.0 부터는 jsx 를 사용할 때 `import React from 'react'` 를 더이상 사용하지 않아도 된다. 별 것 아닌 것 같지만 그동안 신규 컴포넌트 작성시마다 해당 `import` 구문을 삽입하는 것은 참 귀찮은 일이었기에 무척 반가운 소식이었다. 하지만 해당 구문을 지웠을 때 유독 img 태그 사용시 웹스톰에서 예민하게 경고메세지를 띄어주었다.

React 를 이용한 SPA 웹프로젝트를 개발한다고 할 때 react-router 를 이용한 라우팅은 웹 개발시 거의 필수적인 요소라고 해도 과언이 아닐 것입니다. 그리고 프로젝트가 점차 커지고 라우팅 패스가 하나 둘씩 많아 지게 되면, 자연스럽게 클라이언트 라우팅만을 담당하는 별도 컴포넌트를 생성하여 관리하게 될 것입니다.

특별히 구글 설문지 양식이 제출될 때의 이벤트를 이용해 설문지 응답결과를 api 호출을 통해 DB에 자동으로 적재하는 방법에 대한 방법을 안내합니다.

AWS Lambda 에서 optional chaining 연산자를 사용하고 싶어서 잠깐 알아봤다. optional chaining 은 Node14 부터 사용이 가능하다고 한다. https://stackoverflow.com/a/5957416…

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

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

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

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

알쏭 달쏭 js 퀴즈 정리. 결과값을 예상해 봅시다 :)

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

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

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

SW 아키텍쳐란 무엇인지 그리고 왜 중요한 지에 대한 짧은 영상입니다. https://www.youtube.com/watch?feature=youtu.be&v=4E1BHTvhB7Y&app=desktop TL;DR; SW…

리액트에서 JSX 는 컴포넌트가 렌더링하는 dom 구조를 정의할 때 사용된다. 순수 JS에서 html 을 마크업하는 것은 여간 귀찮 일이 아니기 때문에 JSX 는 리액트에서 정말 유용하다. 필자는 개인적으로 XML(HTML…

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

ramda 를 응용한 몇가지 유용한 확장함수들 go noop except propNotEq OR AND isNotNil peek 사용시 중간에 전달되는 값을 로그로 찍어서 확인할 때 필요한 함수 hasProps

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

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

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

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

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

요즘 유행하는 다크모드를 리액트에서 구현하는 방법입니다. 기본적인 컨셉은 설정된 테마에 따라 body…

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

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

Nextjs 를 사용할 때 라우팅은 기본적으로 폴더 구조를 그대로 따른다. CRA 만을 이용해서 리액트 프로젝트를 생성하면 라우팅을 직접 하나씩 설정해 주어야 하는데 path…

컴포넌트에서 , , 가 함께 사용될 때 우선순위는 아래와 같다. children > component > render 예) 아래와 같이 라우트가 정의될 때 우선순위는 C > B > A

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

CRA 프로젝트에서 커밋 전 자동포매팅을 설정하는 방법과 현재 열린파일에 대해 포매팅을 적용하는 방법을 공유한다. 커밋 전에 자동포매팅 적용 관련 모듈 설치 package.json 에 설정 추가 .prettierrc…

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

Promise 의 then 에서 오류가 발생할 경우 오류 처리 방법

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

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

최민규님 글을 보고 utterances 댓글 플러그인을 알게 되었다. 이전 jekyll 블로그에서는 DISQUS 댓글을 사용했었는데, utterances 가 왠지 조금 더 사랑스럽다. utterances…

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

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

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

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

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

프로젝트의 폴더 구조를 개선해 나가다 보면 폴더 구조의 depth 가 깊어짐에 따라 와 같이 보기 싫은 코드가 만들어 질 수 있다. 프로젝트/src…

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

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

mobx-react 를 이용해 리액트 컴포넌트에 상태를 주입하는 방법 1. 함수형 컴포넌트 2. 클래스 컴포넌트

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

일반적인 리액트 클래스 컴포넌트는 React.Component 를 확장하여 정의한다. React.Component…

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

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

…

image lazy load 란 사용자가 보여지는 화면 영역 안에(viewport…

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

과 같이 url에 포함된 id/pw 를 fetch 함수로 요청하는 방법

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

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

0부터 99까지 배열을 만드는 방법(내가 아는 가장 간단한 방법)

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

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

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

tsconfig.json 에 설정이 되어 있다고 해서, 런타임의 오류스택에 .ts 매핑 정보가 바로 나오는 것은 아니다. error stack 에서 직접 .ts 매핑 위치를 찾고 싶으면 아래와 같이 추가 설정이 필요하다 1. source-map…

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

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

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

async/await 를 이용하면 간단하게 비동기함수를 순차적으로 실행할 수 있다. 하지만 이것은 caller…

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

뷰의 composition-api 를 적극적으로 프로젝트에 적용해 보고 있는데 아직 관련 문서나 보고된 이슈들이 많지 않아 쉽지가 않다. watch 메소드를 이용할 때 state…

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

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

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

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

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

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

아래와 같이 속성을 정의하면 가 reactive 하지 않다(변경되는 prop값에 따라 반응하지 않는다) 아래와 같이 함수에서 를 직접 접근해야 reactive 해진다 이유는 뭐 잘 모르겠다. call-by-value vs call-by…

그래프큐엘 쿼리 객체를 문자열로 변환하는 방법 하나, 둘, Ref. https://github.com/apollographql/graphql-tag/issues/144

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

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

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

는 상위 요소에서 정의된 값이 우선한다. 예를 들면, 마크업이 아래와 같을 때 parent2 가 parent1 의 child 보다 위로 올라온다

https://medium.com/@rinae/번역-두려움-믿음-그리고-자바스크립트-언제-타입-시스템과-함수형-프로그래밍이-먹히지-않는가-dde33972301f…

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

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

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

…

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

타입스크립트를 이용해 뷰 개발을 하고자 한다면 당신은 아마 vue-class-component 를 사용하고 있을 것이다. 그리고 이보다 더 많은 기능을 포함한 vue-property-decorator 를 사용하고 있을 수도 있다. vue-class…

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

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

맥용 MS Edge 가 있기는 하지만 Windows10 에서의 동작과 100% 일치할 순 없기 때문에 MS Edge on Windows10 테스트환경을 갖추는 것이 필요하다. 본 글에서는 맥에서 Windows10 MS Edge…

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

Vuejs 로 검색화면을 개발 중이었는데 한글 검색어 입력 후 엔터키를 입력하면 동일한 요청이 2번 올라가는 문제가 있었다. 재현조건 MacOS Mojave 10.14.5(18F132) 크롬: 현 시점 최신버젼, 74.0.3729.16…

ES6에서 도입된 spread operator 는 객체를 다룰 때 상당히 유용하게 쓰인다. 하지만 정확히 알고 사용하지 않으면 오류를 발생시킬 수 있다. 특별히 프레임웍으로부터 전달받은 이벤트객체를 spread operator…

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

함수 선언은 호이스팅 된다. 결과) 하지만 함수표현식은 호이스팅되지 않는다. 결과)

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

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

본 글은 apollo-server-express 에서 subscription 기능을 사용할 때 테스트케이스 작성시 필요한 pubsub…

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

테스트 중에 우연히? 시스템에서 `hello@gmail.com` 이 유효하지 않은 이메일이라고 오류를 뱉길래 뭐지? 하고 관련 내용을 뜯어보고 깨달은 내용을 정리한다. 처음에 필자는 이 건 당연히 로직의 버그라고 생각을 했었다. 해당 건을 당당히 이슈로 등록하려다가 돌다리도 두들겨 보고 가자는 마음으로 일단 관련 로직을 한 번 확인해 보기로 했다.

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

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

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

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

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

맥의 파일탐색기인 Finder 에서는 기본적으로 숨김파일이 보이지 않는다. 숨김파일을 Finder…

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

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

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

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

it works Ref. https://stackoverflow.com/questions/31978347/fs-writefile-in-a-promise-asynchronous-synchronous-stuff

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

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

jdk 명령도구를 이용해 자바를 컴파일하고 실행하는 방법 컴파일 컴파일이 완료되면 Hello.class 파일이 생성된다 실행

git…

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

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

노드를 이용하여 파일시스템을 만지는 소스 예제 요건 특정 경로의 폴더명들을 일정한 패턴에 따라 rename…

사이트의 로고를 멋지게 디자인 하는 것은 가게의 간판을 다는 것 같이 사이트의 첫인상을 결정 짓는 중요한 작업이다. 그런 만큼 별거 아닌 것 같아도 여러모로 신경이 많이 쓰이는 것이 사실이다.

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

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

The following environment variables are set by the runtime environment: Environment variable Description GAE_INSTANCE The name of the…

Nextjs 에서 서버사이드렌더링을 가능케 하는 것은 비밀이 바로 에 있다. Nextjs에서 모든 스크립트 코드는 Nodejs…

배열의 마지막에 2개 이상의 원소를 추가하는 방법 결론 4번이 가장 직관적으로 이해하기 쉽다고 생각한다.

Graphviz 를 이용한 의존성 그래프 그리는 간단한 방법을 소개한다. 무려 svg 포맷으로 :) 온라인 도구 온라인 도구가 제공된다. http://www.webgraphviz.com…

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

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

포스트의 삭제 처리시 이용할 수 있는 초간단 애니메이션 처리 예제 스크린샷 소소코드

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

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

…

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

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

now 를 이용해 앱을 배포하면 아래와 같은 모양의 매번 새로운 URL을 생성된다. 앱을 업데이트할(배포) 때마다 URL…

Next.js 를 공부하다가 재미있는 서비스를 만나서 소개보고자 한다. https://zeit.co Now…

macOS Mojave 업그레이드 이후 이클립스 실행시 아래와 같은 오류 해결책 아래 링크 들어가서 다운로드&설치 https://support.apple.com/kb/DL1572?locale=ko_KR Ref. https://stackoverflow…

리액트에서 컴포넌트의 상태를 setState 를 이용해 변경하는 것은 functional 과 immutable…

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

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

날짜를 문자열 포맷으로 변경하는 방법 Ref. http://nota.tistory.com/50

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

5 Reasons to Build Decentralized Apps 영상의 내용을 간략히 정리해 보았다 DApp…

무한 스크롤링과 같이 스크롤이 마지막에 닿았을 때 처리를 하고자 할 때 고려해야 할 변수는 아래와 같다. no value 의미 1 e.nativeEvent.layoutMeasurement.height 현재 보여지는 화면의 높이값 2 e…

react-native 에서 루프 안의 key 값을 참조하는 방법을 몰라 한참 헤맸다. ReactNativeComponentTree 를 이용하거나 props 를 이용한 wrapper…

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

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

중복을 허락하지 않는 자료구조 Set 예제소스 출력

filter 와 indexOf 를 이용한 중복제거 방법 Ref https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates

서버로 요청을 수행할 때 XHR객체의 readyState, status 상태값의 변화는 다음과 같다 Value State Description 0 UNSENT Client has been created. open() not called yet.…

레이어를 정 중앙에 위치시키는 css

이 글은 Google Cloud 의 App Engine 을 이용해 Node…

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

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

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

정렬된…

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

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

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

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

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

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

cartoon

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

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

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

퀴즈 https://www.hackerrank.com/challenges/ctci-ice-cream-parlor/problem 퀴즈풀이 단순하게 이중루프를 사용하여 문제를 풀 경우 O(n^…

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

…

전자정부프레임워크(eGovFrameDev-3.7.0-64bit)에서 eGovFrame Web Project 를 생성하고, pom.xml…

…

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

…

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

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

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

react-devtools 설치시 아래와 같은 오류가 날 경우 electron@1.8.8 postinstall /usr/local/lib/node_modules/react-devtools/node_modules/electron node install…

ie11 에서 팝업을(window.open) 사용할 때, 팝업창 로드가 끝나기 전에 브라우져의 닫기버튼을 클릭하면 ie11에서 crash 가 발생하며 부모창까지 닫혀 버리는 문제가 발생할 수 있다. 재현방법 부모창에서 window.open…

Intro 웹사이트 성능을 튜닝할 때 빌드한 번들파일의 용량 분석이 필요할 수 있다. 이 때 webpack-bundle-analyzer…

흔한 jsp 파일 다운로드 소스

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

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

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

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

Intro 대표적으로 aws 에서는 ssh를 통해 EC2인스턴스에 접근할 때, 비밀번호 방식이 아닌 권한파일(.pem)을 이용한다. 일반적으로 권한파일을 이용한 ssh…

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

Intro. 오픈소스 개발자에게 guthub…

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

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

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

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

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

충분한 설계없이 만들어진 자바스크립트 자바스크립트는 1995년 Brendan Eich…

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

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

Point. 화살표 함수에서 사용된 this 참조는 해당 함수가 정의될 당시의 컨텍스트를 참조한다. function 함수에서 사용된 this…

현재 폴더 용량확인 특정폴더 용량확인 하위 폴더별 용량확인

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

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

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

Function.prototype.apply 문법 // 아래와 같이 배열을 인자로 전달해서 사용할 수 있다 var numbers = [5, 6, 2, 3, 7]; Math.max.apply(null, numbers); // 7 Function…

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

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

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

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

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

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

문제 배열의 순서를 뒤집기 위해 간단히 를 이용할 수 있지만 는 불변성을 유지하지 못한다. 해결책 불변성을 유지하는 slice() 를 이용한 방법 ... (spread operator) 를 이용한 방법

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

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

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

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

아래와 같이 lsof 명령으로 확인 Ref. http://new93helloworld.tistory.com/138

CSR이 무엇입니까 CA로부터 SSL인증서를 발급 받으려면 먼저 CSR(Certificate Signing Requests) 이 필요합니다. CSR은 공개키와 몇가지 추가 정보로 구성되어있습니다. 그리고 그 정보들이 인증서 발급시 필요합니다. CSR…

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

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

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

이 글은 Douglas Crockford 의 The Good Parts 에서 prototype 관련 내용을 정리한 것이다. Intro 자바스크립트는 prototype…

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

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

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

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

유클리드 호제법 두 자연수 a, b에 대하여 a가 b로 나누어 떨어진다면 두 수의 최대공약수는 b 이다 a가 b로 나누어 떨어지지 않았다면 두수의 최대공약수는 b 와 a%b 의 최대공약수와 같다 이를 js…

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

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

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

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

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

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

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

Problem Mac High Sierra 는 보안 상의 문제로 터미널에서 telnet, ftp 명령어를 기본적으로 지원하지 않는다 Solution 아래와 같이 CLI…

조건문에서 boolean 값으로 형변환 시, false를 리턴하는 값들 true를 리턴하는 것

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

Benefits to webpack 빌드 환경에서 partialjs 를 모듈로 사용하고자 할 경우 Problem 위와 같이 사용하고자 할 경우 webpack 빌드 시도시 아래와 같은 문제가 발생할 수 있다 Cause 1146L…

…

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

문제 위와 같이 태그에 를 적용하면 가로스크롤이 동작하지 않아야 하지만 사파리에서는 아래와 같이 여전히 가로스크롤이 동작하는 문제 iOS safari…

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

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

Frequently [pyhon 프로그래밍 강좌](http://blog.eairship.kr/category/프로그래밍 관련/Python){:target="_blank"} Medium{:target="_blank"} es6 vs es5{:target…

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

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

jekyll 서비스 시작 글 올리기

문제 파이어폭스에서는 아래와 같이 contenteditable 영역 안의 checkbox는 선택도 클릭 이벤트도 정상동작 되지 않는다 해결책 아래와 같이 해당 checkbox 를 span으로 감싼다 출처 https://stackoverflow.com…