장고 개발할때 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만 지원하기 때문에 동작하지 않을 수 있다. 이때는 아래와

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"

}

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

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

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

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 파일에서

React를 browserify로 빌드하기

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

자주쓰는 npm 명령어

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

$ npm install 모듈이름

1 2	$ npm install 모듈이름

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

React Native 시작하기 – 설치

부제 : 자바스크립트로 아이폰과 안드로이드 네이티브 앱 동시에 만들기 글쓰는 시점의 React Native의 버전은 Mac OS X에서 구동을 합니다. (곧 릴리즈 될 RC버전에서 윈도우에 대한 지원이 추가될 예정입니다.) 1. Node.js 설치하기 React Native는 JavaScript로 프로그램을 작성하게 됩니다. JavaScript의 구동환경인 Node.js와

컴포넌트의 크기를 퍼센트(%)단위로 지정하기

react native에서 컴포넌트의 크기를 퍼센트(%) 단위로 지정하려면 아래와 같이 FlexBox를 사용하면 된다. <View> <View style={{flex: 1}} /> <View style={{flex: 2}} /> </View> 안드로이드의 layout_weight와 같게, 비율로 계산이 된다. 위의 경우는 첫번째 뷰는 1/3을 차지하고, 두번째 뷰는 2/3을 차지하게 된다.

Text Component에 줄바꿈 적용하기

react native의 text 컴포넌트에서 줄바꾸기를 하려면 <Text>first line.{“\n”}second line.</Text> 식으로 적용을 해야한다.

« Previous