분류 전체보기 201

[JavaScript] datePicker 특정일 선택 비활성화 처리

일요일, 토요일을 선택 불가하도록 막을 것이다. $("#datePicker").datepicker({ beforeShowDay: function(date) { var day = date.getDay(); return [(day != 0 && day != 6)]; } }) .on("change", function(e) { }); beforeShowDay옵션을 이용해 특정일 비활성화 처리를 해줄 수 있다. 자바스크립트의 요일을 숫자로 반환해주는 getDay() 메서드를 이용해 요일들을 0~6 사이의 숫자로 가져온다. 요일이 일요일(0)이거나 토요일(6)이면 false를 리턴해 비활성화 처리가 된다. 여기서 추가로 공휴일 선택도 막아보자. //선택불가능 날짜 var cantPickDates = ["-01-01..

JavaScript 2021.04.19

[Python] Project Euler 79 : Passcode derivation 로그인 기록으로 비밀번호 찾기

projecteuler.net/problem=79 Problem 79 - Project Euler The page has been left unattended for too long and that link/button is no longer active. Please refresh the page. projecteuler.net 79번 문제) A common security method used for online banking is to ask the user for three random characters from a passcode. For example, if the passcode was 531278, they may ask for the 2nd, 3rd, and 5th characters;..

알고리즘 2021.04.17

[Python] 10001st prime : 10001번째 소수 구하기

https://projecteuler.net/problem=7 Archived Problems - Project Euler The page has been left unattended for too long and that link/button is no longer active. Please refresh the page. projecteuler.net 7번 문제) By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13, we can see that the 6th prime is 13. What is the 10 001 st prime number? 6번째 소수가 13이라면 10001번째 소수는 무엇인가? 편하게 읽기 위해 함수를 두 개로 쪼개서..

알고리즘 2021.04.15

[JavaScript] n일 전 or n달 전 날짜 구하기 : moment.js와 moment TimeZone

moment.js는 날짜 형식을 바꿀 때나 날짜 간 계산을 해야 할 때 등등 사용하면 편한 자바스크립트 라이브러리이다. 나는 타입 스크립트 기반인 리액트 프로젝트에서 사용했다. 먼저 npm에서 moment.js를 설치해준다. npm install moment 그다음 작성하려는 타입 스크립트 파일에 import 해주고 한국어 설정도 해준다. import moment from 'moment'; moment.locale('ko'); 이렇게 해주면 moment.js를 사용할 수 있다. 나는 보통 날짜 형식을 지정할 때 많이 사용했다. moment().format('YYYYMMDD') moment().format('YYYY-MM-DD') moment().format('YYYY/MM/DD') 혹은 3개월 후의 날짜..

JavaScript 2021.04.05

[MSSQL] 조건문 CASE WHEN 사용 예제

유저 아이디, 티어, 플레이 시간이 다음과 같이 저장되어 있는 Temp_user 테이블에서 case문을 이용해 데이터를 가져올 것이다. userId tear play_time -------- -------- ----------- player1 1 100 player2 2 1500 player3 3 350 player4 1 980 player5 2 90 player6 3 1900 유저의 티어 값에 따라 [골드][실버][브론즈]로 나타내는데 브론즈일 경우 플레이 시간이 1000시간 이상이라면 티어를 [심해]로 가져오자. SELECT userId AS 아이디, play_time AS 플레이시간, CASE WHEN tear = '1' THEN '골드' WHEN tear = '2' THEN '실버' WHEN te..

MSSQL 2021.04.02

[React] 리액트 커스텀 훅(custom Hook)으로 코드 양 줄이기

핸들러와 관리해야 할 상태 값이 많아질수록 반복적인 코드들로 핸들러와 관리해야 할 상태 값이 많아지면 반복되는 코드들이 자리를 차지하게 된다. 컴포넌트를 5개 썼을 뿐인데도 벌써 코드가 저만큼이다. 비효율적인 작업을 하고 있다는 생각이 들어서 공통되는 부분을 하나로 묶기로 했다. 처음엔 useState와 핸들러를 하나만 사용하는 방식을 이용했는데 최적화를 생각하다 보니 이것도 좋은 방법이 아니었다. 그래서 커스텀 훅을 만들었다. useInput.tsx const useInput = (initValue: any) => { const [value, setValue] = React.useState(initValue); const onChange = (e: any) => { setValue(e.target.va..

React 2021.04.01

[React] 리액트 toast UI Grid 컬럼 설정 팝업 만들기

tost ui grid의 컬럼을 설정하는 팝업을 만들었다. 주요 기능으로는 두 가지가 있다. 체크 박스로 노출/비노출 설정 왼쪽 화살표 아이콘으로 컬럼의 순서를 조정 화살표 아이콘 클릭 시의 알고리즘을 간략하게 설명하자면 이렇다. 클릭한 게 ▲인지 ▼인지(isUpIcon) 판단 └ ▲클릭 시 조정하려는 컬럼이 맨 윗 컬럼이면 : ▲아이콘 스타일을 회색으로 변경(▲을 disabled처리) 맨 윗 컬럼이 아니면 : 바로 윗 컬럼과 위치를 바꿈(순서 변경) (※ ▼일 때는 반대로 진행) SortColumnPopup.tsx import React from 'react'; interface IColumn { colIdx: number; //컬럼순서 name: string; //컬럼명(키값으로 사용) header:..

React 2021.03.31

[React] 리액트 useEffect와 mobX, 변경 감지 안 될 때

즐겨찾기 메뉴와 메인 메뉴로 이루어진 상단 내비게이션 바를 만드는 도중 문제가 생겼다. 메인메뉴(하위메뉴)에서 별 아이콘을 클릭하면 즐겨찾기 추가/삭제가 정상 동작 한다. 하지만 즐겨찾기 메뉴에서 별 아이콘을 클릭하면 메인메뉴에 변경 내용이 즉각 반영이 안 되는 것. 새로 고침을 하면 그제야 변경한 내용이 적용되는 걸 보고 프론트의 문제란 걸 알았다. 즐겨찾기와 메인 메뉴 둘 다 빌드될 때 DB에서 한번 불러오고 mobX로 store에서 관리하고 있다. 별 아이콘은 FavIcon 컴포넌트를 만들어서 메뉴마다 넣어주고 있다. store.tsx //메인메뉴 @observable mainMenus: IMainMenus[] = []; //즐겨찾기메뉴 @observable favMenus: IFavMenus[] ..

React 2021.03.30