INTHEJ BLOG

발단

React 프로젝트에 사용하려고 선택한 html 템플릿에 스타일을 살펴보니 일반 css 와 sass 2가지 형태로 지원하였다.

sass로 적용하고 싶어 별도의 loader를 설치 한 이후 빌드 하니깐 컴파일 에러가 발생하였다.

(typescript 패키지 @types/node-sass 가 node-sass 패키지를 의존하여 같이 설치)

$ yarn add node-sass @types/node-sass

원인

node-sass 버전 충돌 이슈

설치된 패키지의 버전을 살펴보니 sass 는 6버전, @types sass 는 4버전이 설치되어있다.

@type node-sass 패키지가 node-sass 4.x.x, 5.x.x 버전까지만 호환되는 것으로 보인다.

stackoverflow: https://stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0

해결

설치된 패키지를 삭제하고 버전을 지정하여 설치

$ yarn add node-sass@4.14.0 @types/node-sass@4.11.2

리액트 라우터는 리액트의 화면 전환을 도와주는 역할을 한다. 일반적인 웹에서 a 태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 React-Router를 통해 Link 컴프넌트를 사용하여 화면을 전환한다. 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로 페이지 이동 시 굳이 화면 전체를 새로 고침 할 필요가 없기 때문이다.

a 태그를 사용할 경우 페이지를 아예 새로 불러오게 되므로 리액트 앱이 지니고 있는 상태들도 모두 초기화되고 페이지가 새로 렌더링 된다.

리액트에서는 SPA 특징을 잘 사용하기 위해 React Router를 사용한다.

Create React App 이란?

create-react-app 은 페이스북에서 만든 react 웹 개발용 boilerplate입니다. react는 es6 버전의 javascript로 작성하는 것이 일반화되어있기 때문에 webpack이라는 모듈 번들러로 컴파일 및 빌드 하는 것이 필수라 이 환경을 세팅해 줘야 합니다. 직접 모든 개발 환경을 설정하지 않아도 페이스북이라는 거대한 기업에서 지속적으로 업데이트를 해주고 있고 쉽게 프로젝트 기본 환경을 구축할 수 있어서 많은 사람들이 사용하고 있습니다. 

설치

- js

yarn create react-app my-app

- typescript

yarn create react-app my-app --template typescript

Webpack 이란?

웹팩(webpack) 은 웹에서 사용되는 모든 자원(assets) 을 번들링 해주는 도구입니다. 번들링의 개념은 여러개 의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정을 의미합니다. 웹팩을 사용하면 자바스크립트 간의 종속성 뿐만 아니라 자바스크립트 내에서 필요한 css나 img와 같은 파일(.css, .jpg)도 번들링 해서 하나의 파일로 합쳐줘서 네트워크 요청을 최소화시킬 수 있습니다.

웹팩은 노드 모듈 중에 하나입니다. 웹팩을 사용하려면 Node.js 가 설치되어 있어야 합니다.

설치

yarn add webpack

NPM 이란?

NPM 은 Node Packaged Manager의 약자입니다. 자바스크립트 패키지 매니저이고 Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할을 하며 설치/관리를 수행할 수 있는 CLI를 제공합니다.

Yarn 이란?

Yarn 도 역시 프로젝트 관리자 역할을 하는 패키지 관리자입니다. 페이스북에서 만든 것으로 npm 서버에 비해 속도가 빠르고 npm 과 사용법이 비슷합니다. 

Reference: https://javascript.plainenglish.io/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f

npm vs Yarn 명령어

package manager (package-lock.json, yarn.lock)

리액트로 프로젝트를 개발하며 자주 볼 수 있는 npm 을 이용하면 package-lock.json, yarn 을 사용하면 yarn.lock 파일은 왜 자동으로 생성되는 걸까요?

패키지 관리를 위해 npm을 사용하든 yarn을 사용하든 해당 프로젝트의 메타 정보는 package.json 파일을 통해 관리가 됩니다. 이 package.json 파일에는 해당 프로젝트가 의존하고 있는 모든 패키지 이름과 버전이 나열되어 있는데요.

일반적으로 쓰이는 패키지들은 dependencies 항목에 명시되고 개발할 때만 필요한 패키지들은 devDependencies 항목에 명시됩니다.

개발자가 여려 명이 있는 개발팀에서 프로젝트에 투입되는 시간이 다르다면 각각 사용하는 설치 버전이 다를 수 있습니다. 만약 이렇게 된다면 개발자 A는 제대로 작동하지만 개발자 B에게서는 작동이 안 되는 이슈가 발생될 수 있습니다. 이런 상황은 패키지 매니저에게 패키지 잠금이 지원되지 않던 시절에 매우 골칫거리였던 문제였으며 이것을 해결하기 위한 패키지 잠금이 필요한 것입니다.

package-lock.json이나 yarn.lock 과 같은 패키지 잠금 파일에는 프로젝트에 패키지에 최초로 추가될 당시에 버전이 기록됩니다. 함께 개발하는 프로젝트에서 패키지 잠금 역할은 중요합니다. 최초에 setup 하는 개발자가 git에 패키지 잠금 파일을 반드시 올려서 다른 개발자들이 패키지가 꼬이지 않도록 신경 써야 합니다.