![]()
Node.js 연동 [React] React생성부터 Node.js 연동까지 - 4) Node.js 연동Router 설정 [React] React생성부터 Node.js 연동까지 - 3) Router 설정 React 앱 생성 [React] React생성부터 Node.js 연동까지 - 2) 프로젝트 Import 경로 설정 React 앱 생성 [React] React생성부터 Node.js 연동까지 - 1) Red0u0b.tistory.com# 시작더미데이터 Hi가 아닌 db에서 데이터 조회 후 그 정보 출력db는 postgreSQL 사용# 모듈 설치npm install pg# 테이블 생성필요한 text 테이블 생성test_seq_no 는 시퀀스 이용해서 값 넣을거라 sq_test 시퀀스 생성CREATE TA..
![]()
Router 설정 [React] React생성부터 Node.js 연동까지 - 3) Router 설정React 앱 생성 [React] React생성부터 Node.js 연동까지 - 2) 프로젝트 Import 경로 설정 React 앱 생성 [React] React생성부터 Node.js 연동까지 - 1) React 프로젝트 생성 Node.js 설치된 상태에서 진행(없는 사람들은d0u0b.tistory.com# Node.js 연동기존에는 npm start로 3000 포트의 리액트 실행화면이 출력되면 필요한 데이터를 DB에서 조회해서 가져오고 싶은 경우 Node.js로 연동해서 사용합니다서버 설정하면 리액트는 3000, 노드는 8008 혹은 자신이 설정한 포트로 시작합니다리액트 시작 : npm start서버 시..
![]()
React 앱 생성 [React] React생성부터 Node.js 연동까지 - 2) 프로젝트 Import 경로 설정React 앱 생성 [React] React생성부터 Node.js 연동까지 - 1) React 프로젝트 생성 Node.js 설치된 상태에서 진행(없는 사람들은 설치하고 시작) 리액트 앱 생성 npx create-react-app {프로젝트 명} 실행 생성한 프d0u0b.tistory.com# 프로젝트 구조components에 Router.js 생성Pages에 test폴더 생성 후 Test.js , TestNew.js 생성# react-router-dom 설치npm install react-router-dom# 코드# Test.jsexport default function Test(){ ..
![]()
React 앱 생성 [React] React생성부터 Node.js 연동까지 - 1) React 프로젝트 생성Node.js 설치된 상태에서 진행(없는 사람들은 설치하고 시작) 리액트 앱 생성 npx create-react-app {프로젝트 명} 실행 생성한 프로젝트 폴더로 이동 후 명령어 실행 cd chalkak #생성한 프로젝트 폴더로 이d0u0b.tistory.com# 프로젝트 구조아래처럼 src안에 components, db, pages 폴더 생성# 프로젝트 import 경로 설정import Test from ‘../pages/test/new’ 이렇게 현재 파일 위치로부터 import 할 파일 위치를 ../../ 를 이용하는데 불편해서 import Test from ‘pages/test/new’ 이..
![]()
Node.js 설치된 상태에서 진행(없는 사람들은 설치하고 시작)# 리액트 앱 생성npx create-react-app {프로젝트 명}#실행생성한 프로젝트 폴더로 이동 후 명령어 실행cd chalkak #생성한 프로젝트 폴더로 이동npm start# 필요없는 파일 제거# 파일 내용도 필요없는거 수정index.jsimport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );App.jsfunction App() { ..
