제너릭을 이용해 여러 타입에 대해 동일한 규칙을 갖고 동작하는 타입을 손쉽고 우아하게 정의할 수 있다.

여러 타입에 대해 동작하는 함수를 정의하되, 해당 함수를 정의할 때는 알 수 없고 사용할 때에만 알 수 있는 타입 정보를 사용하고 싶다. 제너리긍ㄴ 바로 그러한 기능을 제공한다.

타입 변수

함수를 호출하는 시점이 되어야만 알 수 있는 값을 함수 내부에서 사용하기 위해서는 그 값을 담아둘 매개변수가 필요하다. 마찬가지로, 요소를 사용하는 시점에서만 알 수 있는 타입을 담아두기 위해서는 타입 변수가 필요하다. 타입변수와 타입 관계는 매개변수와 인자 값의 관계와 비슷하다.

타입 변수는 부등호 (<. >)로 변수명을 감싸 정의한다. 이렇게 정의한 타입 변수를 요소의 타입정의에 사용할 수 있다. 부등호 기호안에 정의된 타입변수의 실제 타입은 실제 값이 넘어오는 시점에 결정된다. 컨벤션 상 타입스크립트의 타입 변수는 대문자로 시작하며 PascalCase 명명법을 사용한다.

제너릭 함수

타입 변수를 이용해 위의 getFirstElem 함수를 다음과 같이 제너릭 함수로 정의할 수 있다.

function getFirstElem<T>(arr: T[]): T{}

출처 : https://ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/generics

자바스크립트 프로그램에서 가장 핵심적인 역할을 차지하는 함수 타입이 타입스크립트에서 어떻게 표현되는 지 다룬다.

함수의 타입

함수의 타입을 결정하기 위해서는 다음 두 가지 정보가 필요하다.

1. 매개변수(parameter)의 타입
2. 반환값(return value)의 타입(반환 타입) 매개 변수의 경우, 변수의 타입을 표기할 때와 마찬가지로 매개변수 뒤에 콜론(:)을 붙이고 타입을 적는다. (param1: number)

반환 타입은 매개변수 목록을 닫는괄호())와 함수 본문을 여는 대괄호({)사이에 콜론을 붙이고 표기한다. function (): number {...}

예를 들어 두 숫자를 받아 그 합을 반환하는 함수는 다음과 같이 타입을 표기한다.

function sum(a: number, b:number): number {
    return (a+b);
}

만약 함수가 아무런 값도 반환하지 않고 종료된다면 반환 타입으로 void를 사용한다.

function logGreetings(name: string): void {
    console.log(`Hello, ${name}!`);
}

void 반환 타입을 갖는 함수가 undefined 나 null 이외의 값을 반환하면 타입 에러가 발생한다. void가 아닌 반환 타입을 갖는 함수가 아무 값도 반환하지 않는 경우도 마찬가지다.

function notReallyVoid(): void {
  return 1;
}
// error TS2322: Type '1' is not assignable to type 'void'.

function actuallyVoid(): number { }
// error TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.

함수 값의 타입 표기

함수 타입의 값에 타입 표기를 붙이기 위해서는 화살표 함수 정의 문법과 비슷한 문법을 사용한다. (...매개변수 나열) => 반환 타입

매개변수가 없는 함수의 경우 매개변수를 생략해 아래와 같이 적는다 () => 반환 타입

const yetAnotherSum: (a: number, b: number) => number = sum;
const onePlusOne: () => number = () =>2;
const arrowSum: (a: number, b:number) => number = (a, b) => (a + b);

기본 매개변수

ES6와 마찬가지로, 타입스크립트에서도 기본 매개 변수 문법을 사용할 수 있다. 이때 기본 값은

매개변수명: 타입 = 기본값

function greetings(name: string = 'stranger'): void {
    console.log(`Hello, ${name}`);
}
greetings('Heejong'); // Hello, Heejong!
greetings();// Hello, stranger!

선택 매개변수

많은 프로그래밍 언어는 함수 정의에 명시된 매개 변수의 수보다 많거나 적은 수의 인자가 들어온 경우 에러를 뱉는다. 한편, 자바스크립트는 더 들어온 인자는 버리고, 덜 들어온 인자는 undefined가 들어온 것과 동일하게 취급한 후 어떻게든 함수를 실행하려 시도한다.

이런 언어의 특성 및 기존 사용 예를 포용하면서 타입 안정성을 확보하기 위해 타입스크립트는 선택 매개변수를 지원한다. 함수의 매개변수 이름 뒤에 물음표 기호를 붙여 해당 매개변수가 생략될 수 있음을 명시한다. 예를들어, optional?: number로 선언된 선택 매개변수 optional를 함수 본문에서 number 타입 값으로 사용하려면 해당 값이 undefined가 아닌지를 먼저 검사해야 한다.

function fetchVideo(url: string, subtitleLanguage?: string) {
  const option = {url};
  if (subtitleLanguage) {
      option.subtitleLanguage = true;
  }
}
fetchVideo('https://example.com', 'ko'); // okay
fetchVideo('https://example.com'); // also okay

이 때 매개변수 정의 순서에서 선택 매개변수 이후에 필수 매개변수를 두는 것은 허용되지 않는다.

이러한 제약이 존재하는 이유는 만약 필수 매개변수가 선택 매개 변수 뒤에 있을시, 인자가 어떤 매개변수의 값인지 구분할 수 없기 때문이다.

함수 오버 로딩

자바스크립트에서는 한 함수가 여러 쌍의 매개변수-반환 타입 쌍을 갖는 경우가 매우 흔하다. 이런 함수의 타입을 정의할 수 있게 하고자 타입스크립트는 함수 오버로딩을 지원한다. 타입스크립트의 함수 오버로딩은 다음과 같은 특징을 갖는다.

1. 함수는 하나 이상의 타입 시그니처를 가질 수 있다.
2. 함수는 단 하나의 구현을 가질 수 있다.

즉, 오버로딩을 통해서 여러 형태의 함수 타입을 정의할 수 있지만, 실제 구현은 한 번만 가능하므로 여러 경우에 대한 분기는 함수 본문내에서 이루어져야 한다.

function doubleString(str: string): string {
    return `${str}${str}`;
}
function doubleNumber(num: number): number {
    return (num * 2);
}
function doubleBooleanArray(arr: boolean[]): boolean[] {
    return arr.concat(arr);
}

위 세 함수를 함수 오버로딩을 사용해서 하나의 double이라는 함수로 합쳐보자.

function double(arg) {
    if (typeof arg === 'string') {
        return `${str}${str}`;
    } else if (typeof arg === 'number') {
        return arg * 2;
    } else if (Array.isArray(arr)) {
        return arg.concat(arg);
    }
}

이렇게 오버로딩을 통해 정의된 double 함수는 호출되는 인자의 타입에 따라 반환타입이 달라진다.

This 타입

자바스크립트 함수 내부에서의 this 값은 함수가 정의되는 시점이 아닌 실행되는 시점에 결정된다. 이런 특성은 함수 내부에서 this의 타입을 추론하는 일을 매우 어렵게 만든다. 타입스크립트는 이런 어려움을 해결하기 위해 함수 내에서의 this 타입을 명시할 수 있는 수단을 제공한다.

함수의 this 타입을 명시하기 위해선 함수의 타입 시그니쳐에서 매개변수 가장 앞에 this를 추가해야 한다. 이 때 this 타입은 타입 시스템을 위해서만 존재하는 일종의 가짜 타입이다. 즉, this 매개변수를 추가한다고 해도 함수가 받는 인자수와 같은 실제 동작은 변하지 않는다.

출처 : https://ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/function

타입 별칭(type alias)을 이용해 이미 존재하는 타입에 다른 이름을 붙여 복잡한 타입을 간단하게 쓸 수 있다. 또한, 프로그래머의 의도를 보다 명확하게 나타낼 수 있다.

타입 별칭 정의

type NewType = Type;

별칭을 갖게 될 타입(위에서는 Type)의 자리엔 기본 타입을 포함한 모든 타입이 올 수 있다.

type UUID = string;
type Height = number;
type AnotherUUID = UUID;
type Animals = Animal[];
type User = {
    name: string;
      height: number;
};

이 때 별칭은 단순히 새로운 이름을 붙일 뿐이고, 실제로 새로운 타입이 생성되는 것은 아니라는 점에 유의해야한다. 예를 들어 아래와 같은 코드의 에러메시지에는 UUID 대신 string이 사용된다.

type UUID = string;
function getUser(uuid: UUID) {
    /*함수본문*/
}
getUser(7); // error TS2345: Argument of type '7' is not assignable to parameter of type 'string'.

출처 : https://ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/type-alias

자바스크립트에서 가장 일반적이고 널리 사용되는 자료 구조인 객체의 타입에 대해 다룬다.

객체 타입

자바스크립트의 오브젝트 리터럴을 정의하듯 중괄호({})를 이용해 객체 타입(object type)을 표현할 수 있다.

const user: {name: string, height: number;} = {name: '안희종', height: 176};

이 때 객체 타입 정의는 오브젝트 리터럴과 다음과 같은 차이점을 갖는다.

• 콜론의 우변에는 값 대신 해당 속성의 타입이 들어간다.
• 구분자로 콤마, 뿐만 아니라 세미콜론을 ; 사용할 수 있다.

선택 속성

함수의 선택 매개변수와 비슷하게 속성명 뒤에 물음표? 를 붙여 해당 속성이 존재하지 않을 수도 있을 표현할 수 있다.

const userWithUnknownHeight: {name: string; height?: number;} = { name: '김수한무'};

읽기 전용 속성

속성명 앞에 readonly 키워드를 붙여 해당 속성의 재할당을 막을 수 있다. readonly키워드가 붙은 속성은 const 키워드를 이용한 변수의 정의와 비슷하게 동작한다.

const user: {
    readonly name: string;
      height: number;
} = { name: '안희종', height: 176};
user.name = '종희안';// error TS2540: Cannot assign to 'name' because it is a constant or a read-only property.

출처 : https://ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/object

순서가 있는 원소의 모음(collection)을 나타내는 가장 간단하면서도 유용한 자료구조인 배열, 그리고 그 사촌 튜플을 나타내는 타입에 대해 다룬다.

배열

배열 타입은 자바스크립트 Array 값의 타입을 나타내는데 쓰인다. 원소 타입뒤에 대괄호([])를 붙여 표현한다.

const pibonacci: number[] = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const myFavoriteBeers: string[] = ['Imperial Stout', 'India Pale Ale', 'Weizenbock'];

배열 타입을 표현하는 또다른 방식이 있다.

const pibonacci: Array<number> = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const myFavoriteBeers: Array<string> = ['Imperial Stout', 'India Pale Ale', 'Weizenbock'];

튜플

튜플 타입을 이용해 원소의 수와 각 원소의 타입이 정확히 지정된 배열의 타입을 정의할 수 있다.

const nameAndHeight: [string, number] = ['안희종', 176];

튜플 타입 변수는 정확히 명시된 개수 만큼의 원소만을 가질 수 있다. 만약 타입 정의보다 더 많은 혹은 더 적은 원소를 갖는 배열을 할당한다면 에러를 낸다. 다만 튜플 타입의 값을 Array 프로토 타입의 메소드를 통해 조작하는 것은 금지되지 않았다는 점에 유의해야 한다. 예를 들어 아래와 같은 코드는 에러를 내지 않는다.

const validNameAndHeight: [string, number] = ['안희종', 176];
validNameAndHeight.push(42);

출처 : https://ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/object

타입 표기(Type Annotation)

타입스크립트 코드에서 어떤 변수 또는 값의 타입을 표기하기 위해 타입 표기를 사용한다. 타입 표기는 식별자 또는 값 뒤에 콜론(:)을 붙여 value: type의 형태로 표기한다.

const areYouCool: boolean = true;
const answer: number = 42;
const typescript: string = "great";
const greetings: string = `
    Hello, Readers!
    Welcome to TypeScript.
`;
const hasType: Object = {
    TypeScript: true,
      JavaScript: false
};

예제 코드의 실행 환경

앞서 언급했듯, 기본 코드 베이스 이식의 용이성은 타입스크립트의 언어 디자인의 큰 목표 중 하나다. 그 목표를 달성하기 위한 핵심 장치가 바로 점진적 타이핑이다.

점진적 타이핑이란 말 그대로 점진적으로 타입 안정성을 키워가는 것을 허용하는 타입 시스템이다. 일단 프로그램의 일부에만 정적 타입 검사를 시행하고 나머지 부분은 추후 타입 정보를 추가하는 식의 접근이 가능한 것이다.

특별히 따로 언급하지 않는 한, 내가 보고 있는 책은 모든 예제 코드에서 --strict 컴파일러 플래그가 켜진 환경을 가정한다고 한다. 현재로서는 이 플래그가 켜진 환경에서 상대적으로 엄격한 타입 검사가 수행된다는 것을 인지하는 정보로 충분하다.

타입스크립트는 타입추론을 지원한다. 즉, 프로그래머가 명시적으로 타입 정보를 적지 않아도 컴파일러가 이미 알고 있는 정보와 주변 맥락을 기반으로 타입을 추론할 수 있다. 하지만 본 책의 예제 코드는 타입 추론에 최소한도로만 의존한다. 즉 추론할 수 있는 타입 정보도 명시적으로 적어주는 것을 선호한다.

3.1 기본타입

불리언

자바스크립트의 boolean에 대응하는 참 또는 거짓을 나타내는 타입이다.

const isTypeScriptAwesome: boolean = true;
const doesJavaScriptHasTypes: boolean = false;

숫자

숫자를 나타내는 타입이다. 자바스크립트에서는 정수, 부동 소수점 등의 구분이 따로 없고 무든 수가 IEEE754 표준을 따르는 부동소수점이고, 타입스크립트의 number 타입도 마찬가지다.

const yourScore: number = 100;
const ieee754IsAwesome: number = 0.1 + 0.2; // 0.30000000004

문자열

문자열을 나타내는 타입이다. ES6 템플릿 리터럴 역시 string 타입의 값이다.

const authorName: string = '안희종';
const toReaders: string = `
책을 읽어주셔서 감사합니다.
`;

null/undefined

null타입과 undefined 타입은 각각 null과 undefined라는 하나의 값만을 갖는다. 이 두 값을 자기 자신의 타입, 그리고 아래에서 언급될 void 타입 이외의 타입에 할당하려 하면 타입 에러가 발생한다.

const nullValue: null = null;
const undefinedValue: undefined = undefined;
const numberValue: number = null; // TS2322: Type 'null' is not assignable to type 'number'

특별한 타입

자바스크립트에서 직접적으로 대응되는 값은 없지만 타입스크립트가 제공하는 특수한 타입이 몇 가지 있다.

any

any 타입은 모든 타입과 호환 가능하다. 즉, 모든 값의 타입을 any로 지정할 수 있고, any 타입의 변수에는 모든 값을 할당할 수 있다.

let bool: any = true;
bool = 3;
bool = 'whatEver';
bool = {};

any 타입은 타입스크립트 타입 시스템의 비상 탈출구 역할이다. any는 타입 정의를 제공하지 않는 라이브러리, 일단 무시하고 넘어가고 이후에 정확히 적고 싶은 부분 또는 코드 작성 시점에 형태를 알 수 없는 값 등의 타입 표기에 유용하다. 하지만 any를 남용하면 타입 안정성에 구멍이 뚫린 코드가 되어 타입스크립트를 사용하는 의의가 사라지므로 꼭 필요한 경우에만 사용해야 한다.

void

void는 null과 undefined 만을 값으로 가질 수 있는 타입이다. 아무런 값도 반환하지 않는 함수의 반환 타입을 표시할 때 사용한다.

function nothing(): void {}

never

never는 아무런 값도 가질 수 없는 타입이다. 아무런 값도 가질 수 없는 타입은 과연 어떤 쓸모가 있을까?

function alwaysThrow(): ??? {
    throw new Error(`I'm a wicked function!`);
}

의미상으로 never 타입은 절대 존재할 수 없는 값을 암시한다. 따라서 never 타입의 변수에는 null, undefined를 포함해 어떤 값도 할당할 수 없다. 위의 alwaysThrow 함수는 항상 에러를 throw하므로 어떤 값도 반환하지 않는다. 이 때, 이런 함수의 반환 타입을 never 타입을 사용해 나타낼 수 있다.

function alwaysThrow(): never {
  throw new Error(`I'm a wicked function!`);
}

출처 :https://ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/primitive-types

타입이 있는 자바스크립트

정확히 타입스크립트는 정적 타입 시스템(static type system)을 도입한 자바스크립트 정적 타입 시스템이 있는 언어, 즉 정적 타입 언어에서는 프로그램의 예상 동작을 타입을 통해 나타내고, 그 예상에 걸맞게 동작할 지의 여부를 타입 검사기를 통해 실행 전에 확인할 수 있다. (함수의 인자나 리턴값등이 만족해야할 특정 조건에 대한 정보를 추가적으로 담고 있다는 의미)

자바스크립트의 상위집합

타입스크립트는 현존하는 자바스크립트의 문제를 풀기 위해 등장했고, 그 수단으로 정적타입분석을 내세웠다. 그렇다면 정적타입분석은 무엇이며, 어떤 장점을 제공할까? 정적 타입 분석을 제공하는 여러 대체재 중 타입스크립트를 사용해야 하는 이유는 무엇일까? 또 타입스크립트는 어떤 요소들로 구성되어 있으며, 어떤 역사를 가질까?

정적타입분석

타입은 프로그램의 '올바른 동작'이 무엇인지에 대한 프로그래머의 의도를 인코딩하는 수단이다. 프로그램의 타입을 분석하는 방식을 기준으로 프로그래밍 언어를 크게 둘로 나눌 수 있다. 바로 프로그램이 실제로 실행될 때에 타입분석을 진행하는 동적 타입언어와 프로그램을 실행해보지 않고도 런타임 이전에 진행하는 정적 타입 언어다.

정적 타입 분석이 제시하는 장점은 시스템의 평균적인 복잡도가 늘어남에 따라 빛나기 시작한다.

보다 빠른 버그 발견

정적 타입 시스템은 프로그램이 실제로 실행되기 전에 상당수의 오류를 잡아낼 수 있다.

툴링

소스 코드에 대한 정적 타입 분석이 가능하다면 컴파일러 및 코드 에디터가 코드를 실행하지 않고도 프로그램에 대해 훨씬 더 많은 정보를 알 수 있다. 그리고 이 정보는 코드 작성 과정에서 유용하게 사용 가능하다. 대표적인 예시가 바로 에디터의 자동완성 기능이다. 만약 타입 시스템이 어떤 변수의 타입 정보를 정확히 안다면, 해당 변수의 멤버로 존재할 수 있는 변수만을 자동완성후보로 추천할 수 있다.

주석으로서의 타입

마지막으로 타입은 프로그래머의 의도를 기술하는 주석과 같은 역할을 한다. 타입 검사기에 의해 검사 및 강제되므로 프로그램의 동작과 일정 수준 이상 괴리될수 없기 때문이다.

자바스크립트와 정적 타입 분석

왜 타입스크립트인가

자바스크립트의 상위집합

타입스크립트는 시작부터 수많은 기존 코드 베이스와 생태계의 포용을 큰 우선순위로 두었다. 모든 자바스크립트 코드는 타입스크립트 코드다. 때문에 타입스크립트 컴파일러는 확장자만 바꾸면, 심지어는 확장자를 바꾸지 않고도 자바스크립트 코드를 이해한다. 뿐만 아니라 타입스크립트는 최신ECMAScript 표준 및 여러 유용한 프러포절들을 지원한다.

• 기존 자바스크립트 코드베이스의 마이그레이션에 드는 노력이 적다.
• 완만한 학습 곡선을 가지며 그 덕에 구인 또한 쉬워진다.
• 서드파티 자바스크립트 패키지의 사용이 상대적으로 수월하다.

  트레이드 오프

  (잘 이해 못함)

타입스크립트의 구성요소

언어 명세

타입스크립트의 언어 명세는 .ts(또는 .tsx) 확장자를 갖는 타입스크립트 코드가 어떤 의미를 갖는지에 대한 약속이다. 프로그래머들이 코드를 보고 동일한 예측을 할 수 있는 이유는 코드가 어떤 의미를 갖고 어떻게 동작해야하는지를 정확히 기술해 둔 문서, 즉 언어 명세가 존재하기 때문이다.

컴파일러

타입스크립트 컴파일러는 타입스크립트 코드를 입력으로 받아, 명세에 맞게 해석한 후 대응되는 자바스크립트 코드를 출력으로 내뱉는다. 컴파일러는 많은 부분의 합으로 이루어진 복잡한 프로그램이다. 대표적인 부품으론 코드를 읽고 구문을 해석하는 파서(parser), 타입 정보에 모순이 없는지 검사하는 타입 검사기(type checker), 그리고 브라우저가 실행 가능한 자바스크립트 파일을 뱉어 내는 에미터(emitter)등이 있다.

생테계

출처 : https://ahnheejong.gitbook.io/ts-for-jsdev/01-introducing-typescript/intro

객체형은 이러한 원시형과 달리 다양한 데이터를 담을 수 있다. 객체는 중괄호 {...}를 이용해 만들 수 있다. 중괄호 안에는 '키:값'쌍으로 구성된 프로퍼티를 여러개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용된다. 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있다.

let user = new Object(); // 객체 생성자 문법
let user= {}; // 객체 리터럴 문법

중괄호를 이용해 객체를 선언하는 것을 객체 리터럴(object literal)이라 부른다. 객체를 선언할 땐 주로 이 방법을 사용한다.

리터럴과 프로퍼티

중괄호 {...}안에는 '키:값'쌍으로 구성된 프로퍼티가 들어간다. 프로퍼티 키는 프로퍼티 '이름' 혹은 '식별자'라고도 부른다. 개발자는 프로퍼티를 추가, 삭제할 수 있다. 점 표기법을 이용하면 프로퍼티 값을 읽는 것도 가능하다.

alert(user.name);
alert(user.age);

delete 연산자를 사용하면 프로퍼티를 삭제할 수 도 있따.

delete user.age;

여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 프로퍼티 이름을 따옴표로 묶어줘야 한다.

let user = {
    name:'John',
      age:30,
      "like birds": true,// 복수의 단어는 따옴표로 묶어야 한다.
}

마지막 프로퍼티 끝은 위와 같이 쉼표로 끝날 수 있다. 이런 쉼표를 trailing 혹은 hanging 쉼표라고 부른다. 이렇게 끝에 쉼표를 붙이면 모든 프로퍼티가 유사한 형태를 보이기 때문에 프로퍼티를 추가, 삭제, 이동하는게 쉬워진다.

상수 객체는 수정될 수 있다.

const 로 선언된 객체는 수정될 수 있다.

const user = {
    name:"John"
}
user.name = "Pete";//(*)

(*)로 표시한 줄에서 오류를 일으키는 것처럼 보일 수 있지만 그렇지 않다. const는 user의 값을 고정하지만 그 내용은 고정하지 않는다. const는 user = ... 를 전체적으로 설정하려고 할 때만 오류가 발생한다.

대괄호 표기법

여러 단어를 조합해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없다. user.like birdes = true // 에러발생 '점'은 키가 유효한 변수 식별자인 경우에만 사용할 수 있다. 유효한 변수 식별자엔 공백이 없어야 한다. 또한 숫자로 시작하지 않아야 하며 $와 _를 제외한 특수문자가 없어야 한다.

키가 유효한 변수 식별자가 아닌 경우엔 점 표기법 대신에 대괄호표기법이라 불리는 방법을 사용할 수 있다. 대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작한다. 대괄호 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어줘야 한다는 점에 주의해야 한다. 대괄호 표기법을 사용하면 아래 예시에서 변수를 키로 사용한 것과 같이 문자열 뿐만 아니라 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있다.

let key = "likes birds";

user[key] = true;

변수 key는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있다. 어떤 경우든, 평가가 끝난 이후의 결과가 프로퍼티 키로 사용된다. 이를 응용하면 코드를 유연하게 작성할 수 있다.

let user = {
    name:"John",
      age:30,
};

let key = prompt("사용자의 어떤 정보를 얻고 싶나요?", "name");
//변수로 접근
alert(user[key])

그런데 점 표기법은 이런 방식이 불가능하다.

계산된 프로퍼티

객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우 이를 계산된 프로퍼티라고 부른다.

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

let bag = {
  [fruit]:5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아온다.
}
alert(bag.apple);// fruit에 "apple"이 할당되었다면, 5가 출력된다.

위 예시에서 [fruit]는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미한다.

출처 : https://ko.javascript.info/object

• 자바스크립트의 동작방식과 관련된 개념.

• 자바스크립트는 코드가 작성된 순서대로 작업을 처리한다.

• 이전 작업이 진행중일 때는 다음 작업을 수행하지 않고 기다린다. 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. 이를 동기 방식의 처리라고 한다.

• 스레드에서 작업하나가 수행되고 있을 때 다른 작업을 동시에 할 수 없는 방식을 블로킹 방식이라고 한다.

• 수행 되어야 하는 작업들이 너무 오래걸리게 될 시 모든 작업이 오래 걸리는 하나의 작업이 종료되기 전 까지 올 스탑되기 때문에 전반적인 흐름이 느려진다.

• 이것이 동기처리 방식의 문제점이다.

• 이를 해결하기 위해 코드를 실행하는 일꾼인 Thread를 여러 개 사용하는 방식인 'MultiThread'방식으로 작동시키면 작업의 분할이 가능하긴 하다. 그러나 자바스크립트는 싱글 스레드로 동작한다. 즉 멀티스레드처럼 일꾼을 여러 개 사용하는 방법을 사용할 수 없다는 것이다.

• 싱글 스레드 방식을 이용하면서 동기적 작업의 단점을 극복하기 위해 여러개의 작업을 동시에 실행시키는 방식을 비동기 작업이라고 한다. 즉, 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행하는 것이다. 비동기처리를 할때는 콜백함수를 붙여 그 비동기처리의 결과값을 확인한다.

function taskA() {
  console.log("A 끝")
}

taskA();
console.log("코드 끝");
// 'A 끝' 
// '코드 끝'이 출력된다.

function taskA(a, b, cb) {
  setTimeout(() => {
      const res = a+b;
    cb(res);
  }, 3000);
}

taskA(3, 4, (res) => {
  console.log("A TASK RESULT :", res);
});
console.log("코드 끝");
// 코드 끝
// A TASK RESULT:7,
// 순으로 출력된다.

JS 엔진은 어떻게 동기적인 코드와 비동기적인 코드를 구분해서 작업할까

• js 작성한 코드는 웹 브라우저에 탑재된 js 엔진에 의해 해석되고 실행된다.

• js 엔진은 Heap과 Call Stack으로 구성되어 있다.

• Heap은 변수나 상수들의 메모리를 저장하는 영역이다.

• Call Stack은 코드의 실행에 따라 호출 스택을 쌓는 영역이다.

• js 엔진은 비동기처리할 setTimeout 함수는 webAPIs로 넘겨버린다. (Call stack에 쌓이지 않는다)

let arr = ["one", "two", "three"];

let one = arr[0];
let two = arr[1];
let three = arr[2];

변수 세개에 각각 할당하려고하니 arr[0]식을 세 번 반복해야 한다. 이를 아래와 같이 표현할수도 있다.

let arr = ["one", "two", "three"];

let [one, two, three] = arr;

arr의 배열의 값들이 one, two, three에 할당된다. 이런식으로 표현하는 것을 배열의 비구조화할당이라 한다.

let arr = ["one", "two", "three"];

let [one, two, three, four='four'] = arr;
// 기본값을 설정할 수도 있다.

let a = 10;
let b = 20;
let tmp = 0;
tmp = a;
a = b;
b = tmp;
console.log(a, b);

를 비구조화할당으로 다음과 같이 표현할 수 있다.

let a = 10;
let b = 20;

[a, b] = [b, a]
console.log(a, b) // 스왑된걸 확인할 수 있다.

객체의 비구조화 할당

let object = {one:"one", two: "two", three:"three"};

let one = object.one
let two = object.two
let three= object.three

각각의 프로퍼티를 할당하기 위해 점 표기접이나 괄호 표기법을 사용하면된다. 객체의 비구조화할당을 통해 이를 좀 더 쉽게 표현할 수 있다.

let object = {one:"one", two: "two", three:"three"};

let {one, two, three} = object;
// 객체의 경우 순서가 아닌 키 값을 기준으로 비구조화할당이 이루어진다.
console.log(one, two, three);// one two three가 출력된다.

키 값을 기준으로 제약되어 보이지만 다음처럼 변수명을 바꿔서 받아올 수도 있다.

let object = {one:"one", two: "two", three:"three"};

let {three:three_val, one, two} = object;
console.log(one, two, three_val); // one two three가 출력된다.

객체또한 배열과 마찬가지로 기본값을 설정할 수 있다.

// 전달받은 인자가 한식 종류에 해당하는지 확인하는 프로그램
function isKoreanFood(food) {
  if(food === '불고기'|| food === "비빔밥" || food === "떡볶이") {
      return true'
  }
  return false;
}

const food1 = isKoreanFood("불고기");
console.log(food1); // true가 출력된다.

const food2 = isKoreanFood("파스타");
console.log(food2); // false가 출력된다.

위 함수 식을 아래와 같이 간결히 표현할 수 있다.

function isKoreanFood(food) {
  if (["불고기", "떡볶이", "비빔밥"].includes(food)) {
    return true;
  }
  return false;
}

이제 음식분류에따라 메뉴를 추천하는 프로그램을 만들자.

const getMeal = (mealType) => {
  if(mealType === '한식') return "불고기";
  if(mealType === "양식") return "파스타";
  if(mealType === '중식') return "멘보샤";
  if(mealType === "일식") return "초밥";
  return "굶어";
}

console.log(getMeal("한식")); // 불고기가 출력된다.
console.log(getMeal()); //굶어가 출력된다.

괄호표기법을 통해 위 함수를 더 간결하게 표현할 수 있다.

const meal = {
  한식: "불고기",
  중식: "멘보샤",
  일식: "초밥",
  양식: "스테이크",
  인도식: "카레"
}

const getMeal = (mealType) => {
  return meal(mealType) || "굶어"ㅣ
}

console.log(getMeal("한식")); // 불고기가 출력된다.
console.log(getMeal()); //굶어가 출력된다.

단락회로 평가는 왼쪽에서 오른쪽으로 진행되는 논리연산의 순서를 이용한 문법이다.

console.log(false && true);
// 첫번째 요소가 false이면 뒤에는 볼 필요없이 false를 반환한다.
console.log(true || false);
// 앞에 값이 true이면 뒤에는 볼 필요없이 true가 반환된다.

const getName = (person) => {
  if (!person) {
    return "객체가아닙니다";
  }
  return person.name;
}

let person;
const name = getName(person);
console.log(name);

위의 식을 단락회로 평가를 이용해 더 간단히 표현할 수 있다.

const getName = (person) => {
  return person && person.name;
}

let person;
const name = getName(person);
console.log(name);

위의 getName 함수에서 person은 undefined이기 때문에 person.name에 접근하지 않고 리턴값이 반환된다.

const getName = (person) => {
  const name = person && person.name;
  return name || "객체가 아닙니다";
};

let person = null;
const name = getName(person);
console.log(name);
// 객체가 아닙니다가 출력된다.

let person2 = {name:"옥수수"};
const name2 = getName(person2);
console.log(name2);
// 옥수수가 출력된다.

let a = ''; // False 출력
let b = "string"; // True 출력

if(a) {
    console.log("True");
} else {
    console.log("False");
}

• 자바스크립트에서는 boolean 값을 넣지 않아도 참이나 거짓으로 인식되는 속성이 있다.

• 빈 배열은 True로 undefined는 false로 인식한다.

• 빈배열, "0", Infinity을 할당한 다음 조건식에 넣게되면 True로 평가한다.

• 이렇게 True가 아니여도 참으로 분류하는 자바스크립트의 값들을 Truthy라고 부른다.

• 반면, 변수에 아무 값도 할당하지 않은상태(let a;), undefined, 숫자 0, -0, NaN,""은 False에 해당한다.

const getName = (person) => {
  return person.name;
};

let person = {name: "옥수수"};
const name = getName(person);
console.log(name); // 옥수수가 출력된다.

예외처리를 다음과 같이 해주어야 객체가 아닌 경우를 걸러내 줄 수 있다.

const getName = (person) => {
    if (!person) { // false에 NOT을 붙이면 true가 되는 속성을 이용.
        return "객체가 아니다";
    }
  return person.name;
}

• 웹을 개발하는 3가지 언어 중 하나인 자바스크립트
• 웹 사이트를 실질적으로 동작하게 하는 언어

자바스크립트가 실행되는 곳

• 웹 브라우저에 내장한 자바스크립트 엔진이 자바스크립트 실행한다.

변수와 상수

• 변수 프로그램이 실행되는 도중에 계속해서 변하는 값 let이라는 키워드 사용 변수명에는 기호를 사용할 수 없다(언더스코어, $ 제외) 변수명은 숫자가 아닌 문자로 시작해야 한다. 변수명은 예약어를 사용할 수 없다.

• var 키워드 변수를 중복해서 선언할 수 있다.

• let 키워드 변수를 중복해서 선언할 수 없다.

• 상수 프로그램이 실행되는 도중에 변하지 않는 값이다. const 라는 키워드를 통해 선언할 수 있다.

• 상수와 변수의 차이 변수와 달리 상수의 경우 값을 바꾸려고 하면 에러가 발생한다. 상수는 오직 선언 이후에 값을 절대 바꿀 수 없기 때문이다. 상수는 선언과 동시에 할당되지 않으면 에러가 발생한다.

자료형과 형변환

자료형이란 값을 그 성질에 따라 분류한 것이다. 자바스크립트에서는 값을 크게 Primitive Data Type(원시타입), Non-Primitive Data Type(비원시타입)으로, 작게 보았을때 Number, String, Boolean, Undefined, Null 그리고 Object, Array, Function으로 분류할 수 있다.

• Primitive Data Type원시타입 내장형 타입또는 기본형 타입이라고 부를 수 있다. 한번에 하나의 값만 가질 수 있다. 하나의 고정된 저장공간을 이용하는 것을 원시타입이라고 부를 수 있다.

1. 숫자형 Number
2. 문자형 템플릿 리터럴 : 백틱안에 &{변수}를 담는 문법
3. 불린형 참이나 거짓만을 저장하는 자료형
4. Null 의도적으로 해당 값이 아무것도 가리키지 않았음을 뜻할 때 사용한다.
5. Undefined 아무런 값을 할당하지 않으면 자동적으로 Undefined가 출력된다.

• 형변환 형변환을 통해 값은 유지하면서 자료형을 변경할 수 있다. 형변환에는 묵시적 형변환과 명시적 형변환이 있다.

• 비원시타입 한번에 여러 개의 값을 가질 수 있다. 여러 개의 고정되지 않은 동적 공간을 사용한다.

함수표현식 & 화살표함수

let hello = function () {
    return "안녕하세요";    
}

console.log(hello) // 함수가 리턴된다.

const helloText = hello();
cocnsole.log(helloText); // "안녕하세요"가 출력된다.

위와 같이 함수를 변수에 담아서 사용하는 방식을 함수표현식이라고 한다.

function helloFn() {
    return "함수선언식"
}

• 함수표현식과 함수선언식의 차이를 서술하시오. 함수선언식으로 만들어진 함수는 코드 실행 전 코드 최상단으로 올려진다(호이스팅이 일어난다) 함수표현식은 호이스팅이 일어나지 않는다.

화살표 함수

let helloA = () => {
    return "안녕하세요"
}

화살표 함수 또한 호이스팅의 대상이 아니므로 순서를 지켜서 코드를 작성해야 한다.

콜백함수

어떤 다른 함수의 매개변수로 함수를 넘겨준 것이 콜백함수다.

function checkMood(mood, goodCallback, badCallback) {
  if(mood === 'good') {
    // 기분 좋을 때 하는 동작
    goodCallback()
  } else {
    // 기분 안 좋을 때 하는 동작
    badCallback()
  }
}

function cry() {
    console.log("Action::CRY");
}
function sing() {
    console.log("Action::Sing");
}
function dance() {
    console.log("Action::Dance");
}

checkMood("good", sing, cry);

객체

• 자바스크립트의 자료 형 중 비원시타입(Non-Primitive Type)에 해당
• 비원시타입은 한 번에 여러 개의 값을 가질 수 있으며 여러 개의 고정되지 않은 동적 공간을 사용할 수 있다.
• 객체 생성자를 이용하여 객체를 생성할 수 있다. Object 키워드를 사용한다.
• 중괄호를 통해 객체를 생성할 수 있으며 이를 객체 리터럴 방식이라고 한다.

  let person1 = new Object;
  let person2 = {}; // 객체 리터럴 방식

  let person = {
    key: "value"; 
  }; // 키-벨류 쌍으로 저장되는 데이터를 프로퍼티라고 부른다.
  

객체 생성 이후 프로퍼티 수정, 삭제하기
```javascript

let person = {
  name : "이정환",
  age: 25
}

person.location = "한국" // 프로퍼티 추가, 점 표기법을 이용한 프로퍼티 추가
person["gener"] = "남성" // 프로퍼티 추가, 괄호 표기법을 이용한 프로퍼티 추가

person.name = "이정환 A" // 프로퍼티 수정
person["age"] = 40; // 프로퍼티 수정

delete person.age; // 프로퍼티 삭제
delete person["name"]; // 프로퍼티 삭제
// 위 방법보다
person.name = null; // 기존의 값을 메모리에서 날릴 수 있다. 이런 방식의 삭제를 권장한다고 한다..

배열(Array)

• 비원시 자료형에 해당한다.
• Array 키워드를 사용하여 생성한다.

  let arr1 = new Array() // Array 키워드를 사용한 배열 생성
  let arr2 = []; // 배열 리터럴, 대괄호를 사용한 배열 생성
  

let arr3 = [1, 2, 3, 4, 5]; // 배열의 값으로 여러가지의 자료형을 가져도 무방하다.

console.log(arr[0]); // 배열의 값에 접근, 인덱스를 이용한 접근

arr.push(6); // 배열 값 추가. 가장 마지막에 원소를 추가한다.

console.log(arr.length); // 배열의 길이 확인

---
## 반복문
- 반복문을 통해 특정 명령을 반복해서 수행할 수 있다.
- 배열 순회에 유용하다( 배열 내 모든 값에 한 번씩 접근할 수 있다)
```javascript
for (let i=1;i<=100;i++) {
  console.log("반복되는 문구");
}// for 반복문, (초기식/조건식/연산식)

const arr = ["a", "b", "c"];
for (let i=0;i<arr.length;i++) {
  console.log(arr[i]);
}

// 객체 순회하기
let person = {
  name: "옥수수",
  age:25,
  tall:180
};

const personKeys = Object.keys(person); // object의 key를 배열로 반환받을 수 있다.
const personValues = Object.values(person); // object의 value를 배열로 반환받을 수 있다.

for(let i=0; i<personKeys.length;i++) {
  const curKey = personKeys[i];
  const curValue = person[curKey];
  console.log(`${curKey}: ${curValue}`)
};

배열 내장 함수

const arr = [1, 2, 3, 4];

for(let i=0;i<arr.length;i++){
    console.log(arr[i]);
}

// 위 for문을 통해 배열을 순회할 수도 있지만 아래와 같이 내장함수를 사용하여 순회할 수 있다.
arr.forEach((element) => console.log(element));

const newArr = arr.map((elm) => {
    return elm * 2;
}); // 원본 배열의 모든 값을 순회하며 새로운 배열을 반환한다.

let number = 3;
arr.forEach((elm) => {
  if(elm === number) {
      console.log(true);
  }
});
console.log(arr.includes(number)); // includes 주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는 지 확인한다.

console.log(arr.indexOf(number)); //주어진 배열에서 전달하는 인자와 일치하는 값의 인덱스를 반환한다. 없을 경우 -1을 반환한다.

const arr = [
  {color: "red"},
  {color: "black"},
  {color: "blue"},
  {color: "green"}
]

let number = 3;

console.log(arr.findIndex((elm) => {
    elm.color === "green"
})); // 콜백함수를 전달하여 true를 반환하는 첫번째 배열의 인덱스를 반환한다.

const arr = [
  {num:1, color: "red"},
  {num:2, color: "black"},
  {num:3, color: "blue"},
  {num:4, color: "green"},
  {num:5, color: "blue"}
];

// 배열 필터링, color가 blue인 요소만 필터링하기
console.log(arr.filter((elm) => elm.color === "blue"));
//filter 메서드는 전달하는 요소의 반환값이 true인 모든 요소를 반환한다.

// 배열 슬라이싱
console.log(arr.slice(0,2));

// 배열 합치기
const arr1 = [
  {num:1, color: "red"},
  {num:2, color: "black"},
  {num:3, color: "blue"}
];
const arr2 = [
  {num:1, color: "red"},
  {num:2, color: "black"},
  {num:3, color: "blue"},
  {num:4, color: "green"},
  {num:5, color: "blue"}
];
console.log(arr1.concat(arr2));

// 배열 정렬
let chars = ['나', '다', '가'];
console.log(chars.sort()); // 사전순으로 정렬된다. 원본 배열을 정렬한다.

let numbers = [0, 3, 2, 1,10, 30, 20];

numbers.sort();
console.log(numbers); // 이상한 모습으로 정렬되어있을 것. sort는 숫자기준이 아니라 문자기준으로 정렬하기 떄문이다.
//따라서 다음과 같이 비교함수를 만들어야 한다.
const compare = (a, b) => {
  //1. 같다
  //2. 크다
  //3. 작다

  if(a > b) {
      return 1;
  }

  if(a < b) {
      return -1;
  }

  //같다
  return 0;
}

numbers.sort(compare);
console.log(numbers);

에너지 저장 솔루션 소개로 새로운 에너지 사업 모델 제시

1. 2016, 에너지 저장 시스템 사업의 시작 Q SELLS은 Q.HOME 에너지 저장 솔루션을 선보이며, 태양광 모듈부터 인버터, 주거용 에너지 저장 장치까지 통합하는 토탈 에너지 솔루션을 제공하기 시작했다.

2. 2018, 첫 "태양광 시스템 계약"성사 새로운 비즈니스 모델인 "태양광 시스템 계약"은 중소기업 또는 주거용 건물 소유주가 저 비용으로 태양광 발전을 받을 수 있게 한다. 첫번째로 계약한 프로젝트는 Q SELLS 9.9kWP의 태양광 시스템을 공급하는 곳에서 ISM Energy(설치 파트너)와 Stadwerke Bitterfeld-Wolfen(계약 파트너)가 협력하여 진행되었습니다.

에너지 사업의 시작

Q CEELS은 토탈 에너지 솔루션을 제공하기 위해 지속적으로 사업을 확장하고 있습니다.

1. 2019, 전력 소매 사업 개시

• 토탈 에너지 솔루션 기업이 되기 위한 사업 전략에 따라 태양 에너지 전력 소매 사업인 Q.ENERGY를 출범했습니다. 다른 지역으로 전송 및 분배되는 전력을 일반 주택에 판매하는 것은 지금까지도 독일에서는 활발한 사업 중 하나입니다.

토탈 에너지 솔루션

Q CELLS은 에너지 발전부터 소비까지 에너지 흐름 전반을 고려한 사용자 중심 서비스를 설계합니다.

1. Q CELLS, 토탈 그린에너지 솔루션

• 태양 빛을 모아 어두운 밤을 밝혀보세요.
• 에너지 관리 어플리케이션을 통해 전력 생산량 실시간 데이터를 간편하게 확인할 수 있다.

2 에너지 저장 시스템을 통한 안정적인 전력 공급 환경 조성

• 전력을 가장 많이 사용하는 시간대를 확인하고 동일 시간대에 맞춰 배터리에 저장된 친환경 에너지를 안정적으로 사용할 수 있습니다.

3 에너지 저장 시스템은 비상시에도 빠르게 공급될 수 있는 백업 전원을 제공한다.

• Q CELLS 인버터는 태양관 패널에서 생성된 DC 전기를 AC로 변환하여 에너지 저장 시스템으로 전달하고 필요 시 가정으로 공급될 수 있도록 한다

4 에너지 자립의 삶, 지속 가능한 삶, 간편하게 누릴 수 있다.

• Q CELLS의 태양광 패널, 에너지 저장 시스템, 에너지 모니터링 시스템은 장기적으로 전기 사용료 절약과 동시에 신뢰할 수 있는 청정 전력을 제공한다. 인류가 지속 가능한 삶을 더 쉽고 간편하게 누릴 수 있도록 Q CELLS이 항상 함께 하겠습니다.

• 정식 명칭 : 한화큐셀엔드첨단소재 주식회사

• 개요 : 한화 큐셀은 신재생 에너지로 떠오르는 기업이다. 영업이익도 높아져 연봉, 복지가 높아져 대우가 좋아지고 있다. 참고로 케미칼, 큐셀, 첨단 소재는 각각 연봉 복지가 다르기 때문에 채용할 때 기업 정보를 잘 알아보고 지원해야한다.

• 기업정보: 한화솔루션은 한화큐셀과 한화케미칼이 합병돼서 만들어진 회사다. 한화계열사이고 코스피에 상장되어 있다. 한화솔루션은 케미칼, 큐셀, 첨단소재 3개의 회사가 있으며 케미칼은 석유화학, 큐셀은 태양광, 첨단소재는 경량복합소재를 만드는 회사다.

• 태양광 셀 생산 과정

1. 풀리실리콘 태양광 전지에서 빛 에너지를 전기에너지로 전환하는 역할을 하는 실리콘 결정체
2. 잉곳 실리콘을 녹여만든 덩어리를 잉곳
3. 웨이퍼 잉곳을 얇게 펴서 가공한 것
4. 태양광 셀 웨이퍼에 만들어진 셀 등을 붙여서 태양광 모듈을 완성시킨다.
5. 태양광 모듈

브랜드 소개

1. 친환경 경영 저탄소 에너지를 기반으로 지속 가능한 삶을 제공한다.

• 누구나 한 번쯤 경험해본 정전 사태. 전기는 매초마다 공급과 수요의 균형이 필요하다. 주파수와 전압이 허용오차 범위 내 균형을 유지하지 못하면 누구나 경험해 본 정전 상태가 발생한다.
• 심화되는 탄소 배출문제, 공장이나 발전소에 급작스런 정전 사태는 환경에 더욱 부정적인 영향을 미친다. 모든 프로세스를 원점부터 가동해야 하기 때문이다. 이는 상당 수준의 탄소 발자국을 남기게 된다.
• 태양광, 미국 전력망의 탈탄소화 움직임에 핵심 역할. 미국 바이든 행정부가 2021년 8월 17일 발표한 태양광 정책 보고서에 따르면, 태양광 발전은 미국 전력 생산의 40%를 차지할 수 있으며, 2035년까지 약 150만개의 일자리를 유지할 수 있다고 합니다.
• 지역 사회의 에너지 탈탄소화 참여 확대를 위한 Q CELLS의 노력 Q CELLS은 세계적인 수준의 태양광 사업을 기반으로 지역 사회에 태양광 솔루션을 기부해 왔다. 이는 인류의 지속 가능한 삶을 전 세계에 확대하기 위한 Q CELLS의 노력이다.

관련 기사글

• https://blog.naver.com/jjhbb92/222685009193
• https://www.newspim.com/news/view/20201215000045

• 처음 접근 방법(오답) 처음에는 BFS로 접근했다. 아직 DFS와 BFS의 개념과 사용쓰임에 대해 잘 이해하지 못했기 때문이다.

from collections import deque

def BFS(si, sj):
    global str_                                         # 전역변수
    global lst                                          # 전역변수
    q = deque([])                                       # 덱 사용
    q.append([si, sj])                                  # 초깃값 입력(원점에서 시작한다.), (0,0)

    while q:                                            # 덱 안에 좌표가 없을 때 까지 반복한다.
        ci, cj= q.popleft()                             # 덱에 들어있는 가장 왼쪽 좌표값을 꺼낸다.
        str_ = arr[ci][cj]                              # 7자리의 숫자의 초깃값으로 현재 위치를 설정한다.
        if (ci==3) and (cj==3):                         # 마지막 좌표까지 도달할 경우 종료한다.
            return lst                                  # 7자리의 숫자가 담긴 리스트를 반환한다.
        for di, dj in ([-1,0], [1,0], [0,-1], [0, 1]):  # 동서남북 네 방향으로 이동한다. ★ 여섯번 이동이 고려되지 않았다.
            ni, nj = ci + di, cj + dj                   # 이동한 좌표 값
            if 0<=ni<4 and 0<=nj<4:                     # 좌표가 범위 내에 있는지 확인한다.
                str_ += arr[ni][nj]                     # 범위 내에 있을 경우 해당 좌표값을 문자열에 더해준다.
                q.append([ni,nj])                       # 나중에 해당 좌표로 이동할 수 있도록 이동한 좌표 값을 덱에 더해준다.
        lst += [str_]                                   # 여섯번의 이동을 끝낸 후 7자리의 숫자를 리스트에 담아준다.


T = int(input())

for test_case in range(1, T+1):
    arr = [list(input().split()) for _ in range(4)]
    print(arr)
    str_ = ''                                           # 7자리의 숫자
    lst = []                                            # 7자리의 숫자가 담긴 리스트
    ans = len(lst)                                      # 7자리의 숫자가 담긴 리스트에서 set함수를 이용하여 중복을 제거한 값을 담으려고 한다.
    BFS(0,0)
    # print(lst)
    # print(f'#{test_case} {ans}')

개념부터 다시

BFS

• 한번에 한 단계씩 발전하여,
• 목적지까지 가는데 걸리는 시간, 특정 목적지까지 갈 수 있느냐의 여부, 어디가 제일 좋은 위치인가에 대한 판단이 가능하다.
• 초기에 queue나 visited를 생성한다.

DFS/백트래킹

• 가능한 모든 경우를 처리해서 답을 찾는 문제
• 시간 초과를 고려해야 한다.
• 종료 조건을 잘 체크해야 한다.
• 가능한 모든 경우를 표현하는 효율적인 방법은 Tree이다.

'격자판의 숫자 이어붙이기'또한 가능한 모든 경우를 처리해서 답을 찾는 문제이므로 DFS를 이용하여 풀어야 한다.

정답

DFS로 다시 짜서 통과할 수 있었다.

def DFS(ci, cj, str_):                              # 초기 좌표값과 일곱자리의 숫자를 담을 문자열을 전달받는다.
    global set_                                     # 7자리의 숫자들을 담을 변수. set을 통해 중복을 제거한다.

    # 종료조건
    if len(str_) == 7:                              # 일곱자리의 숫자가 완성되면 종료한다.
        set_.add(str_)                              # 이 떄, set_ 에 해당 문자열을 더해준다.
        return
    # 함수호출 (4방향 호출)
    for di, dj in ([-1,0], [1,0], [0,-1], [0, 1]):  # 상, 하, 좌, 우 방향
        ni = ci + di                                # 새로운 좌표값(행)
        nj = cj + dj                                # 새로운 좌표값(열)
        if 0<=ni<4 and 0<=nj<4:
            # str_ += arr[ni][nj]                   # ★ 1, 11 식으로 2번 누적되서 문제였던 코드
            DFS(ni, nj, str_ + arr[ni][nj])


T = int(input())

for test_case in range(1, T+1):
    arr = [list(input().split()) for _ in range(4)] # 격자판의 정보를 입력받는다.
    str_ = ''                                       # 7자리의 숫자를 담을 변수(문자열로 취급)
    set_ = set()                                    # 7자리의 숫자들을 담을 변수. set을 통해 중복을 제거한다
    cnt = 0
    for i in range(4):
        for j in range(4):
            DFS(i, j, arr[i][j])                    # DFS 함수에 원점의 좌표값과 일곱자리의 숫자를 담을 문자열을 전달한다.
    print(f'#{test_case} {len(set_)}')

H의 알고리즘 Tip

1. 손코딩으로 문제의 개요부터 잡기
   • 문제의 개요를 잡고 어떤 식으로 풀어나갈 지 손으로 작성해보기
2. 특정 알고리즘의 경우 템플릿 외우기
   • DFS, BFS와 같이 정석적인 템플릿 암기하기
   • 알고리즘 템플릿 잘 정리해두기
3. 알고리즘 기초부터 탄탄히 다지기
   • 알고리즘의 이론을 익힌 후 해당 개념과 관련된 문제들 많이 풀어보기
4. 한 문제를 너무 오래 잡아두지 말 것
   • 1시간 정도 고민해보고 정말 모르겠다 싶은 문제들은 다른 분들의 풀이를 살펴본 후 나중에 풀어볼 문제로 남겨두자
   • 시간이 어느정도 지난 후 다시 문제를 풀어보자.
5. 다른 사람들의 코드를 내 코드로 만들어보자.
   • 다른 사람들의 코드를 보며 해당 코드를 내것으로 만드는 연습까지 하자.

여기까지 H의 소중한 조언들. 조언을 바탕으로 내일부터 다시 힘차게 알고리즘 공부해야지. 먼저 브루트포스부터 시작해보자.

상황

• package-lock.json을 지워야하는데 package.json을 지웠다.

  해결방법

  $ git log --oneline
  $ git checkout [커밋명]

  으로 옛날 커밋으로 되돌아가 복구할 수 있었다.