Type Aliases 타입스크립트로 코드를 작성하다보면 let 동물 :string | number | undefined; 길고 복잡하게 타입을 나열하는 경우가 많아진다. 긴 타입 정의가 보기 싫거나, 나중에 또 사용하는 타입인 경우에는 따로 변수에 담아서 사용할 수 있다. 타입을 변수처럼 만드는 것을 type 키워드를 통해서 가능하다. type 키워드를 사용하는 것을 type alias 라고 한다. type Animal = string | number | undefined; let 동물 :Animal; type 변수명 = 타입 종류 타입을 변수처럼 만드는 alias 문법이다. 일반적으로 타입 변수를 만들때는 대문자로 시작한다. type 키워드는 특징이 있는데, 바로 재정의가 불가능하다. type Nam..

함수에 Union을 사용하면... function 더하기(x: number | string) { // return x + 1; 에러 발생 } x는 숫자 또는 문자이기 때문에 +1을 해도 분명 코드상 문제가 없지만 에러를 발생시킨다. TypeScript는 number 타입 또는 string 타입만 + 연산이 가능한데, 현재 x는 number | string 타입이기 때문에 + 연산이 불가능하여서 에러가 발생한다. 즉, 아직 파라미터의 타입이 확실하지 않기 때문에 파라미터 조작 시 에러가 발생하는 것이다. function 함수(x? :number) :number { // return x + 1 에러 발생 } 또 이런 코드도 타입스크립트에서는 에러가 발생한다. x의 타입이 number 혹은 undefined ..

함수에는 2곳에 타입을 지정할 수 있다. 함수에는 총 두 군데 타입 지정이 가능하다. 1. 함수에 들어오는 자료 ( 파라미터 ) 2. 함수에서 나가는 자료 ( return ) function 함수( props :number) :number { return props * 2 } 파라미터로 받는 타입은 파라미터 옆에 적어주면 된다. 그리고 함수에서 return 되는 자료의 타입을 정해주고 싶으면, 함수명() 옆에 적어주면 된다. 설정을 해주면 파라미터와 리턴 값이 이상하면 에러를 나타낸다. - 파라미터에 타입을 지정하면 필수 파라미터가 된다. void 타입 함수에만 void라는 타입을 사용할 수 있다. ' 아무것도 리턴하지 않는다 ' 를 뜻하는 타입으로 리턴할 자료가 없는 함수의 타입으로 사용한다. func..

문제 설명 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. 제한 사항 1 ≤ numbers의 길이 ≤ 9 0 ≤ numbers의 모든 원소 ≤ 9 numbers의 모든 원소는 서로 다릅니다. 입출력 numbers result [1,2,3,4,6,7,8,0] 14 [5,8,4,0,6,7,9] 6 나의 풀이 const numbers = [1, 2, 3, 4, 6, 7, 8, 0]; function solution(numbers) { var answer = 45; numbers.forEach((element) => { answer = ..

문제 설명 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데,..

슈퍼마켓 구현하기 MobX를 깊게 다루기 위해서 슈퍼마켓을 추상적으로 구현하려고 한다. market 스토어 작성 import { observable, action, computed, makeObservable } from "mobx"; export default class MarketStore { selectedItems = []; constructor() { makeObservable({ selectedItems: observable, put: action, take: action, total: computed, }); } put = (name, price) => { const exists = this.selectedItems.find((item) => item.name === name); if (!e..

1. Singleton 객체의 인스턴스가 오직 1개만 생성되는 패턴이다. 사용하는 이유 최초 한번만 new 연산자를 사용해서 고정된 메모리 영역을 사용하기 때문에 다시 접근할 때 메모리 낭비를 방지할 수 있다. 뿐만 아니라 이미 생성된 인스턴스를 사용하니 속도 측면에서도 이점이 있으며, 서로 다른 클래스간 데이터 공유가 쉬워진다. 싱글톤 인스턴스는 전역으로 사용되는 인스턴스이기 때문에 다른 클래스의 인스턴스들이 접근하여 사용할 수 있다. 하지만 동시에 많은 접근을 하게되면 동시성 문제가 발생할 수 있다. 문제점 당연히 장점만 있는 것이 아닌 단점도 있는다. 1. Singleton 패턴을 구현하는 코드 자체가 많이 필요하다. 2. 테스트가 어렵다. 어플리케이션 전역에서 상태를 공유하기 때문에 테스트를 진행..

카운터 만들기 yarn add mobx mobx-react import React, { Component } from "react"; import { observable, action, makeObservable } from "mobx"; import { observer } from "mobx-react"; class Counter extends Component { number = 0; constructor() { super(); makeObservable(this, { number: observable, increase: action, decrease: action, }); } increase = () => { this.number++; }; decrease = () => { this.number--..