리액트 / 개념과 툴 정리 (터미널, node.js, npm, yarn)

React

• 중요 컨셉
• 리액트는 컴포넌트 단위로 이루어진 ui를 만들 수 있는 라이브러리
• state와 render함수로 업데이트 될때마다 스스로 render함수를 호출해서 개발자가 업데이트하지 않아도 업데이트가 된다
• 그렇다고 성능이 느려지지도 않는데 그건 가상 virtual dom이 돔트리를 비교해서 실질적으로 업데이트해야하는 부분만 모아뒀다 업데이트하기때문
• 재사용이 가능하고 독립적인 컴포넌트

Tools

• 툴 정리
• 터미널 필요 → 맥은 iterm 사용. 나는 윈도우 터미널 사용
• node.js다운로드 - 노드js는 자바스크립트 프레임워크로 자스를 웹브라우저 밖에서 실행할 수 있게 해준다.
• npm은 라이브러리를 업데이트해서 올릴필요없이 한번에 관리해준다 명령어 하나로 라이브러리 설치 삭제가 가능하다.
• npx는 라이브러리를 실행하게 해준다.
• 터미널에서 다 깔려있는지 확인 ex) node -v , git—version
• npm install yarn —global ‘yarn’설치                                                                                                yarn은 성능 보안 등 npm을 보완해놓은 관리프로그램인데 npm위에서 호환적으로 사용하는 것                        =  built on top of npm to be faster, consistent, secure.
  
  
• 윈도우 터미널 사용법
• 내 프로그램은 windowC안에 users안에 강민여 folder가 base다
• cd 명령어로 사용할 폴더에서 터미널을 위치시킨다
• C:\Users\강민여\dreaming 여기서 실질적으로 슬래쉬가 원화모양으로 표기해야함
• 그리고 여기서 새로운 하위폴더를 만들수있다
  mkdir react-basic 이렇게 하면 만들어지고 이 위치로 이동하려면 마찬가지로 cd react-basic
• 만약 파일/폴더 리스트 확인하려면 ls 명령어가 있는데 나는 윈도우니까 dir 입력
• 이제 yarn으로 creat react app을 해서 test라는 폴더를 생성할거다
  yarn create react-app test 이렇게하면 알아서 필요한 프로그램들을 다운로드 해줌
• cd test 입력해서 test 안으로 들어가고 yarn start입력하면 브라우저가 열리면서 내 test 프로젝트가 실행이 된다
• 실행되는 동안에는 콘솔창에서 프로세스가 계속 돌아가기때문에 다른 명령어를 입력하려면 ctrl + d로 중지를 시키고 해줘야 해서 새로운 창을 열어서 터미널 두개로 하거나 분할해서 사용
• 나는 새창을 열어서 동일하게 cd 로 react-basic으로 들어감 원래 여기서 code . 하면 vsc로 이 폴더가 열리는데 나는 vsc 다운받을때 path 어쩌고를 안해서 환경변수를 새로 설정해줘야하는데 그냥 open folder로 열수있기때문에 그냥 열었음

 

• cd .. 하면 나가지고 rm -rf test 하면 파일 삭제
• 컴파일 에러 발생시 yarn && yarn start
• 파일 복사 xcopy 원본폴더(ex: test) 카피가이루어질폴더(ex:whatever) /e 이 뒤에 /해서 붙는게 여러종류가 있음 (즐찾참고)
• 폰트 오썸같은거 쓸려면 yarn add해서 yarn add @fortawesome/fontawesome-free 요롷게 입력해주고 index.js에 import '@fortawesome/fontawesome-free/js/all.js'; 심어준다