[TIL] d+12

river·2022년 3월 18일

😴

역시 오늘도 피곤 그 자체...
오늘부터 3주간 주특기 주간이다.
바로 학습에 돌입했는데, 중간에 1시간 정도 기절해버렸다(ㅋ)
1-7강 완전 통곡의 벽임...

Array 내장 함수

#map

const 원본 배열 = [1, 2, 3, 4, 5];
const 새 배열 = 원본 배열.map((arr_item) => {
	return arr_item + 1; 
});

---------------------
console.log(원본 배열);
 = [1, 2, 3, 4, 5]
console.log(새 배열);
 = [2, 3, 4, 5, 6]
 ---------------------

이런 식으로 원본 배열을 망가트리지 않으면서, 원하는 방식으로 배열의 각 요소를 변환할 수 있는 함수. 일종의 반복문이다.

#filter

 const 원본 배열 = [1, 2, 3, 4, 5]
 const 새 배열 = 원본 배열.filter.((arr_item) => {
 	return arr_item > 3;
 });
    
--------------------
 console.log(새 배열);
 = [4, 5]
--------------------

조건을 만족하는 항목만 골라내 새 배열로 만들어주는 함수.
원본 배열을 훼손하지 않는다.

#concat

const 원본 배열 [1, 2, 3, 4, 5];
const 새 배열 = [4, 5];

const 둘을 더한 배열 = 원본 배열.concat(새 배열);

--------------------------
console.log(둘을 더한 배열);
 = [1, 2, 3, 4, 5, 4, 5]
--------------------------

원본 배열에 다른 배열을 더해주는 함수.
원본 배열의 뒤로 합쳐지며, 중복되는 요소는 제거되지 않음.
원본 배열을 훼손하지 않는다.
~~콘캣... 귀여워...~~

#from

> 문자열을 배열로 만들기

const 문자열= "river";
const 문자 배열 = Array.from(문자열);

----------------------------
console.log(문자 배열);
 = ["r", "i", "v", "e", "r"]
----------------------------

> 문자열을 인덱스 배열로 만들기

const 인덱스 배열 = Array.from(문자열, (item, index) => {return index});
----------------------------
console.log(인덱스 배열);
= [0, 1, 2, 3, 4]
----------------------------

> 또 다른 사용 예시
const 새 배열 = Array.from({length: 4}, (item, index) => { return index; });

console.log(새 배열);
[0, 1, 2, 3]

배열이 아닌 것을 배열로 만들 때, 유사 배열을 복사해 새로운 배열로 만들 때, 새로운 배열을 만들 때 주로 사용된다.

유사 배열 : 배열과 비슷한 모양으로 생겼지만, 내장 함수를 사용하지 못하는 배열. ex)DOM nodelist

리액트 셋팅하기

1. NVM 설치 (node.js 버전 관리 툴)
https://github.com/coreybutler/nvm-windows/releases
- 버전 확인 : nvm --version
- node.js 설치 : nvm install [설치할 버전 넘버]
- 설치된 노드 리스트 : nvm ls
- 노드 버전 확인 : node -v
- 노드 버전 변경 : nvm use [사용할 버전 넘버]

2. 기본 터미널 bash로 변경

3. NPM으로 yarn 설치 (패키지 매니저)
npm은 노드 설치시 함께 설치된다.
- yarn 설치 : npm install -g yarn
- yarn 버전 확인 : yarn -v
- yarn으로 패키지 설치 : yarn add [설치할 패키지 이름]

4. yarn으로 CRA(create-react-app) 설치
웹 사이트 제작 시 필요한 것들을 종합해둔 패키지
yarn add global create-react-app

5. 리액트 프로젝트 만들기
yarn create react-app week-1

6. 리액트 프로젝트 시작하기
cd week-1
yarn start