이채현

노션에서 보기

Top level await

기존 await를 사용하려면 async 함수 내에서만 가능했다.

1
2
3

(async function () {
	await foo();
})();

하지만, ES2022부터 이러한 규칙이 사라지고, await를 async함수없이 모듈에서 아래와 같이 작성가능해졌다.

1

await foo();

Error Cause

이 기능을 통해 오류의 원인을 설명하여, 더 나은 오류 메시지를 만들 수 있다.

기존 오류를 만들 때는 오류 메시지를 작성하는 것 밖에 할 수 없었다.

1

new Error("This is the Error Message!");

하지만 ES2022부터 무엇이 오류를 발생시켰는지에 대해 설명할 수 있다. 그래서 정확히 무엇이 잘못되었는지 구체적으로 알 수 있으며, 동일한 오류메시지를 사용하지만 다른 원인을 작성할 수 있다.

또한, .cause를 액세스할 수 있다.

1
2
3
4

const err = new Error("This is the Error Message!", { cause: "Test Message" });

err.message; // This is the Error Message!
err.cause; // Test Message

.at()

.at을 활용하면, 배열의 모든 인덱스에 액세스할 수 있다.

1
2
3

const number = ["1", "2", "3", "4", "5"];

number.at(2); // 2

이전에도 대괄호를 사용하여 액세스할 수 있었지만, 대괄호와의 차이점은 뒤로 검색가능하다는 점이다. 대괄호는 -1 로 검색할 수 없었지만, .at을 통하면 가능하다.

1
2
3
4
5

const number = ["1", "2", "3", "4", "5"];

number.at(2); // 2
nubmer.at(-1); // 5
~~number[-1]; //  불가능~~

Class Fields

이것을 통해, 자바스크립트가 조금 더 OOP스럽게 느껴지게 한다. 이전에는 불가능했던 Private 메서드 및 속성을 가질 수 있으며, static 메서드를 사용할 수 있다.

그리고 속성을 초기화하기 위해 constructor를 사용할 필요도 없어진다.

Private 메서드 및 속성

private 메서드나 속성을 만들려면 이름 앞에 # 기호를 사용하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12

class Message {
	#destruct() {
		console.log("booom!!");
	}
}

const but = new Message();
~~btn.#destruct(); // 작동하지 않는다~~

class Message {
	#text = "Hi";
}

위 코드처럼 private한 메서드 및 텍스트를 만들 수 있으며, constructor를 사용하지 않는다.

1
2
3
4
5

class Message {
	constructor() {
		this.text = "Hi";
	}
}

Static 메서드

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

class Message {
	// body
}

Message.build(){
	// body
}

====

class Message {
	static build() {
		// body
	}
}

출처

방금 출시된 ⚡️자바스크립트 미친 신기능 4개!

이채현

노션 링크

이 문서는 eslint.org를 참고하여 eslint 7.32.0 버전에서 작성되었으며, 아래 프로젝트를 기반으로 작성했습니다.

https://github.com/chlee1001/react-typescript-simple-boilerplate

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "airbnb",
    "airbnb-typescript",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": [
      "./tsconfig.json"
    ],
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "import"
  ],
  "rules": {
    "import/prefer-default-export": "off",
    "import/no-unresolved": 0,
    "import/extensions": [
      "off"
    ],
    "react/function-component-definition": [
      2,
      {
        "namedComponents": "arrow-function",
        "unnamedComponents": "arrow-function"
      }
    ]
  },
  "ignorePatterns": [
    "paths.js",
    "webpack.*.js",
    "dist/*",
    "node_modules/*"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

ENV

• browser - browser global variables : true를 하게되면 **console.log()**를 에러없이 사용할 수 있다.
• node - Node.js global variables and Node.js scoping : true를 하게되면 전역에서 require를 에러없이 사용할 수 있게된다.
• es2021 - adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.

EXTENDS

extends는 추가한 플러그인에서 사용할 규칙을 설정한다. 플러그인을 설치하여도, 플러그인은 일련의 규칙집합이며 플러그인을 추가하여도 규칙은 적용되지 않는다. 규칙을 적용하기 위해서는 추가한 플러그인 중, 사용할 규칙을 extends 내에 추가해야한다. 보통 대부분의 플러그인은 recommended나 strict, all 등의 자체 설정을 제공한다.

• recommended: 프로젝트에 권장하는 규칙 집합

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

...
  "extends": [
    "airbnb", // airbnb의 규칙 사용
    "airbnb-typescript", // TS를 지원하는 airbnb 규칙 구성 향상
    "airbnb/hooks", // React hooks를 위한 airbnb 규칙사용
    "plugin:@typescript-eslint/recommended", // ESLint가 TypeScript를 지원할 수 있도록 하는 모든 도구를 위한 Monorepo
    "plugin:@typescript-eslint/recommended-requiring-type-checking", // 일부 highly valuable rules를 올바르게 구현하기 위해 유형 검사를 위한 추천 요구 유형 검사
    "plugin:import/recommended", // import명이나 잘못 작성한 파일 경로에 대한 이슈를 방지해주는 플러그인 (아래 errors와 warnings의 집합)
    // "plugin:import/errors", 
    // "plugin:import/warnings",
    "plugin:import/typescript", // TS에서 `eslint-plugin-import`를 사용하기 위해 추가
    "plugin:jsx-a11y/recommended", // JSX 요소에 대한 접근성 규칙
    "plugin:prettier/recommended", // prettier 규칙을 적용하여 틀릴 경우 eslint 문제로 처리
    "plugin:react/recommended", // eslint-plugin-react의 추천 규칙 사용
    "plugin:react-hooks/recommended"
  ],
...

PARSER

코드를 분석하기 위한 파싱툴이다. 기본값은 espress이고, 보통 js 워크스페이스에서는 @babel/eslint-parser를 사용하고 ts 워크스페이스인 경우 @typescript-eslint/parser를 사용한다. 사실 plugin:@typescript-eslint/recommended를 포함시키면 @typescript-eslint/parser가 자동으로 포함되기도 한다.

1

"parser": "@typescript-eslint/parser" 

PARSER OPTIONS

parserOptions은 ESLint 사용을 위해 지원하려는 Javascript 언어 옵션을 지정할 수 있습니다.

• project: 이 옵션을 사용하면 제공된 tsconfig에서 정의한 프로젝트에 포함되지 않은 파일이 허용되도록 요청할 수 있다.
• ecmaVersion: 사용할 ECMAScript 버전을 설정
• sourceType: parser의 export 형태를 설정
• ecmaFeatures: ECMAScript의 언어 확장 기능을 설정
  • globalReturn: 전역 스코프의 사용 여부 (node, commonjs 환경에서 최상위 스코프는 module)
  • impliedStric: strict mode 사용 여부
  • jsx: ECMScript 규격의 JSX 사용 여부

1
2
3
4
5
6
7
8
9
10

"parserOptions": {
  "project": [
    "./tsconfig.json"
  ],
  "ecmaFeatures": {
    "jsx": true
  },
  "ecmaVersion": "latest",
  "sourceType": "module"
},

PLUGIN

플러그인 패키지를 설치하고, 해당 플러그인을 plugins에 추가하여 사용할 수 있다.

1
2
3
4
5

"plugins": [
  "react",
  "@typescript-eslint",
  "import"
],

RULES

ESLint에는 프로젝트에서 사용하는 규칙을 수정할 수 있다. 규칙을 변경하는 경우, 다음과 같은 방법으로 설정해야한다.

• "off" 또는 0: 규칙을 사용하지 않음
• "warn" 또는 1: 규칙을 경고로 사용
• "error” 또는 2: 규칙을 오류로 사용

규칙에 추가 옵션이 있는 경우에는 배열 리터럴 구문을 사용하여 지정할 수 있다.

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

"rules": {
    "import/prefer-default-export": "off",
    "import/no-unresolved": 0,
    "import/extensions": [
      "off"
    ],
    "react/function-component-definition": [
      2,
      {
        "namedComponents": "arrow-function",
        "unnamedComponents": "arrow-function"
      }
    ]
  }

규칙 무시하기

파일 디렉토리 제외

ignorePatterns 필드 또는 .eslintignore 파일을 작성하여 파일 및 디렉토리를 제외하도록 지정할 수 있습니다.

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

// .eslintrc 파일 ignorePatterns 설정

"ignorePatterns": [
  "paths.js",
  "webpack.*.js",
  "dist/*",
  "node_modules/*"
],

//.eslintignore 파일 생성
config/
dist/
node_modules/

대체파일 사용

.eslintignore를 현재 작업 디렉토리가 아닌 다른 파일을 사용하려면 --ignore-path 옵션을 사용하여 명령행에 파일을 지정할 수 있다.

1

$ eslint --ignore-path .gitignore file.js

인라인으로 규칙 비활성화

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

**// 전체 파일 규칙 경고 비활성화, 파일 맨위에 아래 블록 주석 추가**
/* eslint-disable */
...
...
/* eslint-enable no-alert, no-console */

**// 경고 비활성화 블록 주석**
/* eslint-disable */
alert('foo');
/* eslint-enable */

**// 특정 규칙 경고 비활성화**
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');

**// 다음 한줄 경고 비활성화**
// eslint-disable-next-line

참고

Configuring ESLint - ESLint - Pluggable JavaScript Linter

https://velog.io/@kyusung/eslint-config-2

ESLint 알고 쓰기

이채현

문제

많은 사람들은 선언한 모듈들을 command/ctrl + click으로 해당 파일로 바로 이동하거나 자동완성이 되게하는 IDE나 Editor의 기능을 사용할 것이다. 그리고 babel-plugin-module-resolver을 통해 모듈의 경로를 별칭으로 바꿔서 사용할 것이다. 하지만 별칭으로 바꾸면서 위 기능이 깨지는 문제가 종종 있다. 그리고 이 문제는 플러그인쪽에서는 해결되지 않고 있다. npm에 올라온 최신버전은 이미 2년이 지났다.

babel-plugin-module-resolver

해결

우리는 jsconfig.json을 사용하여 IDE가 사용자 지정 resolve규칙을 따르도록 하는 것이 좋다. 이 접근 방식은 Webstorm과 VS Code 모두 작동한다.

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

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "#api/*": [
        "./src/api/*"
      ],
      "#assets/*": [
        "./src/assets/*"
      ],
      "#common/*": [
        "./src/common/*"
      ],
      "#component/*": [
        "./src/component/*"
      ],
      "#constant/*": [
        "./src/constant/*"
      ],
      "#container/*": [
        "./src/container/*"
      ]
    }
  }
}

이채현

Webpack으로 React 프로젝트를 초기 설정하다가 ,

1
2
3
4
5
6
7
8
9
10
11
12

presets: [
  [
    '@babel/preset-env',
    {
      targets: {
        browsers: ['> 5% in KR', 'last 2 chrome versions'],
      },
      debug: true,
    },
  ],
  '@babel/preset-react',
],

위 코드의 presets가 과연 .babelrc에 있어야 하는지, webpack.config.js에 있어야하는지 잘 모르겠어서 각 파일의 목적을 정리해보았다.

babelrc

.babelrc는 babel의 설정을 위해 사용한다.

1
2
3
4

{
  "presets": [...],
  "plugins": [...]
}

webpack.config

물론 webpack.config.js는 webpack의 설정을 위해 사용한다. 프로젝트 파일의 번들링과 관련된 설정들을 작성해준다. 그리고 babel과 관련된 설정들을 .babelrc가 아닌 webpack.config.js에서 babel-loader를 설정한 부분에 작성해줄 수도 있다.

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
45
46
47
48
49
50
51

...

module.exports = {

...

module: {
    rules: [
      {
        test: /\\.js?/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                targets: {
                  browsers: ['> 5% in KR', 'last 2 chrome versions'],
                },
                debug:true,
              },
            ],
            '@babel/preset-react',
          ],
          plugins: [
            '@babel/plugin-proposal-class-properties',
            'react-refresh/babel',
            [
              'module-resolver',
              {
                root: ['./src'],
                alias: {
                  '#api': './src/api/',
                  '#assets': './src/asset/',
                  '#common': './src/common/',
                  '#component': './src/component/',
                  '#constant': './src/constant/',
                  '#container': './src/container/',
                },
              },
            ],
          ],
          exclude: /node_modules/,
        },
      },
    ],
  },

...

}

결론

결론은, babel의 presets는 webpack.config.js와 .babelrc 파일 둘 중 한 곳에만 있으면 된다! 그러나 babel cli를 이용하여 직접 코드 변환을 수행하거나 babel test 등을 돌릴 때에는 webpack을 거치지 않기 때문에 .babelrc에 작성하는 방식이 권장된다.

나는 webpack.config.js 내에 적어서 사용한다.

이채현

프로젝트의 규모가 커지면 디렉토리 구조도 복잡해진다. 그 때문에 아래와 같이 컴포넌트의 위치를 찾기 어려워진다.

1

import { whereIsThis } from "../../../../../aaa/bbb/ccc";

위와 같이 작성한 것을 상대경로라고 한다. 상대 경로를 사용해서 모듈을 불러오면 모듈이 어느 경로에 위치하는지 파악하기가 난해해지는 경우가 생긴다. 뿐만 아니라, 이 자바스크립트 파일을 다른 디렉토리로 옮기려면 상대 경로를 그에 따라 모두 수정해줘야 해서 코드 리펙토링(refactoring)이 상당히 불편하다.

물론 절대경로를 사용하면 되지 않을까 생각할 수 있지만, 개발자들마다 해당 프로젝트를 다른 디렉토리에 저장해놓을 것이기 때문에 현실적으로 적용하기 어려운 방법이다.

별칭 경로

위와 같은 문제는 자바스크립트 트랜스파일(transpile) 도구인 Babel(바벨)을 사용하면 이 문제를 비교적 간단하게 해결할 수 있습니다.

Babel의 플러그인을 사용해서 별칭(alias) 경로를 설정해주면 된다.

1

$ yarn add -D babel-plugin-module-resolver

Babel의 module resolver 플러그인을 개발 의존성으로 설치 후, .babelrc설정 파일을 열고, plugins항목에 module-resolver설정을 추가해준다.

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

presets: ['@babel/preset-env', ...],
plugins: [
	...
  [
    'module-resolver',
    {
      root: ['./src'],
      alias: {
        '#api': './src/api/',
        '#assets': './src/asset/',
        '#common': './src/common/',
        '#component': './src/component/',
        '#constant': './src/constant/',
        '#container': './src/container/',
      },
    },
  ],
	...
],

alias 부분에서 ./src/api 를 #api로 표기함에 따라

1
2
3
4
5

import { alias } from "./src/api/.../alias";

// 위 코드를 아래와 같이 작성할 수 있습니다.

import { alias } from "#api/alias";

마치면서

이상으로 Babel의 module resolver 플러그인을 이용한 별칭 경로 설정 방법이였습니다.

만약 본인이 Webpack 설정과 겹쳐 고민이 있다면 다음 글[JS] babelrc와 webpack.config을 참고해주세요.

이채현

하드웨어 가속은 왜 필요할까?

복잡한 계산이 필요한 인터렉션은 렌더링에 많은 시간이 걸리게 된다. 이런 부분을 CPU가 아닌 GPU가 계산하도록 만들면 렌더링 시간을 줄일 수 있게 된다.

*하드웨어 가속을 사용하려면 어떤 스타일을 사용해야 할까?*

대표적으로 animation(keyframes), will-change 속성이 있지만 두 속성은 사용하는 데 있어서 한계가 있다.

다양한 케이스에 대응하기 쉽고 초기 렌더링에도 크게 영향을 주지 않는 방법으로는 transform: translate3d 스타일을 사용하면 된다. will-change, translate3d속성은 브라우저에게 **"얘는 3D 요소니까 하드웨어 가속을 써야 해!"**라고 알려주며 대상이 되는 요소를 자체 레이어로 승격시키고 GPU 메모리에 할당이 되어 하드웨어가 계산을 하게 된다.

translate3d

translate3d()는 x, y, z 3차원의 값을 조정할 수 있다.

translate3d의 동작원리는 translate와 동일하다.

Y축으로 100% 원한다면 아래와 같이 작성가능하다.

1
2
3
4
5
6
7

.anim {
	transform: translate3d(0, 100%, 0 );
}

.anim2 {
	transform: translateY(100%);
}

translate3d vs translateX, translateY

translate3d는 하드웨어 가속, 즉 GPU를 사용하기 때문에 CSS 퍼포먼스가 일반적인 translate()보다 더 좋다. 따라서 더 좋은 퍼포먼스를 원한다면 translate3d를 사용하는 것이 좋을 듯 싶다.

하드웨어 가속 사용 시 고려 사항

하드웨어 가속을 사용하면 웹 페이지의 렌더링 속도가 빨라지지만 잘못 사용하면 오히려 렌더링 속도가 느려지거나 브라우저에 문제가 일어날 수 있다.

주의 사항

하드웨어 가속을 사용하면 다양한 성능 향상을 기대할 수 있지만, 그렇다고 모든 요소를 대상으로 적용하면 안 된다. 하드웨어 가속 대상을 지정할 때 다음의 사항을 기억하기 바란다.

• 무분별한 하드웨어 가속은 오히려 브라우저를 느리게 한다.
• 요소에 하드웨어 가속 속성이 부여되면 즉시 대상 영역이 GPU에 업로드되며, 이때 업로드되는 영역이 크면 화면이 깜빡이는 현상이 발생될 수 있다.
• 요소에 하드웨어 가속 속성이 부여되면 레이어로 분리되며, 레이어는 변경되는 내용이 없는 한 요소를 GPU 메모리에 다시 업로드하지 않는다.
• 하드웨어 가속 속성을 사용한 요소의 내용이 변경되면 GPU 메모리가 갱신되므로 요소의 내용을 미리 변경한 다음 하드웨어 가속 속성을 부여한다.
• 성능이 낮은 기기에서 하드웨어 가속을 사용하면 오히려 성능 저하를 가져올 수 있다.

적용 시 고려 사항

하드웨어 가속을 사용할 때는 다음과 같은 점을 고려한다.

1. 하드웨어 가속을 적용하는 요소의 크기는 작을수록 좋고, 요소의 개수는 화면에서 5~6개로 구성하는 것이 좋다.특히, 요소의 속성값에 따라 요소의 영역이 커질 수 있기 때문에 주의해서 적용해야 한다. 예를 들어 text-indent나 left 같은 속성에 999em이나 9999px과 같이 화면 영역을 지나치게 벗어나게 값을 설정하면, 콘텐츠 영역의 크기가 늘어나고 하드웨어 가속에 의해 구성된 레이어도 커지게 돼 불필요한 메모리를 사용하게 된다.
2. DOM 요소의 내용이 자주 변경되지 않는 영역에 하드웨어 가속을 적용한다.내용 변경이 아닌 이동이나 크기 변경이 자주 발생하는 영역에 하드웨어 가속을 적용하고, 이동이나 크기 변경은 transform 속성을 사용한다.
3. 기기에 따라 선별적으로 하드웨어 가속을 적용한다.JMC(Jindo Mobile Component)는 기기가 하드웨어 가속에 적합한 기기인지 확인할 수 있게 useCss3d() 메서드를 제공한다.

참고 자료:

카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?

NAVER D2

이채현

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

function App() {
  const [state, setState] = useState(0);

  const handleClick = () => {
    setState(state + 1);
    setState(state + 1);
    setState(state + 1);
  };

  return (
    <div className="App">
      <p>{state}</p>
      <button
        onClick={() => {
          handleClick();
        }}
      >
        +3
      </button>
    </div>
  );
}

export default App;

위 코드의 결과는 버튼을 눌러도 1씩 증가한다.

이유는?

결국, 위 코드는 setState 는 동일한 key 값에 대하여 이전의 값을 계속해서 덮어써서, 마지막 명령어만 수행되는 셈이다.

setState를 동기적으로 처리하려면!

setState의 인자로 함수를 집어넣는 것이다.

1
2
3
4
5
6
7

...
const handleClick = () => {
    setState((prevState) => prevState + 1);
    setState((prevState) => prevState + 1);
    setState((prevState) => prevState + 1);
  };
...

위와 같이 작성하면 setState 내 함수의 매개변수로 이전 상태 값이 들어오므로, 동기적으로 동작하는 것을 확인할 수 있다. 이제 한번의 버튼 클릭으로 카운트가 3씩 증가하는 것을 볼 수 있다.

결론

이채현

노션으로 보기

What is the Fastlane?

• ruby 코드로 만들어진 앱 배포 자동화 툴
• 커맨드라인으로 빌드 할 수 있음
• CI 시스템과의 통합 용이
• 여러 구성원이 App Store에 앱을 배포하거나 단일 장치에 앱을 설치할 때 별도의 코드 서명 ID가 필요하지만, fastlane의 match를 사용하여 하나의 중앙저장소를 만들 수 있음
  • 기존 배포 인증서는 팀원 각각 만들어야 하고, 만료 기한이 있었던 것과 달리 깃 저장소에 저장된 배포 인증서로 사용 가능
  • 단, 이중인증 필요하다는 한계 존재

Run Fastlane

01. setting

fastlane 설치 및 세팅

#1. Install the latest Xcode command line tools

1

xcode-select --install

#2. ruby 2.5.0이상 버전 다운로드 필요

• Homebrew를 이용한 설치

• macOS Sierra 기준으로, 맥에는 이미 ruby가 설치되어 있음

• 기본설치 되어 있는 Ruby가 오래된 버전이라면 rbenv를 다운로드 하여 버전관리를 하는 것이 좋음

  1	brew install rbenv ruby-build

• rbenv 초기화

• rbenv의 설치가 완료되었다면 아래에 명령어를 실행하여 rbenv을 초기화한다.

• 아래 명령어를 실행하면 다음과 같이 나온다

  1 2 3 4 5

  rbenv init --- # Load rbenv automatically by appending # the following to ~/.bashrc_profile:*eval "$(rbenv init -)"`

• 위에 설명과 같이 .bashrc_profile 파일을 열고 아래와 같이 수정한다.

  1 2 3 4 5

  eval "$(rbenv init -)" 또는 eval "$(rbenv init - zsh)" # 그리고 아래 줄을 작성한다. export PATH=$HOME/bin:/usr/local/bin:$PATH

  1	source ~/.zshrc

• 루비 2.5.0 이상 설치

  1 2 3 4 5

  rbenv install 3.1.2 rbenv global 3.1.2 rbenv rehash ruby -v

#3. fastlane을 설치하는 두가지 방법

• Install fastlane using RubyGems

  1	sudo gem install fastlane -NV

• ✅ Alternatively using Homebrew

  1	brew install fastlane

  공식문서에서는 brew로 설치하는 방법을 권장

  이유: RubyGems로 설치할 경우 전역적으로 설치되어 rbenv를 사용하는 의미가 사라짐 → Homebrew로 설치하는 것을 권장

• 참고 링크

  https://jojoldu.tistory.com/288

  https://dev-yakuza.posstree.com/ko/ruby-on-rails/rails-on-mac/

02. Init Fastlane

fastlane을 위해 사용할 폴더 구조는 다양하다. 필자는 RN 프로젝트에서 다음과 같이 사용하고 있음.

#1. 프로젝트 최상위 루트에서 init 후 아래와 같은 폴더 구조 생성

1
2
3

bundle exec fastlane init

이후 4번 선택

root project |_ fastlane |_ android |Fastfile | ios |Fastfile | android |_ ios

#2. Fastfile설정

1
2
3
4
5
6
7

fastlane_require 'dotenv'

before_all do
end

import("./ios/Fastfile")
import("./android/Fastfile")

#3. env 설정

• Android와 iOS의 빌드를 위해 env를 분리시킨다.

  • 프로젝트 최상위 루트에 .env.FLAndroid, .env.FLIos 파일을 생성한다.

  env파일

  • .env.FAndroid

  1 2 3 4 5 6 7 8 9 10 11 12

  # 개발 APPCENTER_API_TOKEN={앱센터 토큰} APPCENTER_OWNER_NAME={"앱센터 사용자 이름"} APPCENTER_APP_NAME={"앱센터 앱 이름"} APPCENTER_DISTRIBUTE_APK="./android/app/build/outputs/apk/development/release/app-development-release.apk" # 상용 JSON_KEY={"플레이스토어 API 액세스 키"} STORE_DISTRIBUTE_AAB="./android/app/build/outputs/bundle/productionRelease/app-production-release.aab" PACKAGE_NAME="앱 패키지 이름"

  • .env.FLIos

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

  IOS_PROJECT_PATH="./ios/project.xcodeproj" SIGNING_IDENTITY_DEBUG="Apple Development: " SIGNING_IDENTITY_RELEASE="Apple Distribution: " # 개발 MATCH_ENV_PREFIX_DEVELOPMENT="sigh_io.project.dev_development" MATCH_ENV_PREFIX_DEVELOPMENT_EXT="sigh_io.project.dev.OneSignalNotificationServiceExtension-Dev_development" MATCH_ENV_PREFIX_ADHOC="sigh_io.project.dev_adhoc" MATCH_ENV_PREFIX_ADHOC_EXT="sigh_io.project.dev.OneSignalNotificationServiceExtension-Dev_adhoc" APPCENTER_API_TOKEN=앱센터 토큰 APPCENTER_OWNER_NAME="앱센터 사용자 이름" APPCENTER_APP_NAME="앱센터 앱 이름" APPCENTER_DISTRIBUTE_IPA="./projectDev.ipa" # 상용 MATCH_ENV_PREFIX_APPSTORE="sigh_io..project.app_appstore" MATCH_ENV_PREFIX_APPSTORE_EXT="sigh_io.project.app.OneSignalNotificationServiceExtension-Prod_appstore" STORE_DISTRIBUTE_IPA="./project.ipa"

#4. env 로드

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

platform :android do
    before_all do
        Dotenv.overload '../.env.FLAndroid'
				...
    end
		...
en

----------------------------------------------

platform :ios do
    before_all do
        Dotenv.overload '../.env.FLIos'
				...
    end
		...
en

#5. Appfile 셋팅 (환경변수 파일)

• 필요에 따라 작성하면 된다.

1
2
3
4
5

# app_identifier('io.project') # The bundle identifier of your app
apple_id('[email protected]') # Your Apple email address

# itc_team_id('####') # App Store Connect Team ID
# team_id("ABCDE") # Developer Portal Team ID

03. How to Run Fastlane

local에 설치 된 ruby 버전이 아닌 프로젝트에서 지정한 ruby버전을 사용하기 위해 bundle exec 명령어를 이용

1
2

bundle update --bunder
bundle exec fastane ....

Install Plugin

1
2
3
4
5

bundle exec fastlane add_plugin appcenter
bundle exec fastlane add_plugin load_json
bundle exec fastlane add_plugin yarn

# ... 등등 필요한 플러그인을 추가한다.

• add plugin 이후, fastlane 폴더 내 Pluginfile이 생성

  1 2 3 4 5 6 7

  # Autogenerated by fastlane # # Ensure this file is checked in to source control! gem 'fastlane-plugin-appcenter' gem 'fastlane-plugin-load_json' gem 'fastlane-plugin-yarn'

• Pluginfile 생성 체크 후, 프로젝트 루트 디렉토리에 Gemfile 내에 생성된 경로와 일치한지 확인하기

  1 2 3 4

  ... plugins_path = File.join(File.dirname(__FILE__), 'fastlane', 'Pluginfile') eval_gemfile(plugins_path) if File.exist?(plugins_path)

• 마무리

  1 2	bundle install # 이후, Gemfile.lock에 추가한 플러그인이 생겼는지 확인

이채현

• 클로저는 먼저 자바스크립트 변수의 유효범위를 이해해야한다.
• 클로저를 명확히 무엇이다라고 말하기는 어렵다.

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

function returnX(){
    return 'x';
}

const x = returnX()
console.log(typeof x) // string

----------------------------------------------

function returnX() {
    let x = 'x';
    return function returnY() {
        return x + 'y';
    }
}

const x = returnX()
console.log(typeof x) // function => return 값이 함수 덩어리이기 때문에

const x = returnX()();
console.log(typeof x) // string
function sum(num1) {
    return function (num2) {
        return num1 + num2;
    };
}

const sum5 = sum(5); // 숫자5가 계속 바인딩되어 있는 상태
console.log(sum5(10)); // 15

은닉화

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

function privateData() {
    let temp = 'a';
    return temp;
}

const result = privateData(); // privateData를 실행시켜야만 temp값을 알 수 있다.
console.log(result);

-------------------------------------

function privateData() {
    let temp = 'a';
    return {
        value: () => {
            return temp;
        },
        changeValue: (newVal) => {
            temp = newVal;
        }
    };
}

const private = privateData();
console.log(private.value()); // a
private.changeValue('b');
console.log(private.value()); // b

활용사례

• 고민해봤을 때 debounce와 throttle에서 …사용

  • debounce: 어떤 이벤트를 실행할 때 과하게 실행되는 것을 지연시켜주는 역할 (클릭지연..무한스크롤 지연)

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

  buttonElement.addEventListener( 'click', debounce(handleClick, 500), ) function debounce(func, timeout = 300) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }) } }

이채현

클래스

• class 선언은 프로토타입 기반 상속을 사용
• 정의: 함수 정의방법과 동일하게 가능, 함수 표현식과 함수 선언을 class표현식에서 사용 가능

1
2
3
4
5
6
7
8
9
10
11

function Person(name, age) {
    this.name = name;
    this.age = age;
}

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

인스턴스

• 싱글리터럴로 만든 객체도 각자의 인스턴스를 뜻함..객체이지만 인스턴스
• 생성자 함수와 클래스를 활용하여…new 연산자와 더불어 만듬

1
2
3
4
5
6

function Func() {} // 생성자함수의 이름은 Pascal case로..

class Class {}

const newInstance = new Func();
const newInstance2 = new Class();

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

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.location = location;
}

Person.prototype.getName = function () {
    return this.name + ' 입니다.';
}

=============================================

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
        this.location = location;
    }

    getName() {
        return this.name + ' 입니다.';
    }
}

const one = new Person('one', 1, 'Korea');
const two = new Person('two', 2, 'Korea');

console.log(one.getName()); // one 입니다.  

• 클래스는 뿐만 아니라 Private키워드, 정적메서드 등 수 많은 기능을 제공

클래스 확장 (extends, 상속)

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

// Super Class
class Animal {
    constructor(name, sound) {
        this.name = name
        this.sound = sound;
    }

    getInfo() {
        return this.name + '가(이)' + this.sound + '소리를 낸다.';
    }
}
// Sub Class
class Friends extends Animal {
    constructor(name, sound) {
        super(name, sound); // 부모의 생성자함수를 호출가능
    }
}

const dog = new Friends('개', '멍멍');
const cat = new Friends('고양이', '냐옹');

console.log(dog.getInfo()); // 개가(이)멍멍소리를 낸다.
console.log(cat.getInfo()); // 고양이가(이)냐옹소리를 낸다.

-------------------------------------------------

dog.contructor.name // Friends
cat.contructor.name // Friends

dog instanceof Friends // true
dog instanceof Animal // true