장고 개발할때 AWS S3에 이미지 올리기

pip install boto3
pip install django-storages  # s를 꼭 붙여야 한다.

pip install boto3

pip install django-storages # s를 꼭 붙여야 한다.

위의 패키지들을 설치해주고 settings.py에 다음과 같은 값을 셋팅한다.

DEFAULT_FILE_STORAGE = ‘storages.backends.s3boto3.S3Boto3Storage’
AWS_ACCESS_KEY_ID = ‘AWS액세스키’
AWS_SECRET_ACCESS_KEY = ‘AWS시크릿액세스키’
AWS_STORAGE_BUCKET_NAME = ‘S3버킷이름’

단, 서울이나 프랑크푸르트와 같이 최근에 생성된 리전의 경우 Signature Version 4만 지원하기 때문에 동작하지 않을 수 있다.
이때는 아래와 같이 리전을 강제로 한국(ap-northeast-2)로 지정해주면 된다. ref
AWS_S3_REGION_NAME = ‘ap-northeast-2’

또 다른 방법으론
AWS_QUERYSTRING_AUTH = False
플래그를 셋팅하여, 이미지 url뒤에 붙는 get method의 키=값들을 사용하지 않는 것이다.
단 이 방식을 사용하게 되면, S3에서도 권한 체크를 하지 않게 아래와 같이 권한 설정을 해줘야 한다. ref
버킷선택 후 Permissions탭에서 Bucket Policy에 아래의 값을 넣는다.

{
    "Version": "2017-07-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::내버킷이름/*"
        }
    ]
}

{

"Version": "2017-07-17",

"Statement": [

{

"Sid": "AllowPublicRead",

"Effect": "Allow",

"Principal": {

"AWS": "*"

"Action": "s3:GetObject",

"Resource": "arn:aws:s3:::내버킷이름/*"

}

]

}

단 이방식의 경우, 모두에게 읽기 권한을 열어주게 되므로 url만 안다면 expired 없이 누구든 언제나 접근가능하게 되어 S3의 GET접근 COUNT가 예상보다 많이 오르게 되어 비용이 더 나올수 있으므로, 이 방식보다는 위의 방식(리전을 직접 지정하는 방식)을 추천한다.

Python과 Scrapy를 사용한 크롤링

단순 문서 파싱에는 Beautiful Soup을 쓰는게 좋고,
주기적으로 여러 범위에서 크롤링을 해올땐 프레임워크 형태로 제공되는 Scrapy가 좋다.

아래는 Scrapy에 대한 설명이다.

pip install scrapy

1 2	pip install scrapy

윈도우의 경우에는 Microsoft Visual C++ Build Tools (http://landinghub.visualstudio.com/visual-cpp-build-tools)가 있어야 설치가 된다.
(없을경우 에러메시지에서 설명해줌)

$ scrapy shell '크롤링할 url'

1 2	$ scrapy shell '크롤링할 url'

위의 명령어로 REPL쉘을 열어서 크롤링할 사이트에 대해서 탐색해볼 수 있다.
윈도우의 경우 실행할때 ModuleNotFoundError: No module named ‘win32api’ 에러가 났는데

pip install pypiwin32

1 2	pip install pypiwin32

설치해주면 해결된다.
쉘에서

&gt;&gt;&gt; response.xpath('//title/text()').extract()

1 2	>>> response.xpath('//title/text()').extract()

위의 코드로 title의 내용을 추출해 낼 수 있다.

Node.js를 Heroku에 배포시 Port에 관하여

var server = app.listen(5000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('app listening at http://%s:%s', host, port);
});

var server = app.listen(5000, function () {

var host = server.address().address;

var port = server.address().port;

console.log('app listening at http://%s:%s', host, port);

});

평소 Node.js 로 작업을 할때 위와 같은 방식으로 주로 코딩을 하는데,
이경우 port때문에(5000번을 내맘대로 사용할수 없으므로) 문제가 발생한다.

꼭 process.env.PORT를 붙여서 헤로쿠 설정이 제공해주는 포트를 사용하도록 하자.

var server = app.listen(process.env.PORT || 5000, function () {
...

var server = app.listen(process.env.PORT || 5000, function () {

...

Visual Studio Code에서 ES2015로 코딩하기

요즈음 Node.js로 코딩할때 Visual Studio Code (이하 VSC)를 주로 사용하는데
ES2015 (혹은 ECMA Script 6) 문법을 사용하게 되면 VSC에서 문법이 틀렸다고 빨간 밑줄이 뜬다.
이 거슬리는 빨간 밑줄을 제거하기 위해선 jsconfig.json 파일을 만들고

{
    "compilerOptions" : {
        "target" : "ES6"
    }
}

{

"compilerOptions" : {

"target" : "ES6"

}

위와 같은 내용을 넣어주면 된다.

참조 : http://bartwullems.blogspot.kr/2015/08/enable-ecmascript-6-support-in-visual.html

node.js 에서 es2015 (es6), react (jsx) 문법 실행하기

서버사이드 node.js에서 es2015 (es6)문법과 react를 위한 jsx 문법을 실행할 경우가 있습니다.
(ex : React의 서버 사이드 랜더링이 필요할 경우)
이때는 아래와 같이 babel을 설치하여 사용하시면 됩니다.

바벨 명령어 도구 설치
$ npm install -g babel-cli
로컬 모듈에 바벨 2015 지원 설치
$ npm install babel-preset-es2015 –save
로컬 모듈에 바벨 react 지원 설치 (react 서버 랜더링 필요시)
$ npm install babel-preset-react –save
server.js 파일 실행
$ babel-node –presets=es2015,react server.js

Heroku에서 Forever로 node.js 실행하기

Node.js는 다른 환경과는 다르게 Single Thread 기반이라 exception이 발생하면 모든 운영이 정지되어 버린다.
(다른 환경은 문제가 있는 해당 로직을 실행 하는 Thead만 죽어버려서 전체 서비스는 건재하다)
이와 같은 문제를 해결하기 위해 node.js에는 forever라는 모듈이 있다.
대부분은 npm install -g forerver 명령어로 전역 설치를 하여 forerver app.js 로 사용하는게 일반적이다.

하지만 Heroku는 전역 모듈을 지원하지 않아 위와같이 실행은 힘들다.
Heroku에서의 서비스 실행 명령을 담고 있는 Procfile 에서
web: node app.js 과 같은 방법으로 밖에 실행할 수가 없는것이다.

하지만 살짝 발상의 전환을 하면 forerver도 사용할 수 있게 된다.
npm install --save forever
위와 같이 설치하여 package.json에 forerver를 포함시켜 전역이 아닌 npm_modules 폴더에 local로 설치하도록 한다
그리고 Procfile에선
web: ./node_modules/.bin/forever app.js
위와같이 npm_modules 내에 설치된 forerver를 실행하여주면 영원히 죽지 않는 Node.js 서비스를 할 수 있게 된다.

출처 : http://thejackalofjavascript.com/deploying-node-application/

WebPack에서 Fetch API 적용하기

React를 WebPack으로 묶어서 프론트엔드를 개발하고 있는데, 백엔드와의 통신부분을 jQuery를 쓰다가 Fetch API로 바꾸게 되었다.
(React Native와 코드 공유를 좀 더 높이기 위해서)

처음에 WebPack에 node-fetch를 붙이려고 했더니, 빌드에 문제가 생겨서 whatwg-fetch 패키지로 선회를 하게 되었다.

plugins: [
  new webpack.ProvidePlugin({
    'fetch': 'imports?this=&gt;global!exports?global.fetch!whatwg-fetch'
  })
]

plugins: [

new webpack.ProvidePlugin({

'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'

})

]

사용하려면 webpack config 파일에서 plugins 항목에 위와 같이 선언을 해야하고,

$ npm i imports-loader exports-loader -S

1 2	$ npm i imports-loader exports-loader -S

위의 패키지들을 추가로 설치하면 별도의 require나 import없이 바로 fetch()로 사용할 수 있다.

참고

그외

redux/async 예제를 살펴보는중 isomorphic-fetch를 사용하고 있는것을 발견하였다. 아직 사용해보지 못했지만, 이것이 대안이 될 수도 있을것 같다.

React를 browserify로 빌드하기

react의 구동 환경은 브라우저임에도 불구하고 react 컴포넌트들을 다운받아 보면
var React = require(‘react’);
이와 같이 시작하고 있는 것들을 심심찮게 보게 된다.
물론 이런 문법이 바로 브라우저에서 돌아갈리는 만무하다.
그래서 이럴때 필요한게 바로 browserify나 webpack이다.

개인적으로 browserify를 사용하므로 이에 대해 알아보자.

$ npm install browserify -g

1 2	$ npm install browserify -g

위의 명령어로 설치하고,

$ browserify src.js -o dest.js

1 2	$ browserify src.js -o dest.js

이와 같이 사용하게 된다. src.js 파일은 require()등이 등장하는 파일이고, dest.js파일은 브라우저에서 실행하게 될 아웃풋 파일이다.
그런데, react는 js가 아닌 jax문법이기 때문에 browserify가 바로 변환을 할 수가 없다.
그래서 또 필요한게 reactify 모듈

$ nam install reactify

1 2	$ nam install reactify

위의 명령어로 reactify를 설치한 후

$ browserify -t reactify src.jax -o dest.js

1 2	$ browserify -t reactify src.jax -o dest.js

이와 같이 browserify를 실행해주면 require()도 쓰고, jax로 짜여져있는 react프로젝트도 브라우저에서 실행가능한 형태로 변환되는것을 볼 수가 있다.
ECMAScript6로 코딩된것도 볼수 있는데 그럴땐 위 명령어에 –es6 옵션을 붙여주면 된다.

자주쓰는 npm 명령어

npm은 node.js에서 의존성 관리를 위해 사용한다.
개인적으로 자주쓰는 npm에 대한 사용법을 정리한다.

$ npm install 모듈이름

1 2	$ npm install 모듈이름

현재 프로젝트 하위에 node_module 폴더를 만들어 해당 모듈을 설치한다.
–save이나 –save-dev를 뒤에 붙이게 되면 package.json에도 설치하는 패키지를 같이 추가시켜준다.
프로젝트 디렉토리에서 단순히 npm install만 입력하게 되면 package.json에서 정의된 모듈들이 설치되게 된다.

$ npm install 모듈이름 -g

1 2	$ npm install 모듈이름 -g

현재 프로젝트의 node_module에 설치하는것이 아닌, 시스템 전역으로 설치하기 위해 사용한다. grunt-cli, browserify 등의 커맨드라인 명령어를 제공하는 모듈을 설치할때 주로 이렇게 한다.
물론, 위의 모듈도 -g를 제외하고 설치할 수 있다. 이땐
프로젝트/node_module/.bin/browserify
위의 경로로 실행할 수 있다.

$ npm outdate

1 2	$ npm outdate

npm outdated도 같은 명령어다. 설치된 모듈중 업데이트가 필요한 모듈을 알아보기 위해 실행한다. 물론 -g를 붙여서 전역 모듈중에서도 확인할 수 있다.

$ npm list

1 2	$ npm list

설치된 모듈을 트리형태로 보여준다. package.json에도 없고 –save,–save-dev등으로 설치하지 않은 패키지의 경우 이름 옆에 extraneous 라고 나오게 된다.

$ npm start

1 2	$ npm start

package.json에 start 항목이 정의가 되어있는 경우, 그 내용을 실행한다. 대부분 grunt나 gulp등과 같이 쓰여 자동 빌드나 실행등을 하게 한다.

React Native 시작하기 – 설치

부제 : 자바스크립트로 아이폰과 안드로이드 네이티브 앱 동시에 만들기

글쓰는 시점의 React Native의 버전은 Mac OS X에서 구동을 합니다.
(곧 릴리즈 될 RC버전에서 윈도우에 대한 지원이 추가될 예정입니다.)

1. Node.js 설치하기

React Native는 JavaScript로 프로그램을 작성하게 됩니다. JavaScript의 구동환경인 Node.js와 패키지 관리자인 NPM설치를 위해서 아래의 사이트에 접속합니다.

https://nodejs.org

버전 4.2.1이 현재 배포 버전입니다. 이를 다운받아 설치해주시기바랍니다.

2. react-native-cli 설치

$ sudo npm install -g react-native-cli

npm을 사용하여 react-native-cli를 전역으로 설치합니다.
개발환경이 갖춰지진 Mac이 아니라면, 개발도구를 설치를 묻는 팝업창이 뜰 수 있습니다.
설치를 하고 다시 명령어를 입력하시면 됩니다.
설치가 성공적으로 됐다면 터미널에서 react-native 명령어를 실행할 수 있게 됩니다.

3. 새로운 프로젝트 생성

다음은 새로운 React Native 프로젝트를 생성해봅시다.
저는 새로만들 앱 이름을 myapp으로 하겠습니다. (만들고 싶은 앱 이름으로 바꾸시면 됩니다.)

$ react-native init myapp

위의 명령어를 입력하면 myapp이라는 새로운 폴더에 아래와 같은 구조의 파일들이 생성됩니다.

node_modules 와 package.json 은 Node.js의 Package를 관리하기 위한파일들입니다. (지금은 신경 안쓰셔도 돼요)

우리가 앞으로 프로그램을 작성하게 될 파일은 index.ios.js, index.android.js파일이며,
android, iOS 디렉토리는 해당 플렛폼의 네이티브 프로젝트 파일입니다.

4. 실행해보기

Android 실행은 다음 글에서 알아보기로 하고, iOS 플렛폼 부터 실행해보도록 합시다.
iOS App을 개발하려면 먼저 Apple의 개발도구인 Xcode가 깔려있어야 합니다.

https://itunes.apple.com/kr/app/xcode/id497799835?mt=12

Xcode가 설치되지 않으신 분은 위의 주소로 이동하여 Xcode를 설치해주시기 바랍니다.
Xcode가 설치되어 있다면, myapp/ios/myapp.xcodeproj 파일을 Xcode로 열 수 있습니다.
프로젝트가 로드 된 후 메뉴바의 [Product] -> [Run] (단축키 Command+R)을 누르시면 iOS 시뮬레이터에 아래와 같은 App이 구동되는 것을 보실 수 있습니다.

축하합니다! 여러분은 방금 첫 React Native App을 생성하고 성공적으로 구동하였습니다.

참고 : http://facebook.github.io/react-native/docs/getting-started.html

« Previous