📌리액트
현재 배운 것 : 순수 자바스크립트 (바닐라 스크립트라고도 부름) --> 리액트를 위해 배웠다 (현재 리액트가 대세이다)
📌`리액트 만들어진 이유 :
📍제이쿼리 단점 속도가 자바스크립트 보다 느리다
만든 회사 : 페이스북(메타) - 데이터가 엄청 많다
📍이러한 회사들은 대부분 새로고침이 없다. (제이쿼리 에서는 ajax로 데이터 불러와 append같은 걸로 넣어 준다 ==> 데이터가 많아 속도가 느리다)
📢그냥 자바스크립트로 하면 빠르지만 코드가 길어지고 유지보수가 힘들다.
📢새로고침 없이 즉각적으로 반응하는(좋아요 누르면 새로고침 없이 좋아요가 되는 것.)
📢리액트를 만들었다.(기존에 선택자 때문에-document.getElementById같은 것들 )
📢데이터만 바꾸면 View (선택자 없이 데이터만 바꾸면 알아서 바뀌도록 하는 것)
📌리액트 환경 설정
📍[Step1]
vscode ->
터미널열기(폴더 있는 부분 우클릭 -> 통합터미널에서 열기) -> npx create-react-app 프로젝트명
(대문자 안됨)
->y치고 다운 받으면 된다. -> 작성한 프로젝트명으로 폴더가 생긴다.
📍[Step2]
상단 파일 -> open folder(폴더 열기) -> 해당 폴더 위치로 가서 들어간 다음에 폴더 열기 클릭
(이때 해당 프로젝트명의 폴더 처럼 열려야 정상 적인 위치에 있는 것)
->빈공간 우클릭 터미널 열기 -> npm start ->웹브라우저가 뜬다
📌[폴더 구조] - 다운 받으면 자동으로 생성되는 파일에 대해서
📍readme : 별로 필요 없는 것 (기술서 같은 것)
📍package.json : 버전(지금 패키 버전), dependencies(중요) :라이브러리 모음 (여기서 불러오면 바로 사용이 가능 하다.)
(jquery.........), scripts는 명령어를 축약 시켜 놓은 것이다.(start : 시작, npm build : 아래 설명 참고, eject : 아래 내용 참고 )
📍package-lock.json : 잠겨 있는 것인데 별 의미는 없다.
📍gitignore : 깃에 대한것
📍src(폴더 안에 있는 파일들에 대한 설명)
-1)src -> (index.js) :
(실행 순서 : index.js -> App실행(화면을 구성 하는 것) )const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> --> 중요X <App /> --> root안에 있는것, 컴포넌트(html 코드들을 리턴해 준다), 재사용성이 좋다.(중복 되는 디자인들을 재사용 할 수 있다는 장점, html중복이 적어 진다) </React.StrictMode> --> 중요X );📍index.js는 바꿀일이 별로 없다.
📍항상 App.js에서 시작 한다??
[npm build에 대한 참고 자료] - 이해 정도만 하기(개념 이해)
웹 브라우저
-크롬
-엣지
-파이어 폭스
(html, css, js만 알고 있다.)
index.js : 제이쿼리
index.jsx : 리액트
npm build ==> jsx 리액트 문법을 모두 js로 변환을 해주는 역할(브라우저가 이해할 수 있도록)
리액트 환경설정을 편하게 알아서 자동으로 해주는 명령어
==>npx-create-react-app-프로젝트명
[npm eject에 대한 설명]
npm eject ==> 페이스북이 만들어준 환경설정이 있지만 이 설정과 다르게 하고 싶을 경우(커스텀을 하고 싶을 경우)
터미널에 명령어를 치면 추가적인 파일이 더 생긴다.
[오류의 경우]
npx명령어가 없다고 하면
node -v 해서 알깔려 있으면 구글에 node검색해서 안전한 버전 다운로드 하고 하기
