본문 바로가기

전체 글

 (404)
[React] 일련의 콘텐츠 표시 / ListGroup 일관된 콘텐츠를 표시하거나 목록을 나타낼 때 쓰이는 ListGroup [ListGroup.js] import {ListGroup, ListGroupItem, Badge, ListGroupItemHeading, ListGroupItemText} from 'reactstrap'; function ListGroupStrap(){ return( //(1) Cras jsto odio14 Dapibus ac facilisis in2 Morbi leo risus1 // (2) 스마트폰 두뇌 만드는 퀄컴도 참전...'생성형 AI' 경쟁 더 뜨겁다14 Dapibus ac facilisis in2 Morbi leo risus1 // (3) "국내 통신망 제일 많이 쓰는 구글, 사용료는 '0원'" 구글 등 해외 플랫폼 사업..
[React] 입력 그룹 / InputGroup, InputGroupAddon Input을 받을 때 form 양식 컨트롤을 확장하는 InputGroup/InputAddon 그냥 일반적인 Input을 사용하여 입력을 받을 수 있지만, 입력의 앞/뒤에 텍스트나 버튼 등 다른 양식을 추가하여 입력 폼을 확장할 수 있는데, 예를들어 이메일을 입력 받거나, 어떠한 그룹 안에서 선택 후 검색을 해야 하는 등에 활용이 가능하다 [InputGroup.js] import {InputGroup, InputGroupAddon, InputGroupText, Input, InputGroupButtonDropdown, DropdownMenu, DropdownItem, Button, DropdownToggle} from 'reactstrap'; import {useState} from 'react'; fun..
[React] 폼 제출 / Formstrap 작성한 내용을 제출하기 위한 Form JSP를 사용할 때에도 form 태그를 이용해 작성한 내용을 제출하는 형식을 많이 사용했는데, reactstrap에도 Form이 존재한다 하지만 둘의 차이점은 존재하는데 그것은 Reactstrap의 Form 내에 존재하는 모든 Button은 type을 지정해주지 않아도 submit을 가지고 있다는 점이다 따라서, Form을 사용할 때에는 e.preventDefault()를 통한 제어가 필요함 [FormStrap.js] import{Form, Label, Input, FormGroup, FormText, Button, Col} from 'reactstrap'; function FromStrap(){ return( {/* 이메일 입력 */} // (1) Email // ..
[React] 펼치기,접기 / Collapsestrap, Fadestrap 펼치고 접는 Collapsestrap (공간 차지 X) Fadestrap (공간 차지 O) [Collapse] 펼치고 접었을 때, 내용이 보이지 않을 시에 해당 공간을 차지하지 않게됨 [CollapseStrap.js] import {UncontrolledCollapse, Button, CardBody, Card} from 'reactstrap'; function CollapseStrap(){ return( 펼치기/접기 // (1) //(2) 구글 등 해외 플랫폼 사업자가 망 사용료를 내도록 하는 규제가 필요하다는 주장이 제기됐다. 유튜브 인기 영향으로 구글의 국내 통신망 트래픽 비중은 28.6%(지난해 4분기 기준)인데 납부하는 망 사용료는 0원이다. 국회 과학기술정보방송통신위원회 소속 김병욱 국민의힘 ..
[React] 이미지, 글씨 슬라이드 / Carouselstrap 이미지나 글씨를 배너처럼 만들어 슬라이드로 넘기는 형식의 Carouselstrap [Carouselstrap.js] import {UncontrolledCarousel} from 'reactstrap'; function CarouselStrap(){ const items = [ // (1) { src:'logo192.png', altText:'로고', caption:'logo', header:'logo' }, { src:'logo512.png', altText:'로고2', caption:'logo2', header:'logo2' }, { src:'logo192.png', altText:'로고3', caption:'logo3', header:'logo3' } ] return( // (2) ) } expor..
[React] 카드 / Cardstrap 카드 형식 생성을 위한 Cardstrap 쇼핑몰의 기본 탭에서 흔히 볼 수 있는 카드 형식의 strap을 확인해 보고자 한다 [Cardstrap.js] import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle, Button } from "reactstrap" function CardStrap(){ return( // (1) // (2) // (3) REACT front component React is front component 조회 // (4) 카드 제목 카드 내용입니다 선택 ) } export default CardStrap; (1) Card : 기본적인 Card의 틀 생성 (2) CardImg : 카드 내에 이미지를 추가하고자 할 경..
[JS] 타이머 / setTimeout(), setInterval() 일정 시간 이후 실행을 위한 setTimeout() 주기적으로 반복 실행을 위한 setInterval() [setTimeout() 함수] [기본 형식] setTimeout(() => {코드, 시간(ms)}); - 코드를 바로 실행하는 것이 아닌 일정 시간을 기다린 후 코드를 실행해야 하는 경우가 존재할 때 사용 [가변 변수 이용] function add(x+y){ console.log(x+y); } setTimeout(add, 2000, 3, 4); // 2초 후 7 출력 - setTimeout() 함수의 경우 세번째 인자부터 가변 변수를 받을 수 있어, 첫번째에서 넘어온 함수가 인자를 받는 경우 이 함수에 넣은 변수를 명시하기 위해 사용 [함수 실행 취소] function add(x+y){ consol..
[React] 알림창 / AlertStrap, SweetAlert2 이벤트 발생 시 알림 혹은 확인 창 띄우는 alert 웹을 사용하다보면 사용자에게 확인이 필요한 경우 많이 사용하는 알림의 경우 alert를 많이 사용하는데, 오늘은 기본적인 AlertStrap과 이를 더 예쁘게 보이도록 하는 SweetAlert(Swal)을 이야기 하고자 한다 [AlertStrap.js] import {Alert, UncontrolledAlert} from 'reactstrap'; function AlertStrap(){ return( // (1) Simple Alert [color : light] // (2) UncontrollerdAlert Alert[color : primary] ) } export default AlertStrap; - Reactstrap의 alert의 경우 ht..

티스토리툴바