[JS] [번역] 40가지의 유용한 JavaScript팁, 트릭과 모범사례

[JS] [번역] 40가지의 유용한 JavaScript팁, 트릭과 모범사례

이 글에서는 브라우저 / 엔진 또는 SSJS (Server Side JavaScript) 인터프리터에 관계없이 모든 JavaScript 개발자가 알아야 할 JavaScript 팁, 트릭 및 모범 사례를 제공합니다.

이 글의 코드 스니펫은 V8 JavaScript 엔진 (V8 3.20.17.15)을 사용하는 최신 Chrome 버전 30에서 테스트되었습니다.


1. 변수를 처음으로 선언 할 때마다 var를 붙인다

선언되지 않은 변수는 자동으로 전역 변수로 정의된다. 전역변수를 피하자!


2. == 대신에 === 사용

자세히 보기
��진다.

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

이유는?

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

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

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

이채현

노션으로 보기

What is the Fastlane?

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

Run Fastlane

01. setting

fastlane 설치 및 세팅

자세히 보기
[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

은닉화

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

활용사례

자세히 보기
[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;
}
}

인스턴스

  • 싱글리터럴로 만든 객체도 각자의 인스턴스를 뜻함..객체이지만 인스턴스
  • 생성자 함수와 클래스를 활용하여…new 연산자와 더불어 만듬
자세히 보기
[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() {

}
}

생성자함수는 프로토타입이 모든 자바스크립트에 들어있듯이 생성자도 모든 자바스크립트에서 확인가능하다.

1
2
3
4
5
const one = new Person('one', 1);
const two = new Person('two', 2);

console.log(one.constructor); // [Function: Person]
console.log(two.constructor.name); // Person
자세히 보기