리액트(react)

개발환경 구축

 

OS 레벨에서 자바스크립트를  쓰기 위해선 node가 필요한 뎅, 직접 설치하지 말공

nvm을 이용한당(원래 유닉스/리눅스 용만 있었느데, 윈도우용도 생겼당)

 

이젠 윈도우에서도 WSL을 이용해 쉽게 리눅스(디폴트로 우분투)를 이용할 수 있으니

리눅스를 사용해 보는 것도 괜시리 맘이 끌리고 있는 이상한 기분에 끌려본당 

 

NVM (Node Version Manager) 설칭

윈도우를 사용하는 사람은 아래 링크에서 

https://github.com/coreybutler/nvm-windows/releases 에서 nvm-setup.exe를 받아서 설치한당

 

cmd 창을 관리자 권한으로 열어서, nvm help 로 nvm 사용법을 확인한당(쉽당!)

nvm help
nvm list available 
nvm install 18.14.0
nvm install 16.19.0
nvm list
nvm use 18.14.0

 

에디터는 visual studio code를 추천한당 (구글에서 visual studio code를 검색해서 다운로드 & 설치한당 - 쉽당)

설치한후 , 아래 플러그-인  설치를 추천한당

 -  Reactjs Code Snippet

 -  ESLint 

 -  Prettier

-   크롬 웹스토아에 가서 React Developer Tools 브라우져 플러그인

기타 - https://parkjh7764.tistory.com/93  참고 한당

 

대략 준비가 끝났당

c: 드라이브 1개만 있다면 어쩔 수 없지만,  이왕이면 d: 드라이브에 

MyReact라고 연습할 수 있는  폴더를 1개 맹글어 주장!

 

MyReact 폴더를 cmd창으로 열장(폴더를 cmd로 열기 구글에서 검색)

 

React로 app을 개발하려면 이것 저것 필요한 것이 많당, 다행이당 facebook에서 

create-react-app이라는 것을 맹글어줘서, 그냥 고민없이 바로 사용하기로 맘 먹는당

cmd 창에 아래 처럼 적어 준당.

원래 create-react-app을  실행하려면 해당 패키지를 먼저 설치해야 하는데,

npx(Node Package eXcute)가 나와서, 설치없이 바로 실행할 수 있당

reactFirsts는 디렉토리 이름이당.

곧 create-react-app을 실행시켜 reactfirst란 디렉토리를 만들고(곧 프로젝트명이당, 소문자만 써야한당),

그 안에 필요한 것들을 세팅 할 수 있도록 하란 이야기당! 

npx create-react-app reactfirst

Installing react, react-dom, and react-scripts with cra-template... 을 포함한

어쩌구 저쩌구 메세지와 함께 뭔가 빠르게 설치하는 화면이 보이다가...

Happy hacking!  라인으로

마무리를 지을 것이다.

 

만약 Git repo not initialized Error: Command failed: git --version  이런 에러가 난다면?

무시하거나,   git 설정을 해준당( gitbash가 필요할 수도 있당), 난 무시한당

git config --global user.name <yourName>
git config --global user.email <yourEmail>

Happy hacking!  라인 바로 위에 아래와 같은 코드가 보일 것이다. 그대로 cmd 창에 손가락을 쳐서 

입력해 본당.

  cd reactfirst
  npm start

브라우져가 실행되고, 화면에 빙글빙글 돌아가는 것이 보일 것이당. (잘했당, 첫번째 step 완성이당!!)

 

리액트 Useful Component 찾기

https://js.coach/

https://github.com/brillout/awesome-react-components

https://react-table-ui.js.org/

https://react-table-v7.tanstack.com/

 유명한  material-ui  ## npm install @material-ui/core  요건 18버젼에 안됨

npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps

https://github.com/remix-run/react-router

{BrowserRouter, Routes, Route, Link}

react-router-dom이 버전 6로 업그레이드되면서, Switch를 더이상 지원을 안하게 됬다. 

Switch 는 Routes로 ,component는  element로...

https://blog.openreplay.com/routing-with-react-router-6/

https://marcio.github.io/react-skylight/

 

To Be Continue...

 

https://www.youtube.com/watch?v=ZiSsBhIUCB8