[React] 프론트엔드 개발 환경 정리

이번 프로젝트에서 React를 사용한 프론트엔드 개발을 진행하며 개발 환경에 대한 기록을 남겨두었다.
개발 플랫폼, 패키지 관리자, 상태 관리 라이브러리, 웹 컴포넌트 스타일링 방식 등 다양한 환경을 선택하여 개발할 수 있다.
나는 Node.js, yarn, React, Recoil, emotion/styled (CSS-in-JS)를 채택했고, 다른 환경들도 각자의 장단점이 있으니까 취향대로, 기능대로 잘 골라서 사용하면 될 것 같다.

☁ 개발 플랫폼

Node.js

확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다.

작성 언어로 자바스크립트를 활용한다.

안정적이고 신뢰도가 높은 LTS 버전, 최신 기능이 포함된 Current 버전이 있다.

→ 이번 프로젝트에서는 안정성 보장을 위해 LTS 버전을 사용

🚀 패키지 관리자

1. npm

Node.js를 설치할 때 함께 설치되는 기본 패키지 관리자이다.

사람들이 만들어 온라인 플랫폼에 게시한 패키지를 쓸 수 있다.

패키지를 한 번에 하나씩 설치한다.

보안 측면에서 yarn보다 취약하다는 문제가 있는 것으로 알려졌으나, 최근에는 업데이트를 통해 보안 문제를 많이 해결한 것으로 보인다.

2. yarn

여러 패키지를 동시에 설치하기 때문에 패키지 설치는 npm보다 빠르다.

yarn.lock 또는 package.json 파일에 있는 것만을 설치한다.

npm install yarn --global

npm, yarn 명령어

명령어	npm	yarn
dependencies 설치	npm install	yarn
패키지 설치	npm install [패키지명]	yarn add [패키지명]
dev 패키지 설치	npm install --save-dev [패키지명]	yarn add --dev [패키지명]
글로벌 패키지 설치	npm install --global [패키지명]	yarn global add [패키지명]
패키지 제거	npm uninstall [패키지명]	yarn remove [패키지명]
dev 패키지 제거	npm uninstall --save-dev [패키지명]	yarn remove [패키지명]
글로벌 패키지 제거	npm uninstall --global [패키지명]	yarn global remove [패키지명]
업데이트	npm update	yarn upgrade
패키지 업데이트	npm update [패키지명]	yarn upgrade [패키지명]

💎 JS 라이브러리

React

JavaScript는 웹 페이지를 만들 때 주로 사용된다. React는 사용자 인터페이스를 만들기 위해 쓰이는 JavaScript 라이브러리로, Single Page Application을 만들기 좋다.

컴포넌트 기반으로 동작하며, 이 컴포넌트들을 조합해 하나의 페이지를 완성한다.

이 때 리렌더링이 필요한 부분만 찾아서 업데이트하기 때문에, 웹사이트에서 빠른 동작이 가능하게 해준다. 또 라이브러리의 형태기 때문에 다른 라이브러리와 함께 사용하기 쉽고, React Hooks 같은 강력한 메소드들을 지원하면서 웹 프론트엔드 개발의 표준으로 자리잡았다.

🤿 상태 관리 라이브러리

상태 관리는 여러 컴포넌트들 간에 데이터를 공유하는 방법이다. 이 상태(state)는 자식 컴포넌트에게만 전달할 수 있는데, 컴포넌트가 많아지고 복잡해질 수록 이 상태를 전달하는 것이 어려워진다.

이 문제를 해결하기 위해서 사용하는 것이 상태 관리 라이브러리로, 상태를 전역 변수처럼 만들어 모든 컴포넌트에서 접근이 가능하도록 만들어 준다.

1. Redux

JavaScript 앱에 사용하는 상태 관리 라이브러리이다. React, Vue 등 다른 라이브러리와 함께 사용한다.

현재 상태 관리 라이브러리로 가장 많이 사용되고, 값의 변경 사항을 DevTools를 이용해 확인할 수 있다. 신뢰성 있는 검증된 라이브러리이다.

yarn add @reduxjs/toolkit

2. Recoil

React를 활용한 앱에 사용하는 상태 관리 라이브러리이다.

React를 써본 사람이면 금방 이해할 만한 직관적이고 간단한 구조로 이루어져 있고, 코드의 양이 Redux에 비해 적은 편이다. 사용하는 방식이 React에 가깝다고 볼 수 있다.

yarn add recoil

💄 웹 컴포넌트 스타일링

1. CSS-in-JS

JavaScript 코드에서 CSS를 작성하는 방식이다. 중복되는 클래스네임을 고려할 필요가 없으며, JS 코드와 CSS가 상태값을 공유할 수 있어 개발이 편리하다는 장점이 있다.

하지만 타인이 코드를 이해하려면 두 번 왔다갔다 해야 한다는 단점이 있다.

• Styled Components

  • props에 따라 다른 스타일을 적용하는 기능을 제공한다.

  • props가 많아지면 …props의 형태로 넘겨서 사용이 가능하다.

  • CSS-in-JS 라이브러리로 가장 많이 사용되고, 전역 스타일 적용(다크모드 등)에 편리한 듯하다.

    const StyledButton = styled.button`
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 1rem;
      line-height: 1.5;
      border: 1px solid lightgray;
    
      color: ${(props) => props.color || 'gray'};
      background: ${(props) => props.background || 'white'};
    
      ${(props) =>
        props.primary &&
        css`
        color: white;
        background: navy;
        border-color: navy;
      `}
    `;
    
    function Button({ children, ...props }) {
      return <StyledButton {...props}>{children}</StyledButton>;
    }
    
    export default Button;

• Emotion

  • styled-components 보다 퍼포먼스가 전반적으로 좋게 나온다는 평이 있다.

  • JSX 안에서 해당 태그가 어떤 태그인지 바로 알 수 있다. styled-components는 이게 안 된다.

  • @emotion/react, @emotion/styled

  • CSS props를 결합할 수 있다.

    <div css={[style, themes[theme], sizes[size]]} />
      
    const themes = {
      primary: css`
        color: red;
      `,  
      secondary: css`
        color: blue;
      `
    }
    const sizes = {
      small: css`
        fontSize: 0.75rem;
      `,
      medium: css`
        fontSize: 1rem;
      `
    }

2. CSS-in-CSS

CSS를 모듈화하여 사용한다. 사용자가 정의한 클래스네임과 자동으로 만들어진 고유한 클래스네임을 만들어 scope를 제한하는 방식이다. JavaScript 해석 과정이 따로 없기 때문에 훨씬 빠르다.

하지만 쓰지 않을 것이다. 개인적으로 CSS-in-JS보다 불편하기 때문!