React 5. 리액트 프로젝트 만들기 - 개발 모드

2. React 프로젝트 만들기 - 2

 

- 개발 모드로 실행하기

 

이제 개발 모드를 실행해보도록 하겠다.

npm run start(또는 npm start) 명령어를 사용하여 웹 브라우저에서 리액트 프로젝트를 실행시킨다.

개발 모드의 경우 서버를 따로 켜지 않아도 프로젝트 실행이 가능하다.

 

 

여기서 하나 알아둬야 할 것은, 개발 모드의 경우 웹팩이 서버로 동작을 한다는 것이다.

npm run start 명령으로 동작한 react-scripts start가 내부적으로 웹팩을 서버 형태로 구동한다.

그렇기 때문에 npm run build와 달리 npm run start는 명령이 종료되지 않고 계속 동작한다.

 

 

웹팩 서버는 프로젝트의 파일들을 빌드하여 번들 파일로 만든 다음, 이를 반영한 index.html 파일을 생성한다.

그리고 react-scripts가 웹 브라우저를 실행하고 http://localhost:3000 주소로 접속한다.

그 다음, 웹팩이 준비해 둔 index.html에서 자바스크립트 코드를 실행해 웹 페이지를 화면에 보여준다.

 

 

- 핫 모듈 교체(개발 모드)

 

한 가지 중요한 것은, 개발 모드에서 코드를 수정, 삭제, 추가시 웹 브라우저에 즉시 반영된다는 것이다.

그리고 우리는 이것을 바로 눈으로 확인할 수 있어, 개발자의 생산성을 높여주는 효과가 있다.

이것은 바로 핫 모듈 교체 기능 덕분이다.

웹팩은 핫 모듈 교체라고 부르며, 핫 리로딩이라 불리기도 한다.

 

위에서 말했다시피 웹팩은 처음 빌드한 번들 파일들을 웹 브라우저쪽 index.html 파일에 반영한다.

이와 동시에 프로젝트 디렉토리에 새로운 파일이 생기거나 기존 파일이 수정, 삭제되는지를 감시한다.

그리고 처음 빌드한 번들과 다른 부분이 생기면 해당 부분만 빌드한 뒤,

웹 브라우저의 자바스크립트 코드에 심어둔 웹팩 코드와 협업하여 변경된 내용을 실시간으로 반영한다.

 

핫 모듈 교체 기능이 완벽한 것은 아니다.
정교하게 동작하지만, 그렇다고 또 100% 완벽한 것은 아니기 때문에
개발하다가 원하는 결과가 나오지 않을 시에는 웹 페이지를 새로고침 해보면 된다.
그러면 핫 모듈 교체를 강제로 수행하게 된다.

 

 

- 프리티어 적용

 

프리티어가 동작하려면

프로젝트의 package.json 파일이 있는 디렉토리에 .prettierrc.js 파일이 있어야 한다고 했다.

touch 명령어를 사용하여 .prettierrc.js 파일을 생성해준다.

 

touch .prettierrc.js

 

파일을 생성했다면, 프리티어 설정을 추가해준다.

 

module.exports = { 
  bracketSpacing: false, 
  // 객체 리터럴의 양쪽 중괄호 안쪽에 공백 추가 여부를 결정하는 속성.

  jsxBracketSameLine: true, 
  // 여러 줄로 된 JSX 요소의 >를 다음 줄에 단독으로 두지 않고 마지막 줄 끝에 배치할지 여부를 결정하는 속성.
  // 자동 닫는 요소에는 적용 X

  singleQuote: true,
  // 문자열을 표시할 때 큰따옴표 대신 작은따옴표를 사용할지 여부를 결정하는 속성. 

  trailingComma: 'none', 
  // 여러 줄로 이루어진 배열, 객체, 함수 호출 파라미터 등의 마지막 요소 뒤에 쉼표 추가 여부를 결정하는 속성.

  arrowParens: 'avoid', 
  // 화살표 함수의 파라미터를 괄호로 감쌀지 여부를 결정하는 속성.
  // "avoid"는 화살표 함수의 단일 파라미터에 괄호를 붙이지 않는다는 의미.

  semi: false, 
  // 표현식 끝에 세미클론을 자동으로 추가할지 여부를 결정하는 속성,

  printWidth: 90
  // 프린터가 감쌀 줄 길이(넓이)를 결정하는 속성.
}

 

 

- console.log를 사용하는 디버깅

 

console.log는 자바스크립트가 기본으로 제공하는 함수이다.

프로젝트 내에서 console.log("hi~");라고 작성시 웹 브라우저의 개발 도구 창의 콘솔 탭에서 내용을 확인할 수 있다.

이 기능을 통하여 변수값을 확인하거나 실행 흐름을 파악하는 등 간단한 디버깅이 가능하다.