본문 바로가기
728x90

분류 전체보기66

React에서 bootstrap/bulma css사용하기 리액트에 부트스트랩이나 벌마 패키지를 설치해 사용해볼 수 있다. 부트스트랩 yarn add bootstrap or npm i bootstrap 최상단(index/App.js) 파일에 import import 'bootstrap/dist/css/bootstrap.min.css'; 벌마 yarn add bulma or npm i --save react-bulma-components 동일하게 최상단 파일에 import import 'bulma/css/bulma.css' 컴포넌트 코드 function Test(){ return( Warning hero -- BULMA Warning subtitle buttons for bootstrap Primary Secondary Success Danger Warning I.. 2022. 8. 25.
javaScript 배열 다뤄보기 2 들어가기 전에, 우선 아래의 메서드들은 모두 원본 배열에 영향을 주지 않는 메서드이다. 때문에 const를 통해 상수로 선언해도 아래 코드는 정상적으로 작동한다. 또한 함수 안의 화살표 함수 arr.filter/map/...((element)=>(element>2)) 와 같이 괄호()를 이용하면 return을 해줄 필요가 없지만, arr.filter/map/...((element)=>{return element > 2}) 처럼 중괄호를 사용하면 return을 꼭 해줘야 한다. Array.filter() 특정 조건을 부합하는 값만 모아서 새로운 배열을 만들어준다. // ex const arr = ['a', 'b', 'b', 'c'] const filtered = arr.filter((element)=>el.. 2022. 8. 24.
javaScript 배열 다뤄보기 1 1. 배열 수정 // 배열 변경하기 let Arr = [1,2,3,4,5] // Arr배열의 0번째를 123으로 수정 Arr[0] = 123 // Arr = [123,2,3,4,5] // 오브젝트 변경하기 obj = [{id:1,name:'냠냠'},{id:1,name:'뇸뇸'}] // obj 배열의 0번째 name을 얍얍얍으로 수정 obj[0].name = '얍얍얍' // obj = [{id:1,name:'얍얍얍'},{id:1,name:'뇨뇨뇽'}] 2. 배열 정렬 // 문자열 배열 // arr.sort() - 문자열 배열의 경우 알파벳 순서로 정렬(오름차순) // 파라미터(compareFunction)-매개변수 가 입력되지 않으면 유니코드 순서에 따라 정렬됨 // 숫자열 배열 // 오름차순 arr.so.. 2022. 8. 23.
React에서 redux 사용해보기 toolkit x 0. 리덕스 설치 // npm npm install react-redux // yarn yarn add redux react-redux - src - redux 폴더 생성 - `redux` 폴더 안에 `config`, `modules` 폴더를 생성 - 생성할 state들의 그룹 - `config` 폴더 안에 `configStore.js`파일을 생성 - 중앙 관리소인 Store를 만드는 설정 코드들이 있는 파일 - modules 폴더 안 store.js(store는 사이트 목적에 맞게) 1. 스토어 생성 // src/configStore.js import {createStore, combineReducers} from "redux"; import todo from "./modules/to.. 2022. 8. 22.
728x90