[React Project] 1. 블로그 만들기 시작 - Node.js & React 설치

Create React App ?

React의  Boiler Plate. 따로 React 환경을 구성할 필요없이 최신의 빌드 설정을 제공하고,
React의 개발 초기에 필요한 라이브러리 및 패키지들을 세팅해준다. 

장점

• 하나의 명령어로 react 프로젝트를 손쉽게 세팅 가능
• 초기 개발 시간 단축, 개발 생산성 향상
• React 앱 개발에만 집중 할 수 있음 (bable, webpack 등 필요한 라이브러리의 심화된 관리 x)

단점

• 빌드 설정을 커스터마이징하기 어려움
• 처음 시작하는 사람들은 리액트 앱 구조에 대해서 이해하기 어려울 수 있음
• 원하지 않는 dependencies로 앱이 무거울 수 있음.

 

CRA 구조

create-react-app 구조

• node_moduels/ : 패키지 모듈이 저장되는 디렉토리
• package.json : depoendencies 모듈 정보를 json 형태로 저장. 버전 관리
• public : static 파일 저장 디렉토리
  • favicon.ico : 리액트에서 제공하는 기본 아이콘
  • index.html : 리액트 앱을 브라우저에 나타냄 (페이지 템플릿)
• src : 개발 작업이 이루어지는 곳
  • App.js / App.css : 메인 코드 및 스타일
  • index.js : App.js의 App 컴포넌트와 public/index.html 연결
  • index.css : index.js 컴포너틑 스타일링을 위한 css 파일

 

---

 

나는 기본 백엔드 crud 기능을 사용해볼 수 있는 리액트 프로젝트를 경험해 보기 위해 간단한 블로그 앱을 만드는 것을 목표로 이 프로젝트를 시작하게 되었다.

 

 

시작하기

1. Node.js 설치

https://nodejs.org/en/download/prebuilt-installer

Node.js — Download Node.js®

 

해당 페이지에서 내가 원하는 버전과 OS를 선택한 후 설치.

설치 세팅은 경로 말고는 딱히 건들이지 않고 설치했다.

 

설치가 됐는지 확인하기 위해 cmd에서 아래와 같은 명령어 입력

설치가 정상적으로 되었다면 내가 설치한 버전이 출력된다.

 

 

 

2. yarn 설치

window는 yarn페이지에서 installer를 다운받아 설치. nodejs가 설치되고 나서 설치가 가능하다!!

https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable

Yarn

 

스크롤을 쭉 내리다가

Alternatives 아래에 Click to expand / collapse를 클릭하면 토글이 열리고 installer 설치 버튼을 누르면 된다.

 

choco install yarn 이라는 명령어를 이용하여 cmd에서도 설치할 수 있다.

 

 

 

3. yarn으로 CRA 세팅

cmd에서 프로젝트로 사용할 폴더를 만들고 해당 위치에서 아래 커맨드 입력

yarn creat react-app [내가 사용하고 싶은 프로젝트 이름] -template typescript

 

---

일단 오늘은 여기까지하고 다음부터 구조를 보고 없앨것들 없애고 해야겠다!