react.js 공부 state #2

해당 내용은 유튜브 코딩애플님의 채널에서 공부하여 작성된 내용임을 밝힙니다. React 에 내장함수를 사용할 때 import React, { useState } from 'recact'; = React에 있는 useState라는 내장함수를 사용하겠습니다. ES6 destructuring 문법 var [a,b] = [10, 100]; a에는 10일 b에는 100을 넣겠다. state 1.변수 대신 쓰는 데이터 저장공간 2.useState()를 이용해 만들어야함 state만들기 useState("남자 코드 추천") 는 즉 [a,b]가 있다면 ["남자 코트 추천", 정정해줄 데이터]를 만드는 것이다. state를 쓰는이유 웹이 app처럼 동작하게 만들고 싶어서(클릭해도 새로고침안되고 화면에서 이동) HTML이..

react.js 공부 시작하기 #1

해당 내용은 유튜브 코딩애플님의 채널에서 공부하여 작성된 내용임을 밝힙니다. [터미널] # npx 라이브러리를 설치를 도와주는 명령어 # create-react-app 프로젝트명 해당 폴더에 프로젝트명을 가진 리엑트를 설치한다. # npx create-react-app A 해당 폴더에 A라는 프로젝트명을 가진 리엑트를 설치한다. # src/app.js index.html에 속하는 메인의 요소임 속하게 만드는건 src/index.js에 있음 # npm start 미리보기 화면 시작 node.js는 왜 설치하는가? 1. create-react-app라는 라이브러리를 사용하기 위함 2. npm이라는 '툴'을 사용할 수 있음 * npm이란? 부트스트립이나 제이쿼리 같은 라이브러리를 쉽게 설치할수 있게 해줌 JS..

[스마트에디터] 커서 맨위로 포커스 이동

var oSelection = oEditors.getById["wr_content"].getEmptySelection(); oSelection.selectNodeContents(oEditors.getById["wr_content"].getWYSIWYGDocument().body); oSelection.collapseToStart(); // 시작위치(최상단)으로 이동 //oSelection.collapseToEnd(); // 끝(최하단)으로 이동 oSelection.select(); oEditors.getById["wr_content"].exec("FOCUS");

현재 주소 링크에 addClass하기/ 현재 주소 herf에서 찾기

[jQuery] 유동적인 테이블 셀병합 - rowspan

$(document).ready(function(e){ genRowspan("td 클래스명"); }); function genRowspan(className){ $("." + className).each(function() { var rows = $("." + className + ":contains('" + $(this).text() + "')"); if (rows.length > 1) { rows.eq(0).attr("rowspan", rows.length); rows.not(":eq(0)").remove(); } }); }

slick slider 로딩과 함께 이미지가 보이기

I know it's an old question, but this worked for me in a similar situation, when the problem was that all slides were displayed at once and this looked horrible and jumpy. The solving is pure CSS. First, you add CSS to your slick slider wrapper: .your-slider-wrapper { opacity: 0; visibility: hidden; transition: opacity 1s ease; -webkit-transition: opacity 1s ease; } //After slider is initialized..

체크박스 체크시 해당 열의 텍스트박스 활성화

function needStock() { $('.needStock').each(function () { if ($(this).prop('checked')) { $(this).parent('td').next('td').children('.noti_qty').prop('disabled',false) }else{ $(this).parent('td').next('td').children('.noti_qty').prop('disabled',true) } }) } $(function () { needStock(); }) $('.needStock').on('click', function () { needStock(); })

결제완료 페이지에서 KCP 매출 전표 조회하기

결제 방법에 따라 조회하는 주소가 다르다 (=cmd파라미터 값이 다름)

팝업 하루동안 안보기

function setCookieMobile48 (name, value, expiredays) { var todayDate = new Date(); todayDate.setDate(todayDate.getDate() + expiredays); document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";" } function getCookieMobile48 () { var cookiedata = document.cookie; if (cookiedata.indexOf("todayCookie48=done") < 0) { $("#popup48").show(0); $("#pop_black_bg")...

FlexSlider 페이지 넘어가면 페이징 보이기

2/2 하루동안 닫기 닫기 $(function () { var $status = $('.pop_paging'); var $sliderElement = $('.popup_slider'); var $slideElement = $('.popup_slider li'); $status.text("1/" + $slideElement.length); $sliderElement.flexslider({ animation: "slide", controlNav: false, animationLoop: false, //directionNav: false, slideshow: true, slideshowSpeed: 5000, start: function (slider) {}, after: function (slider) { $..