React, Angular, Vue, Svelte
- 전부 html 예쁘게 만들어주는 틀
연동할 Node 설치하는 법
-
nodejs 검색해서 설치
-
작업폴더 만들고 에디터로 오픈
-
server.js 만들어서 코드 복붙
*** 복붙할 코드
const express = require('express');
const path = require('path');
const app = express();
app.listen(8080, function () {
console.log('listening on 8080')
}); - 에디터 터미널 열어서 npm init-y 입력
- npm install express도 입력
리액트 프로젝트 만드는법
지금 하고 있는 server.js 옆에 서브폴더로 리액트 프로젝트 생성
-
구글 검색해서 nodejs 최신버전 설치
-
터미널에 npx create-react-app 프로젝트명 을 입력
프로젝트명 자유작명 다만 작명할 때 띄어쓰기 금지 -
그럼 서브폴더에 리액트 프로젝트가 생성되는데 그걸 다시 에디터로 오픈함
-
리액트 문법으로 만들고 싶은걸 개발
개발시 코드를 미리보고 싶으면 npm run start 를 입력 -
개발 완료되면 리액트 프로젝트 터미널에 npm run build를 입력하면 리액트 완성본 html 파일이 build 폴더내에 생성됨
그 html 파일을 서버에서 필요할 때 유저에게 보내주면 됨
html 파일 경로는
만든 react project - build - index.html에 있음
여러 페이지 만들고 싶으면?
/detail로 접속하면 상세페이지
/about으로 접속하면 about페이지
--> 이런건 React가 할 수도 있음 (리액트 라우터 사용)
리액트 라우터 사용
server.js 최하단에 다음과 같은 코드 추가해놓는게 좋음
"고객이 URL란에 아무거나 입력하면 리액트 프로젝트나 보내주세요"라는 뜻
이렇게 하면 리액트 라우팅 잘됨
이 코드는 항상 가장 하단에 놓아야 잘된다
DB 데이터 리액트에서 보여주는 방법
예를 들어 DB에서 글목록 데이터를 꺼내서 HTML로 보여주고 싶은 경우
server-side rendering / client-side rendering 둘 중 하나 선택하면 됨
server-side rendering
: html을 서버가 만들어서 보내주는 것
-
DB에서 데이터 뽑아서
-
글목록.html 파일에 넣고
-
그 html 파일을 서버에서 보내주는 것
client-side rendering
: html을 리액트가 브라우저안에서 만드는 것
-
리액트가 서버에 GET요청으로 DB데이터를 가져와서
-
그걸 html로 만들어서 보여주는 것
리액트를 쓰는 경우 보통 client-slide rendering을 함
-
서버는 누군가 /product로 GET요청을 하면
DB에서 데이터 꺼내서 보내주라고 API를 짜놓는다 -
리액트는 상품목록을 보여주고 싶을 때 서버 /product 주소로 GET요청 보내면 된다
-
그럼 데이터 받아올 것이고, 그걸 가지고 html에 집어넣든 맘대로 개발하면 된다
그래서 리액트는 서버와의 통신은 거의 ajax로 진행함
( POST요청, 로그인해서 세션만들기 이런것도 ajax로 잘됨 )상단에 아래 코드 추가해놔야 ajax가 잘됨
리액트 코드 수정할때마다 build 해야하나요?
나중에 올릴때만 하면 됨
리액트로 사이트 만들때 참고
HTML CSS 평소에 짜던 대로 페이지 쭉 만들어나가면 됨
-
근데 중간에 div 여러개를 한 단어로 축약하고 싶으면 컴포넌트로 줄여보고
-
페이지를 나누고 싶으면 라우터 쓰시고
-
자주 바뀌는 데이터를 꽂아넣으려면 state에 담았다가 꽂아넣으시고
-
근데 자식컴포넌트에 꽂아야한다면 props 문법 쓰고
-
데이터를 서버에서 받아와야한다면 서버로 GET요청 하고나서 state에 집어넣으시고
-
모달창, 탭 이런 UI가 필요하면 그 UI만드는 법 따라해보고 하면 됨
