Npm이란과 명령어 정리

Posted by HULIA(휴리아)
2017. 11. 5. 12:55 백엔드개발/NODEJS
정의
NPM(nodejs package manager)


공식사이트
https://npmjs.org/


유명한 모듈명들
-lodash
-request
-async
-chalk
-express
-bluebird
-commander
-debug
-react

유명한 npm install 모듈
-browserify
-grunt-cli
-bower
-gulp
-grunt
-express
-cordova
-forever

알아둘 개념
-전역모드 VS 지역모드
전역모드 설치시 
/usr/local/lib/node_modules
c:\Users\%USERNAME%\AppData\Roaming\npm\node_modules
에 모듈이 저장된다
****그래서 npm install 하기 전에 반드시 폴더를 만들어야 한다

모듈 설치
npm install 모듈명@모듈버젼
-g옵션 : 전역모드로 설치
--save옵션 : package.json에 모듈명 업데이트(추가개념)
ex)npm install -g express@1.5x

모듈 삭제
npm uninstall 모듈이름
-g옵션 : 전역모드로 삭제
ex)npm uninstall -g express

모듈 업데이트
npm update 모듈명
-g옵션 : 전역모드로 업데이트
ex)npm update -g express


package.json(여러가지 모듈 일괄 설치 설정 파일)으로 의존성관리
기본적으로 프로젝트 생성시에 포함되어있지만 수동으로 package.json을 파일을 만들려면 npm init 명령어를 통해서 만들수 있다

package.json의 구조
{
"name" : 해당 모듈의 이름을 정의한다.  (이름에 'node' 나 'js' 가 들어가면 안된다.) 
"version" : 해당 모듈의 버전을 정의한다.
"description" : 해당 모듈의 추가적인 설명을 정의한다.
"main" : node에서 해당 package.json 을 탐색할 때 기준이 되는 파일 이름을 정한다.  기본적으로 index 로 
           설정이 되며, 생략이 가능한 부분이지만 추후 프로젝트가 복잡해진다면 이 항목을 정의 할 필요가 있다. 
"scripts" : package.json 이 있는 폴더에서 추가로 실행 할 스크립트 명령어를 정의한다. 노드 명령이나 
             쉘 스크립트  를 적어주면 된다.  
             현재 기본적으로 test 가 정의 되어있는데 해당 package.json 이 있는 폴더에서 
             npm run test 를 실행하면 Error: no test specified 라는 콘솔 메시지가 나타날 것 이다. 
"author" : 해당 모듈의 제작자를 정의한다.
"liecnse" : 해당 모듈의 라이센스를 정의한다.
"dependencies" : 일반적으로 package.json 에 가장 많은 정보가 입력되는 곳 이며 여기서 모듈의 의존성을 
                       정의 한다. 현재 아까 설치한 express 가 지정 되어있고 해당 모듈이름과 버전을  키 : 값 의 
                       형식으로 정의 되어있다.  여기서 추가로 모듈을 설치하고자 한다면 패키지이름 : 값  의 
                       형식으로 적어주면 된다. 
"devDependencies" : 해당 모듈의 실행에 필요한 또는 개발에 필요한 모듈의 의존성을 입력하는 곳 이다. 
}

package.json를 이용하여 모듈설치
package.json파일이 있는 곳에서 npm install을 입력
node_modules라는 폴더에 모듈이 설치됨


설치된 모듈확인
지역:npm ls
전역:npm ls -g --depth=0



Restful API 서버를 만들기 위한 Nodejs 개발환경 Intellij 설정

Posted by HULIA(휴리아)
2017. 11. 5. 12:50 백엔드개발/NODEJS
1. nodejs 설치
https://nodejs.org/

2. nodejs 개발툴 설치
에디터 계열의 sublimetext, atom 이나
개발툴 계열의 webstorm, intellij 
중에 하나를 설치하도록 한다

2-1. node 모듈을 설치할 디렉토리 만들기(만들고 나서 npm init)
2-2. express 모듈 설치
npm install express
2-3. express  generator(express 프로젝트 기본구조 만들어 준다)
npm install express-generator
2-4. express 프로젝트명
2-5. npm install

일반적으로 개발툴을 이용하는 이유는 프로젝트 구성을 어느정도 해주기 때문이다
웹스톰과 인텔리j에서는 2-1과 2-2의 과정을 알아서 해준다
** 저는 인텔리J를 이용하였습니다(기본적으로 nodejs 플러그인이 설치되어 있으며 express 프로젝트 구조를 자동으로 만들어 줌)


3. 인텔리J에서 express프로젝트 최초 구동
bin/www.js에서 run을 실행시킴

3-1. node .\bin\www 또는 npm start


4. 웹페이지에서 페이지 확인
http://localhost:3000 웹페이지 확인


5. express 프로젝트 구조
express(프로젝트명)
-bin(웹서버관련)
-node_modules(설치된 모듈관련)
-public(images, javascript, sytlesheets가 존재하는 부분)
-routes(URL을 요청 받으면 실행되는 객체)
-views(URL요청이 결과물로 리턴되는 페이지의 구성하는 객체-템플릿 엔진관련 파일이 존재하는 곳)
-app.js(웹서버를 구동시킬 때 이용하는 파일-모듈을 로딩해주는 객체)
-package.json(의존성 모듈관리)




Yum 명령어 정리

Posted by HULIA(휴리아)
2017. 11. 5. 12:38 호스팅_서버_툴/서버


1. 설치
yum install
-y 옵션: 설치시 y로 설치

2. 히스토리
yum history

3. repo 저장소
/etc/yum.repo.d/ 에 ,reop파일들이 저장되어 있다


파이썬 개발 환경 설정

Posted by HULIA(휴리아)
2017. 11. 5. 08:28 백엔드개발/파이썬


1. 파이썬 설치
https://www.python.org/downloads/

2. PATH 설정

3. Virtualenv 모듈 서치
파이썬 설치하면 pip 모듈은 기본으로 내장되어 있다
추가적으로 필요한 모듈은
Vitualenv이다

Virtualenv는 프로젝트별로 모듈관리하기 위한 것이라고 생각하면 된다
각 프로젝트에 필요한 모듈을 설치할수 있도록 한다

참고로
Pycharm IDE를 쓰면 Virtualenv 환경을 쉽게 설정하고 쉽게 사용할 수 있다

4. 개발툴 설치
개인적으로 Pycharm을 선호하나
이클립스나 Visual studio code나 Atom을 사용해도 무방하다


JQUERY SELECT에서 선택하자 마자 바로 액션발생시 처리하는 루틴

Posted by HULIA(휴리아)
2017. 11. 5. 07:29 프론트엔드/그래픽디자인_퍼블리싱

=============================JS=========================
$(document).ready(function(){
$('#page_limit').val('<?php echo $page_limit; ?>');
$('#search_text').val('<?php echo $search_text; ?>');
$('#search_type2').val('<?php echo $search_type2; ?>');
$("#page_limit").change(function(){
$("form[name=page_form] input[name=page_limit]").val($(this).val());
//alert($("form[name=page_form] input[name=page_limit]").val());
gopage('0');
});
$("#search_type2").change(function(){
$("form[name=page_form] input[name=search_type2]").val($(this).val());
//alert($("form[name=page_form] input[name=page_limit]").val());
gopage('0');
});
});

function gopage(page_idx){
//alert(page_idx);
document.page_form.page.value=page_idx;
document.page_form.submit();
}





=============================HTML=========================
<form name="page_form" method="POST">
<input type='hidden' name="search_text" value="<?=$search_text?>"> 
<input type='hidden' name="search_type2" value="<?=$search_type2?>"> 
<input type='hidden' name="page_limit" value="<?=$page_limit?>"> 
<input type='hidden' name="page" value="<?=$page?>">
</form>

<td bgcolor="#FFFFFF" class="in_th th_color">한페이지당목록수</td>
<td>
<select id='page_limit' name='page_limit' style='width: 80px'>
<option value='10' selected>10</option>
<option value='30'>30</option>
<option value='50'>50</option>
       </select>
</td>
<td class="in_th th_color">담보비율</td>
<td>
<select name='search_type2' id='search_type2' style='width: 120px'>
<option value='1' selected>전체</option>
<option value='2'>130%이상</option>
<option value='3'>130%이하</option>
      </select>
</td>



github과 docker hub 연동하여 도커 이미지 쉽게 만들기

Posted by HULIA(휴리아)
2017. 11. 4. 21:56 호스팅_서버_툴/도커(DOCKER)

Docker이미지를 직접 만들수도 있지만 공유되고 있는 Docker 이미지도 있습니다

바로 도커허브라는 곳에서 입니다

https://hub.docker.com/

개념은 github에 소스코드가 있듯이 도커 허브에서 도커 이미지파일들이 있습니다


도커 이미지를 만들기 위해서 Dockerfile이 필요한데 Docker파일을 github에 올려놓고 

docker hub에서는 github의 Dockerfile을 통해서 이미지를 빌드해서 올려놓을 수 있습니다


1. github에 접속해서 repository를 만들고 폴더를 만들고 Dockerfile을 만듭니다

혹시나 잘 모르는 분들은 http://istoryful.tistory.com/81 여기를 참고하여 만들면 됩니다


예) docker라는 repository만들었고 그안에 os폴더와 centos폴더를 만들었습니다

이런식으로요^^

os/centos6

os/centos7

centos/nginx

centos/node


2. docker hub에 접속해서 Create하위 메뉴의 Create automated build를 선택합니다

3. Create Auto-build github를 선택합니다

4. github와 연동할 repository를 선택합니다(저는 docker를 선택하였습니다)

그리고 이름을 선택합니다

이 이름은 docker hub의 계정뒤에 붙을 이름을 말합니다

예)istoryful/centos-utf8

이런식으로 해서 이미지를 만들때 이용할 수 있습니다


5. Docker hub의 Dashboard로 가서 만들어진 docker repository를 클릭하여 세부 화면으로 들어간 뒤 Build settings라는 메뉴로 들어갑니다


6. Trigger 옆의 + 버튼을 누르면 TAG라는 것을 추가할 수 있습니다

TAG라는 것은 이미지의 버전을 뜻하기도 합니다

Dockerfile location은 github의 Dockerfile 위치를 말하는 것이며

Docker Tag Name은 docker hub의 이미지를 가져갈때 TAG버젼을 말합니다

즉 화면과 같다면

istoryful/centos-utf8:7

istoryful/centos-utf8:6.9

를 이용해서 이미지를 가져가서 쓸수 있는 것이지요












디지털오션 Centos6에서 Nginx 설치하기

Posted by HULIA(휴리아)
2017. 11. 1. 12:21 호스팅_서버_툴/서버
sudo vi /etc/yum.repos.d/nginx.repo
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/6/$basearch/
gpgcheck=0
enabled=1

설치
sudo yum -y(모두 y로 진행) install nginx


Nginx 실행
sudo service nginx start

Nginx 중지
sudo service nginx stop

Nginx 상태확인
sudo service nginx status


환경설정
/etc/nginx
/etc/nginx/conf.d/default.conf 

디폴트 사용자 디렉토리는
/usr/share/nginx/html

로그
/var/log/nginx


디지털 오션 Centos6에서 nodejs(npm포함) 설치하기

Posted by HULIA(휴리아)
2017. 11. 1. 02:11 호스팅_서버_툴/서버

YUM을 이용한 설치

1. sudo yum install -y gcc-c++ make


2. (nodejs 7 버젼)

curl -sL https://rpm.nodesource.com/setup_7.x | bash - 


2.1. (nodejs 6 버젼) 

curl -sL https://rpm.nodesource.com/setup_6.x | bash -


3. nodejs 설치

sudo yum install -y nodejs




NVM을 이용한 설치

1. 버전 확인

https://github.com/creationix/nvm


2. NVM 설치

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash


3. 스크립트 실행

.profile이나 .bashrc파일의 마지막에 아래를 추가해 준다


export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm


source ~/.bashrc

또는 

터미널 재시작


4. nvm버젼 확인

nvm --version


5. 설치 가능 버젼 리스트 확인

nvm ls-remote


6. nodejs 설치

nvm install 버전

ex) nvm install v4 (v4의 최신버젼)

ex) nvm install (최신버젼)

ex) nvm install --lts(lst의 최신버젼)


7. 현재설치된 버젼 확인

nvm ls


8. 버젼을 선택해서 사용

nvm use 버젼

ex) nvm use v6.3.1


9. 터미널을 재시작해도 default nodejs로 설정해보자

nvm alias default 버전


10. 설치위치 확인

which node


11. 설치삭제

nvm uninstall 버전






애드센스 광고를 티스토리에 배치하기

Posted by HULIA(휴리아)
2017. 10. 29. 00:41 호스팅_서버_툴/애드센스_애널리틱스

1. 일단 티스토리 플러그인에서 광고 사이즈를 확인합니다


2. 구글 애드센스(PC) 플러그인 정보입니다

저같은 경우엔 상단에는 큰 광고

하단에는 작은 광고 두개를 붙일려고 합니다

권장사이즈가 나옵니다


3. 구글 애드센스(모바일) 플러그인 정보입니다

저는 상단과 하단에 넣을예정입니다

권장 사이즈를 확인합니다^^



4. 애드센스로 가서 사이즈별로 광고를 만듭니다^^



5. 3개를 만들었습니다

그리고 코드 가져오기를 해서 복사를 한다음

티스토리 플러그인의 설정화면 각각 사이즈별로 넣어주면 끝입니다




애드센스 연결 완료 및 구글 애널리틱스와 계정연결

Posted by HULIA(휴리아)
2017. 10. 29. 00:10 호스팅_서버_툴/애드센스_애널리틱스

오늘 드뎌 구글로부터 메일이 왔습니다


연결이 되었다는 메일입니다^^


요즘 애드센스 고시가 있다는 정도로 안되기로 유명하기도 하는데요

저는 한번에 연결이 완료되었네요^^ㅎ



이제 티스토리에 광고를 배치할 수 있으니

해야겠네요


그전에 우선 구글 애널리틱스와 애드센스 계정 연결을 해주면 좋습니다

왜냐면 계정연결한 뒤로부터 애널리틱스에 애드센스 정보가 보이기 때문이지요

애드센스 정보라 함은 어느 글이 얼마나 애드센스(광고)에 연관이 되어있느냐 하는 현황을 알 수 있는 것이지요


계정연결 하는 방법은

1. 구글 애널리틱스에 로그인 or 애드센스에 로그인 후 액세스 및 승인 Google 애널리틱스 통합 클릭

2. 관리메뉴에서 제품연결 -> 애드센스 연결을 누르면 됩니다