개인코딩개발공장

## 이미지 파일 관리하기 # 기본적인 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..

# 시작하면서이전에 배운걸 복습겸 새로 다 짜봤고 뭐 디자인도 다르니 혼동을 안하길 바란다솔까말 이 블로그 나만 보는거라..뭐.. # 일단 이렇게 생겼다.인풋 태그에다가 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하게 만..

# vs코드 쓰면서 prettier가 안됐음.cntl+shift+p눌러서저기드가샘이거 code formatter으로 바꿔주샘..저장시 줄정렬이 안됐었음 ㅠㅠ   # warining메시지 없애기/* eslint-disable */import React, { useState, useEffect } from 'react';import './App.css';이렇게 eslint 안쓴다고 해주면 됨.    # 버튼기능 만들기 incrementLike(0)}>라이크이렇게 태그에 onClick넣어주면 됨. 함수에 파라미터가 있으면 저렇게 즉시실행함수로 써줘서 함수리터럴을 써줘야 오류 발생안함그냥 함수 호출해버리면 rerendering오류가 뜨더라.매개변수가 없다면 그냥 함수이름만 넣어주면 됨   # ..

# JSX란?function App() { let post = "강남우동맛집"; const [state, setstate] = useState("무찌안녕"); console.log("바보무찌"); return ( hello world {post} );}이렇게 js가 있는데 안에 html이 들어있음.컴포넌트 쏴주는식인데 정확히는 함수안에서는 JS문법으로 되니까 HTML을 그대로 쓰면 제대로 인식 못 할 수 있음.그래서 이 안에서 문법을 JSX로 만들었다고 함.예를들어 예약어인 class대신에 className으로 한다는것..-기호를 쓰면 마이너스로 인식하니 안되고 카멜케이스 써야하는것 등등 있다.    # JSX에서 html 태그 자동완성이거땜에 코드짤때 짜증이 났는데.. ..

npx create-react-app 앱이름위 명령어로 프로젝트를 만들어주자.참고로 node js환경이 설치되어 있어야 한다.   Getting Started | Create React AppCreate React App is an officially supported way to create single-page Reactcreate-react-app.dev  리눅스 커널 상에서 해당 프로젝트 디렉토리로 이동한 후, npm start로 로컬서버에서 구동시켜주자. 3000번 포트에서 리액트 프로젝트 사이트가 떴다. # 대충 구조 파악하기난 이미 vue를 다뤄봤기에 spa프레임워크에 좀 적응이 되었는데 일단 딱보이는 다른점은 이 점이다.현재 리액트 프로젝트의 디렉토리 구조인데vue같은경우는 .vue라는 컴..