드디어 기다리고 기다리던 리액트 첫시간!!!! 어떤 것일지 궁금하면서도 잘 따라갈 수 있을지 걱정도 되고 만감이 교차하는 순간이다. 오늘은 개인과제의 내용을 면밀히 살펴보고 기초 강의를 찬찬히 집중 수강하는 것이 목표이다🔥
리액트
A JavaScript library for building user interfaces
building UI : 웹 또는 앱 애플리케이션의 UI를 구축하는 것
- React.js :
SPA 기반의 프론트엔드 개발 프레임워크 중 하나로, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용한다.
SPA(Single Page Application) 아키텍쳐
단 한개의 페이지로 이루어진 애플리케이션으로, M(multiple)PA와 상반된 개념
기존 MPA가 갖고 있는 re-rendering으로 인해 UX가 저하되는 점을 보완
-
SPA의 특징과 장점
서버에 리소스를 1회 요청 -> index.html 하나만 있고, 그 이후에는 필요할 때 데이터를 받아와서 기존 페이지를 '수정'하므로 -> 사용자 입장에서는 re-rendering으로 인한 화면 깜빡임/위치 재조정 등의 불편함이 없다. -
SPA의 단점
SEO를 위해서는 HTML 페이지 전체가 필요하기 때문에 SPA는 SEO에 약하다.
컴포넌트
벽돌을 쌓아 집을 짓듯 컴포넌트는 개발을 하기 위한 벽돌이라고 생각하면 된다.
리액트 필수 ES6 문법
- 상수와 변수
상수(const)와 변수(let) 모두 block level scope를 가진다.
즉 함수 안에서 선언된 변수는 함수 안에서만 유효하다.
- Object
key-value pair로 구성되어 있다. key와 value의 값이 동일한 경우에는 value를 생략해서 표현할 수 있다. 얕은복사로 인해 바뀌면 안되는 obj가 함께 변경될 수 있으니 깊은 복사를 할 수 있도록 유의해야 한다.
<script>
const obj1 = {
value1: 10,
},
const obj2 = obj1
// 얕은복사: obj1을 복사하여 새로운 객체를 만든 것이 아니라
// obj1가 참조하는 주소값을 복사하여 함께 쓰게 된 것
obj1.value += 1;
// 따라서 둘 중 하나에 변화를 주게 되면
// obj1, obj2 둘 다 내용이 바뀌게 된다.
const obj3 = JSON.parse{JSON.stringify(obj1)}
// 요렇게 해주면 새로운 객체가 만들어 진 것이므로
console.log(obj3) // 10이 출력된다.
</script>- Template Literals
백틱(`)을 이용하여 멀티라인으로 텍스트와 함수를 함께 쓸 수 있다. 함수는 플레이스 홀더(${함수명}) 방식으로 쓸 수 있다.
- 객체 비구조화 = 구조분해할당
const person = {
name: "김민지",
age: "20",
};
const { name, age, notFound } = person;
// 객체 안에 있는 값의 구조가 해체되어 각각 변수에 할당됨
console.log(name); // 김민지
console.log(age); // 20
console.log(notFount); // undeifined- 배열 비구조화
const testArr = [1, 2, 3];
const [one, two, three, four] = testArr;
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3
console.log(four); // undefined- 전개 연산자
(1) 나머지 요소를 또 다른 배열로 반환하는 경우
let [name, ...rest] = ["김민지", 20, "서울"]
console.log(name); // 김민지
console.log(rest); // [20, "서울"]
(2) 배열의 요소를 다른 배열에 넣는 경우
let names = ["Steve", "Tony"};
let students = ["Bucky", ...names];
console.log(students); // ["Bucky", "Steve", "Tony"]- 화살표 함수
// {}와 return문을 생략하여 간략하게 화살표함수로 표현할 수 있다.
// 단, return문이 1문장일 때
const mySum1 = (x, y) => x + y;CRA
- CRA: Create React App, 한 줄의 명령어 입력으로 프로젝트 개발에 필요한 필수요소를 자동으로 구성하는 방법! 리액트 프로젝트를 구성하기 위해 필요한 react, react-dom, babel, webpack 등을 자동으로 구성
리액트 프로젝트 생성하기
npx create-react-app week-1 명령어로 새로운 리액트 앱을 생성할 수 있다. 생성하고 npm start 하고 나서 jsconfig.json 파일을 만들어서 절대 경로 설정하는 것까지 쭉쭉 진행하고 있는데, 계속 파일 내에 오류가 발생하고,
억지로 저장한 다음 start npm 했더니 캡쳐와 같은 오류가 한바가지 뜨는 것이다. 검색도 해보고 팀원분께도 질문했는데, 이 때 2가지의 문제가 있었던 것이다.
1. jsconfig.json 파일의 위치를 잘 확인하자
요 캡쳐에서 보이는 것처럼 jsconfig.json 파일이 package.json과 동일한 레벨에 위치해야 한다. 왼쪽에 보이는 연한 회색라인과 파일의 들여쓰기 부분을 잘 보면 확인할 수 있다. 분명히 잘 따라하고 있었고, 꼼꼼히 확인했다고 생각했는데, 특정 폴더 안 예를 들면 src 폴더 안에 해당 파일이 생성<되어서 계속 오류가 났던 것이다.
2. 터미널창에서 현재 작업 위치를 잘 확인하자
pwd로 현재 디렉토리를 확인할 수 있다. 캡쳐에서 처음에는 4주차_리액트입문 폴더 위치였는데, 여기서 npm start 명령어를 실행했더니 npm ERROR! code ENOENT 어쩌구저쩌구 빨간색 글자로 무시무시한 오류 메시지가 떴다. 현재 경로가 npm start하고자 하는 경로와 다르기 때문에 나는 오류이다. cd 명령어를 사용해서 리액트 프로젝트 파일들이 있는 상위 폴더(캡쳐에서는 week-1)로 이동해 준 다음 npm start 하면 오류 없이 성공적으로 실행된다!
