분류 전체보기 29

JavaScript 숫자형 input설정 / 총점 자동계산 / 설문지 작성

JavaScript 숫자형 input설정 / 총점 자동계산 / 설문지 작성 일반적인 설문지같은 경우, 사용자로부터 문항별로 점수를 입력받고 계산된 총점을 포함하여 제출하게 됩니다. 웹에서 해당 내용을 반영하기위해 다음의 두가지 설정을 반영하도록 합니다. 1. 점수입력을 위한 input박스를 숫자형만 받도록 설정하고, 해당숫자가 각 항목의 최대점을 넘지 않도록 설정 2. 각 점수의 input박스가 반영될때 마다, 총점을 자동계산하여 표출해주도록 설정 해당 설정이 반영된 화면은 다음과 같이 동작합니다. - 각 문항 점수항목의 input박스 설정 점수별로 input박스에 사용자 입력(keyup) 이벤트가 발생할때 마다 setNumeric함수(숫자형설정) > autoCal함수(총점 계산하여 자동 반영) 순으로 ..

IT/Javascript 2021.07.04

JavaScript 문자열대체 / 공백제거 / replace / replace All

JavaScript 문자열대체 / 공백제거 / replace / replace All 1. 문자열 양쪽 끝 공백제거(trim) var str = " a b c " str = str.trim(); // "a b c" 2. 문자열 대체(replace) const newStr = str.replace(regexp|substr, newSubstr|function) var fruit = "apple tomato banana"; fruit = fruit.replace("apple","orange"); // "orange tomato banana" 2-1. 문자열 제거 - 찾는 패턴에 해당하는 항목이 여럿이더라도, 문자열 인덱스상에서 맨앞의 항목만 변경됩니다. var fruit = "apple tomato banan..

IT/Javascript 2021.04.18

제이쿼리 체크박스 전체선택 on&off / JQuery Check All on&off

제이쿼리 체크박스 전체선택 on&off / JQuery Check All on&off 개발시 테이블 태그에서 자주 사용되는 체크박스의 전체선택/전체해제 코드입니다. (체크박스 항목중, disabled옵션을 반영하여 작성된 코드입니다.) 관련 함수는 총 두가지로 이루어져있습니다. 1. 체크박스 그룹 일괄 on/off 함수 2. 체크박스 그룹내 항목 개별 선택시, 그룹 전체항목이 체크되면 일괄체크박스에 체크시키는 함수 - 테이블 태그 설정 html 부분 입니다. 번호 아이디 이름 생년월일 성별 1 hong 홍길동 2021-04-02 남 .... 5 gan 간달프 2021-04-02 남 전체선택 on/off 체크박스의 id는 "checkAll"이고, 해당될 요소들의 클래스명은 "checkGroup"으로 구성하..

IT/Javascript 2021.04.05

Oracle SQL 이번주, 지난주 / 주간 집계 / 요일함수

Oracle SQL 이번주, 지난주 / 주간 집계 / 요일함수 데이터베이스에서 집계, 통계를 조회할때 사용하는 요일/주간 함수 사용에 대한 포스팅입니다. ※ TRUNC 주(Week)에 대한 Format 'w' : 매월1일 요일을 기준한 주초일자. 'ww' : 매년 1월1일 요일을 기준한 주초일자. 'iw' : 주초 월요일일자. 'd' / 'dy' / 'day' : 주초 일요일 일자. - 출처 : https://blog.naver.com/down83/50089087763 1. 월요일 기준 - SYSDATE : 2021/02/21 기준 - 이번주 -- 이번주 월요일 SELECT TRUNC(sysdate, 'iw') 이번주월요일 FROM DUAL; -- 이번주 주간날짜 SELECT SYSDATE 오늘 ,TRU..

IT/Database 2021.02.21

구름IDE 리액트 항상켜두기 / 리액트 백그라운드 실행 가이드(2)

제목1구름IDE 리액트 항상켜두기 / 리액트 백그라운드 실행 가이드(2) 이전 포스팅에서 구름IDE 컨테이너 항상켜두기 설정을 하고, 리액트 실행URL 생성및 확인을 해보았습니다. 이번 포스팅에서는 리액트 프로젝트를 백그라운드로 실행하여 컨테이너 항상켜두기 상태에 프로젝트가 적용될 수 있도록 설정해보도록 하겠습니다. ※ 들어가기에 앞서.. 항상 켜두기 기능이 동작하지 않습니다 help.goorm.io - 해당 링크의 구름ide의 안내에 따르면 "node 앱을 사용중이라면 npm 패키지의 forever명령어를 사용하여 간단히 백그라운드 프로세스로 실행할 수 있다고 나옵니다." 이번 포스팅에서는... 1. 구름IDE 가이드에 언급된 "forever"를 이용하여 실행해보고, 발생하는 이슈를 알아봅니다. 2. ..

IT/React 2021.02.14

구름IDE 리액트 항상켜두기 / 리액트 백그라운드 실행 가이드(1)

구름IDE 리액트 항상켜두기 / 리액트 백그라운드 실행 가이드(1) 구름 IDE의 프리미엄플랜 서비스가 50%할인하여 이번기회에 체험해보고있는데요, 프리미엄 플랜은 컨테이너 1개에 한하여 항상 켜두기기능을 제공합니다. 이에 리액트 프로젝트에 항상켜두기기능을 설정해보았습니다. 해당 과정을 다음의 두 단계로 알아보도록 하겠습니다. - 포스팅(1) : 구름IDE 컨테이너 항상켜두기 설정 / 실행URL과 포트 설정 - 본 포스팅 - 포스팅(2) : React 백그라운드 실행 및 중지 / "forever" vs "pm2" 1. 항상켜두기 적용할 컨테이너의 "설정" 클릭 2. 항상켜두기 토글 "ON" - 간단하게 컨테이너 설정의 항상켜두기 토글버튼으로 항상켜두기 기능 설정이 되었습니다. 3. 이제 해당 컨테이너에 ..

IT/React 2021.02.14

[React] setState 비동기 / setState 콜백 / setState 버그

[React] setState 비동기 / setState 콜백 / setState 버그 본 포스팅에서는 리액트(React)의 setState가 비동기로 이루어지는 것을 확인하고, 이로인해 발생할 수 있는 문제점과 해결방법을 알아보도록 하겠습니다. 1. 작성한 스크립트 함수 실행부분 state = { public_transport : "bus" } change_vehicle = (vehicle) => { //클릭한 탈것을 매개변수로 받아 public_transport값에 대입 this.setState({ public_transport : vehicle }); this.alert_vehicle(); } alert_vehicle = () => { //현재state의 public_transport값을 받아와서 ..

IT/React 2021.02.07

React 개발환경 설정 가이드(3) / VS Code / Window

React 개발환경 설정 가이드(3) / VS Code / Window 본 포스팅에서는 아래의 해당내용을 단계별로 진행하면서 React개발을 위한 툴을 설치하고 CRA(Create-React-App)를 이용하여 React샘플 프로젝트를 구성해 보도록 하겠습니다. - 가이드(1) : node / npm 다운로드 및 설치 - 가이드(2) : Visual Studio Code 다운로드 및 설치 - 가이드(3) : Visual Studio Code 설정 및 React프로젝트(CRA) 생성 - 본 포스팅 1. 먼저 리액트 프로젝트 워크스페이스(작업공간)로 사용할 디렉토리를 생성해주세요. - 원하는 위치, 원하는 경로에 설정해주세요. 2. File > Open Folder... > 생성한 디렉토리를 "폴더선택" -..

IT/React 2021.02.06

React 개발환경 설정 가이드(2) / VS Code / Window

React 개발환경 설정 가이드(2) / VS Code / Window 본 포스팅에서는 아래의 해당내용을 단계별로 진행하면서 React개발을 위한 툴을 설치하고 CRA(Create-React-App)를 이용하여 React샘플 프로젝트를 구성해 보도록 하겠습니다. - 가이드(1) : node / npm 다운로드 및 설치 - 가이드(2) : Visual Studio Code 다운로드 및 설치 - 본 포스팅 - 가이드(3) : Visual Studio Code 설정 및 React프로젝트(CRA) 생성 1. Visual Studio Code 홈페이지(code.visualstudio.com/download) 에서 인스톨러 다운로드 2. 다운로드 받은 인스톨러를 실행합니다. 라이센스 약관 동의 후 "Next" 3...

IT/React 2021.02.06

VSCode 오류 : 이 시스템에서 스크립트를 실행할 수 없으므로 ...

VSCode 오류 : 이 시스템에서 스크립트를 실행할 수 없으므로... VSCode의 터미널을 통하여 npm혹은 yarn을 사용하여 처음 작업을 수행할 때, 다음과같은 에러가 발생할 수 있습니다. 내용은 "이 시스템에서 스크립트를 실행할 수 없으므로 ~(블라블라)~ 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오." 로, 시스템의 설정에서 스크립트를 실행할 수 있는 권한이 부여되어있지 않은 상태라서 해당 작업 명령을 수행할 수 없어서 발생하는 오류입니다. Window10 기준으로, Windows PowerShell 앱을 통하여 시스템의 스크립트 실행권한을 변경하여 해..

IT/이모저모 2021.02.06