프로젝트(크롬익스텐션 개발기)

크롬익스텐션 개발과정기 1 -React란

Cycrypt0 2021. 9. 12. 15:15
728x90

 

크롬익스텐션 개발 과정

상태 시작 전
스프린트  
에픽  
엔지니어  
우선순위  
유형  
작성일시
작업  
제품 관리자  
타임라인  

Overview

  • popup

    익스텐션 파비콘을 클릭하면 나오는 팝업창

  • newtab

    크롬에서 새 탭 열기 버튼을 클릭했을 때 생성되는 새 탭을 담당

  • option

    익스텐션에서 우클릭 후 옵션을 선택하면 열리는 페이지 담당

  • background

    눈에 보이는 부분은 아니지만 익스텐션이 실행될 때 함꼐 실행되는 부분

     

Add Extension

→ 리액트 프로젝트 빌드 폴더 등록하기

🤟리액트를 사용하는 이유

-리액트는 MVC 모델 중 View에 초점을 맞추고 있어, 사이트의 UI 부분 수정만을 담당하는 Extension의 성능과 목적에 부합하기 때문

-리액트라는 js 프레임워크를 이용하며 웹 기술에 조금 다가가기위함이다.

 

React

리액트를 사용하는 이유

→ 프로젝트가 거대해질수록 DOM 영역의 사용자 인터렉션이 늘어나는데, 일반 Js나 JQuery만으로 관리하기엔 어려움 (적절한 컨벤션을 가지고 있다면 불가능한 일은 아님)

 

→ 프론트엔드 프레임워크 BIG 3 = (React, Angular, Vue), 똑같은 문제를 다른방식으로 처리하는것 뿐임 ㅇㅇ

 

이 중 리엑트는 컴포넌트라는 개념에 집중되어, 데이터를 넣으면 우리가 지정한 유저인터페이스를 조립해서 보여준다.

 

Virtual DOM

일반적은 프론트엔드에서 변화를 주려면, 특정 이벤트가 발생했을 때, 모델에 변화를 일으키고, 변화에 따라 어떤 DOM을 사용해야하는지 로직을 정해줘야함

 

페이스북에서는 이 모든것들을 변화시키기 보단 View 부분만 업데이트 하자 라는 생각에 기인하여 리엑트를 개발함 ⇒ DOM 변화를 최소화하는 개념 (성능적으로 유리함)

https://velopert.com/3236 → Virtual DOM에 관한 자세한 설명

 

BUT React 가 DOM보다 빠르진 않음!!

 

 

컴포넌트

웹 애플리케이션에서 사용하는 ㅇUI를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수성을 우수하게 해줌

 

초기 start-react-app <app name> 을 통해 리액트 앱을 실행시켰다면 해당하는 부분은 App.js에서 확인 가능함.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

컴포넌트를 생성하는 방법

  1. 위 코드처럼 클래스를 통해 생성한다.
  1. 함수를 통해 컴포넌트를 생성한다.

컴포넌트에는 꼭 render()함수가 필요하고, 내부에서는 JSX를 return 해줘야 한다.

마지막 export를통해서 꼭 내보내줘야 다른곳에서 해당 컴포넌트를 불러와 사용이 가능하다.

 

컴포넌트가 사용되는 경로

index.js를 확인해보면 App을 import해 사용하는것을 확인할 수 있다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

다음으로 ReactDOM.render 를 사용하여 컴포넌트를 보여준다.

첫번째 파라미터는 렌더링할 결과물이고, 두번째 파라미터는 컴포넌트를 어떤 DOM에 위치시킬지 정해준다.

즉, APP 을 불러와 root 위치에 그려주겠다 라는 뜻이다.

root의 경우 index.html 에서 찾아볼 수 있다.

 

JSX

간단히 말해서 React 작업을 쉽게하기 위해서 JSON 형태의 작업을 HTML과 비슷한 문법으로 썼을 때 변환해주는 작업이다.

 

  • 두개의 엘리먼트는 하나의 엘리먼트로 묶여있어야 한다
    • ex)
    return (
      <div>
        Hello
      </div>
      <div>
        Bye
      </div>
    );
// 위와 같은 코드를

return (
      <div>
        <div>
          Hello
        </div>
        <div>
          Bye
        </div>
      </div>
    );
// 아래처럼
    가장 간단한 방법이 div 태그로 감싸는 것이다.

  • return ( <Fragment> <div> Hello </div> <div> Bye </div> </Fragment> );
  • 다만 위와 같은 경우는 대안일 뿐이고, 근본적인 방법은 Fragment 를 이용하는 방법이다.
728x90