리액트는 HTML 파일을 이쁘게 만들어주는 도구일뿐 특별한게 아니다 !

SPA : Single Page Application
원페이지 앱 인데, 자바스크립트를 이용해서 페이지는 하나인데 !
html파일을 갈아끼워서 페이지를 나누고 바꾸고 한다(장점은 모바일앱처럼 부드럽게 작동한다)리액트로 개발을 마치면 index.html 딸랑 이 파일 하나가 딱 ! 나온다
새로운 작업폴더를 만들고 npm init을 해야 package.JSON 파일이 생성이 되고
npm install express를 해야 express 라이브러리 설치가 끝난다.
그렇다고 한다 .. !그리고 터미널에 node server.js 하면 ! 서버가 뜬다 ! 그러면 이제 8080이라는 서버의 포트가 열렸다! 라고 하고있는거다요로케 열린걸 확인할수있다, 기본 서버 세팅은 끝 !
이제 페이지 전송을 테스트해보기 위해 임시로 하나 만들어보자
public이라는 폴더안에 html파일을 만들어주고 다시 server.js로 돌아가자server.js 하단에 이렇게 적어주면된다
app.get() 여기엔 내가 가져올 데이터의 경로와
불러오는 주문같은건데 이렇게 외워두는게 편합니다
그러면 이렇게 뿅! 하고 연결이됨 !!
내가 드디어 서버도 만들고, 페이지 연결까지 한거임!
근데 가끔 server.js에서 저장햇는데 안나오는 경우가 있는데
놀라지말고 터미널에 node server.js를 다시 입력하면 나온다..
(새로고침해도 안되고 터미널에 다시 입력해줘야함)자 이제 본론으로 넘어가보자 ! npx create-react-app @@@(프로젝트명)
입력해주면 이제 새롭게 생긴
react-project 폴더가 보인다 !
우리가 쇼핑몰 만들때 했던거랑 똑같다!
그럼 이제 슬슬 감이오는가? 맞다 !
app.js저기에 무언가 만들고 ! 연결하면되겠지?
근데 그전에! 프로젝트가 완성이 다 되면 우리는
build라는걸 사용할수 있다

이렇게 build 폴더가 생성이 되고
이 폴더 안에는 페이지 발행에 필요한 모든 파일이 들어가있다 !
그냥 완성본이라는 얘기임 !!
저기있는 index.html파일이 우리가 서버로 보내줄 파일이다 이제 우리가 최종적으로 해야할것 !
만들어놓은 index.html을 보내기인데

먼저 우리가 추가할 파일이 있는 경로를 잘 추가해놓자

그리고 자세한 상세 경로는 아래에 app.get에 넣어주자 ! 혹시 라우터를 사용해서 막 상세페이지같이 여러 페이지를 나눴을경우 ! 저렇게

*

요거 하나만 넣어주면 라우터 페이지들까지 다 접속이 가능함 !
주소창에 라우터 페이지 경로를 넣어도 접속이 가능하다
(이거 안해주면 라우터 페이지 경로 입력해도 접속안됨)

이제 실제로 react와 node.js 서버의 개발패턴을 보여주자면
list 페이지를 개발한다고 치자 !

list 페이지에 접속했을때
DB에 저장되있는걸 보여주고싶으면 !
list 페이지에 접속 되기전에, list라는 컴포넌트가 로드되기전에
useEffect 이런걸 사용해서 Ajax 요청을 해서
"야 서버야 그 DB에 있는 게시물 리스트 보여줘 " 해서
서버는 이제 DB를 꺼내와서 보여주면 된다.

전부다 리액트가 아니라 특정 페이지만 리액트로 만들어서 보여주고싶은데?! 이것도 할수있다일단 경로를 만들어주고 먼저 ! 일반페이지와 리액트 페이지를 나눠서
실행시킬 미들웨어를 적어주면 된다 !
근데 이렇게만하면 /react 페이지에는 접속이 안된다 !

만들어놓은 react project에 들어가서
package.json에이렇게 꼭 추가해주어야 들어갈수있다마지막으로 여기서도 npm run build ! 해주면 진짜
진짜 진짜 찐짜 끝!! 참고하도록 하자....