이모저모 일상들

개요 가중치 랜덤 알고리즘(Weighted Random Picker)을 사용하여 확률형 룰렛을 만들어 봅시다. 데이터는 아래의 데이터로 예시를 들어보겠습니다. 가중치 랜덤 알고리즘 관련 내용은 아래 링크에서 설명이 잘 되어있으니 참고해주세요. 가중치 랜덤 알고리즘 - 누적확률값 방식 이번에 알아볼 알고리즘은 가중치가 주어진 경우의 랜덤 선택 알고리즘이다. 여러가지 방법이 있겠지만 가... blog.naver.com 결과물 라이브러리 설치 $ npm install react-custom-roulette or $ yarn add react-custom-roulette 소스 먼저 다운받은 룰렛을 import해주고 룰렛 데이터와 회전여부와 당첨 인덱스를 추출할 state를 선언해줍니다. import { Whee..

join(연결 문자) 배열 객체 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환 let arr = ['김씨','정씨','이씨']; console.log( arr.join('') ); // 김씨정씨이씨 console.log( arr.join(',') ); // 김씨,정씨,이씨 console.log( arr.join('-') ); // 김씨-정씨-이씨 reverse() 배열 객체의 데이터 순서를 거꾸로 바꿈 let arr = ['김씨','정씨','이씨']; console.log( arr.reverse() ); //['이씨', '정씨', '김씨'] sort() 배열 객체의 데이터를 오름차순으로 정렬 let arr = ['김씨','정씨','이씨']; console.log( arr.sort() ); //..

속성 탐색 연산자 속성 탐색 연산자는 선택한 요소를 기준으로 일치하는 요소를 선택하는 선택자. 종류 Jquery Vanilla 설명 (요소[속성]) $("a[href]") document.querySelector ("a[href]") a태그의 href값이 있는 요소를 가져옴 (요소[속성=값]) $("a[title='element']") document.querySelector ("a[title='element']") a태그의 title속성 값이 element인 요소를 가져옴 (요소[속성^=값]) $("a[href^='http://']") document.querySelector ("a[href^='http://']") a태그의 href속성 값이 http://로 시작하는 요소를 가져옴 (요소[속성$=값])..

트리거는 테이블의 삽입, 수정, 삭제 등의 작업이 이루어졌을 경우 자동으로 실행되는 기능이다. 트리거에 많이 활용되는 사례는 쇼핑몰의 경우 어떤 상품을 실수로 삭제했다고 가정해보자. 삭제된 데이터는 복구하는 것이 어렵고, 누가 지웠는지 추적하는 것도 쉽지가 않다. 만약 이럴때 트리거를 이용해서 다른 테이블에 기록을 해놓는다면 문제점을 해결할 수 있다. 그러면 고의든 실수든 기록되었던 다른 테이블에서 확인하고 문제를 해결하는데 도움이 될 수 있다. 트리거의 종류는 AFTER, BEFORE 종류가 있다. AFTER트리거는 삽입, 삭제, 수정 작업이 이루어진 후에 작동하는 트리거이고, BEFORE트리거는 AFTER트리거와 반대로 작업이 이루어지기 전에 작동하는 트리거이다. AFTER 트리거 예제 먼저 트리거를..

21일에 블로그를 개설하고 신청해서 6월 6일 오후 11시 30분에 이메일 알람이 왔다. (하필 저 시간에 와서 잠도 확 깸) 구글 애드센스 신청은 처음이라 후기 등 이런저런 내용을 참고를 하면 공통으로 나오는 내용들은 이러했다. 1. 게시글 20개 이상 있어야 한다. 2. 글자수는 1000자 이상, 맞춤법 검사 3. 1일 1포스트 꾸준이 포스팅 4. 사진 사용시 alt 속성 필수 기재 사실 난 이런 내용들을 의식하기는 했지만 거의 지키지 않았다. 처음 신청을 넣었을 때는 게시글이 1개밖에 없었고, 승인을 받았을때도 작성 게시글이 14개정도 되었다. 승인이 되는 기준은 정확히 알려진게 없다라고는 하지만 나는 구글의 어떤 AI가 판단할 것이고, 내가 양산형 같은 사진 이미지 파일만 올린다던가(이미지는 AI..

div태그는 divison의 약자로 뜻 그대로 콘텐츠의 영역을 나누고 레이아웃을 만드는 데 사용합니다. div는 기본 값으로 너비를 100%로 가지는 특징이 있습니다. 높이와 너비를 설정할 수 있지만 행을 혼자서 차지하는 특성을 가져서 여러개를 만들고 너비를 30%씩 지정해도 한 행에 붙는 것이 아닌 30% 너비를 가진 열 형식으로 나열하게 됩니다. See the Pen Untitled by sodium casein (@xyyhsawg-the-selector) on CodePen. span태그는 div태그와 반대로 너비의 기본 값을 가지고 있지 않습니다. 또한 가지려는 특징도 없습니다. 그래서 높이와 너비를 지정해도 적용이 되지 않습니다. 즉, 안의 이미지나 내용에 따라 사이즈가 유동적으로 변합니다. S..

1. 템플릿 리터럴(Template literals) ES6버전부터 도입된 템플릿 문자열 ES6이전에는 줄바꿈을 이용할 때는 \n같은 줄바꿈을 넣어줘야했고, 여러 변수들을 연결할 때는 +를 통해서 하나하나 연결해줘야 했다. 템플릿 리터럴을 사용하지 않은 예시 let tag= ""; tag += "" tag += "home" tag += "cart" tag += "" let name="사과"; let text = "안녕하세요\n "+name+"입니다."; /* 안녕하세요 사과입니다. */ 템플릿 리터럴을 사용한 예시 백틱(`)문자를 사용 let tag = ` home cart `; let name="사과" let text = ` 안녕하세요 ${name}입니다. ` /* 안녕하세요 사과입니다. */ 2. N..

웹 개발을 하다 보면 여러 체크박스를 선택하면서 데이터를 추출해 작업하는 것은 굉장히 흔합니다. 나름 제 기준에서는 간소화하다고 생각해서 제가 사용하는 것을 올려봅니다. 1. view 국어영어수학사회 국어 영어 수학 사회 2. controller 일반 php라면 함수를 추가하시면 되고 코드이그나이터라면 helper를 사용하시거나 컨트롤러에 메소드를 하나 추가해서 사용하셔도 됩니다. 문자라면 싱글쿼터(')를 붙여주고, 숫자라면 붙여주지 않습니다. 만약 PHP가 7.3미만이시라면 array_key_first함수도 따로 추가해주시면 됩니다. ##컨트롤러 $data = $this->input->get(NULL, TRUE); print_r($data['subject']); //Array ( [0] => 6702 ..

이전 게시물에 이어서 진행하겠습니다. [React] react 프로젝트 생성하기 React는? Facebook에서 만든 자바스크립트 라이브러리. 웹앱을 만들기 위해서 사용하며 페이지를 다시 로드하지 않고 데이터를 변경할 수 있다. 국내에선 대부분 React 혹은 Spring 안쓰면 큰일나는 줄 jdk0.tistory.com 프로젝트를 만들었다면 app.js에서 헤더부분을 지워줍니다. function App() { return ( /* 이 부분 다 지우기 Edit src/App.js and save to reload. Learn React */ ); } 사전에 설치해야 할 라이브러리 (npm start하는것 처럼 vs 터미널에서 실행하면 됩니다.) //부트스트랩 설치 npm install react-boo..

구글에 자바스크립트로 날짜 구하기를 검색해보면 new date 문법으로 날짜를 구하는게 많다. new date형식의 문법의 대략적인 문제점은 다음과 같다고 생각한다. 요즘은 UTC형식으로 날짜를 출력하는데 new date는 현재 거의 사용하지 않는 RFC형식으로 현재 날짜를 출력한다. 그리고 만약 현재 날짜를 출력하고 싶으면 쓸데없이 많은 함수들을 가져와서 써야한다. See the Pen Untitled by sodium casein (@xyyhsawg-the-selector) on CodePen. 현재 날짜를 가져오기 위해서 얼마나 많은 함수를 써야하며 또한 new date의 자바스크립트의 월은 0~11기준으로 되어 있기 때문에 5월을 뽑으려면 getMonth()함수의 +1을 해줘야 현재의 올바른 날짜..