이번 미션에서는 json-server를 사용하여 회원가입과 로그인을 구현했어요.
그 과정에서 다양한 고민들이 있었는데 프로로그를 살펴보니 크루들도 비슷한 고민을 하신 흔적들이 보이더라구요!
그럼 살펴볼까요?
성공 시: true
실패 시: 비엄격모드 false / 엄격모드 TypeError, SyntaxError
delete
는 자기 자신의 속성에만 효과가 있어요.
하지만.. 삭제할 속성이 없는 경우에도 true를 반환할 것을 고려해야 하고 예상치 못한 false가 반환될 것에 대비해서 예외 처리를 추가해야 한다.
delete가 깔끔하진 않네요.
const obj = {
'first': 'one',
'second': 'two',
'third': 'three'
}
// 'first'와 'third' 삭제하기
const { first, third, ...exceptBoth } = obj
console.log(exceptBoth) // { 'second': 'two' }
콜백함수는 다른 코드(함수 또는 메서드)에게 인자를 넘겨줌으로써 그 제어권🎮도 함께 위임한 함수입니다.
함수 선언문으로 선언한 콜백 함수
도 함수이기 때문에 기본적으로는 this가 전역객체를 참조합니다.
하지만 제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정
한 경우에는 그 대상을 참조하게 됩니다.
(❗예외적으로 addEventListener
는 event target이 this에 바인딩 됩니다.)
화살표 함수
의 경우에는 바인딩되지 않고 상위 스코프의 this를 가리킵니다.요구사항 기반으로 발생할 수 있는 모든 예외케이스에 대해섯 작성을 합시다. (짤꺼면 제대로!!)
리팩토링 오류 과정에서 오류와 직접적으로 연관된 부분을 테스트 코드를 통해 확인할 수 있어요.
테스트 코드만으로 해당 프로덕트 기능에 대한 이해도를 높일 수 있어요.
🤔🤔 자판기 미션에서 로그인할 때 API에 headers: { 'Content-type': 'application/json' }
를 주지 않으면 동작을 제대로 안했죠. 왜 그럴까요?
❗ 웹에서는 파일의 확장자가 의미가 없어요.
즉, MIME은 다양한 형태의 파일을 전달할 때 파일 변환을 알려주기 위한 일종의 포맷이라고 할 수 있겠습니다.
도메인이 다른 서버끼리 서로 리소스를 주고 받는 것
🛡️ 기본적으로 웹 브라우저는 Same Origin
🎯 CORS
리소스 접근이 허용된 origin(클라이언트)
에 대한 정보를, HTTP 헤더로 추가하여 동작합니다.type Foo {
readonly bar: number;
readonly bas: number;
}
let foo:Foo = { bar:'bar', bas,:'bas' }; // ok
foo.bar = 'bas'; // Error
readonly 타입으로 지정된 객체 속성은, 초기화는 가능하지만 변경이 불가능 합니다. (읽기전용)
const foo = 'bar' as const;
foo는 그저 'bar'일뿐, string타입으로 확장도지 않습니다!
기존 코드
class App {
private productDomain;
private coinDomain;
private productManagementUI;
private coinManagementUI;
private productPurchaseUI;
constructor() {
this.productDomain = new ProductManagementDomain();
this.coinDomain = new CoinManagementDomain();
this.productManagementUI = new ProductManagementUI(this.productDomain);
this.coinManagementUI = new CoinManagementUI(this.coinDomain);
this.productPurchaseUI = new ProductPurchaseUI();
}
}
바뀐 코드
class App {
constructor(
private readonly productDomain = new ProductManagementDomain(),
private readonly coinDomain = new CoinManagementDomain(),
private readonly productManagementUI = new ProductManagementUI(productDomain),
private readonly coinManagementUI = new CoinManagementUI(coinDomain),
private readonly productPurchaseUI = new ProductPurchaseUI()
) {}
}
👆 각 멤버변수에 모두 타입을 준다면 constructor에서 선언과 동시에 초기화를 할 수 있어요.
❓ 그런데 this를 안 써도 괜찮나요?
네! 그렇습니다.
생성자의 파라미터로 접근 제한자가 사용된 경우, 암묵적으로 클래스 프로퍼티로 선언되고 생성자 내부에서 별도의 초기화 과정 없이도 암묵적인 초기화가 수행됩니다.