이레

화면 작업을 하다 보면 select를 커스텀해야 하는 경우가 많습니다. css로는 한계가 있을때 nice-select 플러그인을 사용했습니다. 1. 소스파일 다운로드 jQuery Nice Select Usage 1. Include jQuery and the plugin. 2. Include the plugin styles, either the compiled CSS... ...or, ideally, import the SASS source (if you use SASS) in your main stylesheet for easier customization. @import 'nice-select'; // Or 'nice-select-prefixed'. jqueryniceselect.hernansartor..

Router.js 에서 설정한 path로 이동하는 방법 ⭐️ Link 태그 html에서 a 태그와 같은 기능을 하는 태그입니다. 클릭했을 때 바로 이동하는 기능을 구현할 때 사용합니다. ⭐️ useNavigete useNavigete를 사용하기 위해서는 react-router-dom 라이브러리가 설치되어 있어야 합니다. 라이브러리 설치 후 해당 라이브러리를 import 시켜준 후 사용합니다. import { useNavigate } from "react-router-dom"; //예시입니다 const Mypage = () => { const navigate = useNavigate(); return ( . . . . navigate('/home')} /> ) } Link 태그와 다른점은 useNavige..

setInterval() 을 이용해 카운트다운 타이머를 만들어 봅니다. 조건) ⭐️ 시간, 분, 초 를 입력할 수 있어야 합니다. ⭐️ start, stop, reset 버튼이 있어야 합니다. ⭐️ 각 버튼이 맞게 동작해야합니다. ⭐️ 카운트다운이 시작되면 시간 수정이 불가능합니다. ( 정지하거나 리셋하면 수정 가능) 목표는 기능이 잘 돌아가게끔 하는 거라 형태와 스타일은 간단히 작성합니다. : : START STOP RESET .wrap {padding-top:100px;} .timer {display:flex;align-items:center;justify-content:center;} input {width:150px;height:150px;background-color:#4c6ef5;border-..

react router로 페이지 이동 작업을 하다 에러가 났습니다. react-router-dom v6부터는 Switch 대신 Routes를, Route 안에 component 대신 element를 사용합니다. + 자식으로는 만 가능합니다. 그래서 위와 같이 작성하면 자꾸 에러가 발생합니다.. 과 가 있어서 에러 발생.. :( 위처럼 element로 사용해줘야 작동합니다.

리액트 슬라이드 라이브러리에 여러 가지가 있는데 제일 간단하고 쓰기 편하다는 react-sldie를 사용해 봤습니다. ⭐️ 라이브러리 설치 npm install react-slick --save npm install slick-carousel --save npm을 이용해 라이브러리를 설치해 줍니다. 해당 라이브러리가 잘 설치되었다면 package.json 에 이렇게 들어가있습니다. ⭐️ 사용법 slide를 import 해줍니다. import React from "react"; import Slider from "react-slick"; // slide import const MainSlider = () => { const settings = { dots: true, Infinite: true, speed..

맥에서 h2 설치 및 실행하는 방법입니다. 1, h2 다운로드 http://www.h2database.com/html/download.html Downloads Downloads Version 2.2.220 (2023-07-04) Windows Installer (SHA1 checksum: 7b98de1c5c741d793f77c4993ac527dc33b91a4b) Platform-Independent Zip (SHA1 checksum: 5cb2f9c43af14b56feab8ab4717f872a0dde83b8) Version 2.1.214 (2022-06-13) Windows Installer (SHA1 check www.h2database.com 저는 platform-independent zip 파일로 ..

mac에서 리액트 프로젝트를 설치하려는 과정에서 계속 npm Error: EACCES 에러가 떴었습니다. 권한 관련 에러라고 해서 sudo도 사용해 봤지만 해결이 안 되고 있다가 방법을 찾았습니다. ⭐️ 문제 npx create-react-app app_name npx를 사용해 프로젝트 설치시 나는 오류였습니다. ⭐️ 해결 방법 sudo chown -R "usrname" ~/.npm sudo chown -R "usrname" /usr/local/lib/node_modules usrname 은 사용자 계정명입니다. sudo chown 은 사용자를 변경하는 명령어입니다. 저는 이 방법으로 해결했는데, 정확한 원인이나 다른 방법을 아시는 분은 댓글로 알려주세요 :)

리액트 reset css 적용하기 퍼블 작업을 하다 보면 브라우저마다 기본적으로 적용되어 있는 스타일을 리셋해 주기 위해 reset css를 따로 작성하는데, react에서는 이를 위한 패키지가 존재합니다. 1, npm을 사용해 설치해줍니다. npm i styled-reset 2, 설치 완료 후 import 해줍니다. import reset from 'styled-reset'; 이렇게 하면 적용 완료입니다.

jquery-ui 플러그인에는 다양한 기능들이 있습니다. 자주 사용하는 기능 중에 드래그 앤 드롭이 있는데, 정렬기능인 sortable()을 사용하지만, 모바일에서는 인식이 잘 안 되는 문제가 있습니다. 이걸 해결하기 위한 플러그인이 jQuery UI Touch Punch 입니다. jquery-ui 밑에 작성해 주면 바로 적용됩니다.

자바스크립트 배열 데이터를 추가, 삭제하는 방법입니다. ⭐️ 배열 추가 1) push() - 배열 마지막에 요소 추가 var arr = ['가', '나', '다']; arr.push('라'); console.log(arr); //결과 ['가', '나', '다', '라'] 2) unshift() - 배열 첫 번째에 요소 추가 var arr = ['가', '나', '다']; arr.unshift('라'); console.log(arr); //결과 [ '라','가', '나', '다'] 3) splice() - 기존 배열을 삭제 또는 교체, 새 요소 추가 splice(n, n2, 요소) n은 추가, 제거할 배열의 요소 위치를 정합니다. n2는 제거할 배열의 요소 개수를 정합니다. 밑에 예시를 보면 1번째 요소에..