읽은 책 한 줄 느낌

다른 사람이 읽는 책이 궁금해서 내가 읽은 책 먼저 정리했다. 7월, 2019년 "Node.js 디자인 패턴", "Node.js 교과서", 나의 경우 어려워서 포기 5월, 2019년 "소프트웨어 작동법", 어슴프레 알던 것을 명확하게 알게 되었다. (압축, 2D, 3D) "처음 만나는 알고리즘", 알고리즘이란 말이 익숙하지 않다면 읽어볼 만하다. "D3를 이용한 시각적 스토리텔링", svg를 처음 접했다. 자바스크립트 한 두 줄로 그래프를 … 읽은 책 한 줄 느낌 계속 읽기

우분투와 같이 사용하려는 맥북 설정

우분투와 맥북을 같이 사용하면서 서로 비슷한 개발 환경으로 맞추는 과정을 정리했다. 우분투는 18.04 버전을 사용하고 맥북은 10.14 버전이다. 우분투를 먼저 사용했고 이제 맥북을 사용함으로 우분투 툴과 비교하게 된다. 우분투는 lsb_release 명령으로 운용체제 버전을 알 수 있고 맥북은 system_profile 명령으로 확인할 수 있다. # ubuntu lsb_release -a # mac system_profiler SPSoftwareDataType 왼쪽 주머니에는 핸드폰을 오른쪽 뒤 주머니에는 … 우분투와 같이 사용하려는 맥북 설정 계속 읽기

AngularJS에서 React 사용하기

이유 처음 AngularJS를 사용하게 되었을 때 여러 기술을 비교하여 선택한 것은 아니었다. 기존 서비스가 이미 AngularJS로 개발되는 중이었다. 그다음 프로젝트에서라도 다른 기술과 비교했어야 했지만 그러지 못했다. 라이브러리를 선택하는 것은 고도의 기술이다. 기존에 사용하던 AngularJS와 React의 차이점을 알기 위해 AngularJS로 구현된 일부 기능을 React 코드로 바꾸는 연습을 했다. 그 과정을 정리했다. 시작하기 전에 AngularJS와 React의 차이점을 … AngularJS에서 React 사용하기 계속 읽기

프론트엔드 시작 코드

프론트엔드 개발자는 여러 가지 코드를 만든다. 대부분은 브라우저에서 해석되는 특징이 있다. 프로젝트 시작을 위한 코드를 만들기 위해 여러 툴과 다른 코드를 사용하는데 한 줄의 코드도 만들지 않고 기본 코드를 가져다 프로젝트를 시작할 수 있다. 대분분의 프로젝트를 이런 방식으로 시작했다. Index.html 파일로 개발을 시작하는 것은 C 프로그램을 main.c 파일 하나로 시작하는 것과 비슷하게 어렵다. 혼자 일하든 … 프론트엔드 시작 코드 계속 읽기

원격 서버 로그 보기

서버에 대한 작업은 두 가지만 하고 있다. 서버의 로그를 보거나 서버에 파일 올리는 일이다. 이런 작은 일은 명령어로 처리하는 것이 적당하다. 서버에 접속한 후 로그 보는 것이 귀찮다면 ssh의 명령어 옵션을 사용하자. 명령을 내린 터미널에서 바로 로그를 확인할 수 있다. ssh 192.168.0.1 'tail -f /var/logs/app.log' 서버에 파일을 올리는 작업도 아래 한 줄이면 충분하다. scp 명령을 … 원격 서버 로그 보기 계속 읽기

처음으로 프론트엔드

몇 년 전으로 돌아가서 처음으로 프론트엔드 개발을 시작할 때라면 지금의 나에게 이런 질문을 할 수 있다. “저도 그 일을 한번 해보려고 하는데요 간단하게 프론트엔드 개발이 뭔가요?” 내가 생각하는 프론트엔드가 당신이 생각하는 것과 다를 수 있다. 오랫동안 어려운 개발을 한 것도 아니어서 정답을 알지도 못한다. 다만 나의 경험을 잠깐 이야기는 할 수는 있겠다. 이 글은 위 … 처음으로 프론트엔드 계속 읽기

마커와 무전기

브라우저에서 할 수 있는 일이 많다. 지도에 마커를 표시하고 현재 위치를 얻고 마이크를 사용하여 음성을 전송할 수 있다. 그렇다면 이 기능들을 모아서 마커끼리 무전기 사용하듯이 대화할 수 있을까? Why not? 위치 정보는 여러 가지 방법으로 표현되는데 대표적인 것이 마커다. 지도의 특별한 위치에 동그랗지만 아래가 뾰족하게 뻗어 나온 이미지를 표시한다. 이 이미지를 마커라고 한다. 마커는 실시간 … 마커와 무전기 계속 읽기

로그 문자열에 라인 번호 넣기 – JavaScript

디버깅 메시지에 소스 파일의 줄 번호를 넣고 싶을 때가 있다. 나의 경우 대량의 AngularJS 코드를 전달 받고 그런 마음이 들었다. 그 당시 AngulasJS는 처음이었다. 모든 함수의 시작과 끝에 로그를 넣었다. 당신의 당황하는 모습을 볼 수 있지만 무시하겠다. 콘트롤러와 필터도 함수임으로 예외 없이 로그를 넣었다. 느리게 동작하는 것은 중요하지 않았다. 로그 메시지 출력하는 함수로는 가장 유명한 … 로그 문자열에 라인 번호 넣기 – JavaScript 계속 읽기

모바일 브라우저에서 확대를 막을 수 있을까?

모바일 브라우저에서 확대를 막을 수 있을까요? 고객이 이런 질문을 한다면 한 문장으로 대답하기 어렵다. 모바일 브라우저에서 사용하는 뷰 포트의 의미를 간단하게 설명하는 것은 어렵기 때문이다. 이런 질문은 중요하다. 이 기회에 좀 더 자세한 정보를 고객에게 제공할 필요가 있다. 고객이 사용하는 브라우저에 따라서 동작이 달라질 수 있음으로 어떤 브라우저를 사용하려는지 꼭 물어보아야 한다. 안드로이드 폰이라고 가정하면 … 모바일 브라우저에서 확대를 막을 수 있을까? 계속 읽기

‘Promise’ is undefined – JavaScript

크롬 브라우저에서 문제없는 코드를 Internet Explorer 11에서 동작시킬 때 아래와 같은 에러가 발생하는 경우가 있다. Promise는 ES6에서 지원하는 자바스립트 내장 객체며 비동기 동작의 완료와 실패 처리를 도와주는 함수다. 그런데 Internet Explorer 11에서는 지원하지 않는다. AngularJS를 사용하고 있다면 $q를 사용하여 Promise를 대체할 수 있다. 이 기능을 어떻게 폴리필 해야 하나 고민했는데 차이점에 주의해야겠지만 사용할 만하다. $q를 … ‘Promise’ is undefined – JavaScript 계속 읽기

키보드로 마우스 클릭하기 – keynav

Vim, vimium, tmux, xmonad 들와 터미널을 같이 사용하면 대부분의 작업을 키보드를 사용하여 처리할 수 있다. 그러나 터미널을 떠나 GUI 애플리케이션을 사용할 때 탭이나 단축키의 한계를 느끼는 경우가 있다. 윈도우의 특정 부분을 클릭해야 할 경우가 발생한다. 이럴 때 keynav를 사용하면 간단한 마우스 클릭 정도는 키보드로 쉽게 처리할 수 있다. git clone https://github.com/jordansissel/keynav.git cd keynav make make … 키보드로 마우스 클릭하기 – keynav 계속 읽기

Generator – JavaScript, Python

JavaScript Generator 자바스크립트와 파이썬의 iteration을 살펴본 적이 있다. 이번엔 더욱 사용하기 편하고 읽기 편한 generator를 비교했다. 자바스크립트에서 generator는 아래와 같은 문법을 가지는 특수한 함수다. 함수 이름 앞에 * 표가 있으며 함수 바디 안에 yield 키워드가 여러개 존재할 수 있다. Yield 키워드는 없어도 되지만 그럴 경우 그냥 함수를 사용하는 편이 혼란스럽지 않을 것이다. 이 함수는 수행되면 … Generator – JavaScript, Python 계속 읽기

지금 사용하는 크롬 확장 16 가지

크롬 브라우저에서 동작하는 작은 프로그램을 크롬 확장이라고 한다. 크롬 웹 스토어에서 골라 설치할 수 있다. 프론트엔드 개발할 때 사용하는 확장들을 정리했다. 당신이 일할 때 크롬 브라우저를 사용한다면 몇 가지는 도움이 될 수 있다. Auto Text Expander for Google Chrome™, 브라우저에서 문자열 확장 Full Page Screen Capture, 브라우저 전체 화면 캡쳐 Lightshot, 브라우저 일부 화면 캡쳐 … 지금 사용하는 크롬 확장 16 가지 계속 읽기

Iteration – JavaScript, Python

자바스크립트와 파이썬에서 사용되는 iteration을 비교했다. 연속된 데이터를 다루는 방법으로 자바스크립트는 Array라는 객체를 사용하고 파이썬은 list 라는 타입을 사용한다. 두 언어에서 리터럴 문법으로 표현하면 아래와 같은 코드로 표현할 수 있다. for 문을 사용하여 Array와 list를 순서대로 읽는 방법도 비슷하다. JavaScript Iteration 문법이 조금 다르지만 익숙한 코드다. 만약에 자바스크립에서 for of 문에 배열이 아닌 객체를 전달하면 어떻게 … Iteration – JavaScript, Python 계속 읽기

인터프리터 결과에서 코드 거르기 – Node.js, Python

터미널에서 Node.js를 사용하여 자바스크립트를 수행하면 아래와 같은 결과를 볼 수 있다. $ node > console.log("apple"); apple undefined > console.log("banana"); banana undefined > 웹 사이트에서 이런 텍스트를 만나기도 하는데 자바스크립트 코드만 분리하려면 에디터를 사용하여 편집해야 한다. 불편하다. Grep Grep을 사용한다면 터미널에서 아래 명령을 사용하여 좀 더 쉽게 자바스크립트 코드를 거를 수 있다. Bash 함수로 만들어 사용하길 … 인터프리터 결과에서 코드 거르기 – Node.js, Python 계속 읽기