오늘도 코딩하나

기본적인 mysql 연동에 대한 내용은 하단 내용을 참고하길 바란다.https://coding-hana.tistory.com/49 [React] nodejs + mysql 연동(1) server 세팅npm init -ynpm install expressnpm install nodemonnpm install cors - server.jsconst express = require('express');const db = require('/database/db');const app = express();const path = require('path')const port = 8009;app.listen(port, functicoding-hana.tistory.com 1. 서버 설정- server.jsapp.ge..

(1) server 세팅npm init -ynpm install expressnpm install nodemonnpm install cors - server.jsconst express = require('express');const db = require('/database/db');const app = express();const path = require('path')const port = 8009;app.listen(port, function() { console.log(`listening on ${port}`);});app.use(express.json());var cors = require('cors');app.use(cors());app.use(express.static(path.join(_..

props 전송 없이  state 공유하기!App에 있던 state를 TabContent 컴포넌트에서 사용하고 싶어지면,App → Detail → TabContentprops 전송을 2번 해야함  ⇒ Context API나 Redux같은 외부 라이브러리 사용하면 쉽게 사용가능~! 1. Context API(1) Context API 사용법- App.jsexport let Context1 = React.createContext();function App() { let [inven, setInven] = useState([10,11,12]); return ( )}  - Context1로 원하는 곳을 감싸고 공유를 원하는 state를 value 안..

1. 서버란?- 유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램** 서버에 데이터 요청시 정확한 규격  - 어떤 데이터인지(URL형식으로)  - 어떤 방법으로 요청할지(GET / POST)  * 보통 데이터를 가져올 때는 GET, 서버로 보낼 때는 POST   -> 하지만 GET, POST의 단점은 브라우저가 새로고침됨=> AJAX 2. AJAX란?- 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브러우저 기능 ** AJAX로 GET/POST 요청하는 방법  ① XMLHttpRequest라는 옛날 문법 쓰기  ② fetch() 라는 최신 문법 쓰기  ③ axios같은 외부 라이브러리 쓰기 (1) axios- axios 설치npm install ..

1. 컴포넌트  Lifecycle- Detail.jsfunction Detail(props) { let {id} = useParams(); let idx = props.shoes.find((x) => x.id == id); return ( {idx.title} {idx.content} {idx.price}원 주문하기 )}=> D..

1. 리액트 라우터?리액트 라우터 = 라우팅 관련 라이브러리 (페이지 이동)-> 신규 페이지를 불러오지 않는 SPA에서 각각의 url에 따라 선택된 페이지를 렌더링 해주는 라이브러리 ** 리액트는 CSR을 통해 하나의 페이지에서 유저의 요청에 따라 컴포넌트들을 재구성하여 화면을 렌더링하는 SPA 방식 CSR, SPA에 대한 자세한 설명은 여기를 참고하자https://coding-hana.tistory.com/15 CSR, SSR, SSG 정리https://youtu.be/iZ9csAfU5Os?si=dWfuGRQuhMFz9jUQ드림코딩 유튜브 영상을 본 후 정리한 내용이다.1990년 중반까지는 Static Sites로, 클릭할 때마다 html을 서버에서 불러와서 페이지 전체가 update 1996년 도입 ..

1. 데이터 가져오기- data.jslet data = [ { id : 0, title : "나이키", content : "우먼스 나이키 인터랙트 런", img : "./img/shoes1.png", price : 99000 }, { id : 1, title : "아디다스", content : "그라다스", img : "./img/shoes2.png", price : 79000 }, { id : 2, title : "반스", content : "올드 스쿨 - 블랙/블랙 (CANVAS)", img : "./img/shoes3.png", pr..

1. image 삽입 방법(1) img 태그 사용하는 경우import bg from ./img/bg.png' (2) div 태그 사용하는 경우import bg from ./img/bg.png' (3) css 파일 사용하는 경우- App.js - App.css.img-bg { background-image: url('./img/bg.png');}