멍개블로그

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사용을 위한 패키지 설치 npm

점심 시간을 이용한 깃 명령어 정리 $ 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, %, “치환될 문자열”, “치환할 문자열”, y or n. 커서의 아랫부분에 서 “치환될 문자열” 찾고, 문자열을 치환할 것인지 물어본다. 이때 y을 치면 “치환할 문자열”로 문자열이 치환되고 다음 문자열로 이동하고, n을 치면 치환되지 않고 다음 문

이번 포스팅에서는 서버 쪽이 아닌 프론트 단에서 파일 업로드를 하는 방법에 대해서 알아보려고 한다. 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

git에서 diff를 이용하여 소스의 변경을 확인할 수 있다. 머 사실 git diff --cached랑 --staged만 쓰는데 둘다 결과가 똑같아서 무슨 차이인가 하고 검색 하다가 다른 옵션이 있길래 정리를 해본다. 결과론 적으로 --cached랑 --staged는 같은 기능임. $ git diff HEAD # Shows what has changed since the last commit . $ git diff HEAD ^ # Shows what has changed since the commit before the latest commit . $ git diff -- cached # Show what has been added to the index via git add but not yet committed . $ git diff # Show what has changed but hasn't been added to the index yet via git add . Working Directory < -- -- + -- -- -- -- + -- -- -- - + | | | | | diff HEAD | | V | | | "git add" | | | | | | diff | | | | V | | | Index < -- -- + -- -- - | -- -- -- --

elasticsearch는 분산 검색엔진입니다. 분산 시스템이기 때문에 검색 대상 용량이 증가했을 때 대처하기가 매우 쉽다. elasticsearch에 대해서 알아보기 전에 elasticsearch가 나온지 꽤 된 저장소이다. 과연 얼마나 최근에 업데이트가 되었는지 github에서 살펴보았는데 최근 커밋 내역이 2분전이다... ㅋㅋㅋㅋ(죄송합니다.) 해당 포스트에서는 0.20 버전을 사용하지만 현재 5.x버전까지 나왔습니다 관계형 데이터베이스 VS elasticsearch 비교 관계형 데이터베이스 elasticsearch Database Index Table Type Row Document Column Field Schema Mapping Index Everything is indexed SQL Query DSL index라는 개념이 관계형에서의 개념이 잡혀있어서 문서에서 index라고 나올 때마다 Database로 딱 안 떠오른다 ㅋㅋ elasticsearch의 특징은 다음과 같다. JSON 기반의 스키마 없는 저장소 elasticsearch는 검색엔진이지만 NoSQL처럼 사용가능 Multi-tenancy 하나의 서버안에 여러 인덱스 저장가능. 여러 인덱스의 데이터를 하나의 쿼리로 검색 가능 확장성과 유연성 플러그인을 이용해 기능확장이 용이함. BigDesk, Head를 설치하면 elasticsearch 모니터링 기능을 사용할 수 있게 된다.(직접 사용해보니 플러그인을 설치하는 것이 상당히 쉬움) 분산 저장소 노드 추가의 용이함.  키에 따라 여러 샤드가 구