리액트 툴
- 기본 필수 툴들을 설치
- 프로젝트 구조를 이해하고 숨겨진 툴들에 대해 이해하기
- 추가 유용한 브라우저 개발툴과 VS Code 익스텐션 두가지 설치
- 터미널
- 노드 js
- git
- yarn
Node.js
- JS 를 실행할수 있는 환경
npm
-
패키지 매니저
-
외부 라이브러리가 필요할때 라이브러리를 인터넷에서 찾아서 export import 를 매번 하는 번거로움 대신에 라이브러리들을 쉽게 관리할수 있게 도와주는 Tool.
-
간단하게 명령어 하나만으로 라이브러리를 설치, 삭제, 업그레이드 를 할수 있다.
-
npm 을 다운 받으면 같이 다운받아지는 package.json 이라는 파일 안에는, 우리가 쓰고 있는 외부 라이브러리들과 그것들의 버전이나 정보들이 들어있다.
npx
-
e"x"ecute
-
우리가 원하는 라이브러리를 실행할수있도록 도와준다.
-
터미널에 npx 다음에 원하는 라이브러리 이름을 쓰면 해당 라이브러리를 실행할수 있다.
yarn
- 페이스북에서 만든 패키지 매니저
- npm 보다 성능 업그레이드 시키고, 보안 문제 업그레이드 시킨 패키지 매니저
- npm 위에서 동작하는 Tool 이기 때문에, package.json 파일 그대로 유지하면서 npm 이랑 호환이 가능하게 사용할수 있다.
명령어
- yarn start : 우리가 작성한 코드를 확인할수 있도록 실행
- yarn build : 실행하지는 않고 우리가 만든 앱을 배포할수 있도록 빌드 해주는 것
- yarn test : 우리가 작성한 유닛테스트를 실행해서 테스트를 성공 혹은 실패했는지 확인하는 걸 실행
- yarn eject : 어떤 툴들이 다 설치되어있는지 다 펼쳐서 직접 설정할수 있도록 해준다.
- 이걸 하면, 다 펼칠수는 있지만 다시 묶을수 없기 때무네 이거 할려면 진짜 내가 필요해서 세부적으로 설정해야 할때만 사용해야 한다.
create-react-app
- 페이스북에서 만든 패키지
- React 로 개발하는 개발자들이 공통적으로 사용하는 유용한 Tool 들을 한번에 자동적으로 설치하도록 도와주는 Tool
- React 에서도 권고하는 Tool 이다.
- 우리가 작성하는 코드가 브라우저에 바로 업데이트 되는 기능도 있기 때문에 개발하기가 편하다.
- 해당 패키지를 실행하면 git 은 초기화가 된다.
프로젝트 디렉토리
- gitignore : 해당 파일 안에 기재되어있는 파일 이름들은 git 에 정보가 유지되지 않는다.
- public
- 외부적으로 보여지는 대표적인 파일들을 넣는 폴더.( branch master )
- 정적인 것들을 담는 폴더 ( 컨텐츠가 변하지 않는 것들 : html , image , 리소스 등 )
- src
- 컨텐츠가 다이나믹하게 동적으로 변하는 것들을 담는 폴더 ( JS코드, 소스코드 같은 것들 )
- component
- 공통적으로 사용하는 컴포넌트를 넣는 폴더
Babel
- JS 트랜스컴파일러.
- ECMAScript 2015 이후 버전의 코드들을, 그 이전의 버전으로 변환해준다.
- 최신 버전의 깔끔한 문법을 사용하고, 배포할때는 예전 브라우저들에게도 호환이 될수 있도록 자바스크립트로 변환해준다.
Webpack
- 작성한 코드들을 모듈화하고 번들링해서 배포할 수 있게 도와주는 것.
- 우리가 작성하는 모든 코드들을 번들단위로 사용자에게 간편하게 전달할수 있도록 도와준다.
- 소스코드들을 조금 줄여주고, 긴 변수나 함수의 이름을 보안이 좋도록 이름을 바꿔준다.
ESlint
- 즉각적으로 잘못된 코드가 있다면 경고로 알려준다.
Jset
- 코드를 작성할때 유닛 테스트를 할수 있도록 해주는 테스팅 프레임워크다.
Post CSS
-
CSS 전처리기
-
CSS 라이브러리
-
Sass 같은 것이지만, 정해진 것들만 할수 있는 Sass 와 달리, 굉장히 다양한 플러그인들이 있어서 우리가 원하는 것들을 추가해서 사용할수 있다.
React 익스텐션
-
Reactjs code snippets : 컴포넌트를 일일히 수동적으로 하지 않아도 rcc 엔터만 하면 리액트 컴포넌트를 만들어준다.
-
Auto Import : 다른 리액트 컴포넌트를 임포트를 자동적으로 해준다.
프론트엔드 개발자가 되기 위해 열심히 달리고 있는 꼬꼬마개발자