개인코딩개발공장

# 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;..

"rules": { "no-unused-vars": "off", "react/prop-types": "off" } .eslintrc.js파일에 rules부분을 저렇게 바꿔주면 된다.

# intro난 부트스트랩을 엄청 많이 쓰니까 이것도 포스팅한다vue랑 조금 다르다.나중에 base만들때 쓰면 좋을듯.  # 부트스트랩 먼저 들어가줌 Introduction | React BootstrapLearn how to include React Bootstrap in your project.react-bootstrap.netlify.app # 부트스트랩 모듈 설치 npm install react-bootstrap bootstrap  # index.html head태그안에 스크립트 복붙 # app.js에 해당 컴포넌트 import  Buttons | React BootstrapUse Bootstrap’s custom button styles for actions in forms, dialogs, a..

# 일단 깃헙 접속하고 새로운 repository를 만들어준다.  # 이름 정하기repository이름을 꼭!! 내 아이디.github.io로 설정해준다그리고 레포지토리에 내가 만든 웹파일들을 드래그앤드롭해서 넣어준다.  요깃다가   # 확인하기바로는 안되고 조금 기다렸다가https://내아이디.github.io로 들어가면 만든 사이트가 잘 뜬다.     + 뭐 동작원리는 졸라 단순할것같다.그냥 내 계정에 해당되는 github도메인이 있을테고거기에 index.html이랑 다른 정적파일들 보내게 해주면웹이 뜨는거겠지..깃헙이 코드 저장하고 웹에서 들어가도 코드 다 보여주는 사이트라 트래픽도 비슷할테니..s3에서 정적사이트 배포하는거랑 비슷하다.  + CICD도 필요없다걍 폴더 깃헙계정이랑 연결해주고 add..

# 시작하면서이전에 배운걸 복습겸 새로 다 짜봤고 뭐 디자인도 다르니 혼동을 안하길 바란다솔까말 이 블로그 나만 보는거라..뭐.. # 일단 이렇게 생겼다.인풋 태그에다가 onChange옵션을 달아주었고 그곳에 handleTitle함수를 지정해줬다. 예전에 vue를 사용할때는 input에다가 v-model을 사용했던것 같은데react의 방식이 조금 더 복잡한 듯 하다.컴포넌트는 비교적 쉬웠던만큼 데이터바인딩이나 인풋데이터값을 쓰는거는 더 어렵고 뭐 이런거겠지?근데 vue reactive도 갖다쓴거니 react도 이런 메서드가 있지않을까 쉽기도 하고..암튼 뭐 지금 배우는 입장에서는 아 그렇구나 하고 배울뿐  # 암튼 저게 뭐냐?handleTitle함수를 onChange에 넣어줬는데 저 함수는 아래와 같이 ..

# map사용하기 titleLists.map(() => { console.log(1); })해당 어레이에 있는 요소만큼 안에있는 콜백함수를 호출해달라 이거임  titleLists.map((data) => { console.log(JSON.stringify(data)); })어레이에 있는 각 데이터를 매개변수 첫번쨰로 받음. titleLists.map((data, index) => { console.log(index); });두번째 매개변수는 어레이에 있는거 요소별로 0부터 끝까지 인덱스로 받아옴. 참고로  console.log( titleLists.map((data, index) => { console.log(index); }), )..

#기초 컴포넌트 만들기 방법import React, { useState, useEffect } from 'react';import './App.css';function App() {}const Modal = () => { return ( 제목 내용이다아아아아아 );};export default App;이렇게 App이라는 함수와 동등한 위치에 Modal이라는 함수를 만들고html스트링을 return하게 만든다그럼 이 함수는 Modal이라는 컴포넌트가 된다. 이걸 App()함수가 return하는곳 원하는곳에 쑤셔넣으면 됨 이렇게 Modal컴포넌트가 나타나게 되었다.  # 중요한점컴포넌트는 무조껀 하나의 html태그를 return하게 만..