create-react-app에서 Mobx decorators 사용하기

Mobx를 공부해보려고 create-react-app으로 프로젝트를 생성했다.
예제에 있는 코드를 입력하고 build가 되길 기다렸는데 다음과 같은 에러가 발생했다.
decorator가 정상적으로 동작하지 않는것이다.

decorator는 es7에 포함되는걸로 알고 있는데 create-react-app 기본 babel 설정에 es7 문법은 포함되어 있지 않은거 같다. 그래서 검색을 해보니 다음과 같이 해주면 decorator를 사용할 수 있다는걸 알게 되었다.

eject로 프로젝트 설정을 모두 꺼낸다.

1
$ yarn run eject

babel plugin을 설치한다.

1
$ yarn add --dev babel-plugin-transform-decorators-legacy

package.json 설정을 수정한다.

아래 babel 설정 부분에

1
2
3
4
5
"babel": {
"presets": [
"react-app"
]
},

아래와 같이 추가 해준다.

1
2
3
4
5
6
7
8
"babel": {
"plugins": [
"transform-decorators-legacy"
],
"presets": [
"react-app"
]
},

이제 정상적으로 decorators가 동작한다.

공유하기 댓글

classnames 라이브러리 제거하기

3년만에 react-bingo 프로젝트를 다시 시작 하면서 코드를 보니 예전에 props의 값에 따라서 class를 추가 하고 빼주기 위해서 classnames 를 사용했던 코드들이 있었다. 요즘은 classnames 라이브러리 없이 여러개의 class를 props, 특정값에 따라서 넣고 뺄 수 있는지 찾아보니 ES6의 Template literals 를 사용해서 가능했다

기존 코드

1
2
3
4
5
6
7
8
9
10
render() {
var classes = classNames({
cell: true,
selected: this.props.selected
});

return (
<div className={classes} onClick={e => this.props.onClick(this)}>
)
}

ES6 Template literals로 변경한 코드

1
2
3
4
5
6
7
8
9
10
render() {
const selected = this.props.selected ? "selected" : "";

return (
<div
className={`cell ${selected}`}
onClick={e => this.props.onClick(this)}
>
)
}

공유하기 댓글

2017년 회고

오늘 교회에서 돌아보지 않으면 성장은 없다 라는 목사님의 말씀을 듣고 2017년을 돌아보며 처음으로 1년 회고를 써보았다. 그동안은 새해가 되면 나에게 부족한것들에 대한 반성과 새로운 다짐은 없이 나는 작년에 모했지? 정도만 머리로 생각하고 넘겼었다. 이제 회사도 퇴사했고 10년차에 접어들었으니 다시 한번 새로운 마음으로 정신차리고 신입의 마음으로 시작하고자 한다.

회사에서 첫 전사 발표

2016년에 회사에 카페가 생기면서 정말 간단한 주문 서비스를 만들었었다. 하지만 새해가 되었고 동료들에게 좀 더 좋은 경험을 주고자 새로운 카페 주문 서비스를 리뉴얼 했다. 스탬프, 쿠폰 기능이 추가되고 전체 적인 UI도 변경했다. 그리고 전사를 대상으로 첫 발표를 했다. 사람들도 나름 웃어주고 재밌는 새로운 경험이 였다.

인명구조 자격증

수영을 30살넘어서 배우기 시작하고 재미를 붙이면서 최종 목표를 인명구조 자격증 따는걸로 정했었다. 하지만 2주간 수업을 받아야 해서 회사를 다니면서는 역부족이라고 생각했었다. 하지만 좋은 팀원들과 있기에 가능했었다. 모두들 이해해 주고 나를 응원해 줬다. 결국 2주간의 수업을 받았고 자격증을 취득했다. 2주동안 많은건 느끼고 회사에 돌아가면 정말 일을 열심히 하겠다고 다짐도 했다.

SRE(Site Reliability Engineering) 전직

회사에 입사할땐 프론트 개발자로 입사를 했지만 결국 백엔드 개발자로 툴도 만들고 API도 만들고… 여러가지 일을 했다.
올해 말엔(3개월이지만) 좋아하는 사람들과 SRE라는 팀으로 일을했다. AWS 리소스를 Terraform으로 관리하고 ChatOps를 하기 위해서 Botkit을 사용해 Slack 못을 만들기도 하고 레거시 서버들에 있는 서비스를 AWS로 이전하기도 하고… 짧은 시간이 였지만 많은 경험을 했다. 하지만… 그들이 있었기에 가능했지 내 능력으로는 불가능한 일이였다고 생각한다.

인프라스터럭쳐 스터디

SRE팀에 가면서 AWS 리소스를 Terraform으로 관리하고 있었기 때문에 개발실 다수가 참여 하고 있는 스터디에 참여하게 되었다. 알라딘: 코드로 인프라 관리하기 - 효율적인 인프라 관리를 위한 자동화 방법 책으로 스터디에 참여했다. 처음부터 참여하지 않아서… 많은걸 배우진 못했다. 그래도 Terraform 경험에 대해서 한번 발표를 해서 발표 경험을 +1 했다.

오픈소스 첫 풀 리퀘스트

프론트로 전직을 하기로 맘 먹으면서 이것저것 해보다 React에서 주로 사용하는 css framework를 찾아봤는데 antd를 많이 사용하기도 하고 나름 맘에 들어서 사용해 보려고 튜토리얼을 따라해보고 있었다. 문서를 보면서 하고 있었는데 오타가 눈에 들어왔다. srcscr 로 써둔것이다. 오예~ 이것이 이삭줍기 인가~ 라고 생각하고 할줄도 모르는 영어라 asbubam님의 도움을 받아서 PR(fixed typo error. by J2P · Pull Request #8542 · ant-design/ant-design · GitHub)을 보냈다.
하지만 github에서 diff 코드를 수정한 코드로 표기 하면서 이건 오타 아닌데~ 라며 메인터너가 댓글을 달았고 내가 수정한거 아닌데~ 라고 하고 오해를 풀었다 ㅋㅋㅋ 정말 새로운 경험이 였고 이래서 사람들이 오픈소스에 기여를 하나보다 싶었다. 2018년에도 기회가 된다면 오픈소스에 기여하고 싶다. 근데 PR을 보내기 위해선 일부러 버그를 찾거나 오타를 찾는게 아니라 많이 사용해봐야 PR도 가능한거 같다. 그래서 오픈소스를 자주 사용하고 많이 써봐야 겠다.

5년 5개월의 직장 생활의 끝

2012년 7월 입사를 해서 2018년 12월 18일 퇴사를 했다. 5년 5개월 생각보다 긴 기간을 한 회사에 다녔다. 내가 입사할때 10명의 사원이 있었는데 퇴사할때 200명의 사원이 있었다. 참 신기한 경험이였다.

이직 준비

5년 5개월 만에 이력서를 쓰고 알고리즘 공부를 하다 보니 내가 그동안 얼마나 공부를 하지 않고 발전이 없었는지 깨닳게 되었다. 회사 일에만 너무 취중해서 만들기에 급급했던것이다. 지금 생각해보면 새로운걸 만들어도 새로운 기술들을 공부하면서 충분히 적용할 기회들이 있었던 것이다. 어느 개발자의 조언 처럼 그냥 내가 안한거다

이직 준비를 하면서 알고리즘에 대한 생각도 많이 바꼈다. 예전에 도대체 왜 면접 전에 알고리즘 문제 풀기를 하는지 이해를 못했지만 운동선수를 보면서 느꼈다. 운동선수들은 시합을 뛰기전에 매일매일 훈련을 하고 연습을 한다. 스포츠 스타들을 보면 무엇보다 기본기를 다지는데 많은 시간을 보내는거 같다. 그래서 개발자에게 기본기는 무엇일까? 연습은 무엇일까? 라는 생각을 해보니 알고리즘이 그 기본이고 연습인거 같았다. 그래서 이참에 알고리즘에 관심을 같고 지속적으로 연습하고 훈련해야 겠다는 생각을 했다.

이력서 또한 이직을 하기전에 쓰는게 아니라 평소에 항상 대가 한것들에 대해서 잘 정리하는 습관이 필요하다고 생각했다. 언제든 준비를 해야 여유가 생기고 자신감이 생긴다고 생각한다.

프론트 개발자로 전직

전 직장에서 마지막으로 내가 했던 일은 SRE팀에서 AWS 리소스를 관리하고 자동화 하는 작업이 였다. 하지만 팀원들이 있었기에 같이 작업을 해서 가능했던 일이 였다고 생각한다. 퇴사를 한 나는 과연 무엇이 하고 싶은것인가? 내가 가장 재밌게 할 수 있는 일은 무엇인가? 많은 생각을 했고 9년간 2번이나 전직을 시도했던 프론트 개발자가 나의 최종점이라는 결론을 내렸다. 그동안 백엔드 개발도 하고 AWS 리소스 관리도 하느라 프론트 개발에 대한 많은것들을 잊어버렸고 새로운 기술에 대한 지식도 부족하지만 이직준비 하는 기간 최선을 다해서 프론트 개발자로 전직 하고 싶다.

결론

2017년은 발전 없는 한해였다. 발전을 위해 무엇을 했는지 어떤 생각을 했는지 기록을 잘해야 겠다고 생각했다.
2018년엔 매일 매일 나를 돌아보면서 어제 보다 성장한 오늘의 나를 만들기 위해서 노력해야 겠다.

공유하기 댓글

Visual Studio Code에서 Prettier 설정하기

Prettier를 cli로 사용할 수 있지만 Visual Studio Code에서 편하게 쓰고 싶어서
설정하는 방법을 알아봤다.

설치

CMD + Shift + P 단축키를 입력해서 Command Palette를 열고 다음을 입력해서 Prettier - Code formatter를 설치한다.

Prettier - Code formatter - Visual Studio Marketplace

1
ext install prettier-vscode

사용방법

문서에서 사용하려면 다음과 같이 사용하면 된다.

1
2
3
4
1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

저장할때 자동 적용

파일 저장할때 자동으로 prettier를 적용하려면

Code > 설정 > 기본 설정을 열어서 다음을 추가해주면 저장할때 자동으로 실행이 된다.

1
2
3
"[javascript]": {
"editor.formatOnSave": true
},
공유하기 댓글

antd design 설정하기

예전에 다른분이 추천을 하는 링크를 봐서 기억하고 있었는데 회사에서도 프론트 개발자분들이 주로 사용하는거 같아서 설정 방법을 알아봤다.

create-react-app으로 주로 사용하고 있어서 설정하는 방법을 정리 해볼까 한다.

프로젝트 생성

create-react-app으로 프로젝트를 생성한다.

1
2
3
4
5
6
# app 생성
$ create-react-app antd-setting
# 디렉토리 이동
$ cd antd-setting
# app 실행
$ yarn start

프로젝트 구조

생성된 프로젝트의 구조는 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
└── yarn.lock

antd 설치

1
2
3
$ yarn add antd
or
$ npm install antd --save

css 설정하기

antd/dist/antd.css를 src/App.css 상위에 추가해 줍니다.

1
2
3
4
5
@import '~antd/dist/antd.css';

.App {
text-align: center;
}

component 사용하기

src/App.js를 아래와 같이 수정해서 버튼을 추가해 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
}

export default App;

위와 같이 버튼에 css가 적용된걸 확인할 수 있다.

react-app-rewired 설치하기

위와 같이 준비를 하면 antd를 사용가능하지만 css에서 모든 파일을 import해서 쓰기 때문에 사용하지 않는 모든 파일을 가져오는건 낭비라고 생각한다. 그래서 webpack에서 설정해서 필요한것들만 불러와서 사용하게 변경해보자.

그러기 위해서 react-app-rewired 라이브러리를 활용해보려고 한다.
이 라이브러리는 create-react-app으로 생성한 프로젝트에서 webpack등 설정을 변경하려고 할때 eject를 사용하지 않고 설정을 변경할 수 있게 도와주는 라이브러리다.

먼저 설치를 해보자.

1
2
3
$ yarn add react-app-rewired --dev
or
$ npm install react-app-rewired --save-dev

babel-plugin-import 설치

1
2
3
$ yarn add babel-plugin-import --dev
or
$ npm install babel-plugin-import --save-dev

package.json 수정하기

1
2
3
4
5
6
7
8
9
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}

config-overrides.js 파일 생성 & 수정

1
2
3
4
5
6
7
8
9
10
11
+ const { injectBabelPlugin } = require('react-app-rewired');

module.exports = function override(config, env) {

# css를 사용하는 경우
+ config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);

# less를 사용하는 경우
+ config = injectBabelPlugin(["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }], config);
return config;
};

src/App.css import 제거

1
2
3
4
5
6
7
- @import '~antd/dist/antd.css'; # 제거

.App {
text-align: center;
}

...

위와 같이 설정을 해주면 각 component에서 사용한 antd 컴포넌트만 import해서 사용하기 때문에 리소스 다운로드 낭비를 막을수 있다.

공유하기 댓글

테라폼(Terraform) 리모트 스테이트 백엔드로 AWS S3 사용하기

configuration.tf 파일 생성

1
2
3
4
5
6
7
8
9
terraform {
# terraform 버전
required_version = "= 0.9.5"
}

provider "aws" {
# aws 도쿄 리전
region = "ap-northeast-1"
}

configuration.tf 파일을 생성해서 terraform 기본 버전 설정값과 provider 설정값을 위와 같이 추가 해준다.

Terraform Init 명령으로 초기화 하기

1
2
3
4
5
6
7
8
9
10
11
$ terraform init

Terraform has been successfully initialized!

You may now begin working with Terraform. Try running "terraform plan" to see
any changes that are required for your infrastructure. All Terraform commands
should now work.

If you ever set or change modules or backend configuration for Terraform,
rerun this command to reinitialize your environment. If you forget, other
commands will detect it and remind you to do so if necessary.

init 명령을 실행해서 디렉토리를 테라폼을 사용할 수 있도록 초기화 한다.

0.9.x 버전에서는 provide가 terraform 바이너리에 포함되어 있어서 0.10.x 버전과 init이 다르다.

현재 최신버전은 0.10.6 이다. 다음 포스트에서 backend를 사용하면서 버전 업데이트 하는걸 하기 위해서 지금은 0.9.x 버전 기준으로 작성했다.

Backend S3 관련 리소스 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# terraform remote state를 lock table 위한 dynamodb_table
resource "aws_dynamodb_table" "test_terraform_lock" {
name = "init-terraform-lock"
read_capacity = 2
write_capacity = 2
hash_key = "LockID"

attribute {
name = "LockID"
type = "S"
}
}

# terraform remote state를 위한 s3_bucket
resource "aws_s3_bucket" "test_terraform_state" {
bucket = "test-terraform-state"
acl = "private"

versioning {
enabled = true
}
}

위와 같이 remote.tf을 생성한다.

aws_dynamodb_tabl 리소스는 table lock을 위해서 추가하고 aws_s3_bucke 리소스는 tfstate파일 저장을 위해서 추가 한다.

dynamodb 테이블의 primary key 이름은 LockID로 해야 한다.
dynamodb_table

Terrafom Plan 명령으로 변경되는 리소스 확인

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$ terraform plan
Refreshing Terraform state in-memory prior to plan...
The refreshed state will be used to calculate this plan, but will not be
persisted to local or remote state storage.

The Terraform execution plan has been generated and is shown below.
Resources are shown in alphabetical order for quick scanning. Green resources
will be created (or destroyed and then created if an existing resource
exists), yellow resources are being changed in-place, and red resources
will be destroyed. Cyan entries are data sources to be read.

Note: You didn't specify an "-out" parameter to save this plan, so when
"apply" is called, Terraform can't guarantee this is what will execute.

+ aws_dynamodb_table.init_terraform_lock
arn: "<computed>"
attribute.#: "1"
attribute.2068930648.name: "LockID"
attribute.2068930648.type: "S"
hash_key: "LockID"
name: "init-terraform-lock"
read_capacity: "2"
stream_arn: "<computed>"
stream_enabled: "<computed>"
stream_view_type: "<computed>"
write_capacity: "2"

+ aws_s3_bucket.init_terraform_state
acceleration_status: "<computed>"
acl: "private"
arn: "<computed>"
bucket: "init-terraform-state"
bucket_domain_name: "<computed>"
force_destroy: "false"
hosted_zone_id: "<computed>"
region: "<computed>"
request_payer: "<computed>"
versioning.#: "1"
versioning.0.enabled: "true"
versioning.0.mfa_delete: "false"
website_domain: "<computed>"
website_endpoint: "<computed>"

Plan: 2 to add, 0 to change, 0 to destroy.

리소스를 실제로 추가 하기전에 plan 명령으로 어떤것들이 변화가 있는지 확인한다.

위와 같이 aws_dynamodb_table, aws_s3_bucke 리소스가 추가 되는걸 확인할 수 있다.

Terrafom apply 명령으로 리소스 AWS에 적용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$ terraform apply
aws_s3_bucket.init_terraform_state: Creating...
acceleration_status: "" => "<computed>"
acl: "" => "private"
arn: "" => "<computed>"
bucket: "" => "init-terraform-state"
bucket_domain_name: "" => "<computed>"
force_destroy: "" => "false"
hosted_zone_id: "" => "<computed>"
region: "" => "<computed>"
request_payer: "" => "<computed>"
versioning.#: "" => "1"
versioning.0.enabled: "" => "true"
versioning.0.mfa_delete: "" => "false"
website_domain: "" => "<computed>"
website_endpoint: "" => "<computed>"
aws_dynamodb_table.init_terraform_lock: Creating...
arn: "" => "<computed>"
attribute.#: "" => "1"
attribute.2068930648.name: "" => "LockID"
attribute.2068930648.type: "" => "S"
hash_key: "" => "LockID"
name: "" => "init-terraform-lock"
read_capacity: "" => "2"
stream_arn: "" => "<computed>"
stream_enabled: "" => "<computed>"
stream_view_type: "" => "<computed>"
write_capacity: "" => "2"
aws_dynamodb_table.init_terraform_lock: Creation complete (ID: init-terraform-lock)
aws_s3_bucket.init_terraform_state: Creation complete (ID: init-terraform-state)

Apply complete! Resources: 2 added, 0 changed, 0 destroyed.

The state of your infrastructure has been saved to the path
below. This state is required to modify and destroy your
infrastructure, so keep it safe. To inspect the complete state
use the `terraform show` command.

State path:

apply 명령으로 aws에 적용을 한다.

apply 하고 나면 dynamodb 와 s3 bucket이 생성된걸 확인 할 수 있다.
이제 backend s3를 쓰기 위한 준비는 끝났다.

configuration.tf 파일 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
terraform {
required_version = "= 0.9.5"

# 아래 부분 추가
backend "s3" {
# s3 bucket 이름
bucket = "test-terraform-state"
# 실제 저장될 파일 이름
key = "terraform.tfstate"
# s3 bucket 리전
region = "ap-northeast-1"
# s3 서버 암화호 사용 여부
encrypt = true
# dynamodb table 이름
lock_table = "test-terraform-lock"
}
}

provider "aws" {
region = "ap-northeast-1"
}

위와 같이 backend s3로 추가해 준다.

Configuration variables
Backend Type: s3 - Terraform by HashiCorp

서버 측 암호화는 저장된 데이터를 보호하기 위한 것입니다. Amazon S3가 관리하는 암호화 키(SSE-S3)를 사용하는 서버 측 암호화는 강력한 멀티 팩터 암호화를 제공합니다. Amazon S3는 각 객체를 고유한 키로 암호화합니다. 또한 추가 보안 조치로 주기적으로 바뀌는 마스터 키를 사용하여 키 자체를 암호화합니다. Amazon S3 서버 측 암호화는 가장 강력한 블록 암호 중 하나인 256비트 Advanced Encryption Standard(AES-256)를 사용하여 데이터를 암호화합니다.

Terraform Plan 명령으로 확인하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ terraform plan
Backend reinitialization required. Please run "terraform init".
Reason: Initial configuration of the requested backend "s3"

The "backend" is the interface that Terraform uses to store state,
perform operations, etc. If this message is showing up, it means that the
Terraform configuration you're using is using a custom configuration for
the Terraform backend.

Changes to backend configurations require reinitialization. This allows
Terraform to setup the new configuration, copy existing state, etc. This is
only done during "terraform init". Please run that command now then try again.

If the change reason above is incorrect, please verify your configuration
hasn't changed and try again. At this point, no changes to your existing
configuration or state have been made.

Failed to load backend: Initialization required. Please see the error message above.

plan을 하게 되면 위와 같이 backend 가 변경되어서 init을 다시 하라고 나온다.

Terraform Init 명령으로 초기화 다시하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$ terraform init
Initializing the backend...
Do you want to copy state from "local" to "s3"?
Pre-existing state was found in "local" while migrating to "s3". No existing
state was found in "s3". Do you want to copy the state from "local" to
"s3"? Enter "yes" to copy and "no" to start with an empty state.

Enter a value: yes

Releasing state lock. This may take a few moments...


Successfully configured the backend "s3"! Terraform will automatically
use this backend unless the backend configuration changes.

Terraform has been successfully initialized!

You may now begin working with Terraform. Try running "terraform plan" to see
any changes that are required for your infrastructure. All Terraform commands
should now work.

If you ever set or change modules or backend configuration for Terraform,
rerun this command to reinitialize your environment. If you forget, other
commands will detect it and remind you to do so if necessary.

위와 같이 init을 다시 하면 local에 있는 tfstate 파일을 s3로 복사 할지 물어본다. yes 하면 s3로 복사가 된다.

이제 terraform backend s3 설정이 끝났다.

공유하기 댓글

phoenix framework 시작해보기

Install Elixir

1
2
$ brew update
$ brew install elixir

Install Hex

Package manager for the Erlang ecosystem

Hex는 elixir, erlang 패키지를 관리해주는 시스템이다. node의 npm 이랑 같은거다.

1
$ mix local.hex

Install Phoenix Framework

phoenix를 설치 하기 위해서 아래와 같은 명령어를 입력한다.

1
$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez

Create Phoenix Project

  • phoenix는 brunch를 사용하고 있는거 같다. 사용하고 싶지 않으면 옵션으로 --no-brunch를 주면 된다.
  • phoenix는 ecto를 사용하고 있는거 같다. 사용하고 싶지 않으면 옵션으로 --no-ecto를 주면 된다.
  • phoenix는 PostgreSQL을 기본으로 사용하게 되어 있는데 MySQL을 사용하고 싶으면 --database mysql 옵션을 추가 해주면 된다.

ecto는 database관리, 쿼리를 위한 라이브러리이다.

1
$ mix phoenix.new project_name --no-brunch --database mysql

Modify database config

config/dev.exs 파일을 열어 보면 아래와 같이 설정이 되어 있는데 환경변수를 사용하기 위해서 다음과 같이 수정 해준다.

1
2
3
4
5
6
config :project_name, Project_name.Repo,
adapter: Ecto.Adapters.MySQL,
username: "root",
password: "",
database: "hello_phoenix_dev"
hostname: "localhost"

database 정보를 수정하기 위해서 config/dev.exs 파일에서 아래와 같은 부분을 수정 해준다.

1
2
3
4
5
6
7
# Configure your database
config :project_name, Project_name.Repo,
adapter: Ecto.Adapters.MySQL,
username: System.get_env("DATABASE_USERNAME"),
password: System.get_env("DATABASE_PASSWOR"),
database: System.get_env("DATABASE_DB"),
hostname: System.get_env("DATABASE_HOST"),

Create and migrate your database with

아래와 같은 명령어를 입력하면 database가 생성 되고 마이그레이션을 해준다.

1
$ mix ecto.create && mix ecto.migrate

Start Phoenix

아래와 같은 명령으로 phoenix를 서버를 실행하면 http://localhost:4000로 다음과 같은 화면을 볼 수 있다.

1
$ mix phoenix.server

Run your app inside IEx

만약 IEx (Interactive Elixir)과 함께 서버를 실행하고 싶으면 아래와 같은 명령어로 실행하면 된다.

1
$ iex -S mix phoenix.server
공유하기 댓글

cocos2d-x 세로 모드

xcode 를 열어서 ios 디렉토리 안에 RootViewController.mm 파일을 열어서 아래 부분을 수정한다.

1
2
3
4
5
6
7
8
9
// 이부분을
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
return UIInterfaceOrientationIsLandscape( interfaceOrientation );
}

// 이렇게 수정
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
return UIInterfaceOrientationIsPortrait( interfaceOrientation );
}

자동회전없이 항상 세로화면으로 설정하고 싶으면 아래 부분도 수정한다.

1
2
3
4
5
6
7
8
9
// 이부분을
- (BOOL) shouldAutorotate {
return YES;
}

// 이렇게 수정
- (BOOL) shouldAutorotate {
return NO;
}

공유하기 댓글

React 개발환경 설정

요즘 react에 흥미를 느끼면서 이거저거 해보고 공부를 하고 있다.

이전에는 프론트엔드 개발을 하면서 build 만 watch 같은 것들을 따로 설정하지 않고 작업을 했었는데

react를 공부하는 김에 겸사 겸사 공부를 하게 되었다.

기본 디렉토리 구조

디렉토리 구조는 아래와 같다.

src 에는 개발단계에서 파일들을 쪼개서 개발을 하고 webpack 으로 build 한 파일들을 build 디렉토리에 모아둔다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.
├── build
│   ├── bundle.js
│   └── index.html
├── src
│   ├── css
│   │   └── style.css
│   ├── img
│   └── js
│   ├── components
│   └── app.js
├── preprocessor.json
├── package.json
├── gulpfile.js
└── webpack.config.js

webpack

webpack을 사용해서 파일들을 하나의 파일로 만들어준다.

webpack config 파일은 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var path = require('path');
var webpack = require('webpack');
var config = {
entry: {
src: ['./src/js/app.js']
},

output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},

resolve: {
extensions: ['', '.js', '.jsx']
},

module: {
loaders: [
{ test: /\.js$/, loader: 'jsx-loader!babel-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
}
};

module.exports = config;

gulp

gulp 를 사용해서 파일이 변경이 되면 빌드를 다시 하고 서버를 다시 시작한다.

gulpfile은 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

var gulp = require('gulp');
var connect = require('gulp-connect');
var webpack = require('gulp-webpack');
var webpackConfig = require('./webpack.config.js');

// Initialize watch tasks
gulp.task('watch', ['run'], function() {
gulp.watch(['./src/**/*'], ['build']);
});

// Build files for distribution
gulp.task('build', function() {
return gulp.src('./src/js/app.js')
.pipe(webpack(webpackConfig))
.pipe(gulp.dest('build/'))
.pipe(connect.reload());
});

// Run example server
gulp.task('run', ['build'], function(){
connect.server({
root: './build',
port: 8080,
livereload: true
});
});

gulp.task('default', ['watch']);
공유하기 댓글

react-native 시작하기

설치

1
2

$ npm install -g react-native-cli

프로젝트 생성

1
2

$ react-native init testProject

프로젝트 실행

1
2
$ cd testProject
$ open testProject.xcodeproj

위와 같이 명령어를 치면 xcode 에서 testProject가 열립니다.

run 을 실행하면 build 가 되고 터미널 창이 하나 열리면서 서버가 실행이 된다.

그리고 iOS Simulator 이 실행되고 다음과 같은 화면을 확인 할 수 있다.

만약 xcode 에서 run 해서 터미널창이 열리는게 싫으면 testProject 디렉토리에서 다음과 같은 명령어로 서버를 실행 할 수 있다.

1
2
3
4
5
$ react-native start

or

$ npm start
공유하기 댓글