위와 같이 npm init react-app .(dot) 을 입력하면 폴더 내에서 리엑트 앱이 설치됩니다. 여기서.(dot)은 파일 경로를 뜻하는데 현재 폴더에서 프로젝트를 만들겠다는 의미입니다.
다운로드가 완료되면 위와 같이 여러 파일들이 생성된 것을 보실 수 있습니다. 이제 프로젝트를 실행해 보겠습니다. 간단합니다. 터미널에서 npm run start를 입력하고 엔터를 눌러주면
위와 같이 브라우저가 자동으로 열리고 실행되는 것을 보실 수 있습니다. 주소는 대부분 http://localhost:3000/로 보이고 만약 브라우저 창을 닫으면 이 주소를 입력해 들어가면 됩니다. 자 이제 다시 종료를 해볼 껀대요. 종료 커맨드는 다음과 같습니다. 터미널에 들어가서 Ctrl + c를 입력해 주고 Y를 입력해 주면 앱이 종료되고 브라우저를 새로고침 하면 페이지가 동작하지 않는 것을 확인할 수 있습니다.
개발이 완료되면 인터넷에 배포를 해야하는대요. 그런데 이런 코드들은 한번 가공을 해야합니다. 이 과정을 프론트 엔드에서는 빌드라고 합니다. 개발된 프로젝트를 빌드하려면 커맨드 창을 열고 "npm run build"를 입력합니다.
그럼 자동으로 알아서 웹에서 사용이 가능하도록 변환해 줍니다. 이 후 잘 빌드 되었나 확인하기 위해 "npx serve build"를 입력하면 로컬 환경에서 실행할 수 있도록 주소값을 줍니다.
요약
터미널 커맨드는 Ctrl + ` (백틱)
리액트 프로젝트 만들기 npm init react-app 파일경로 ex) npm init react-app .
원하는 요소를 새로운 배열로 추출한다. 원래의 배열은 수정되지 않고 새로운 배열로 복제된다.
let myArray = ['apple', 'banana', 'orange', 'grape'];
//마지막 인덱스 아규먼트가 없으면 시작 인덱스부터 끝까지 추출된다.
console.log(myArray.slice(1,3)); // banana,orange
console.log(myArray); // apple banana orange grape
forEach
배열의 요소를 하나씩 살펴보면서 반복작업한다. 리턴값은 void라 map메서드를 사용하는 일이 더 많다. 콜백함수를 첫 번째 아규먼트로 받는다. (index와 array는 생략가능)
배열.forEach((element, index , arr) => {}); // 요소, 인덱스, 배열 순으로 아규먼트를 받는다.
let myArray = [1, 2, 3, 4, 5];
for (let value of myArray) {
console.log(value);
}
console.log('----------------')
myArray.forEach((element) => {
console.log(element);
}); // 위의 for문과 똑같이 작용하는 것을 알 수 있음.
결괏값
map
forEach함수와 작동하는 방식이 비슷하다. 콜백함수의 리턴값을 모아 새로운 배열을 만든다. 원배열에는 영향을 끼치지 않는다.
배열.reduce((prev,curr,curI,arr) => {},0)
//처음값, 현재값, 현재 인덱스, 배열
처음값(prev)은 생략하면 두 번째 아규먼트(curr)이 처음값으로 설정된다. reduce메소드의 두번째 아규먼트는 가장 처음 값을 할당하고 없다면 1을 자동으로 할당한다. 처음값에는 리턴 값을 반복적으로 할당하고 현재값에는 배열의 요소를 반복하여 할당받는다. (reduceRight는 반대에서 시작한다.)
const error = new TypeError('타입 에러 발생'); // 에러 객체 생성
throw error; // 의도적으로 발생
console.log('123'); // 에러 발생시키고 난 뒤의 코드는 실행 되지않음
try catch문
try catch 문 역시 if와 for문처럼 스코프를 생각해서 코드를 짜야합니다.(try {} 안에 변수 선언 시 중괄호 {} 안에서만 사용이 가능하다) try catch문을 사용하면 프로그램이 에러로 인해 멈추지 않고 catch {} 안에 있는 코드와 그 이후의 코드를 안전하게 실행시킬 수 있습니다. 만약 에러가 발생하지 않는다면 catch문의 코드는 실행되지 않습니다.
try 문에서 에러가 발생하면 에러 객체가 생성되는데 그건 catch의 첫 번째 파라미터로 전달됩니다.
