공부/React

리액트 입문주차 1주차 - 1

뀨뿌뀨뿌 2023. 6. 23. 15:44

1.  React란?

 ⅰ. React란?

  • A JavaScript library for building user interfaces
    • 공식문서에서 소개내용
    • 유저 인터페이스를 빌딩하기위한 자바스크립트 기반의 라이브러리
    • UI란 사용자에게 보여주기 위한 사용자가 볼 수 있는 부분을 만드는 프론트엔드 영역
  • UI를 Building한다는 것은?
    • 웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분(프론트 엔드 영역)을 구축한다는 의미와 같음!!
React.js는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용함
비슷한 프레임워크로 AngularJS, VueJs가 있음

ⅱ. SPA(Single Page Application) 아키텍쳐

  • SPA(Single Page Application) 아키텍쳐의 정의
    • 한 개의 페이지로 이루어진 애플리케이션이라는 말
      => MPA(Multi page Application)과는 상반된 개념
    • 웹인데 애플리케이션이라고 하는 이유
      ❓ why? 사용자 경험이 UX가 너무나 부드럽고 마치 Application을 만지는것과 비슷하다고 해서 사용, Web App이라는 말도 사용함
  • 기존 MPA의 문제점(super easy version)
    • 웹사이트의 하나의 부분을 클릭하면 다시 로딩됨
    • 요즘 시대에는 리렌더링(re-rendering) 즉, 페이지가 갱신되는 사오항이 엄청나게 많기 때문에 페이지가 계속해서 깜빡거리게됨
      => UX가 나빠짐
  • SPA의 특징과 장점
    • 한개의 페이지(Single Page)로 구성된 웹 앱
    • 서버에 1회 리소스를 요청하게됨
    • 그 이후에는 필요할 때, 데이터만 받아와서 기존 페이지를 수정해주는 방식으로 화면을 수정함
    • 사용자 입장에선 깜빡임이 없기 때문에 굉장히 자연스러운 UX(User Experience)를 구현할 수 있음
    • 비슷한 기술들로 Angular, Vue가 있지만 구현의 차이는 각각 존재함
  • SPA단점
    • SEO에 약함
    • SEO(Search Engine Organization)을 위해서는 HTML 페이지 전체가 필요하지만 SPA페이지의 HTML 파일들은 아래와 같이 생겨서 검색엔진 즉, 로봇이 찾을 수 없음!
    • ex) 구글에서 어던 키워드를 입력할 때 관련 페이지를 추천해주는데 이것이 동작하기 위해서는 구글에 잇는 검색을 도와주는 엔진이 찾으려고 하는 웹사이트들을 잘 찾을수 있도록 홈페이지가 HTML파일을 잘 전달해 줘야함
<html>
<head>
  <title>리액트 프로젝트</title>
  <link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>

ⅲ.  왜 React일까?

  • SPA 프레임워크의 종류
    • ReactJS
      ✔ 페이스북이 만들고 유지보수
      ✔ 선발주자인 만큼 막강한 커뮤니티와 자료를 보유하고 있음
    • VueJS
      ✔ easy to learn, simple
      ✔ 꾸준히 성장하는 중
      ✔ 후발주자라 어쩔수 없이 market share가 적음 => 관련 자료가 적음
    • AngularJS
      ✔ 안정적인 프레임워크
      ✔ hard to learn, heavy. 나온지 꽤 됐음에도 점유율이 낮음
  • 그중에 React인 이유
    • NPM trends
    • RN(React Native)와의 상생, VR에서 활용가능
    • 막강한 커뮤니티
    • 채용공고가 많음

ⅳ. 컴포넌트란?

  • 리액트가 채택한 개발 방법
    • 컴포넌트는 하나의 벽돌이라 생각하면 쉬움
    • 헤더(Header) 컴포넌트, 바디(body) 컴포넌트, 푸터(Footer) 컴포넌트 만들어서 벽돌을 쌓아 올리듯이 개발함
    • 어떤 웹 사이트에 변경이 일어난다고 했을때
      SPA 기반 : 컴포넌트 단위로 변경사항을 반영하기 때문에 깜빡임이 없음 => 렌더링
      MPA 기반 : 하나의 변경사항을 반영하기 위해 전체 페이지 Re-load됨

2.  React에서 자주 사용되는 필수 ES6 문법

ⅰ.  상수와 변수

  • 상수 - const(constant : 변함없는 수)
    • 재할당 불가, 내부 속성값은 수정 거눙
  • 변수 - let
    • 재할당 가능
  • 둘다 block level scope를 가짐
const a = 1;
let b = 3;

// a = 3; TypeError: Assignment to constant variable.
// a라는 상수에 할당하려고 했다는 오류가 발생
b = 1; // 오류가 나지 않음

console.log("a", a);
console.log("b", b);
  • var를 사용하면 안되는 이유 - 오해가 생길수 있음
    • 블록레벨 스코프(block level scope) 때문에 중괄화 안에서 선언한 변수는 그 안에서만 유효해야 하는데 var는 그렇지 않음
if (1 == 1) {
  // 항상 이안으로 들어옴
  var a = 3;
  console.log("a", a);  // a 3
}

console.log("바깥a", a); // 바깥a 3

ⅱ.  Object 선언, 단축 속성, 객체 복사

  • 객체(object)에서 가장 중요한 것은 key - value pair
  • value의 형태는 어떠한 것도 올 수 있음
  • 단축속성 : key, value가 일치하면 생략할 수 있음(ES6)
const name = "wonjang";
const age = 21;

const testObj = {
  name,
  // age: age, 키와 value가 같은 모양이 있으면 ES6에서 이를 생략할수 있게해줌
  age,
  company: "Team Sparta",
  doSomething: () => {},
};
  • 복사!!
const obj1 = {
  value1: 10,
};

const obj2 = obj1; // 1번째 방법
// obj2.value1 += 1;
const obj3 = JSON.parse(JSON.stringify(obj1)); // 새로운 객체, 새로운 메모리를 만들어냄

obj1.value1 += 1;

// 만약에 복사한 obj2를 바꾸면 어떻게 될까?
// 예상: obj2가 바뀌면 됨
// 실제: obj1도 함께 바뀌어버림

console.log("obj1", obj1);
console.log("obj2", obj2); // obj2 { value1: 11 }
console.log("obj3", obj3); // obj3 { value1: 10 }

❓ 위에 코드에서 얕은 복사가 생기는 과정

✔ const obj2 = obj1; 이런 식의 얕은 복사 방법은 주의 해야함!! => 의도치 않은 변경이 일어날 수 있으므로.
❗ JSON.parse같은 복사의 방법으로 새로 데이터를 복사해서 사용하는 방법이 좋음

ⅲ.  Template Literals

  • 백틱(``)안에 자바스크립트 문법을 넣을수 있음
  • placeholder 안에 넣어주면 됨
  • 멀티라인을 작성할때 좋음
const testValue = "제어하는 값";
console.log(`문자열 ${testValue} 입니다.`);

const testValue2 =
  "asdfASDFASDFASD" +
  "ASDFASDF" +
  "멀티라인을 사용하고 싶으면 따옴표는 이렇게 해야됨";
const testValue1 = `
  asdfasdfasdfasdf
  asdfasdfasdfasdfasdf
  asdfasdfasdfasdfasdf
  다양한 라인을 쓸때 의미가 있어짐
`;

ⅳ. 배열 / 객체 비구조화(Array / Object Destructuring) / 구조분해 할당

  • 비구조화를 구조분해 할당이라고도 함!!!
  • De(out, 반대) + structur(구조) + ing
  • 객체의 구조분해 할당은 key값을 가져와야함
  • 배열의 구조분해 할당은 배열안에 위치와 동일해야함
// 객체
const person = {
  name: "르탄",
  age: "21",
};

const { name, age, notFound } = person;

console.log(`name ${name}`);
console.log(`age ${age}`);
console.log(`notFound ${notFound}`); // notFound undefined

// 배열
const testArr = [1, 2, 3, 4, 5];

const [one, two, three] = testArr;

console.log(`one ${one}`);
console.log(`two ${two}`);
console.log(`three ${three}`);

ⅴ. 전개 연산자(Spread Operator)

  • 전개연산자(...)를 이용하여 아래와 같이 활용할 수 있음
// ... 뒤에 나머지 를 한번에 넣어주기
const [name, ...rest] = ["wonjang", 21, "Gyeongi"];
console.log(`name ${name}`); // name wonjang
console.log(`rest ${rest}`); // rest 21,Gyeongi

// ... -> 배열의 구조를 빼는것으로 활용함
const names = ["Steve", "John"];
const students = ["Tom", ...names, ...names]; 

console.log(`students ${students}`);

const tom = {
  name: "Tom",
  age: 10,
  region: "Seoul",
};

const steve = {
  ...tom,
  name: "Steve",
};
console.log(`tom ${tom}`);
console.log(`steve ${steve}`);

ⅵ. Arrow Functions

  • 함수 선언 기본방법
    function (매개변수) {
       return문
    }
  • 화살표 함수의 선언방법
    const 변수명 = (매개변수) => {
       return 문
    }
  • 화살표함수에서는 매개변수가 한개일때 소괄호가 생략가능하고, return문 한줄만 있으면 return, 중괄호가 생략이 가능함
function mysum1(x, y) {
  return x + y;
}

const mysum2 = (x, y) => x + y;

console.log(mysum1(1, 2));
console.log(mysum2(1, 2));

3. 개발환경 세팅하기

ⅰ.  필수 프로그램 설치

  • 크롬 브라우저
  • VScode
  • git
  • Node
    • node를 설채해야지 npm을 설치할 수 있음
    • npm 이란?
      ✔ NPM(Node Package Manager)은 무수히 많은 third-party 패키지들이 모여있는 집합소
      ✔ 우리는 npm에서 여러 패키지를 다운받아서 활용할 수 있음
      📍 비슷한 것으론 yarn이 있음(명령어로써 비슷하다는 말) -> npm yarn 둘다 프론트엔드 의존성을 관리하기 위한 패키지 매니저!!!!
// 노드 버전 확인
node -v
  • yarn
// 터미널에서 yarn 설치하기
// -g => global의 약자 패키지 베이스가 아니라 내 컴퓨터 전반에 있어서 무조건 쓸수 있음을 나타냄
npm install -g yarn

// yarn 설치 확인하기(버전확인)
yarn -v

// yarn으로 패키지 설치하는 방법
yarn add 설치할 패키지 이름

ⅱ. npm과 yarn

  • 공통적인 특징
    • 둘다 자바스크립트 런타임환경인 노드(Node.js)의 패키지 관리자
    • 애플의 앱스토어나 구글의 플레이스토어처럼 전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들 또는 프로그램을 온라인 데이터 베이스에 올려놓는데 그걸 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자
  • 차별적인 특징
    • NPM
      ✔ node.js를 설치할 때 자동으로 생성됨
      ✔ Node Package Manager의 약자
      ✔ NPM platform 자체
    • YARN
      ✔ 2016년 페이스북에서 개발한 패키지 관리자
      ✔  npm과 호환성이 좋고, 속도나 안정성 측면에서 npm보다 월등히 좋음
    • 요약
      ✔  속도: yarn이 빠름
      ✔  보안: yarn이 좋지만 최근 npm의 보안 업데이트도 크게 향상됨
  • 명령어

npm, yarn 명령어[출처 : Cracking Vue.js]

📚 --save라는 명령어는 yarn에서는 하지 않음
     package.json이라는 파일 안에는 이 프로젝트에 담겨있는 dependency라는것이 있음
     dependency라는 것은 이 프로젝트가 의존하고 잇는 패키지들이라는 것
     의존하고 있는 패키지들의 목룍을 넣기 위해서는 npm은 반드시 --save,
     yarn은 add만 하면 기본적으로 save명령어가 내장되어 있음

어떠한 것을 사용해도 괜찮음
why? 지속적으로 관리되고 있고, 넓은 커뮤니티가 있기 때문에
이 강의에선 주로 yarn을 사용함!!!

ⅲ. javascript 런타임 환경 종류

  • 런타임(runtime)이란?
    • 프로그래밍 언어가 구동(runnint)되는 환경(environment)을 말함
    • 자바스크립트 언어가 구동되는 환경을 말함
  • 자바스크립트의 대표적인 런타임 환경은 2가지
    • 브라우저(ex : Chrome, Microsoft Edge, Firefox)
    • node 환경
// 아래 파일을 node 환경에서 실행하면 오류가 발생해요!

// test.js
function printAlert() {
	alert('이 함수는 브라우저 환경에서만 실행됩니다.');
}

printAlert();

// ReferenceError: alert is not defined 오류 발생
// 브라우저의 고유 특성들은 node환경에서 먹히지 않음
  • 리액트를 이용하여 웹 애플리케이션을 개발하는 과정에서는 노드 환경이아닌 브라우저 환경을 이용하여 개발함
저작자표시

'공부 > React' 카테고리의 다른 글

리액트 숙련주차 - 1  (0) 2023.06.30
리액트 입문주차 1주차 - 5  (0) 2023.06.29
리액트 입문주차 1주차 - 4  (0) 2023.06.27
리액트 입문주차 1주차 - 3  (0) 2023.06.25
리액트 입문주차 1주차 - 2  (0) 2023.06.23

'공부/React'의 다른글

  • 현재글리액트 입문주차 1주차 - 1

관련글

티스토리툴바