전체 글 105

[RaspberryPI] 라즈베리파이3 raspbian 설치 및 SSH 접속

라즈베리파이3에 raspbian을 설치하는 방법이다 raspbian은 라즈베리 파이 OS로 많이 사용되는 OS이며 데비안 기반으로 만들어져서우분투 사용 경험이 있다면 어렵지 않게 사용할 수 있다 https://www.raspberrypi.org/downloads/raspbian 이미지를 다운 받기 위하여 링크에 접속 한다 RASPBIAN을 선택한다 SSH로만 접속하여 사용할 것이므로 오른쪽의 라이트 버전을 다운로드 한다ZIP으로 바로 다운로드보다 토렌트를 이용하여 다운로드 하는 것이 더 빠르다 https://etcher.io/raspbian을 SD 카드에 쓰기 위하여 링크에 접속한다 본인에 맞는 OS를 선택하여 다운로드 하고 etcher를 설치 후 실행 한다 다운로드한 이미지를 선택하고 이미지를 쓸 SD..

[node.js] rabbitMQ를 이용하여 메시지 송수신

이종간의 프로그램 사이에 데이터 전송을 위한 message queue중에 rabbitMQ와 node.js를 이용한 예제이다 이미 설치되어 있는 rabbitMQ에 메시지를 보내고 받아보도록 하겠다 먼저 "$npm install amqplib"로 관련 패키지를 설치한다 메시지 송신 소스 메시지 수신 소스 메시지가 없는 큐의 상태 sendMessage.js를 실행 하면 하나의 메시지가 들어와서 Total이 1로 변하였다 receiveMessage.js를 실행 하면 메시지를 하나 소비 했으므로 Total이 0이 되었다

[node.js] passport를 이용한 session 관리

node.js에서 passport를 사용하여 간단하게 session 처리를 해보았다 필요 패키지는 body-parser, exporess, express-session, passport, passport-local npm으로 설치한다 간단하게 설명하면 LocalStrategy를 사용하여 직접 session을 관리 하였고 각 계정에 따라서 다른 권한을 줄 수 있도록 설정하도록 하였다 해당 예제에서는 별도로 DB를 연결하지 않고 비밀번호를 검사 하였다 admin으로 로그인 후 session 페이지를 호출 해 보면 admin이 true로 반환 되며 user 계정으로 로그인 후 session 페이지를 호출 해 보면 admin이 false로 반환 된다 deserializeUser 함수에서 추가한 내용이 /sess..

[React] Each child in an array or iterator should have a unique "key" prop. 오류 해결

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of {{functionName}} React를 공부하던 중 개발자 도구에서 위와 같은 Warning이 나타났다페이지는 의도한대로 렌더링 되었지만 위 Warning에 대해서 찾아 보았다 반복문 또는 반복자를 통하여 요소를 만드는 경우에 각 요소에 대해서 'key'를 지정하지 않았다는 오류이다 코드에서 주석처리된 map 함수 부부을 보면배열에서 필요한 요소만 참조하여 요소를 만들고 있다 그렇게 하더라도 의도한 코드를 작성하는데는 충분 하나아래 코드에서는 각 요소의 index를 받아 가장 부모 요소의 key의 값으로 할당 하여서 ..

[webpack] css 및 img 태그로 이미지 로딩

src 디렉토리 안에 img 디렉토리를 생성하고 간단한 이미지를 준비한다 css.png는 css의 background로 로딩하고 image.png는 html에서 img 태그로 로딩하려고 한다 package.json의 내용은 위와 같다 webpack_image 디렉토리에서 "npm install --dev" 명령를 입력하여 모듈을 설치한다 style.css, app.js, index.html 파일이다 style.css에서 body에 background 속성으로 img 디렉토리의 css.png파일을 불러왔으며 index.html에서 img 태그에 경로명을 그래도 적지 않고 require를 사용하여 이미지의 경로를 지정하여 준다 webpack.config.js파일이다 여기서 중요한 부분은 이미지를 로딩하기 위..

[webpack] 여러 html을 각각 번들링 하기

이번에는 두개의 html로 각각 번들링을 하기 위한 예제이다. [index.html, index.css, style.css, index.js, common.js] [multiple.html, multiple.css, style.css, multiple.js, common.js] 위와 같은 묶음으로 번들링을 하도록 한다. package.json의 내용은 위와 같다 webpack_multiple_template 디렉토리에서 "npm install --dev" 명령를 입력하여 모듈을 설치한다 index.html과 multiple.html에 공통으로 번들링될 style.css와 common.js 파일이다 common.js에는 exports로 모듈로 만들어서 index.js와 multiple.js에서 requir..

[webpack] html 파일에 css 파일을 추가하여 번들링 하기

우선 디렉토리 구조이다 src 디렉토리의 app.js, index.html, color.css, layout.css 이 네가지 파일을 번들링 하려고 한다 모듈들을 간단하게 설치 하기 위하여 package.json 파일을 사용하도록 한다. 개발에 필요한 모듈은 devDependencies에 등록되어 있으며 해당 모듈을 설치 하기 위하여 "npm install --dev"를 입력한다. 설치가 정상적으로 완료 되면 결과가 트리 구조로 타나난다 이제 각 파일의 내용이다 src/app.js에는 번들링할 css 파일을 선언해준다 css의 결과를 나타낼 간단한 html 파일이다 하나의 파일로 번들링할 두개의 css 파일이다 webpack.config.js에서 module에서 css에 대한 rule의 loader와 아..

[webpack] webpack 간단 입문

npm을 사용하기 위하여 우선적으로 node.js를 설치한다 https://nodejs.org/ko/ 위와 같이 디렉토리와 파일을 생성한다 위 package.json을 작성한다 "npm install --dev" 명령어로 모듈을 설치한다 설치가 완료 되면 위와 같은 설치한 모듈이 트리 구조로 나타난다 webpack.config.js webpack을 실행시 사용할 설정 파일 html 파일 app.js 파일 webpack_start 디렉토리에서 webpack 명령어를 실행하면 위와 같이 번들링 결과가 나타나며 dist 디렉토리에 번들링 된 파일이 생성된다 dist 디텍토리의 index.html 파일을 웹 브라우저로 실행하면 위와 같은 페이지가 나타난다 app.js의 결과는 개발자 도구를 통하여 확인이 가능하다

[Git] Git hub repository 에서 이클립스 프로젝트로 가져오기

perspectives에서 Git을 선택하면 해당 화면을 볼 수 있다.왼쪽에 Git repository 목록이 나타나는데 현재 아무것도 없기 때문에 repository를 추가 할 수 있는 3가지 방법에 대한 버튼이 나타난다.Clone a Git repository를 선택 한다. 위와 같은 창이 하나 나타나는데 받고 싶은 repository의 URL를 넣으면 된다. repository의 URL은 Git hup 페이지에서 확인이 가능하다. URI에 Git hub의 repository의 URL을 넣는다.그리고 User와 Passwor에 Git hub의 Id와 Password를 넣고 Next 버튼을 누른다. 현재 해당 repository의 branch의 목록이 나타난다.Next 버튼을 누른다. 그리고 repos..

프로그래밍 2017.04.02

[Git] 이클립스 프로젝트를 Git hub repository에 업로드

Git hub repository에 업로드 셈플 프로젝트이다. eclipse의 perspectives 중 Java EE를 선택하고 해당 프로젝트를 오른쪽 클릭하여Team - Share Project를 선택 한다. 우선적으로 로컬에 git repository를 생성하게 된다.Repository의 Create 버튼을 눌러서 repository의 디렉토리를 설정 한다. 디렉토리를 선택한 후 Finish 버튼을 누른다. 설정을 끝낸 후 Finish 버튼을 누른다. perspectives 중 git을 선택하면 추가된 repository가 목록에 나타난다. 해당 저장소를 오른쪽 클릭하여 Commit 한다. 프로젝트 내의 파일들이 새로 추가되었다고 나타난다. 파일들은 선택하고 오른쪽 클릭하여 Add to Index를..

프로그래밍 2017.04.02