[리액트기초] 1) React 프로젝트 시작하기(환경셋팅 편)

node 설치(npm같이 있음)

homebrew 설치

yarn 설치 homebrew로 가능

 

폴더에서 아래 명령어 실행시 package.json 등 패키지 매니저 등 프로젝트에 필요한 환경이 셋팅됨

-> 개인프로젝트할 때 create react-app [폴더명] 추천

yarn create react-app my-app

 

명령어 -> start 시작

 yarn start
   --Starts the development server.

  yarn build
   --Bundles the app into static files for production.

  yarn test
   --Starts the test runner.

  yarn eject
   --Removes this tool and copies build dependencies, configuration files
   --and scripts into the app directory. If you do this, you can’t go back!

eject를 하는 순간 다시 박스를 포장할 수 없다!

-> 정말 필요한 순간 해야함. -> ex) webpack 세부 설명 가능. package.json에도 여러가지들이 추가되어있음

-> 

 

현재 폴더에서 아래 명령어 실행하면 비쥬얼스튜디오 프로젝트 열림

code .

터미널에서 바로 실행하기 위해서는 VSC에서  [커맨드+쉬프트+P] 눌러서 팔레트에서 install 'code' command in PATH 설치해줘야 가능!

 

.gitignore : 버전관리에 포함되면 안되는 애들이 저장됨

package.json : npm에서 외부 라이브러리를 사용할 때 그 버전이 명시되어있다.

yarn start는 사실 위 패키지 안에 있는 start명령어임

node_mudles: 라이브러리들

public: 관련된로고 등, 외부적으로 보여지는 대표적인 아이들 들어가있음. favicon, index.html 등

manifest.json: pwa 만들 때 필요함

robots.txt: 웹크롤링 위해 필요함

 

index.js : 제일 최상위의 아이  => 여기서 수정하고 저장만해도 열려진 리액트 웹페이지상에 바로 반영되어서 보임

 

 

----------------------------------------------------------------------------------------------------------------------------------------------------------

 

babel : javascript transcompiler 로

1. ECMAScript2015+를 -> older version으로 변환해주는 아이

2. TS/JSX 와 같은 순수자바스크립트가 아닌애도 JS로 변환해줌.

예전버전의 브라우저 버전으로 이해할 수 있더록 변환해줌

 

Webpack : 소스코드나 이미지 등을 번들단위로 묶어서 사용자에게 제공해줌.

-> 번들링해서 사용자에게 보내주고. 새로운페이지에서 JS나 이미지가 있다면 모아서 번들링해줌

-> 자바스크립트의 소스코드로 줄여주고. 긴 변수나 함수 이름을 이름을 이상하게 만들어 놓는 일을 함

-> 소스코드를 사용자에게 간편하게 전달할 수 있도록 모듈을 번들링하는것

 

ESLint : 즉각적으로 코드가 잘못된게 있으면 경고사인을 보내준다. 

 

Jest : 자바스크립트 유닛테스트 할 수 있도록 테스트 프레임워크

 

PostCSS : expandable CSS libraries

tool for transforming CSS with JavaScript

CSS 전처리기, SASS 그들의 프레임워크에 맞게 작성하면 변환해줌

다양한 플러그인이 있어서 원하는 것을 조금더 추가해서 할 수 있음.

현업에서 많이 쓰임

 

* iterms2 설정하는법

ooeunz.tistory.com/21

[개발 환경] iTerm2로 터미널 커스텀하기

 

필수 크롬확장 프로그램 

 

chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko&

React Developer Tools

 

VSC에 설치

 

Reactjs snippits

rcc엔터만 누르면 컴포넌트가 생길 수 있도록 도와줌

 

 

auto import

나중에 다른 리액트 컴포넌트를 임포트할때 자동적으로 해줌