프론트엔드 기초: React + TypeScript(1)

웹 프론트엔드 영역 구현 목표

예시) 검색기능

버튼을 클릭해서 검색한다 => 잘 모르는 정보를 얻기 위해 검색

1. 알고 있는 키워드 넣어 (user input)

2. 검색 기능 (feature) 활용하여

3. 원하는 정보 (data) 얻는다.

 

브라우저와 디버깅

이슈

: 개발 중에 예기치 않게 발생한 상황

디버깅

: 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산을 찾아내어

그 원인을 밝히고 수정하는 작업과정

-중단점을 지정해서 확인하는 방법이나 콘솔을 찍는 방법이 있다.

console.log();
console.dir();

 

JavaScript 언어의 특징

1. 인터프리터 언어

🔸우리가 지금 사용하는 코드는 사람이 이해할 수 있는 언어이고,

기계가 이해할 수 있는 언어는 작성된 코드가 기계어로 번역되어 기계에게 읽혀지는 것이다.

🔸컴파일 단계가 없다.

🔸컴파일러 언어에 비해 실행속도가 느리다. (모던 브라우저 내의 V8엔진에서는 속도 개선됨)

2. 그 외

변수의 타입

• 동적 타입언어
  • 변수에 들어가는 값에 따라서 런타임에 타입이 추론된다.

함수의 특징

• 일급객체
  • 함수는 일급객체의 특징을 가진다.
  • 함수는 객체와 동일하게 사용할 수 있다.
  • 함수는 값과 동일하게 취급한다.
    • 변수 할당문
    • 객체 프로퍼티 값
    • 배열의 요소
    • 함수 호출의 인수
    • 함수 반환문

상속의 형태

• 프로토타입 기반의 상속
  • 언어가 갖고 있는 프로토타입 체이닝 구조를 통하여 상속가

패러다임 지원

• 함수형 프로그래밍
• 명령형 프로그래밍
• 객체지향 프로그래밍
• ...등

JavaScript 표준화

JavaScript의 탄생배경과 ECMAScript

자바스크립트의 발전

자바스크립트 탄생 이후로 성장 시점마다 버전이 존재,

자바스크립트를 사용하는 개발자는 버전을 확인하며 개발

 

자바스크립트의 탄생배경

1995년 발표되었고, 이름은 모카->라이브스크립트->자바스크립트로 바뀌었다.

자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 만듦

 

❄️표준화 작업을 한 이유

자사 소프트웨어 사용의 점유율을 높이기 위해 브라우저마다 동작하는 기능을 경쟁적으로 추가함

즉, 같은 자바스크립트인데, IE에서는 동작하고, Netscape에서는 동작하지않는 현상이 발생했다.

=> 크로스 브라우징 이슈

그에 따라 1996년 넷스케이프에서 ECMA요청을 하

1997년 ECMA 총회때 채택 되어 ECMA-262 표준화 목록에 추가되었고,

그 규격에 따라 정의하고 있는 스크립트 언어를 ECMAScript라고 한다.

 

해당 표준화 정책을 고려한 개발이 필요

언어버전을 고려하며 개발해야함

이를 도와주는 솔루션

• (트랜스 파일러) Babel
• (lint) eslint
• (Bundler) Webpack
• ... 등

ECMAScript2015 = ES2015 = ES6

• 6판을 위한 작업은 2009년부터 진행(15년)
• 목표: 아래의 대상으로 사용하는데에 용이하도록 토대를 제공
  • 대규모 어플리케이션
  • 라이브러리 생성
  • 다른 언어의 컴파일
• 개선사항
  • 모듈, 클래스선언, 블록레벨 스코프, iterator와 generator, 비동기 프로그래밍,
  • promise, 구조분해 패턴 등의 개선이 존재

❄️개발에 사용하고 싶지만 브라우저 지원이 안된다면?

ployfill

• 지원하지 않는 브라우저에서 최신 기능을 제공하기 위해 필요한 코드
• 폴리필은 브라우저가 다른방식으로 동일한 기능을 구현하는 문제를 해결하는데 사용

babel

• 이전 버전의 브라우저에서 ES6 이전 버전의 JAvScript로 변환하는데 사용되는 도구
• 문법을 번역 및 변화
• 폴리필 기능

변수: 데이터를 담아둔 메모리의 주소를 쉽게 식별하기 위해 붙인 식별자

• 데이터를 처리하기 위해 기억해야함
• 컴퓨터는 데이터를 기억하기 위해 메모리를 활용한다.
• 메모리 = 컴퓨터의 기억창치
  • 메모리에 데이터를 담아 기억
  • 각각의 위치 주소값이 존재
  • 위치를 찾기 위해서는 메모리의 주소값 사용

❄️변수 생성과 호이스팅

변수가 생성되는 3단계

1. 선언: 변수를 변수 객체에 등록한다. (실행 컨텍스트) -평가단계
2. 초기화: 변수를 메모리에 할당하고, undefined로 초기화한다. -평가단계
3. 할당: undefined로 초기화된 변수에 실제로 값을 할당한다. -실행단계

var 키워드

코드 평가단계: 선언과 동시에 초기화 진행

코드 실행단계: 값 할당 진행

💢호이스팅: 코드 평가 시점에 초기화 되어있으므로, 변수의 할당문이 실행되기 전에 참조가 가능하다

단점:

• 키워드의 생략 가능
• 중복 선언 가능
• 변수 호이스
• 전역변수화
  • 함수 스코프만 가지고 있으며, 지스코프 안에서도 전역변수화 됨
  • 의도치 않은 변수값 변경으로 코드 예측이 어려워짐

const, let 키워드

코드 평가단계: 선언 진행

코드 실행단계: 초기화 진행, 값 할당 진행

• 블록 레벨 스코프
  • 코드 블록 내에서 접근 가능한 스코프
• 변수에 한정적으로 접근이 가능하므로 예측 가능한 범위 내에서 변수 변경이 일어남

const 키워드

• 수정이 불가능한 상수변수를 선언할때 사용
• 선언과 동시에 무조건 값을 할당해줘야함

let 키워드

• 재할당이 가능한 변수 타입
• 값을 할당하지 않아도 생성가능

변수 네이밍 컨벤션

Camel Case	getNumber
Snake Case	get_number
Pascal Case	GetNumber
Constant Case	GET_NUMBER

 

데이터의 종류-자료형

자바스크립트의 데이터 타입

• 원시타입
  • String, Number, BigInt, Undefined,  Null, Boolean, Symbol
  • 값은 변경 불가능한 값이다. immutable value
  • 값으로써 전달된다. (참조 형태로 전달되지 않음)
• 객체타입(참조형)
  • 원시타입 값을 제외한 자바스크립트의 모든 것
  • 참조방식으로 전달된다. (Pass by reference - deep copy, shallow copy)
  • 객체는 속성들을 변경할 수 있는 mutable한 값이다.

Number Type

• 숫자에는 정수, 실수가 존재하지만 자바스크립트에는 Number 하나의 숫자 타입만 존재한다.
• 정수타입 없이 모든 숫자를 실수로 처리한다.
• 자바스크립트의 숫자표현은 배정밀도 64비트 부동소수점(IEEE754)형식이다
• 그래서 실수를 연산 할 때, 근사값으로 처리한다. ex) 0.1+0.2 !== 0.3
• 최소값 최대값은 -(2^52-1)부터 2^25-1의 수 이다.
• 원시 래퍼객체에서 상수변수로 제공
• 숫자형에는 우리가 아는 숫자 이외에 Infinity, NaN이라는 값도 존재한다.
• Infinity: 무한대를 나타내는 숫자 (-Infinity)
• NaN: Not A Number의 줄임말. 숫자가 아님을 나타냄

 

BigInt Type

• 임의 정밀도로 정수를 나타낼 수 있는 자바스크립트 숫자 원시 값
• BigInt를 Number의 최대값을 넘는 정수도 안전하게 저장하고 연산할 수 있다.
• 다른 타입과 혼합하여 연산할 수 없다.

String Type

• 텍스트 데이터를 나타낼 때 사용
• UTF-16(유니코드 문자 인코딩 방식 중 하나) 코드 단위의 시퀀스로 표현
  • 16bit 정수값의 요소로 구성된 집합
  • 각 요소가 string의 한 자리
  • 0번째 index부터 시작
• 원시값은 불변한다. == 문자값은 불변한다.
• 따옴표, 쌍따옴표, 백틱으로 감싸서 문자열임을 표현
• 템플릿 리터럴 표기법(``)
  • 백틱의 표현은 ES6 이후부터 사용 가능
  • 문자열 처리 기능 제공 (줄바꿈 허용, 표현식 삽입가능)
  • String interpolation

Boolean Type

• 논리적 데이터 유형
• true || false의 값만 가능

Undefined Type

• 변수를 선언한 후 값을 할당하지 않은 변수에 할당이 되는 값
  • 변수 초기화 단계에서의 undefined는 개발자가 의도해서 넣은 값이 아님
• 개발자가 의도해서 넣을 수도 있다.

Null Type

• 값이 없다는 것을 의도적으로 표현할 때 null을 사용한다.
• 이전에 참조되어있던 값을 의도적으로 더 이상 참조하지 않겠다는 뜻으로도 사용된다.
• null 타입 체크는 일치연산자(===) 사용해야 한다. (타입으로 사용하면 object로 나옴)
• null의 type은 'object'라고 나오는데 이는 js의 버그이다.

Symbol Type

• ES6에 추가된 타입
• 중복되지 않는 유니크한 값
  • 객체의 key로 사용될 수 있다.
  • 클래스나 객체형식의 내부에서만 접근할 수 있도록 전용객체 속성의 키로 사용한다.
• Symbol 함수를 호출하여 생성

Reference Type

• 객체 타입, object type, reference type
• 객체타입: 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
  • 객체: 데이터(속성), 데이터에 관련한 동작을(method) 포함하는 개념적 존재
• 원시 타입의 값을 제외한 자바스크립트에서의 모든 것은 객체
• 변경가능한 값(mutable): 객체의 속성을 변경, 추가, 삭제 가능
• 힙 메모리에 저장
  • 동적으로 변화 가능하므로 메모리 공간 확보 및 저장
• pass-by-reference
  • 참조 타입이므로 참조값으로 처리

동적 타입 언어

• 자바스크립트는 동적 타입 언어
• 의도적으로 타입을 변환할 수도 있지만, 의도와 상관없이 변경되기도 한다.
  • 명시적 타입 변환
    • 원시래퍼객체를 활용하여 개발자가 의도적으로 타입을 변경할 수 있다.
      • 값.toStirng() - 문자열 타입 변환
      • Number(값) - 숫자 타입 변환
      • Boolean(값) - 불리언 타입 변환
  • 암묵적 타입 변환
    • 개발자가 의도하지 않았지만, 타입이 변경될 때가 있다.
      • 값+"" - 문자열 타입 변환
      • 값*1 - 숫자 타입 변환
      • !!값 - 불리언 타입 변환
    • 값이 전달 될 때, 참조되어있는 변수 값 타입이 개발자의 의도와 다르게 암묵적 타입변환으로 변경될 가능성이 있다.
      • 타입 추론이 어려워져, 불필요한 디버깅 시간 발생
      • 이를 해결하기 위해
        • 전달되는 시점마다 typeof 나 일치연산자를 사용하여 타입 guard 구현
        • 자바스크립트 superSet 타입스크립트 사용

연산자

하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만듦

 

단항 연산자

• 하나의 피연산자만 사용하는 연산
• void : 표현식을 평가할 때 값을 반환하지 않도록 지정한다.
• typeof : 평가 전의 피연산자 타입을 나타내는 문자열을 반환한다.
• delete : 객체의 속성을 삭제한다.

산술 연산자

• 두 개의 숫자 값 (리터럴 또는 변수)을 피연산자로 받아서 하나의 숫자값을 반환
• 단항 산술 연산자
  • 단항 산술 연산자는, 1개의 피연산자를 산술 연산하여 숫자값을 반환한다.
    • ++ : 숫자 1을 증가시키고, 증가시킨 값을 암묵적으로 할당
    • -- : 숫자 1을 감소시키고, 감소시킨 값을 암묵적으로 할당
    • + : 양수의 표현, 아무런 효과가 없다.
    • 💢 피연산자가 숫자인 케이스만 해당
    • 💢문자열인 경우 암묵적 타입변환 처리
    • - : 양수를 음수로, 음수를 양수로 반전시킨 값을 반환한다.
    • 증가/감소 연산자: 위치에 따라 처리단계 상이
      • 전위 증가감소 연산자: 피연산자 앞에 위치 (++피연산자)
      • 후휘 증가감소 연산자: 피연산자 뒤에 위치(피연산자++)
• 이항 산술 연산자
  • +, -, *, /, %

관계 연산자

• 피연산자를 비교하고 결과가 참인지에 따라 boolean값을 반환한다.
• in : 객체 내에 속성이 존재할 경우 true 반환
• instanceof : 특정 객체 타입에 속하면 true 반환

비교 연산자

• 피연산자를 비교하고 결과가 참인지에 따라 boolean 값을 반환한다

==	동등 연산자	값이 서로 같으면 true
===	일치 연산자	값이 서로 같고 타입도 같으면 true
!=	부등 연산자	값이 서로 다르면 true
!==	불일치 연산자	값이 서로 다르고 타입도 다르면 treu
>	큼 연산자	왼쪽이 오른쪽보다 크면 true
>=	크거나 같음 연산자	왼쪽이 오른쪽보다 크거나 같으면 true
<	작음 연산자	오른쪽이 왼쪽보다 크면 true
<=	작거나 같음 연산자	오른쪽이 왼쪽보다 크거나 같으면 true

 

논리 연산자

• 두 개의 피연산자 중 하나를 반환
• 반환되는 값이 무조건 Boolean 값이 아니다
• 단축평가 논리: 첫번째 식을 평가한 겨로가에 따라서 두번째 식 평가를 실행

true	&&	anything	anything
false	&&	anything	false
true	||	anything	true
false	||	anything	anything

 

• null, undefined, 빈문자열 -> false로 평가
• AND 연산자: null 검사에 활용
• OR 연산자: 캐싱 값에 대해서도 사용

기타 연산자들

• 쉼표 연산자 : 두 연산자를 모두 평가한 후, 오른쪽 피연산자의 값을 반환
• 문자열 연산자 :  두 문자열 값을 서로 연결하여 새로운 문자열을 반환
• 옵셔널 연산자 : 객체의 속성을 참조시, 유효하지 않는 경우 에러를 발생시키지 않고 undefined를 반환
• 할당 연산자
  • += 더하기 할당
  • -= 빼기 할당
  • *= 곱하기 할당
  • /= 나누기 할당
  • %= 나머지 할당
  • **= 거듭제곱 할당
  • &&= 논리 AND 할당
  • ||= 논리 OR 할당

삼항 연산자

• 조건 연산자에 따라 두 값 중 하나를 반환한다.

condition ? trueValue : falseValue;

 

❄️재사용처리기, 함수

함수란?

• 소프트웨어에서 특정 동작을 수행하는 코드 일부분을 의미
• 외부 코드가 호출할 수 있는 하위 프로그램, 함수명(); 으로 호출함
• 함수의 형태
  • input 로직 처리를 위해 주입받는 데이터
  • output 로직 처리 후 반환되는 결과 데이터
  • 본문 명령문의 시퀀스로 구성
• 자바스크립트에서의 함수는 객체처럼 속성과 메서드를 가질 수 있다
  • 객체와의 차이점
  • 함수는 외부에서 호출이 가능
  • 객체는 외부에서 호출이 불가능

자바스크립트 함수

• 일급객체의 특징을 모두 갖고 있다.
  • 일급객체란?
  • 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다
    • 일급객체 정의
    • 함수의 실제 매개변수가 될 수 있다.
    • 함수의 반환값이 될 수 있다.
    • 할당명령문의 대상이 될 수 있다. (변수 등에 할당 가능)
    • 동일 비교의 대상이 될 수 있다. (값으로 표현 가능)
  • 자바스크립트에서의 함수는 일급객체의 특징을 모두 갖고 있다.

// 자바스크립트의 함수는 함수의 실제 매개변수가 될 수 있다.
function foo(arg) {
	arg();
}
function bar() {
	console.log('bar');
}
foo(bar); // 'bar'

// 자바스크립트의 함수는 함수의 반환값이 될 수 있다.
function foo(arg) {
	return arg;
}

function bar() {
	console.log('bar');
}

foo(bar)(); // 'bar'

// 자바스크립트의 함수는 할당명령문의 대상이 될 수 있다.
// 자바스크립트의 함수는 동일비교의 대상이 될 수 있다.
const foo = function (arg) {
	return arg;
};
foo(1); // 1

매개변수 parameter

• 기본값 매개변수 default funciton parameter
  • 매개변수 값이 없거나, undefined가 전달될 경우 대체되는 초기값
  • 매개변수에 할당연산자와 함께 초기값을 할
• 나머지 매개변수 Rest parameter
  • 가변항 함수
  • spread 연산
• auguments 객체
  • 자바스크립트의 함수 : Function 객체 상속
  • Function 객체의 기본 속성 : arguments
  • 형태 : 배열이 아니고 유사배열 형태
    • 배열 내장 method 사용 불가

// 기본값 매개변수
function foo(arg = 1) {
	console.log(arg);
}
foo(); // 1

// 나머지 매개변수
function foo(arg, ...rest) {
	console.log(rest); // [ 2, 3 ]
	return arg;
}
const arg = foo(1, 2, 3);
console.log(arg); // 1

// arguments 객체
function foo(arg, ...rest) {
	console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 }
	return arg;
}
foo(1, 2, 3);

매개변수(parameter)와 인자(argument)의 차이

• 매개변수 : 함수를 정의할 때 사용하는 변수
• 인자 :  함수가 호출될 때 넘기는 값

function one(parameter) {
	return 1;
};

one(argument);

 

❄️함수의 생성 방법

함수 선언문

function foo(arg) {
	return arg;
}

const bar = foo(1);

함수 표현식

const foo = (arg) { // 익명함수
	return arg;
};

const bar = function baz(arg) { // 기명함수
	return arg;
};

Function 생성자 함수

• Function 객체: 자바스크립트 내장 객체 중 하나
• 함수 생성방법의 기본원리
  • 함수 표현식, 함수 선언문: 축약법
• 생성자 함수 (미리배우기)
  • 내장객체 활용: 인스턴스 생성
  • new 내장객체()
• new Function(arg1, arg2, ..., `return 1`)

const foo = new Function(console.log('foo')); // 'foo'

화살표 함수

• ES6 이후부터 사용 가능
• function 키워드 사용하지 않고, 화살표(=>) 사용

const foo = (arg) => {
	return arg;
};

foo(()=>{
	return 1;
});

 

함수 사용 패턴

• IIFE(즉시 실행 함수)
  • 함수 정의와 동시에 실행
  • 코드평가 -> 코드 실행 -> 최초 1회 실행
    • 초기화 처리에 주로 사

(funtion () {
	return 1;
});

• 재귀함수
  • Recursive function 자기 자신을 호출하는 함수
  • 계속 자신을 참조하여 호출하므로 무한히 호출 될 수 있음
    • 탈출 조건을 함수 초반에 정의해야함
  • 직관성이 떨어질 수 있어, 한정적 사용 권장

function foo(arg) {
	if(arg === 3) return arg; // 탈출조건
    console.log(arg);
    foo(arg + 1);
};

foo(1);

• 중첩함수
  • inner function 내부 함수
  • 내부함수 내의 변수 참조 -> 부모를 포함한 외부 범위 참조 가능
  • 부모함수 내의 변수 참조 -> 자식 범위 참조 불가능
  • 스코프체인

function foo(arg) {
	function bar() {
		console.log(arg);
	}
	bar();
}
foo(1); // 1

• 콜백함수
  • callback function
  • 함수의 매개변수가 될 수 있다.(일급객체 중)
    • 인자로 B함수를 받은 A함수
    • A함수가 호출되는 시점에 B함수도 호출
  • 특정 이벤트가 발생했을 때 -> 시스템에 의해 호출되는 함수

const foo = (arg) => {
	arg();
};
foo(() => {
	console.log(1); // 1
});