[JS] ES2022 신기능 중 4가지
[JS] ESLint 알고쓰기 : 설정 설명
[JS] 선언한 모듈로 이동하기 (alias) - Go to declaration

[JS] 선언한 모듈로 이동하기 (alias) - Go to declaration

이채현

문제

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

babel-plugin-module-resolver

자세히 보기
[JS] babelrc와 webpack.config

[JS] babelrc와 webpack.config

이채현

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에 있어야하는지 잘 모르겠어서 각 파일의 목적을 정리해보았다.

자세히 보기
[JS] Babel로 별칭 경로 설정하기

[JS] Babel로 별칭 경로 설정하기

이채현

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

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

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

자세히 보기
[React] React의 setState는 비동기로 동작한다

[React] React의 setState는 비동기로 동작한다

이채현

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씩 증가한다.

이유는?

자세히 보기
[Fastlane] Fastlane을 통해 빌드를 자동화하자 1편

[Fastlane] Fastlane을 통해 빌드를 자동화하자 1편

이채현

노션으로 보기

What is the Fastlane?

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

[JS] 클로저 간단 정리

이채현

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

은닉화

자세히 보기
[JS] Class 간단 정리

[JS] Class 간단 정리

이채현

클래스

  • 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;
}
}
자세히 보기
[JS] 프로토타입 간단 정리

[JS] 프로토타입 간단 정리

이채현

자바스크립트는 프로토타입 기반의 언어다.

constructor (생성자)

1
2
3
4
5
6
7
8
9
10
function Person(name, age) {
this.name = name;
this.age = age;
}

class Paerson {
constructor() {

}
}
자세히 보기