Tool 설치하기

Tools

Terminal

MacBook(iterm), Windows(cmder)

Node.js

어느 곳에서나 자바스크립트로 프로그래밍이 가능하게 하는 프레임워크

👉 JavaScript를 실행할 수 있는 환경
👉 예전에는 JavaScript를 브라우저 위에서 동작하는 웹페이지나 웹 어플리케이션을 위해서 작성하는 언어였음.
👉 Node.js 덕분에 웹 브라우저 밖에서도, 운영체제 위에서나 Node.js 환경이 있다면 우리가 JavaScript로 코드를 작성하고 그것을 실행할 수 있음.
👉 Back-End 서버를 만들 때도 쓰고, 서버사이드 렌더링 할때도 이용, Command Line Tool, Script 만들 때도 사용.

⚽ JavaScript runtime environment (framework) that executes JavaScript code outside a web browser
"JavaScript everywhere"
server-side rendering
command line tools

npm

👉 npm을 위해 Node.js를 설치함.
👉 npm은 패키지 매니저
👉 외부 라이브러리가 필요할 때, 라이브러리를 쉽게 다운받고 관리할 수 있게 해줌.
👉 라이브러리 설치, 업데이트, 삭제까지 가능
👉 npm을 이용하면 프로젝트에 package.json이라는 파일이 생긴다. 이 package.json

⚽ Publish and share course code of Node.js packages simplify installation, updating, and uninstallation of packages.
install library

npx
npm과 다르게 설치하는 것이 아니라 우리가 원하는 라이브러리를 실행할 수 있게 도와주는 것

npm은 설치하고 업데이트 하는 것만 할 수 있고 그 라이브러리를 실행하지는 못함.

우리가 실행하기 위해서는 우리 프로젝트에 추가해서 우리 프로젝트 자체를 실행해야 하지만, npx는 원하는 패키지를 실행할 수 있도록 도와주는 Tool.

실행하고자 하는 외부 라이브러리나 패키지가 있다면 npx library-name
=> 해당하는 라이브러리를 실행할 수 있음

npm, npx 대신에 yarn 사용

yarn

페이스북에서 만들어진 패키지 매니저
npm 다음에 조금 더 성능을 개선함.
npm에서 약간 부족했던 것들 => npm은 버전관리, 성능, 보안 등에 문제가 있었음.

이런 것들을 보완하기 위해서 페이스북사에서 yarn이라는 새로운 패키지 매니저를 만들었음.

yarn도 npm 위에서 동작하는 것
package.json이라는 파일 그대로 유지하면서 npm과 호환이 가능하게 사용할 수 있음.

프로젝트를 관리할 때, yarn을 써도 되고 npm을 써도 된다.

• npm보다 성능이 빠름
• 일관적으로 버전 관리가 잘 이루어짐
• 보안적으로 조금 더 안전함

Package Manager
built on top of npm to resolve some of npm's shortcomings faster, consistent, and secure

Git

Mac

$ git -v

$ node -v 

$ npm -v

$ brew install yarn

$ yarn -v

iterms setting

React Tool

create-react-app

react 프로젝트 설치 및 실행
페이스북에서 만든, react를 개발하는 수많은 개발자들이 공통적으로 사용하는 정말 유용한 툴들을 한번에 자동적으로 설치할 수 있게 도와주는 유용한 툴

React에서도 적극적으로 이 툴을 권고하고 있음.

현업에서는 자동으로 하는 것보다 실제로 필요한 것들을 직접 Configuration해서 사용하는 경우가 많다.

$ mkdir basic
$ cd basic
$ yarn create react-app test
$ cd test

create react-app 이걸 사용하게 되면 이런 툴들이 박스 안에 잘 포장 되어져있음
안에 어떤 내용이 있는지 직접 볼 필요는 없음

안에 내용을 확인하고 수정하고 싶으면?
yarn eject

프로젝트 실행하기

yarn start

Visual Studio 실행하기

code .

Project structure

.gitignore
더이상 tracking 하고 싶지 않은 파일들
프로젝트를 실행했을 때 부수적으로 생기는 것들
버전 관리에 포함이 되면 안되는 것들

package.json

• npm에서 버전을 관리할 때, 내 프로젝트에서 외부적으로 쓰이고 있는 라이브러리와 그 라이브러리의 버전들이 명시되어져 있음.
• 직접적으로 수정할 일은 거의 없음
• 명령어를 통해서 외부 라이브러리를 추가 및 버전 업데이트

node_modules
라이브러리가 자동적으로 추가됨
package.json에 써있는 라이브러리들이 들어있음
라이브러리 구조를 알고 싶을 때 확인할 수 있음.

public/

public/manifest.json
나중에 PWA(Progressive Web Application을 만들 때
모바일에서 저장하는 그런 웹 어플리키에션을 만들 때 필요한 것

public/robots.txt
웹 크롤링을 위해서 이용되는 것

src/
소스코드

src/index.js

Tools etc.

react-app 은 페이스북에서 만든 패키지

• git도 초기화됨

yarn eject
박스 안에 있는 내용들을 풀어서 보는 것
단, 한번 yarn eject 하면 다시 박스를 포장할 수 없음.
eject를 쓸 때는 내가 정말 필요해서, 무언가 세부적으로 설정해야 될 때만 열어봐야 함.

파일에 많은 것들이 열려져 있음
config : webpack(코드를 모듈화해서 번들링해서 배포할 수 있게 도와주는 것)을 어떻게 설정할 건지, 세부적으로 설정 가능.

tool을 이용하면 우리가 babel과 webpack을 어떻게 설정하면 되는지 전혀 몰라도 공통적으로 많이 설정되어져 쓰는 것들이 기본적으로 설정이 되어 있기 때문에 쉽게 프로젝트를 만들고 쓸 수 있음.

현업에서는 회사나 프로젝트에 따라서 추가적으로 설정하고 이것저것 해야 되는 것들이 있음.
그래서 create react app을 잘 이용하지 않음. 수동적으로 관리함.

프로젝트 규모가 점점 커지면 커질수록 수동적으로 관리를 하고, 관리하는 팀이 따로 있을 정도로 관리하는 것도 굉장히 많은 지식을 요구하고 시간이 많이 걸림.

개인적으로 프로젝트할 때는 eject 하지 않음.

=> React를 개발할 때에는 babel, webpack, testing에 관련된 것들, TypeScript, eslint, jest, postCSS 등이 많이 사용되어짐.

👉 JavaScript transcompiler
👉 자바스크립트 트랜스컴파일러
👉 ECMAScript 2015+ 버전의 것들을 예전 버전으로 변환해주는 것
👉 convert ECMAScript 2015+ -> older version

개발자들이 최신버전의 깔끔하고 최신의 자바스크립트 문법을 사용하면서, 배포할때는 바벨을 이용해서 예전 브라우저도 이해할 수 있는 예전 버전의 자바스크립트 코드로 변환해주는 것!

또한,

TypeScript나 나중에 React에서 작성하게 될 jsx라는 순수 자바스크립트가 아닌 것들을 브라우저가 이해할 수 있도록 JavaScript로 변환해주는 일을 하고있음.

어느정도 버전까지 변환할 건지 조금 세부적으로 설정할 수 있음.

💡 브라우저나 예전 버전의 브라우저가 이해할 수 있는 소스코드로 변환해주는 것!

Bundling the code, JavaScript module bundler
👉 코드를 번들링해서 = 우리가 작성한 소스코드(.js, .sass 등)나 리소스 이미지(.jpg, .png 등)들을 한번에 묶어서 번들 단위로 사용자에게 제공할 수 있도록 도와주는 것.
👉 main page를 열었을 때, JavaScript a, b, c가 필요하고 이미지가 쓰이면 잘 번들링해서 사용자에게 보내주고, 사용자가 다른 페이지를 열어서 그 새로운 페이지에서 필요한 자바스크립트나 이미지가 있다면 그것들을 또 모아서 번들링해줌.
👉 우리가 JavaScript를 작성하는 것을 소스코드를 조금 줄여주고, 긴 변수나 함수의 이름을 다른 사람들, = 해커들이 알아보지 못하도록 이름을 조금 다르게 만드는 일도 하고있음.

💡 우리가 멋지게 만든 프로젝트 = 소스코드를 사용자에게 간편하게 전달할 수 있도록 모듈을 번들링하는 것!

👉 즉각적으로 우리의 코드에 잘못된 점이 있으면 경고 사인을 보내줌.
👉 코드를 잘못 짜거나 문제있으면 미리 eslint가 알려줌

delightful JavaScript testing framework
👉 유닛 테스트를 할 수 있게 도와주는 테스팅 프레임워크
👉 testing을 작성할 때 많이 이용되어지고 있는 Tool

expandable CSS libraries
tool for transforming CSS with JavaScript
👉 CSS 전처리기
👉 less나 sass 이런 것들은 프레임워크에 맞게 CSS를 작성하면 그 CSS를 다시 브라우저가 이해할 수 있는 CSS로 변환해주는 것. PostCSS도 비슷함.
👉 sass는 정해진 것들만 할 수 있는 반면, PostCSS는 다양한 플러그인이 있어서 우리가 원하는 것을 조금 더 추가해서 할 수 있음.
👉 현업에서 많이 쓰이고, 인기도 점점 높아지고 있는 추세

개발하면서 유용한 Tool!

크롬 브라우저 위주로 개발을 할것임.

👉 React Developer Tool

vscode
👉 reactjs snippet
👉 auto import

jsx 또는 js 파일 그리고 뒤에서 다룰 postCSS에서 Emmet 사용하기 위해
👉 VS Code settings.json에 추가하기

  "emmet.includeLanguages": {

    "javascript": "javascriptreact",

    "postcss": "css"

  },

  "emmet.syntaxProfiles": {

    "postcss": "css"

  },