반응형

enum과 const object는 비슷하게 동작하는듯 하면서도 다르다. 그 차이에 대해서 알아보자.

enum

값 또는 상수를 가독성 높게 사용할 수 있다.

// 상수인 경우
enum Gender {
  Male,
  Female,
};

// 문자열인 경우
enum Gender {
  Male = 'male',
  Female = 'female',
};

const object

일반 Javascript 객체와 동일하다.

// 상수인 경우
const Gender = {
  Male: 0,
  Female: 1,
};

// 문자열인 경우
const Gender = {
  Male: 'male',
  Female: 'female',
};

차이

1. enum

transpile 이후에 역방향 매핑을 위한 값이 부가적으로 생겨난다.

// 작성
enum Gender {
  Male = 0,
  Female = 1,
};

// transpile 이후의 상태,
var Gender;
(function (Gender) {
    Gender[Gender["Male"] = 0] = "Male";
    Gender[Gender["Female"] = 1] = "Female";
})(Gender || (Gender = {}));

// Gender의 상태는 풀어서 작성하면 다음과 같다
var Gender = {
  Male: 0,
  Female: 1,
  // 역방향 매핑을 위한 값들이 생겨났다
  '0': 'Male',
  '1': 'Female',
}

2. const object

object는 primitive 타입이 아니기 때문에 const이더라도 내부의 값은 수정이 가능하다.
즉, enum으로써의 불변성이 보장되지 않는다.

const Gender = {
  Male: 0,
  Female: 1,
};
Gender.male; // 0
Gender.Male = 2; // <-- 값을 변경할 수 있다
Gender.Male; // 2

보완

1. enum

역방향 매핑은 경우에 따라 필요하지만 현재 코드에서 사용하지 않는다면 const enum으로 변경하자.
const enum을 사용하면 transpile 이후에 역방향 매핑을 위한 부가적인 코드가 추가되지 않는다.

// 작성
const enum Gender {
  Male,
  Female,
};
console.log(Gender.Male);

// transpile 이후
console.log(0 /* Male */); // 해당 하는 값이 바로 설정되었다

2. const object

as const를 사용하여 object 내부 필드의 수정을 방지하자.

const Gender = {
  Male: 0,
  Female: 1,
} as const;

Gender.Male = 2; // Cannot assign to 'Male' because it is a read-only property.

결론

  • 역방향 매핑의 사용이 필요하다면 enum을 사용하자.
  • 그렇지 않다면 const enum이나 as const를 사용하자.
    • as const는 타입 추론시에 타입 추론의 범위를 줄여준다.
반응형
반응형

1. 기기의 개발자 옵션에서 USB debugging 활성화

2. 기기에서 크롬 켜기

3. PC 크롬에서 주소창에 chrome://inspect/#devices 입력후 접속

4. Devices 탭에서 'Discover USB devices' 체크

5. 디버깅할 도메인을 'Open tab with url'에 입력 후 'Open' 클릭

 

 

여기까지는 기본 적인 내용이고, 로컬에서 개발중인 사이트를 디버깅 하기 위해서는 몇 가지 작업이 더 필요하다.

1. 포트 포워딩

  'Port forwarding...' 버튼을 누르면 아래와 같은 창이 나타난다.

  abc.com:1234 로 접속했을 때 abc.com:5678 로 연결을 원한다면, Port: 1234, IP address and port: abc.com:5678 를 입력하고

  창 하단의 'Enable port forwading' 에 체크한 후 'Done'을 누르면 된다.

2. hosts 수정

  사이트 특성상 localhost 대신 다른 도메인으로 개발중이라면 기기에서도 마찬가지로 hosts 수정이 필요하다.

  hosts 수정은 hosts go와 같은 서비스의 도움을 받자.

반응형
반응형

1. this 바인딩과 함께 전달

class MyComponent extends React.Component {
    myMethod(param, e) {
    	console.log(param); // 'someParam'
        console.log(e); // SyntheticEvent
    }
    
    render() {
    	return (
            <button onClick={this.myMethod.bind(this, 'someParam')}></button> {/* this 바인딩과 함께 전달 */}
        );
    }
}

2. arrow function 활용

class MyComponent extends React.Component {
    myMethod(param, e) {
    	console.log(param); // 'someParam'
        console.log(e); // undefined
    }
    
    render() {
    	return (
            <button onClick={() => {this.myMethod('someParam')}></button> {/* arrow function 활용 */}
        );
    }
}

React 합성 이벤트가 필요한 경우 명시해주어야 한다.

class MyComponent extends React.Component {
    myMethod(param, e) {
    	console.log(param); // 'someParam'
        console.log(e); // SyntheticEvent
    }
    
    render() {
    	return (
            <button onClick={(e) => {this.myMethod('someParam', e)}></button> {/* arrow function 활용 */}
        );
    }
}
반응형

+ Recent posts