2024-11-11
오늘 공부한 내용을 정리해보자.
크게 세가지를 했다.
- react 개발환경 설정
- type script 개념
- es6(async) 개념
다 너무 생소한 개념들이라 정리 안하면 까먹을 것 같다.
REACT 개발환경 셋팅
우선 리액트 실습환경을 만들기 위해서는 반드시 node.js가 설치되어있어야 한다.
Visual Studio Code 에디터도 필수
nodejs는 위 사이트에 들어가서 다운로드 받으면 된다.
난 모두 이미 설치되어있어서 이 부분은 패스...
(설치 유무 확인 방법 ↑)
간편하게 바탕화면에 폴더를 생성해보자
바탕화면 아무 곳에다 'shift+우클릭' > '여기에 powershell창 열기'
npx create-react-app 테스트폴더명
(파워셀 화면 ↑)
폴더 만들었으면 VScode에서 오픈폴더 > 테스트폴더명 클릭
이렇게 실습환경 셋팅은 완료
리액트는 오늘은 셋팅까지만 하는걸로🤟
TypeScript 기초
바탕화면에 typeScript 실습용 폴더를 하나 만들고 vscode에서 열어보자.
index.ts, tsconfig.json 두 파일을 만들고
tsconfig.json엔 아래처럼 기본값 간단하게 입력만
(tsconfig.json 파일은 TypeScript 컴파일러(tsc)가 코드를 어떻게 컴파일할지 설정하는 파일)
{
"compilerOptions": {
"target": "es5",
"module": "commonjs"
}
}TypeScript란?
JavaScrip 더 엄격하게 관리할 수 있게 해주는 프로그래밍 언어
JavaScript는 타입에 자유로워서 어떤 타입의 값이든 할당할 수 있지만, TypeScript는 타입을 엄격하게 체크하여 타입 안정성을 높이고 개발 중 발생할 수 있는 오류를 사전에 방지
예시를 들어보자
이렇게 string으로 선언해놓고 숫자를 할당하려고 하면 오류가 나는데 어디에서 왜 오류가 났는지 상세히 알려준다
js에서는 어떻게 돌아가는지 확인하기 위해 터미널에 아래 명령어를 쳐보자
(터미널 단축키는 shift+ctrl+` )
tsc -w
· TypeScript 파일을 JavaScript 파일로 컴파일하는 명령어
· TypeScript 파일(.ts)을 JavaScript 파일(.js)로 변환
· 정리히면, TypeScript 파일을 컴파일해서 JavaScript 파일 생성해줌
아, 만약에 이 단계에서 명령어를 쳤는데 권한 어쩌고 오류가 발생한다면 아래와 같이 해보자
.js 파일이 만들어졌고 .ts와는 다르게 오류가 발생하지 않는 것을 확인할 수 있다.
자 이제 TypeScript에 대해 조금 감이 생겼으니, 실습을 더 해보자
위 예시 중 '이름'을 보면 string | number 이렇게 선언을 하면 두 가지 타입을 다 받을 수 있게 되어있다.
string | number
'이름' 변수의 타입을 string 또는 number로 지정
| (또는) 연산자를 사용해 여러 타입 허용 가능
즉, 이 변수에는 string 타입이나 number 타입 중 어느 한 타입의 값을 할당할 수 있다.
타입은 키가 4가지가 있지만 '하나없는객체'를 보면 키가 3가지만 있다
그럼에도 오류가 안나는 이유는 키4를 선언할때 준 설정들 덕분이다.
키4 속성의 세부 설명
· 키4?: ?는 선택적(optional) 속성을 의미. 키4가 있어도 없어도 된다.
· number[]: 키4의 값으로 숫자 배열만 허용
· | undefined: 키4가 undefined가 될 수도 있음을 허용
위처럼 상속도 가능하다.
함수의 return값으로 문자열을 주었으니 '함수객체2'처럼 number를 return하려고 하면 에러가 난다
ES6
ES6는 ECMAScript 2015(또는 ECMAScript 6)라는 JavaScript의 새로운 버전 이름이다.
ES6에서 도입된 주요 기능들로는 let, const, 화살표 함수, Promise(비동기 작업을 쉽게 다룰 수 있도록 도와주는 객체)등이 있다.
oldVersion과 literals을 보자.
말그대로 옛날에 사용하는 방식처럼 콘솔을 찍을 수도 있겠지만, 커서를 두고 `을 누르면 ${}이 인식되며 이렇게 값을 넣는 것이 더 편리하다.
그 외에도 화살표함수는 원라인 함수처럼 한줄로 표현이 가능하다.
오브젝트 객체처럼 기존에는 속성에 접근하려면 다음과 같이 '오브젝트.이름'처럼 객체를 통해 직접 접근해야했다.
ES6의 기능 중 하나인 객체 구조 분해 할당(destructuring assignment)을 이용하면 객체에서 특정 속성을 변수로 쉽게 추출할 수 있게 해준다.
더 간결해지고 코드의 가독성이 높아진다.
그 다음 배열을 살펴보자. const [사과, 바나나, ...파인애플] = 배열; 이 부분, 이를 배열 구조 분해 할당이라고 한다.
'배열'의 첫 번째와 두 번째 요소를 각각 사과, 바나나라는 변수에 할당하고, 나머지 요소들을 파인애플이라는 변수에 배열 형태로 할당한다.
나머지 연산자(...)는 배열의 나머지 요소를 모두 모아 하나의 배열로 할당한다.
여기서는 [3, 4, 5, 6, 7]이 파인애플에 배열로 저장된다.
이름은 아무거나 과일 이름으로 정했지만 이름이 무엇이든 배열의 순서대로 저장된다.
배열 구조 분해 할당에서는 순서를 건너뛸 수 없다. 순서에 기반해 구조 분해 할당이 이뤄지기 때문이다.
만약 빈자리를 사용해 특정 요소를 무시하려면
const 배열 = [1, 2, 3, 4, 5];
const [ , 두번째, , 네번째] = 배열;
console.log(두번째); // 2
console.log(네번째); // 4이런 식으로 해야하기에 제한이 심하다.
객체 구조 분해 할당과 배열 구조 분해 할당 개념에 대해 한번 더 정리하고 가자.
객체 구조 분해 할당 (Destructuring Assignment for Objects)
객체의 속성 값을 쉽게 변수에 추출할 수 있도록 해줌.const 오브젝트 = { 속성1: 값1, 속성2: 값2 }; const { 속성1, 속성2 } = 오브젝트;배열 구조 분해 할당 (Destructuring Assignment for Arrays)
배열의 요소를 순서대로 변수에 할당해줌.const 배열 = [값1, 값2, 값3]; const [변수1, 변수2, 변수3] = 배열;나머지 연산자 ...을 사용해 배열의 나머지 요소를 하나의 배열로 저장 가능
let new오브젝트 = { ...오브젝트 };는 나머지 연산자 (...)를 사용해 오브젝트의 모든 속성을 펼쳐 {}안에 넣는다. 기존 오브젝트 객체와 동일한 속성을 가진 new 오브젝트 객체가 생성된다.
let new배열 = [...배열];도 마찬가지
원본 배열을 변경하지 않고 새로운 배열을 만들 수 있다.
이렇게 새롭게 복사하는 이유는 원시 데이터와 참조형 데이터의 저장 방식 차이 때문이다.
원시데이터는 변수에 값 자체가 저장되며, 참조형 데이터 타입은 변수에 주소(참조값)가 저장된다.
나머지 연산자를 사용해 복사하는 것은 참조형 데이터의 참조값을 공유하지 않고 새로운 복사본을 생성하여, 원본을 안전하게 보호하고 독립적으로 수정할 수 있게 해준다.
.map() 메서드
.map() 메서드는 배열의 각 요소를 변환하여 새로운 배열을 반환.
즉, 새로운 배열이 저장된 return값 존재.
(위 예시처럼 return이 없을 경우 undefined 배열)
.forEach() 메서드
배열의 각 요소에 대해 단순히 반복 작업 수행.
각 요소를 순회하며 특정 작업을 수행할 뿐, 새로운 배열을 반환하지 않는다.
비동기 처리와 관련있는 promise, async/await에 대해 실습해보자.
우선 promise.js의 이름으로 만든 테스트 파일을 보며 promise를 실습해보자.
promiseTest 변수에 new Promise((resolve, reject) => { } 함수를 할당했다.
이 함수는 promise객체를 생성하고 인자로 resolve와 reject(promise생성자 내부에 내장된 함수들) 두개의 콜백 함수를 받는 쪽으로 전달한다.
즉 비동기 작업 결과에 따라 호출될 수 있도록 마련된 함수인 것이며 콜백함수로서의 resolve와 reject를 더 알아보자.
· resolve: 비동기 작업이 성공적으로 완료되었을 때 호출할 함수. 작업이 성공했을 때 Promise의 상태를 "fulfilled"(성공)로 변경하며, resolve()에 전달된 값은 .then()으로 연결된 후속 작업으로 전달됨.
· reject: 비동기 작업이 실패했을 때 호출할 함수. Promise의 상태를 "rejected"(실패)로 변경하며, reject()에 전달된 값은 .catch()로 연결된 후속 작업으로 전달됨.
프로미스 처리 흐름 - 출처 : MDN
pending 상태는 promise 객체의 고유한 특징 중 하나이다. 비동기 작업의 결과가 아직 결정되지 않은 상태 즉, 대기 상태라고 보면 된다.
비동기 작업을 수행하는 동안 작업의 결과가 어떻게 될지 모르기 때문에, 이후에 발생할 성공(resolve)이나 실패(reject) 상태 전환을 기다리는 단계인 것이다.
비동기 작업을 처리하는 promise.
이 promise를 좀 더 직관적이고 읽기 쉽게 만들어주는 async/await에 대해 알아보자.
여기서의 promiseTest는 promiseTest라는 이름의 함수를 선언하고 promise를 반환하게 한다.
async 키워드로 비동기 함수를 정의하고, await 키워드로 Promise가 완료될 때까지 기다리며 resolve가 호출되면 비동기함수에 성공 값이 할당되고, reject가 호출되면 catch 구문으로 넘어간다. Promise가 실패할 경우 에러가 이 구문에서 처리된다.
위에서 살펴본 promise.js 파일의 Promise와 거의 동일하나, promise.js에서는 .then()과 .catch()를 사용해 Promise를 처리하지만, async_await.js에서는 async/await와 try/catch로 처리한다.
async/await 방식은 동기적인 코드처럼 작성할 수 있어 가독성이 좋다고 한다.
