[sass] 기초 1편 : 셋팅 및 변수, 사칙연산
sass 셋팅하기 1. 비주얼 스튜디오 코드에서 5버전 이상으로 설치 2. sass 파일 만들기 파일명.scss 💡 웹브라우저는 .css만 읽을 수 있다. scss → css 변환해야 사용 가능 3. 비주얼스튜디오 맨 밑에 Watch Sass 누르면 css로 변환되고 두가지 파일 생성됨 💡 .map파일의 용도 : 크롬에서 작업관리자 창에 css가 아니라 scss 파일로 분석해준다 변수 만들기 어려운 단어 기억해야할 땐 변수문법 사용 (변수는 데이터를 잠깐 보관하는 통) $변수명 : 저장해서 쓸 코드; ex) 자주쓰는 색상코드가 너무 어려워서 기언 안날때 $변수명 : 컬러코드; $변수이름 으로 불러와서 사용 가능하다. 사칙연산 가능 💡 사칙연산할 때 +, - 는 같은 단위끼리 * , / 는 정수만
[React] useState에 담을 데이터 너무 클 때 import/export
useState( )에 담을 데이터가 너무 길고 복잡할 때 다른 파일에 보관했다가 import 해올 수 있음 다른파일에 있던 자료 가져오려면 import / export 문법 써야함 1) data.js 파일 만들어서 데이터 담아두고 export (내보내기) export default 변수명 2) app.js에서 import(가져오기) import 작명 from '파일경로' 3) import 해온 데이터 state에 담기 * data.js에 저장한 변수가 두개일때 변수 이름들을 중괄호에 넣어서 export import 할때도 중괄호 * 저장한 자료가 array 일때 → 인덱싱 * object 일때 → 점찍고 키값 * array 안에 object 일때 맨처음 시작 기호가 대괄호 이므로 array에서 데이터 ..
[React] React Bootstrap 사용하기
https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 1. 터미널에 리액트 부트스트랩 설치 2. index.html 태그 안에 코드 입력 3. App.js 에 import 💡import 꼭 해야 뜸!!! 4. 부트스트랩 홈페이지에서 코드 복붙
[React] 블로그 글 발행, 글 삭제 기능 만들기 (input,state)
버튼 누르면 유저가 입력한 글을 글목록에 추가 "버튼 누르면 유저가 입력한 글 가져와서 글제목 state에 넣어주세요" 왜냐면 글제목.map() 함수 때문에 글제목 state(array)의 갯수에 맞게 html이 알아서 생성되고 있음 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function App (){ let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']); let [입력값, 입력값변경] = useState(''); return ( { 입력값변경(e.target.value) } } /> { let copy = [...글제목]; copy.unshift(입력값); 글제목변경(copy); }}>글발행 ) } Colored by Color S..
[React] input값 state에 저장하기 e.target
에 입력한 데이터 가져오는 법 1 {console.log(e.target.value)}}/> cs 파라미터 'e' 추가해주고 e.target.value라고 적으면 현재 에 입력된 값을 가져올 수 있음 ◽ e : 이벤트 객체, 지금 발생하는 이벤트에 관련한 여러가지 기능 담겨있음, e뒤에 점찍고 기능들 붙일수있음 ◽ e.target : 이벤트가 발생한 html 태그 == input 태그 ◽ e.target.value : html 태그에 입력한 값 ◽ e.stopPropagation() : 상위html로 퍼지는 이벤트버블링 막고싶을 때, 보통 자식 태그에 씀 사용자가 에 입력한 데이터 state에 저장하기 사용자가 input에 입력한 데이터는 state 아니면 변수에 저장해서 쓰는 것이 일반적 state에 ..
