Angular-styleguide: public/private νšŒμ›μ„ μ€‘μ‹¬μœΌλ‘œ ν•œ μ»¨λ²€μ…˜

에 λ§Œλ“  2016λ…„ 03μ›” 28일  Β·  13μ½”λ©˜νŠΈ  Β·  좜처: johnpapa/angular-styleguide

λ”°λΌμ„œ public 및 private λ₯Ό μ‚¬μš©ν•  λ•Œ κ·œμΉ™μ„ λ§Œλ“€κ³  λ©”μ„œλ“œ/속성에 접두사λ₯Ό 뢙이기 μœ„ν•΄ 밑쀄을 μ‚¬μš©ν•΄μ•Ό ν•˜λŠ” κ²½μš°λ„ κ³ λ €ν•΄μ•Ό ν•©λ‹ˆλ‹€.

class Foo {
  public foo: string;
  private bar: number;
  private _fn() { ... }

개인적으둜 λ‚˜λŠ” private ν‚€μ›Œλ“œλΏλ§Œ μ•„λ‹ˆλΌ private λ©”μ†Œλ“œ/속성에 밑쀄을 μ‚¬μš©ν•˜κ³  public λ₯Ό μ‚¬μš©ν•˜μ§€ μ•Šκ³  λ‚¨κ²¨λ‘λŠ” 것에 νˆ¬ν‘œν•©λ‹ˆλ‹€.

Angular 2 enhancement

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

TypeScript/JavaScriptμ—λŠ” μ§„μ •ν•œ 개인 λ³€μˆ˜κ°€ μ—†μœΌλ©° 클래슀λ₯Ό μ‚¬μš©ν•œλ‹€λŠ” 것은 클래슀 μ΄μ „μ˜ JavaScript보닀 λ³€μˆ˜λ₯Ό 숨길 수 μžˆλŠ” λŠ₯λ ₯이 훨씬 더 μ λ‹€λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€. 우리λ₯Ό ꡬ할 '_' κ·œμΉ™λ§Œ μžˆμŠ΅λ‹ˆλ‹€.

'_' κ·œμΉ™μ˜ μ£Όμš” κ°€μΉ˜λŠ” " λ§Œμ§€μ§€ λ§ˆμ‹­μ‹œμ˜€! "라고 μ™ΈμΉ˜λŠ” κ²ƒμž…λ‹ˆλ‹€. JavaScriptλ₯Ό 디버깅할 λ•Œ 계속 진행해야 ν•˜λŠ” λͺ¨λ“  κ²ƒμž…λ‹ˆλ‹€.

μ‚¬λžŒλ“€μ΄ λ””λ²„κ±°μ—μ„œ something.foo λ₯Ό λ³Ό λ•Œ foo κ°€ (a) 곡개적이고 λ¬Έμ„œν™”λ˜μ§€ μ•Šμ•˜λŠ”μ§€ λ˜λŠ” (b) λΉ„κ³΅κ°œμΈμ§€ ν™•μ‹€νžˆ μ•Œ 수 μ—†μŠ΅λ‹ˆλ‹€. μ μ ˆν•œ 톡지 없이 μžμ‹ μ˜ μ½”λ“œμ—μ„œ 자유둭게 μ°Έμ‘°ν•  수 μžˆμŠ΅λ‹ˆλ‹€. κ·Έ μˆœκ°„ κ°œλ°œμžλŠ” 지원 μ˜λ¬΄κ°€ λ°œμƒν•©λ‹ˆλ‹€.

λ…μžκ°€ _foo λ³Ό λ•Œ ν•œκ³„λ₯Ό 벗어났닀 λŠ” 것을 μ•Œμ•„μ•Ό ν•©λ‹ˆλ‹€. _foo λ₯Ό μ°Έμ‘°ν•˜λŠ” 경우 _μžμ‹ μ˜ μœ„ν—˜ λΆ€λ‹΄_μž…λ‹ˆλ‹€. κ°œλ°œμžκ°€ μ œκ±°ν•˜κ±°λ‚˜ λ™μž‘μ„ λ³€κ²½ν•  λ•Œ 눈물이 μ—†μ–΄μ•Ό ν•©λ‹ˆλ‹€.

λ¬Έμ„œμ™€ μƒ˜ν”Œμ—μ„œ private λ©€λ²„λŠ” '_'둜 μ‹œμž‘ν•΄μ•Ό ν•©λ‹ˆλ‹€. private 접두사 '_'λ₯Ό μƒλž΅ν•œ 경우 μ‹ μ†ν•˜κ²Œ μˆ˜μ •ν•©λ‹ˆλ‹€.

λͺ¨λ“  13 λŒ“κΈ€

λ‚˜λŠ” 그것에 μ „μ μœΌλ‘œ λ™μ˜ν•©λ‹ˆλ‹€. μ£„μ†‘ν•©λ‹ˆλ‹€, κ·Έ 뢀뢄을 λ†“μ³€μŠ΅λ‹ˆλ‹€.

μ‹œμ›ν•œ.

그리고 κ·€ν•˜μ˜ λ¬Έμ œμ—λŠ” κ°€μ΄λ“œμ— μΆ”κ°€ν•΄μ•Ό ν•  μ€‘μš”ν•œ 관점이 μžˆλ‹€κ³  μƒκ°ν•˜λ―€λ‘œ λ‹€μ‹œ μ—΄κ² μŠ΅λ‹ˆλ‹€. :)

이 κ°€μ΄λ“œμ— 이름 지정에 λŒ€ν•œ 뢀뢄을 μΆ”κ°€ν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€. 당신이 λ¬»λŠ”λ‹€λ©΄ λ‹€λ₯Έ μ‚¬λžŒλ„ λ§ˆμ°¬κ°€μ§€μΌ κ²ƒμž…λ‹ˆλ‹€.

멀버가 μ•„λ‹Œ 개인 ν•¨μˆ˜ 이름에 밑쀄을 μ‚¬μš©ν•˜λŠ” μ΄μœ λŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ? 그것도 λΉ„κ³΅κ°œλ‘œ? λ˜λŠ” 밑쀄이 ν•¨μˆ˜ μžμ²΄μ— λ‹€λ₯Έ 의미λ₯Ό λΆ€μ—¬ν•©λ‹ˆκΉŒ?

이제 당신이 그것을 μ–ΈκΈ‰ ν–ˆμœΌλ―€λ‘œ 예, 속성에 λŒ€ν•΄μ„œλ„ 밑쀄을 μ„ ν˜Έν•©λ‹ˆλ‹€. λ‹€μŒκ³Ό 같은 것을 κ°€μ§ˆ 수 μžˆμŠ΅λ‹ˆλ‹€.

private _foo: string;

@Input()
set foo(value) { this._foo = value; }

get foo() { return this._foo; }

λ¬Όλ‘  더 λ³΅μž‘ν•œ setter와 getterλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

λ„€, μ˜€νƒ€

개인적으둜 밑쀄을 μ’‹μ•„ν•˜μ§€ μ•ŠλŠ”λ°... ν•˜μ§€λ§Œ μžλ°”μŠ€ν¬λ¦½νŠΈμ—λŠ” μ§„μ§œ private도 public도 μ—†κΈ° λ•Œλ¬Έμ— ꡬ별할 수 μžˆλŠ” 방법이 있으면 도움이 많이 λ©λ‹ˆλ‹€. κ·Έλž˜μ„œ λ‚˜λŠ” 그것듀을 μ‚¬μš©ν•œλ‹€

μ—…λ°μ΄νŠΈ: μ €λŠ” ES5λ₯Ό μ–ΈκΈ‰ν•˜κ³  μžˆμ—ˆμŠ΅λ‹ˆλ‹€... Typescript둜 밑쀄을 μ‚¬μš©ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€

밑쀄이 μƒλž΅λ˜λ©΄ ν˜Όλž€μ΄ μžˆμ„ 것이라고 μƒκ°ν•˜μ‹­λ‹ˆκΉŒ?

TypeScript/JavaScriptμ—λŠ” μ§„μ •ν•œ 개인 λ³€μˆ˜κ°€ μ—†μœΌλ©° 클래슀λ₯Ό μ‚¬μš©ν•œλ‹€λŠ” 것은 클래슀 μ΄μ „μ˜ JavaScript보닀 λ³€μˆ˜λ₯Ό 숨길 수 μžˆλŠ” λŠ₯λ ₯이 훨씬 더 μ λ‹€λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€. 우리λ₯Ό ꡬ할 '_' κ·œμΉ™λ§Œ μžˆμŠ΅λ‹ˆλ‹€.

'_' κ·œμΉ™μ˜ μ£Όμš” κ°€μΉ˜λŠ” " λ§Œμ§€μ§€ λ§ˆμ‹­μ‹œμ˜€! "라고 μ™ΈμΉ˜λŠ” κ²ƒμž…λ‹ˆλ‹€. JavaScriptλ₯Ό 디버깅할 λ•Œ 계속 진행해야 ν•˜λŠ” λͺ¨λ“  κ²ƒμž…λ‹ˆλ‹€.

μ‚¬λžŒλ“€μ΄ λ””λ²„κ±°μ—μ„œ something.foo λ₯Ό λ³Ό λ•Œ foo κ°€ (a) 곡개적이고 λ¬Έμ„œν™”λ˜μ§€ μ•Šμ•˜λŠ”μ§€ λ˜λŠ” (b) λΉ„κ³΅κ°œμΈμ§€ ν™•μ‹€νžˆ μ•Œ 수 μ—†μŠ΅λ‹ˆλ‹€. μ μ ˆν•œ 톡지 없이 μžμ‹ μ˜ μ½”λ“œμ—μ„œ 자유둭게 μ°Έμ‘°ν•  수 μžˆμŠ΅λ‹ˆλ‹€. κ·Έ μˆœκ°„ κ°œλ°œμžλŠ” 지원 μ˜λ¬΄κ°€ λ°œμƒν•©λ‹ˆλ‹€.

λ…μžκ°€ _foo λ³Ό λ•Œ ν•œκ³„λ₯Ό 벗어났닀 λŠ” 것을 μ•Œμ•„μ•Ό ν•©λ‹ˆλ‹€. _foo λ₯Ό μ°Έμ‘°ν•˜λŠ” 경우 _μžμ‹ μ˜ μœ„ν—˜ λΆ€λ‹΄_μž…λ‹ˆλ‹€. κ°œλ°œμžκ°€ μ œκ±°ν•˜κ±°λ‚˜ λ™μž‘μ„ λ³€κ²½ν•  λ•Œ 눈물이 μ—†μ–΄μ•Ό ν•©λ‹ˆλ‹€.

λ¬Έμ„œμ™€ μƒ˜ν”Œμ—μ„œ private λ©€λ²„λŠ” '_'둜 μ‹œμž‘ν•΄μ•Ό ν•©λ‹ˆλ‹€. private 접두사 '_'λ₯Ό μƒλž΅ν•œ 경우 μ‹ μ†ν•˜κ²Œ μˆ˜μ •ν•©λ‹ˆλ‹€.

Ward의 가정은 μš°λ¦¬κ°€ μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό 디버깅할 κ²ƒμ΄λΌλŠ” κ²ƒμž…λ‹ˆλ‹€. .... 이상해 보일 수 μžˆμ§€λ§Œ μ†ŒμŠ€λ§΅μ΄ λ„ˆλ¬΄ 뜨겁게 μž‘λ™ν•˜μ§€ μ•Šκ±°λ‚˜ 무슨 일이 μΌμ–΄λ‚˜κ³  μžˆλŠ”μ§€ 더 λͺ…ν™•ν•˜κ²Œ μ΄ν•΄ν•˜κΈ°λ₯Ό μ›ν•˜λŠ” 경우 ν›Œλ₯­ν•œ λ°±μ—… κ³„νšμœΌλ‘œ λ΄…λ‹ˆλ‹€.

λ˜ν•œ μ‚¬μš© 방법에 λŒ€ν•œ ν›Œλ₯­ν•œ μ‹œκ°μ  μ§€ν‘œμž…λ‹ˆλ‹€.

μ›Œλ“œκ°€ λ§ν•œ λͺ¨λ“  것.

λ˜ν•œ ng2λ₯Ό μ‚¬μš©ν•˜λ©΄ λ‹€μŒκ³Ό 같은 μ°Έμ‘°λ₯Ό κ°€μ§ˆ 수 μžˆμŠ΅λ‹ˆλ‹€.

<my-dir #myDir>

λ‚΄λΆ€ 속성에 μ•‘μ„ΈμŠ€ν•©λ‹ˆλ‹€. κ·Έλ“€ 쀑 ν•˜λ‚˜μ— 밑쀄이 있으면 "내일 κ³ μž₯λ‚  수 μžˆμœΌλ‹ˆ ν•˜μ§€ λ§ˆμ„Έμš”"의 μ‹ ν˜Έμž…λ‹ˆλ‹€.

λ™μ˜ν•©λ‹ˆλ‹€. 더 λ‚˜μ€ ꡬ별 방법은 μ—†μŠ΅λ‹ˆλ‹€. 개발자λ₯Ό μœ„ν•œ 였래된 ν•™κ΅μž…λ‹ˆλ‹€. νŽΈμ˜μ„± λΉΌκ³ λŠ” λ‚˜μ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

Angular 2 λ¬Έμ œλŠ” 이제 angular.io λ¦¬ν¬μ§€ν† λ¦¬μ˜ A2 μŠ€νƒ€μΌ κ°€μ΄λ“œλ‘œ μ΄λ™ν•©λ‹ˆλ‹€.

ν˜„μž¬ Angular codeStyle(κ·œμΉ™ 03-04) 이 @johnpapa 의 μ œμ•ˆκ³Ό λΉ„κ΅ν•˜μ—¬ μ—¬κΈ°μ—μ„œ λ³€κ²½λ˜μ—ˆμœΌλ©° 이제 개인 λ³€μˆ˜μ— 밑쀄을 μ‚¬μš©ν•˜μ§€ 말 것을 κΆŒκ³ ν•©λ‹ˆλ‹€.

Avoid prefixing private properties and methods with an underscore.
- Why? Follows conventional thinking for properties and methods.
- Why? JavaScript lacks a true private property or method.
- Why? TypeScript tooling makes it easy to identify private vs. public properties and methods.

λ”°λΌμ„œ 이것은 이 λ¬Έμ œμ—μ„œ μ œμ•ˆλœ 것과 λ°˜λŒ€μž…λ‹ˆλ‹€.

이 문제λ₯Ό 처음 μ½μ—ˆμ„ λ•Œ 차이점을 λ°œκ²¬ν–ˆλ‹€κ³  μƒκ°ν–ˆμ§€λ§Œ μ—…λ°μ΄νŠΈλœ/λ’€μ§‘νžŒ κ·œμΉ™μ€ νƒ€μ΄ν”„μŠ€ν¬λ¦½νŠΈ μ½”λ”© 지침 (이름에 λŒ€ν•œ κ·œμΉ™ nr 6)κ³Ό μΌμΉ˜ν•©λ‹ˆλ‹€.

TypeScript tooling λ…ΌμŸμ΄ John을 ν”λ“€μ—ˆμ„ μˆ˜λ„ μžˆλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. κ·Έκ°€ Gulp에 맀우 λŠ₯μˆ™ν•˜κΈ° λ•Œλ¬Έμ— 디버깅을 μœ„ν•΄ μž‘λ™ν•˜λŠ” .map 파일이 μ—†λŠ” 것은 μ‹€ν–‰ν•  수 μ—†λŠ” 상황일 뿐이며 μ½”λ“œμ—μ„œ 밑쀄을 μ‚¬μš©ν•˜μ—¬ μˆ˜μ •ν•˜λŠ” λŒ€μ‹  직접 ν•΄κ²°ν•΄μ•Ό ν•œλ‹€κ³  κ²°μ •ν–ˆμ„ μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰