개인코딩개발공장

# react 라우터 설치npm install react-router-dom@6  index.js에서import { BrowserRouter } from 'react-router-dom';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );저렇게 추가해주자.   app.js에서import { Routes, Route, Link } from 'react-router-dom';이렇게 Route라이브러리 임포트 해주고 detail} /> cart} /> 이렇게 Route태그에다가 path와 element를 넣어주면 element에 있는 태그가 해당..

# 데이터를 모듈화해서 react에서 쓰면 편하다.가뜩이나 react는 다 짬뽕되어있어서 복잡할텐데.. 이렇게쓰라고한다.사실 이건 뭐 js기초문법인데 react에서 적용할겸 써본다.  # 데이터를 따로 js파일을 만들어서 넣어줬다.파일 경로는 이렇게 생겼다.products.js를 app.js경로와 같은위치로 만들어줬다.여기 products.js에다가 어레이 자료로 상품정보를 넣어줄거다.//products.jsconst products = [ { id: 0, title: 'White and Black', content: 'Born in France', price: 120000, }, { id: 1, title: 'Red Knit', content: 'Born in..

## 이미지 파일 관리하기 # 기본적인 native html css에서 파일 갖다 쓰는법이런식으로 bg.png파일이 있으면.App { text-align: center; .main-bg { width: 100%; height: 300px; background-image: url('./bg.png'); background-size: cover; background-position: center; }}이렇게 css상으로 백그라운드로 박아줄 수 있음뭐 자주 썼던거니까..  # react에서 파일 import해서 쓰는 방법이렇게 image디렉토리안에 이미지를 넣고 react코드상에서 쓰려면 이런식으로 넣어주면 된다.참고로 style속성 html에다가 바로 갖다박으려면 카..

# 문제 보다시피 display : flex속성이 빌드전후로 없어졌다. 이렇게 static파일에서 main.css를 다 뒤져서 찾아냈다..ㅡㅡ 처음엔 scss를 적용안해서 그런가 했는데 요즘은 scss다 쓰지도 않고  css nesting을 native css에서 지원을 하니 그냥 native css에서 css nesting으로 코드를 짯는데.. 계속 이지랄.. 이거 고치다가 eslint에러도 뜨고 어제 네시간 뒤졌는데 안되서..   # 해결방법(완벽하지 않음) .list { display: flex; justify-content: space-around; align-items: center; padding: 10px; margin-bottom: 5px;..