[유데미X웅진씽크빅X스나이퍼팩토리] React 2기 - 사전직무교육 1일차
[유데미X웅진씽크빅X스나이퍼팩토리] 프론트엔드 프로젝트 캠프 : React 2기
사전직무교육 1일차 강의 내용이다.
오늘은 개발환경 구축과 ES6에서 추가된 기능과 TypeScript의 기본 문법에 대해 배웠다.
강의내용을 복붙하기보다 딥다이브를 참고하면서 적어보려구 한다.
ES6 - (1) let과 const
이제 var 키워드는 쓰지 않는다! (코딩테스트에서는 본 것도 같지만) 현업에서 var로 도배되어있다면 빨리 탈출하기를 권하셨다.
그럼 var는 대체 문제가 무엇일까?
문제의 키워드는 #중복선언가능 #함수레벨스코프 #호이스팅이다.
먼저, var 키워드는 선언을 여러번 할 수 있다.
좋은 코드란, 개발자가 의도한대로 동작하는 코드이다.
하지만 중복선언이 허용되면 먼저 선언된 값이 바뀌어버릴 수 있다.
그리고 var 키워드로 선언한 변수는 함수의 코드 블록만 지역 변수가 된다.
이 말은, for문이나 while문 안에서 var 키워드로 선언하면 지역 변수가 되지 못하고 전역 변수가 되어버린다.
개발자가 의도한대로 동작하는 좋은 코드를 위해서는 전역 변수는 가능한 없는게 좋다.
마지막으로, var 키워드로 선언한 변수는 호이스팅과 동시에 undefined로 초기화된다.
그래서 변수 선언문 이전에 해당 변수를 참조해도 에러가 발생하지 않고 undefined를 반환한다.
이것 또한 의도치않은 동작을 발생시킬 수 있다.
그럼 let과 const는 왜 사용해도 되는 걸까?
let과 const는 중복 선언이 불가하다.
그리고 블록 레벨 스코프를 따르기 때문에 모든 코드 블록 안에서 let과 const로 선언한 변수는 지역 변수가 된다.
그런데 let과 const도 호이스팅은 된다. 하지만 호이스팅이 발생하지 않는 것처럼 동작한다.
이게 무슨 말이냐하면, let과 const로 선언한 변수도 코드 실행 전 코드 평가 단계에서 렉시컬 환경 상단부에 먼저 등록이 되기 때문에 호이스팅은 일어난다.
하지만, 초기화는 실제 코드가 실행되면서 변수 선언문에 도달했을 때 실행된다.
그래서 선언 단계와 초기와 단계 사이의 구간, 즉 TDZ(일시적 사각지대) 구간에서는 이 변수에 접근할 수 없다.
다시 말해서, 변수 선언문 이전에 해당 변수를 참조하면 참조 에러가 발생한다.
let과 const는 "재할당 가능 여부"의 차이이다.
let으로 선언한 변수에는 다른 값으로 다시 할당할 수 있지만, const는 한 번 할당하면 다시 할당하는 것이 불가능하다.
단, 배열이나 객체와 같은 참조 타입은 해당 자료를 변경해도 재할당이 일어나는 것이 아니기 때문에 const로 사용이 가능하다.
ES6 - (2) 화살표 함수
화살표 함수는 기존에 사용하던 function 키워드를 => 이라는 화살표로 대체하는 문법이다.
화살표함수는 항상 익명 함수로 정의하고, 표현이 더 간략하다.
익명 함수이기 때문에 화살표 함수 단독으로만 쓰면 호출할수가 없다.
화살표함수는 일반 함수와 내부 동작도 좀 다르다.
특히 this와 관련된 문제를 해결하는 데 정말 유용하다.
일반 함수는 호출 방식에 따라 this가 동적으로 바인딩되는데, 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다.
"간결한 문법"과 "this 문제 해결" 이렇게 두 가지를 위해 사용한다고 보면 된다.
ES6 - (3) 비구조화 할당(디스트럭쳐링 할당)
구조화되어있는 배열이나 객체를 비구조화, 즉 구조화된 걸 박살내서(파괴해서) 개별적으로 할당하는 문법이다.
배열과 객체의 방법이 좀 다르다.
배열은 인덱스(순서) 기준이고, 객체는 프로퍼티 키가 기준이다.
객체는 프로퍼티 키만 같으면 되고 순서는 상관없다.
배열과 객체 모두 양변의 개수가 달라도 된다.
// 배열
const [a, b, c] = ["a", "b", "c"];
// 객체
const { count, menu, price } = {
menu : "스파게티",
count : 10,
price : 10000
}
ES6 - (4) Spread, Rest
Spread 문법은 이름처럼 하나로 뭉쳐 있는 여러 값들을 펼쳐서 개별적으로 분리하는 문법이다.
Spread 문법을 사용하면 배열이나 객체가 1Depth만 있는 경우에는 깊은 복사를 할 수 있다.
하지만 정확히는 얕은 복사(한 단계까지만 복사)이다.
1Depth가 아니면 깊은 복사는 lodash의 cloneDeep을 사용하거나 JSON.parse와, JSON.stringify 등의 다른 방법을 사용해야 한다.
Spread 문법으로 배열이나 객체를 합칠때도 편하다. 단, 객체는 프로퍼티 키가 중복이면 한 번만 적용된다.
Rest는 디스트럭처링 할당과 연결된 개념인데, 이름 그대로 "나머지"를 할당할 때 사용한다.
TypeScript
타입스크립트는 자바스크립트의 상위 집합이다.
동적 언어의 특성으로 인해 발생하는 문제들을 보완하기 위해 자바스크립트 값에 타입을 지정하는 언어인 타입스크립트가 등장했다.
자바스크립트가 타입스크립트 안에 포함되어있기 때문에, 타입스크립트를 배우고 자바스크립트를 배우기보다,
자바스크립트를 먼저 잘 익히고 타입스크립트를 배우는 것이 좋다.
기본 자료형 선언
타입스크립트에서 기본 자료형(string, number, boolean, null, undefined, symbol)을 선언하는 방식은 아래와 같다.
let 변수명: 타입 = 값;
const 변수명: 타입 = 값;
let word: string = "테스트";
let price: number = 9900;
let sym: symbol = Symbol("key");
참조 자료형 선언
참조 자료형(배열, 객체, 함수 등)이 문제다.
배열은 원소들의 타입이 동일하면 간단하다. 원소들의 타입[] 이렇게 해주면 된다.
배열의 원소가 객체여도 타입만 같다면 동일한 방식을 사용하면 된다.
// 배열 선언 (1)
let arr: number[] = [1, 2, 3];
// 배열 선언 (2)
let arr2 = { name: string; age: number }[] = [
{ name: "홍길동", age: 25 },
{ name: "아무개", age: 35 },
];
타입스크립트에 있는 "튜플" 방식을 사용할수도 있다.
// 배열 선언 (3) - 튜플 형식 (인덱스 번호에 맞게 타입을 지정해주는 방식)
let arr3 = [boolean, number, null, string, { name: string; age: number }] = [
false,
10,
null,
"type",
{ name: "홍길동", age: 25 },
];
객체는 프로퍼티 키별로 (배열에서도 했듯이) 타입을 적어주면 된다. 이때 타입 적는 { } 이 부분은 객체가 아니기 때문에 ,쉼표로 구분하지 말고 ;세미콜론으로 구분해야 한다.
// 객체 선언 (1)
let receipt: { menu: string; price: number; isTrue: boolean; } = {
menu: "스파게티",
price: 10000,
isTrue: true
}
// 객체 선언 (2)
let test: { name: string; student: number[] } = {
name: "React",
student: [10, 11, 12],
}
함수 선언 시 타입을 지정하는 방법은 다음 두 가지다.(둘 다 써도 에러는 안나지만 권장하지 않는다.)
1. 매개변수와 반환값에 타입을 지정하는 방법
2. 변수에 타입을 지정하는 방법
// 함수 선언문은 아래와 같이 "매개변수와 반환값에 타입을 지정하는 방법" 하나만 존재
function plus(num1: number + num2: number): number {
return num1 + num2;
}
plus(1, 2);
// 함수 표현식은 위의 방법과 "변수에 타입을 지정하는 방법"도 사용 가능
// 심지어 두 방법을 합쳐서 같이 써도 에러는 안뜸. 하지만 권장하지 않음
// 아래 두 가지 방법 중 하나 골라서 사용하면 됨
const plus: (num1: number, num2: number) => number = function (num1, num2) {
return num1 + num2;
};
const plus: function (num1: number, num2: number): number {
return num1 + num2;
};
// 화살표 함수도 동일함
const plus: (num1: number, num2: number) => number = (num1, num2) => num1 + num2;
const plus: (num1: number, num2: number): number => num1 + num2;
// 반환문이 없는 함수 선언문은 void
function hello(): void {
console.log("Hello");
}
const hello: () => void = function hello() {
console.log("Hello");
}
// 메소드
let test: {
name: string;
student: number[];
plus: (a: number, b: number) => number;
} = {
name: "React",
student: [10, 11, 12],
plus: (a, b) => a + b,
}
연습 문제와 내 답변
문제 1) 문자열에서 가장 긴 단어를 반환하는 함수 (string, 배열 아님)
function maxLong(sent: string): string {
let arr = sent.split(' ');
arr.sort((a:string, b:string) => b.length - a.length);
return arr[0];
}
console.log(maxLong("Hello, Wor"))
console.log(maxLong("ab cde"))
문제 2) 암스트롱 수 구하기
암스트롱의 수는 세 자리의 정수 중에서 각 자리의 수를 세 제곱한 수의 합과 자신이 같은 수를 말합니다.
예를 들어 153 = 1 + 125 + 27 입니다. 이와 같은 수를 암스트롱의 수라고 말합니다.
방법 (1)
const armstrong = (num: number): void => {
// 숫자 하나씩 split된 배열
let numArr = [...num.toString()].map(Number);
// 각 자리의 숫자를 세제곱한 수
let armNum = numArr[0]**3 + numArr[1]**3 + numArr[2]**3;
// 암스트롱수이면 출력
if (num == armNum) console.log(num);
};
for (let i: number=100; i<=103; i++) {
armstrong(i)
}
방법 (2)
const armstrong = (start: number, end: number): number[] => {
// 결과 배열
let result: number[] = [];
// start부터 end까지 반복
for (let num: number=start; num<=end; num++) {
// 숫자 하나씩 split된 배열
let numArr = [...num.toString()].map(Number);
// 각 자리의 숫자를 세제곱한 수
let armNum = numArr[0]**3 + numArr[1]**3 + numArr[2]**3;
// 암스트롱수이면 결과 배열에 삽입
if (num == armNum) result.push(armNum);
}
return result;
};
console.log(armstrong(100, 999))
회고
타입스크립트를 어느정도 알고있다고 생각했는데, 막상 연습문제를 받아보니 헷갈렸다ㅎㅎ
역시 연습이 실력이다.
앞으로도 연습을 꾸준히 하고 모르는게 있다면 넘어가지 말고 해결하고 가야겠다.
저작권
본 게시물은 수코딩 김기수 강사님이 제공해주시는 예제 바탕으로 작성되었습니다.
출처: 수코딩(https://www.sucoding.kr)