멍개블로그

 다음 코드는  멍개의 코드 저장소 에 있습니다. 코드를 확인하고 싶으면 여기를 click 하세요 시작하기 전에... 책을 시작하기 전에 책에서 사용하는 자스민을 어떤식으로 이용하여 테스트 코드를 작성할 수 있는지 봐보자. 자스민 사용방법 테스트 러너파일 작성 테스트 러너란 자스민 코드와 소스파일, 스펙을 참조하는 html 파일 app_spec.html 테스트 코드를 작성하기 전에 첫째로 js 파일을 UI에서 완전히 분리하여 작성하는 것이 중요하다. 모듈패턴 테스트 코드가 가능한 코드를 작성하기 위해서는  모듈패턴 을 사용하도록 합니다. 모듈패턴이란? 함수로 데이터를 감추고, 모듈 API를 담고있는 객체를 반환하는 형태다. 모듈패턴은 자바스크립트에서 가장 많이 사용하는 패턴입니다. 두 가지 형태로 모듈패턴을 사용할 수 있습니다. 첫 번째는 호출하는 방식으로 사용합니다. 두 번째는 즉시 실행 함수 기반으로 사용할 수 있습니다. 여기서 즉시 실행 함수를  IIFE(Immediately Invoked Function Expression) 라고 합니다. 모듈 패턴 코드를 어떤식으로 작성할 수 있는지 간단하게 확인해보겠습니다. // 공간생성 let App = App || {}; // 생성된 공간에 함수를 추가한다. 인자로 함수를 넘긴다.( == 의존성 있는 함수를 주입) App.Person = function(God){ let name = God.makeName(); // API 노출 return { getName: function(){return name;}, setName: function(newName){name = newName;} } }; App 변수를 생성합니다. 생선된 변수에 Person() 함수를 만듭니다. person() 함수는 첫 번째 인자로 함수를 전달받습니다. retur...

react-boilerplate 사용방법 해당 프로젝트는 일반적인 react를 사용하기 전에 이런저런 환경설정을 미리 셋팅을 해둔 프로젝트 입니다. 해당 프로젝트는 아래의 설정들을 거쳐 해당 명령어만 실행을 해주면 일반적인 react 프로젝트를 실행 시킬 수 있습니다. 1. git clone https://github.com/pjt3591oo/react-boilerplate.git - 프로젝트 클론하기 2. npm install – Dependency 설치하기 3. npm start – 개발 서버 실행하기 (포트: 7777) 위 명령어를 실행 하였으면 http://localhost:7777로 접속해보기 해당 프로젝트의 자세한 설명은 아래에 작성하였습니다. 시작하기 앞서서 npm 3.10.6이상 버전 설치 권장 : npm의 버전마다 설치 방식이 달라 2.x버전에서 아래에 나와있는 모듈을 설치 할 때 상당히 오래 걸릴 수 있습니다. 1. Global Package 설치하기 babel  : 아직 ECMAScript6를 지원하지 않는 환경에서 ECMAScript6 Syntax를 사용할 수 있게 해줌. webpack  : 모듈 번들러로서, Browserify처럼 브라우저 위에서 import(require)을 할 수 있게 해주고 자바스크립트 파일들을 하나로 합쳐준다. webpack-dev-server  : webpack에서 지원하는 간단한 개발서버로서 별도의 서버를 구축하지 않고도 웹서버를 열 수 있으며 hot-=loader를 통하여 코드가 수정될때마다 자동으로 리로드 되게 할 수 있다. $ npm install -g babel webpack webpack-dev-server 2. project생성 $ mkdir react-tutorial && cd react-tutorial $ npm init 3. Dependency 및 Plugin 설치 react사용을 위한 ...

점심 시간을 이용한 깃 명령어 정리 $ git commit --ammend 위 명령어를 통하여 최신 커밋 내역 메시지를 수정을 할 수 있다. 근데 위 명령어를 통해 커밋 메시지를 수정을 하려고 할 경우 빔으로 열리지 않고 emacs로 열리는 현상이 있는데 아래 명령어에서 C는 ctrl키를 의미한다. 1. 파일열기.   파일 여는 방법은 vim과 같다   emacs [file name] 2. 저장하기.    C+x, C+s. : ctrl+x을 누르고 ctrl+s을 누르라는 의미.  3. 종료.    C+x, C+c.  4. 마크 설정.    마크 설정을 시작하고 싶은 부분을 커서를 이동시킨 후, C+space.을 치면 “Mark set” 이라고 emacs의 하단에 나옵니다. 그 후 커서를 마커 설정을 끝내고 싶은 곳까지 이동.  5. 잘라내기.    마크 설정 후 C+w.  6. 붙이기.    C+y.  5. 한줄 지우기.    C+k. 커서 뒤에 있는 한 줄이 모두 지워지며, 지워지고, 지워진 문자는 clipboard에 저장된다.  6. 커서 이동.    C+a. 커서를 줄의 맨 앞으로 이동. C+e. 커서를 줄의 맨 뒤로 이동. C+n. 커서를 한 줄 아래도 이동.  7. 문자열 검색과 치환.   C+s 찾을 문자열. 커서의 아랫부분에서 찾을 문자열을 검색한다. C을 누른 상태에서 s 을 누를 때마다 다음 문자열로 이동한다. C+r 찾을 문자열. 커서의 윗부분에서 찾을 문자열을 검색한다. C을 누른 상태에서 s 을 누를 때마다 이전 문자열로 이동한다. 문자열 치환. ESC, %, “치환될 문자열”, “치환할 문자...

이번 포스팅에서는 서버 쪽이 아닌 프론트 단에서 파일 업로드를 하는 방법에 대해서 알아보려고 한다. input에 type을 file로 하면 매우 쉽게 가능하지만 단순한 파일 선택이 아닌 로컬 컴퓨터에 존재하는 파일을 drag and drop 을 이용하여 파일을 추가하는 방법에 대해서 알아보려고 한다. 우선 서버 쪽에서 파일을 처리하는 부분은 이전에 글을 작성한 적이 있으므로 이전 글을 참고하길 바란다. [node.js] multer 2 - array, field 방법 [node.js] multer를 이용한 파일 업로드 - single 방법 < form id = "upload" action = "/note/upload" method = "POST" enctype = "multipart/form-data" > < fieldset > < div class = "files" > < input id = "fileselect" type = "file" name = "fileselect" multiple = "multiple" class = "addFile" / > < / div > < div id = "filedrag" > drag and drop < / div > < div id = "submitbutton" > < button type = "submit" > Upload Files < / button > < / div > < / fieldset > < / form > < ta...