단순한 데이터 구조의 장점

데이터 구조가 단순하면 이를 처리하는 함수가 단순해지고 그러면 테스트가 쉬워진다고 생각하게 된 경험을 정리했다. 자바스크립트를 사용하여 개발하면서 많은 기술들을 접하게 된다. 모두 검토하여 좋은 것만 추려 배우고 일에 적용하고 싶지만 현실은 녹녹지 않다. 그래서 올해 배울 기술 두 개를 정했는데 함수형 프로그래밍 방법과 테스트다. 그중 함수형 프로그래밍을 익히기 위해 선택한 방법은 작은 게임을 여럿 만들어 … 단순한 데이터 구조의 장점 계속 읽기

Block 게임 – JavaScript

Functional Programming (FP) 연습하는 목적으로 작은 게임들을 만들고 있다. 이 게임은 그 중에 하나로 위에서 내려오는 블럭들을 미사일로 맞추는 것이 목적이다. 전에 만든 테트리스 코드를 가져다 사용했는데 최소한의 기능만 만들었다. 시작 코드로 Create React App를 사용했으며 App.js, App.css 이 두 파일을 수정했고 fp-block 모듈을 사용했다. FP 라이브러리로 유명한 Lodash 라이브러리를 사용했다. https://github.com/afrontend/fp-block-game 좌표 정보를 따로 … Block 게임 – JavaScript 계속 읽기

미로 만들기 – JavaScript

함수형 프로그래밍을 연습하려고 작은 게임을 만들다가 미로 게임을 알게 되었다. 전에 만들었던 테트리스나 snake 게임보다 알고리즘이 조금 더 복잡했다. 미로를 만드는 방법과 푸는 방법이 서로 다르며 각각 여러 알고리즘이 있었다. 그중에 아래 글을 참조하여 미로를 만들었다. 아직은 눈으로 푸는 게임이다. 미로 생성기라고 하는 것이 더 적당하겠다. https://stackoverflow.com/questions/3097556/programming-theory-solve-a-maze 전에 만든 snake 코드를 가져다 사용했다. Create React … 미로 만들기 – JavaScript 계속 읽기

웹 서버에서 웹 텍스트 데이터 읽기

블로그를 읽은 횟수는 텍스트 정보다. 21,870 히트 이 정보를 웹 서버에서 사용할 수 있다. 이 데이터를 HTML5 형식으로 바꾸고 브라우저로 읽을 수 있도록 웹 서비스로 만들었다. 그 과정을 정리했다. 노드 설치가 필요하다. 이렇게 바꾸겠다. Node.js 웹 서버 텍스트 데이터를 브라우저 접속을 통하여 보여주려면 웹 서버가 필요하다. 웹 서버로 Node.js를 사용할 텐데 내장 모듈인 http 대신 … 웹 서버에서 웹 텍스트 데이터 읽기 계속 읽기

동네 도서관에서 책 찾기

동네 도서관에서 책 찾기 웹 서비스를 만들어 사용하고 있었는데 불편했다. 수정 내용을 간단하게 정리했다. 수정 전 https://dongne.herokuapp.com/ 우선, 책 이름을 입력한 후 나타나는 회색 바탕의 도서관 이름들의 의미가 분명하지 않다. 검색 시작 버튼을 눌렀는데 내용에 비해 화면이 너무 작아서 검색 결과를 볼 수 없으며 다시 시작 버튼의 의미가 분명하지 않다. 간단한 기능임에도 어떻게 사용해야 하는지 … 동네 도서관에서 책 찾기 계속 읽기

AngularJS 소스 코드를 본 적이 없다.

AngularJS 코드는 본 적이 있나요? 아니오 없습니다. 창피했다. v1.2는 코드량이 적어서 볼만할 텐데요 라는 뒷말이 머릿속에서 맴돌았다. 더 부끄러운 것은 마음속으로 3초 정도 변명하려는 마음을 먹었다는 것이다. “바쁘기도 하고요 고급 기능이 필요 없었거든요 사용하는 것으로도 충분했어요” 이런 류의 변명 말이다. AngularJS를 버전 1.2부터 버전 1.6까지 사용했다. 필요에 의해 버전을 올린 것은 아니고 프로젝트마다 최신 버전을 … AngularJS 소스 코드를 본 적이 없다. 계속 읽기

JavaScript 만으로 네모 굴리기

코딩 인터뷰를 본적이 있다. 5줄 정도의 짧은 HTML 코드와 함께 아래 문제가 주어졌다. 결국 풀지 못했는데 지나고 나니 궁금해져서 정리한다. JavaScript 만을 사용하여 사각형을 만들고 오른쪽으로 움직이시오 사각형을 만들고 style을 사용하여 움직일 계획이었다. 그런데 잠깐? 동적으로 HTML 코드를 삽입하는 방법이 정확히 기억이 안 나는 것이다. 이런, 낭패였다. "jQuery를 사용해도 되나요?" 질문이 부끄러웠지만 그래도 일단 jQuery를 … JavaScript 만으로 네모 굴리기 계속 읽기

AngularJS에서 상속된 scope를 사용하는 것은 어렵다

당신이 AngularJS 사용하고 있다면 상속된 scope는 사용하지 말길 바란다. 8단계 상속된 안드로이드 앱의 자바 코드를 본 적이 있는데 이것과 비슷하다. 추가 기능을 넣기 위해 상속을 사용했는데 이해하기 어려웠다. 상속은 어려운 상상이다. AngularJS scope의 상속이건 Java Class의 상속이건 마찬가지다. 잊지 않기 위해 정리한다. 내 경험에 AngularJS 1.x에서 ng-controller를 중첩해 사용한 적이 있었다. 이런 코드는 수정할 때 … AngularJS에서 상속된 scope를 사용하는 것은 어렵다 계속 읽기

snake 게임 – JavaScript

전에 만든 테트리스 코드를 가져다 사용했는데 최소한의 기능만 만들었다. 시작 코드로 Create React App를 사용했으며 App.js, App.css 이 두 파일을 수정했고 fp-snake 모듈을 사용했다. FP 라이브러리로 유명한 Lodash 라이브러리를 사용했다. Functional Programming (FP) 방법을 연습하는 중이다. https://github.com/afrontend/fp-snake-game 좌표 정보를 따로 업데이트하지 않는다. 데이터 구조는 간단하게 유지했다. 두 개의 2차원 배열을 사용하는데 코드에서 panel이라고 이름 지었다. … snake 게임 – JavaScript 계속 읽기

테트리스 게임 – JavaScript

얼마 전 세미나에서 테트리스 게임을 만드는 것을 보고 다른 방식으로 만들어 보고 싶었다. 자바스크립트는 프로그래밍 방법을 강제하지 않아서 Functional Programming (FP) 방법을 같이 사용하기에 적당한 언어다. if 문을 사용하지 않는 방법을 시도했다. 음.. 동작은 한다. 시작 코드로 Create React App를 사용했는데 App.js, App.css 이 두 파일을 수정했고 fp-tetris 모듈을 사용했다. FP 라이브러리로 유명한 Lodash를 사용했다. … 테트리스 게임 – JavaScript 계속 읽기

AngularJS에서 React 사용하기

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

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

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

‘Promise’ is undefined – JavaScript

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

Generator – JavaScript, Python

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

Iteration – JavaScript, Python

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