네로개발일기

개발자 네로의 개발 일기, 자바를 좋아합니다 !

'web/React'에 해당되는 글 5건

  1. [React] package.json 명령어 npm start / npm run build 스크립트 차이점

    2022.02.10

  2. [React] JSX에서 {} 사용하기

    2022.01.11

  3. [React] DOM & Virtual DOM / What is DOM?

    2022.01.10

  4. [React] JSX 이해하기

    2022.01.06

  5. [React] npm start 시 process out of memory ERROR 발생 / Apple Slicon m1

    2021.12.06

[React] package.json 명령어 npm start / npm run build 스크립트 차이점

web/React
2022. 2. 10. 22:17
반응형

package.json 파일에 실행 스크립트는 start, build, test, eject 4가지 명령어가 있습니다.

일반적으로 start는 개발모드, build는 배포용이라고 알려져있다.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

1) npm run start

- 개발 모드로 프로그램을 실행하는 명령어이다.

- HMR(Hot Module Replacement)가 동작해 수정과 동시에 화면이 변경된다.

- 개발 모드에서 코드에 에러가 있을 경우 브라우저에 메시지를 출력한다.

- HTTPS 실행 옵션을 통해 https 인증서 없이 임시로 https 형태로 url을 만들 수 있다.

$ npm start
$ npm run start

> HTTPS 실행 옵션 사용해 실행

$ HTTPS=true npm start

 

2) npm run build

- 배포 환경에서 사용할 파일을 만들어준다.

- 압축 형태로 제공

$ npm build
$ npm run build

 

> 정적 파일 서비스 실행

serve 패키지는 노드(node.js) 환경에서 동작하는 웹 서버 애플리케이션

npx 로 실행하며 build 된 정적 파일을 서비스 할 때 간단하게 사용하기 편리하다.

$ npx serve -s build

 

3) npm test

- 테스트 코드를 실행합니다.

- create-react-app 에는 제스트(jest) 테스트 프레임워크가 기본 동작

 

> 테스트 대상

- __test__ 폴더에 밑에 있는 모든 자바스크립트 파일

- 파일 이름이 .test.js로 끝나는 파일

- 파일 이름이 .spec.js로 끝나는 파일

 

CI(continuous integration)와 같이 watch 모드가 필요 없는 환경에서는 다음 명령어로 테스트 코드를 실행

$ CI=true npm test

 

4) npm run eject

- 숨겨져 있던 create-react-app 내부 설정 파일의 노출한다.

- 바벨이나 웹팩 설정을 변경할 수 있다. (단점은 익숙해야 가능)

- npm run eject 외에도 방법이 존재한다.

  • 방법 1: react-scripts 프로젝트를 포크(fork) 해서 나만의 스크립트를 만든다.
  • 방법 2: react-app-rewired 패키지를 사용한다.

 

추천할 글 > Yarn이란?

https://frogand.tistory.com/82

 

[yarn] Yarn이란? 의존성 관리 / 패키지 매니저

❓ Yarn이란? yarn은 프로젝트의 의존성을 관리하는 javascript의 package manager이다. *Java의 gradle이나 Python의 pip와 같은 것. yarn은 npm과 마찬가지로 package.json을 통해 의존 패키지를 구분하고 프로..

frogand.tistory.com

 

728x90
반응형
저작자표시

'web > React' 카테고리의 다른 글

[React] JSX에서 {} 사용하기  (0) 2022.01.11
[React] DOM & Virtual DOM / What is DOM?  (0) 2022.01.10
[React] JSX 이해하기  (0) 2022.01.06
[React] npm start 시 process out of memory ERROR 발생 / Apple Slicon m1  (0) 2021.12.06
blog image

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

트랙백 개

댓글 개

[React] JSX에서 {} 사용하기

web/React
2022. 1. 11. 22:39
반응형

React에서는 JSX를 javascript로 변환하기 때문에 javascript 문법을 사용하기 위해서는 따로 mark를 해주어야 한다. => { }

Javascript 코드

<div className="card__top--weather">{weather}</div>

weather은 javascript 변수이다.

{ tags.map((tag, index) => {
    return (
        <div key={index} className="card__tags--tag">{tag}</div>
    );
 }) 
}

map이 javascript 함수이기 때문에 {}로 둘러싸여져 있다.

 

inline style

import React from 'react';
import Hello from './Hello';

function App() {
    const name = 'react';
    const style = {
        backgroudColor: 'black',
        color: 'yellow',
        fontSize: 24, // 기본단위 px
        padding: '1rem' // 다른 단위 사용 시 문자열로 설정
    };
    
    return (
        <>
            <Hello />
            <div style={style}>{name}</div>
        </>
    );
}

인라인 스타일은 javascript 객체 형태로 작성해야 한다. 따라서 javascript 객체인 style을 {style}로 사용하는 것이다.

import React from 'react';
import Hello from './Hello';

function App() {
    const name = 'react';
    
    return (
        <>
            <Hello />
            <div style={{
                backgroudColor: 'black',
                color: 'yellow',
                fontSize: 24, // 기본단위 px
                padding: '1rem' // 다른 단위 사용 시 문자열로 설정
             }}>
                 {name}
             </div>
        </>
    );
}

import / export

const a = 1;
const b = 3;
export {a};
export const c = 2;
export default b;

=> import b, {a, c} from './Example';

예) import React, { useState } from 'react';

 

export default로 export된 것은 {}로 감싸지 않고 Import를 하고, 나머지는 {}로 감싸서 import한다.

728x90
반응형
저작자표시

'web > React' 카테고리의 다른 글

[React] package.json 명령어 npm start / npm run build 스크립트 차이점  (0) 2022.02.10
[React] DOM & Virtual DOM / What is DOM?  (0) 2022.01.10
[React] JSX 이해하기  (0) 2022.01.06
[React] npm start 시 process out of memory ERROR 발생 / Apple Slicon m1  (0) 2021.12.06
blog image

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

트랙백 개

댓글 개

[React] DOM & Virtual DOM / What is DOM?

web/React
2022. 1. 10. 22:57
반응형

WHAT IS DOM?

HTML 문서의 구성요소들을 객체로 구조화하여 나타낸 것

웹 브라우저 내부에서 HTML 태그들은 객체 형태로 실행된다. 이 객체들을 DOM 객체라고 부른다. 즉, DOM 객체는 웹 브라우저 내부의 태그 객체이다.

* DOM과 HTML의 차이점

- HTML: 화면에 보이고자 하는 구조를 문서로 만든 것으로 단순 텍스트

- DOM: HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용

DOM의 특징

- 객체 지향적 설계

- HTML 문서 내의 모든 요소를 객체화해서 표현하고 접근하도록 함.

- 문서를 '트리 구조'로 표현

- HTML 문서를 텍스트가 아닌, 트리 구조를 갖는 객체들의 계층적 구조로 표현

- Javascript와 같은 script 언어를 통해 동적 제어 기능을 제공 (등록, 삭제, 수정, 이벤트 처리 등) - Javascript에 의해 수정될 수 있는 동적 모델

 

DOM은 어떤 형태일까?

DOM은 원본 HTML 문서의 객체 기반 표현 방식이다. 둘은 서로 비슷하지만, DOM이 가지고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다.

 

DOM 객체 구조는 "노드 트리"로 표현된다.

HTML 예시에서

<!DOCTYPE HTML>
<html lang="ko">
    <head>
    	<title>My blog</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <p>How are you?</p>
    </body>
</html>

아래와 같은 노드 트리로 표현된다.

노드 트리를 자바스크립트 객체로 표현할 수 있다.

{
    type: 'body',
    props: {},
    children: [
        {
            type: 'h1',
            props: {},
            children: ['Hello, world!']
        },
        {
            type: 'p',
            props: {},
            children: ['How are you?']
        }
    ]
}

웹 브라우저 Workflow

웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 거친다. 

-> DOM tree 생성

브라우저가 HTML을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM 노드로 이뤄진 트리를 생성한다 각 노드는 HTML 요소들과 연관되어 있다.

-> CSSOM tree 생성

* CSSOM(Cascading Style Sheets Object Model) tree: 요소들과 연관된 스타일 정보의 구조화된 표현

-> Render tree 생성

외부 CSS 파일과 각 요소의 inline 스타일을 파싱한다. 스타일 정보를 사용해 DOM tree에 따라 새로운 트리인 Render Tree를 생성한다.

-> 브라우저에 그려짐 (Layout, Printing)

레이아웃 과정을 거쳐 각 노드들의 스크린 좌표가 주어지고 paint() 메서드를 호출하여 스크린에 원하는 정보를 브라우저에 출력한다.

 

node가 변경될 때마다 위 과정을 새롭게 하기 때문에 속도가 느려진다.

 

Virtual DOM 동작 방식

1. 데이터가 업데이트되면, 전체 UI를 Virtual DOM에 리렌더링한다.

2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교한다.

3. 바뀐 부분만 실제 DOM에 적용된다.

 

Virtual DOM의 특징

- DOM의 가벼운 복사본

- In-memory에 존재, 실제로 렌더링되지 않음

- Javascript 객체로 이루어진 tree data structure

- React와 같은 UI 라이브러리에서 많이 쓰임

 

Virtual DOM이 렌더링 횟수를 줄여주는 예시

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root">
            <ul class="list">
                <li>red apple</li>
                <li>yellow banana</li>
                <li>orange mandarin</li>
            </ul>
        </div>
    </body>
</html>

비효율적 업데이트 (DOM)

const root = document.querySelector('#root');
const liTags = roo.querySelectorAll('li');

// 화면 렌더링 발생 1
liTags[0].textContext = 'red apple';
// 화면 렌더링 발생 2
liTags[1].textContext = 'yellow banana';
// 화면 렌더링 발생 3
liTags[2].textContext = 'orange mandarin';

효율적인 업데이트 (Virtual DOM)

const root = document.querySelector('#root');
const virtualDOM = document.createElement('ul');
virtualDOM.classList.add('list');

const appleLI = document.createElement('li');
appleLI.textContext = 'red apple';

const bananaLI = document.createElement('li');
bananaLI.textContext = 'yellow banana';

const mandarinLI = document.createElement('li');
mandarinLI.textContext = 'orange mandarin';

virtualDOM.appendChild(appleLI);
virtualDOM.appendChild(bananaLI);
virtualDOM.appendChild(mandarinLI);

// 한 번 렌더링
root.replaceChild(virtualDOM, root.querySelector('ul');

* 위의 virtualDOM 변수가 실제 Virtual DOM을 의미하지는 않는다.

 

Reconciliation(재조정)

Virtual DOM이 변경된 부분만 알아내는 방법

- 전체 DOM 트리를 탐색하고 비교하는 알고리즘 (diff algorithm)이 있지만, 이 알고리즘은 O(n^3)의 복잡도

=> React는 두 가지 가정을 기반하여 O(n) 복잡도의 휴리스틱 알고리즘을 구현하였다.

Reconciliation 두 가지 가정

1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어 낸다. 엘리먼트가 다르면 비교하지 않는다.

2. 개발자가 key prop을 통해 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야할지 표시해줄 수 있다.(key를 통해 비교)

=> 부모 노드의 타입이 다르면 자식 노드는 비교하지 않는다.

 

Virtual DOM은 정말 빠른가?

react는 실제 DOM의 복사본을 메모리에 저장한다. DOM을 수정하면 먼저 이러한 변경사항을 메모리 내 DOM에 적용하고 변화된 부분을 파악한다. 변경사항을 일괄 처리하고 호출을 통해 한 번에 실제 돔에 적용하여 리플로우와 리페인트를 최소화한다.

 

728x90
반응형
저작자표시

'web > React' 카테고리의 다른 글

[React] package.json 명령어 npm start / npm run build 스크립트 차이점  (0) 2022.02.10
[React] JSX에서 {} 사용하기  (0) 2022.01.11
[React] JSX 이해하기  (0) 2022.01.06
[React] npm start 시 process out of memory ERROR 발생 / Apple Slicon m1  (0) 2021.12.06
blog image

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

트랙백 개

댓글 개

[React] JSX 이해하기

web/React
2022. 1. 6. 22:17
반응형

JSX

html 태그를 생성하는 자바스크립트 소스코드를 간결하게 입력할 수 있도록 자바스크립트 문법이 확장된 것

 

1) JSX 문법 예 

var s = <div><img src="image.png"/></div>;

 

=> React에서 다음과 같이 쓰인 코드는 @babel이라는 자바스크립트 컴파일러를 통해 다음과 같이 변환된다.

 

2) 위 jsx 문법 예제를 자바스크립트 소스코드로 변환한 결과

var s = React.createElement("div", null,
	React.createElement("img", {src: "image.png"})
);

프로젝트를 빌드할 때, 빌드 도구가 jsx 문법의 소스코드를 자바스크립트 소스코드로 자동 반환해준다.

 

확장자

jsx 문법을 포함하는 자바스크립트 파일의 확장자가 옛날에는 *.jsx, 최근은 *.js

 

DOM 객체 (Document Object Model)

웹 브라우저 내부에서 html 태그들은 객체 형태로 실행된다. 이 객체들을 DOM 객체라고 부른다. 즉, DOM 객체는 웹 브라우저 내부의 태그 객체이다.

 

VirtualDOM 객체

jsx 문법으로 구현된 자바스크립트 코드에서 생성한 html 태그 객체를 VirtualDOM 객체라고 부른다. 이 객체는 웹 브라우저 내부의 DOM 객체와 다르다. 

자바스크립트 코드에 의해서 생성된 VirtualDOM 객체들과 동일한 구조로, 웹 브라우저 내부 DOM 객체들을 변경하는 작업이 react.js 엔진에 의해 실행된다. 이 작업에 의해 jsx 문법으로 구현된 내용이 웹 브라우저 창에 그려지게 된다.

728x90
반응형
저작자표시

'web > React' 카테고리의 다른 글

[React] package.json 명령어 npm start / npm run build 스크립트 차이점  (0) 2022.02.10
[React] JSX에서 {} 사용하기  (0) 2022.01.11
[React] DOM & Virtual DOM / What is DOM?  (0) 2022.01.10
[React] npm start 시 process out of memory ERROR 발생 / Apple Slicon m1  (0) 2021.12.06
blog image

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

트랙백 개

댓글 개

[React] npm start 시 process out of memory ERROR 발생 / Apple Slicon m1

web/React
2021. 12. 6. 22:41
반응형

💻  OS: macOS m1

✅  node version: 12.22.1

 

오류

mac m1에서 react 프로젝트를 실행시키기 위해 npm start 명령어를 사용

다음과 같은 오류 발생

FATAL ERROR: wasm code commit Allocation failed - process out of memory

 

검색해본 결과 mac m1에서 node version 15를 제외하고 잘 작동하지 않는다고 한다. 14도 되는데 12는 오류가 생기는 것 같다.

 

react-refresh-webpack-plugin과 webpack5 충돌하여 발생하는 것으로 보이고 (사실 필자는 react에 대해 아무것도 모른다...)

development에서 FAST_REFRESH 가 true가 디폴트로 실행된다. 

 

해결

아래 명령어를 사용해 해결하였다.

$ env FAST_REFRESH=false npm start

 

출처

https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/259

 

Apple Silicon / arm64 / M1 compatibility? · Issue #259 · pmmmwh/react-refresh-webpack-plugin

Hi, We're using & loving react-refresh-webpack-plugin - thank you! Recently Apple Silicon came out with arch64-based CPUs. Somehow, this plugin breaks on that architecture with a strange er...

github.com

https://github.com/facebook/create-react-app/issues/10090

 

npm start gives error · Issue #10090 · facebook/create-react-app

Npm start throws error. Project was created with npx create-react-app FATAL ERROR: WasmCodeManager::Commit: Cannot make pre-reserved region writable Allocation failed - process out of memory Error ...

github.com

참고

https://dev-momo.tistory.com/entry/React-Fast-Refresh

 

React Fast Refresh

최근에 React 프로젝트르 세팅하다가 React-Hot-Loader 문서를 보니, React Fast Refresh라는 새로운 도구가 나온 것을 발견했다. React-Hot-Loader를 만든 페이스북 개발자 Dan Abramov는, 기존 핫 로더에 한계가..

dev-momo.tistory.com

 

728x90
반응형
저작자표시

'web > React' 카테고리의 다른 글

[React] package.json 명령어 npm start / npm run build 스크립트 차이점  (0) 2022.02.10
[React] JSX에서 {} 사용하기  (0) 2022.01.11
[React] DOM & Virtual DOM / What is DOM?  (0) 2022.01.10
[React] JSX 이해하기  (0) 2022.01.06
blog image

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

트랙백 개

댓글 개

PREV [1] NEXT

  NOTICE

  RECENT POSTS

  RECENT COMMENTS

  SITE LINK

  TAGS

  COUNTER

  • Total :
  • Today :
  • Yesterday :

  CALENDAR

«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
 ·   ·   ·   · 
Powered by Tistory and DAUM
designed by 7day.

티스토리툴바