개발/프론트엔드

업무 중 중계서버에서 주민등록번호를 넘겨 받아 스크립트에서 만나이를 조건으로 분기해야하는 작업이 있었다. 함수로 간단하게 구현해봤는데 테스트 결과 문제없이 잘 동작하고 있다. 실제로는 아래 코드에 분기 조건까지 들어갔었지만 어차피 만나이를 계산하는 과정이 중요한거니까 해당 조건 분기 부분은 지우고 만나이를 계산해서 리턴하는 부분까지의 코드만 포스팅 하려고 한다. 필요한 사람이 있다면 참고하면 좋을 것 같다. // 파라미터로 주민등록번호 받아서 만나이 계산 function fn_checkBirthAge(jumin){ // 전달받은 주민번호 데이터에 '-' 확인 후 있으면 제거 if(jumin.includes('-')){ jumin = jumin.replace('-',''); } // 전달받은 주민번호 데이..

태그는 사용자로부터 값을 입력받을 수 있는 대화형 컨트롤(=필드)를 나타낸다. 기본적으로 인라인 요소이고, 닫는 태그가 없는 단일태그이다. 태그는 type 속성을 통해 입력받는 요소의 데이터 유형이 달라진다. 사용가능한 type 은 20여 가지이며, 기본값은 text 이다. 다양한 type text 디폴트 값. 한줄의 텍스트 필드이다. 새줄 문자는 입력값으로부터 자동으로 제거 됨. password 값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고 radio 같은 name 값을 가진 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼 submit ~ 내에 있는 정보들을 서버로 전달하는 버튼 range 값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표..

HTML 에서는 크게 순서가 있는 리스트, 순서가 없는 리스트 2가지로 나누는데, 순서가 없는 리스트는 Unordered List 의 약어인 태그를 사용하고 순서가 있는 리스트는 Ordered List 의 약어인 태그를 사용한다. 순서의 여부를 통해 과 중에 필요한 것을 정하면 이제 그 안에 리스트 항목들을 채워넣어야 하는데 안에 들어가는 항목은 공통으로 태그를 사용한다. 예시) ul 순서가 없는 리스트 예시) ol 순서1 순서2 순서3

태그는 anchor의 약어로 닻을 의미한다. 태그는 href 속성을 통해 다른 페이지, 전화번호, 이메일주소 와 그 외에 다른 url로 연결할 수 있는 링크(연결)을 만든다. 인라인 요소이고, 콘텐츠는 주로 링크의 목적지를 나타낸다. 태그의 대표 속성 href : 연결하고 싶은 주소를 지정한다. target : 링크를 클릭했을 때 창의 형태를 지정한다.(총 4가지) _blank : 새창에서 열기 _self : 현재 탭에서 열기(기본값) _top : _bottom title : 링크에 대한 설명이 들어간다. href 속성의 다양한 활용 a 태그의 href에는 웹 문서의 주소 뿐만 아니라 전화번호나 메일주소 등을 지정할 수도 있다. 이때 각 유형별로 필요한 추가 텍스트가 있다. 1. 전화번호 전화 걸기 2...

콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 여러 요소들을 하나로 묶어 관리하기 편하게하는 태그를 컨테이너 태그라고 한다. 콘텐츠 내용을 구분하거나, 특정 영역마다 공통적인 스타일(css)를 적용하고자 할 때 개발자는 컨테이너태그를 사용하는 것이 좋다. 컨테이너 역할을 담당하는 태그는 크게 시멘틱(Semantic) 태그와 논-시멘틱(non-Semantic) 태그로 나뉜다. 시멘틱(Semantic) 태그 시멘틱 태그란 브라우저, 개발자와 사용자에게 태그에 종속되어있는 내용을 직설적으로 알려주는 태그이다. 태그의 종류로는 header, nav, section, article, aside, footer 가 있다. header : 전체 사이트의 헤더, article에 관련된 헤더이다. nav : 로그인, 목차..

태그는 이미지를 표시할 때 일반적으로 사용하는 태그이다. (참고로 이미지를 표시하는 방법에는 표시할 엘리먼트 대상에 background-image 속성으로 정의하는 방법도 있다.) 단일 태그로서 닫는 태그를 필요로 하지 않는다. 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야 한다. 기본 형태 태그의 속성들을 확인해보자면 먼저 src 속성은 표시할 이미지의 경로 정보와 파일명을 입력받는 속성이다. 즉 이미지의 url을 입력받는다. 서버(클라우드)에 위치한 이미지 파일도 가능하고, 내 로컬 PC에 저장된 이미지 파일도 가능하다. 예시 두번째로 alt 속성은 alternative의 약자로 대체 텍스트 역할을 한다. 이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대..

태그 문단을 표시하는 태그(단락을 구분) 단락1 입니다. 단락2 입니다. , ... 태그 헤드라인을 표시하는 태그이며, 숫자가 작을수록 크기가 크다. 제일 큰 제목 2번째로 큰 제목 3번째로 큰 제목 4번째로 큰 제목 5번째로 큰 제목 가장 작은 제목 태그 수평선을 표시하는 태그로 주제 변경이나 내용 구분시에 사용하는 태그이다. 첫 단락 두번째 단락 태그 줄바꿈(==Enter) 을 적용해주는 태그이다. 태그 하나당 1줄씩 줄바꿈 처리 된다. 첫 줄 내용 두번째 줄 내용 태그 해당 ~~ 안의 텍스트에 Bold(강조) 를 적용한다. 일반 글씨 강조된 Bold 글씨 태그 해당 ~~ 안의 텍스트를 굵게 만든다. 일반 텍스트 폰트 굵게 적용된 텍스트 태그 해당 ~~ 안의 텍스트에 언더바( _ ) 를 적용한다. 일..

HTML 은 Hyper Text Markup Language 의 약자로 하이퍼링크를 통해 특정 웹 페이지에서 다른 페이지로 접근할 수 있는 마크업 언어이다. HTML의 기본 구조 브라우저 화면에 표시할 부분 HTML 은 크게 영역과 영역 총 2가지 영역으로 나누곤 한다. 쉽게 생각해서 한 웹 페이지 화면을 나눈다고 생각했을 때 웹 브라우저 화면에 보이진 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어간다. : 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그이다. ~ : 문서의 제목을 나타낸다. 콘텐츠는 브라우저탭에 표시된다. : 해당 웹 페이지에서 사용할 Javascript 정의 : CSS 파일 내부에서 정의 : CSS 파일 외부에서 정의해서 사용 ~ 실제 브라우저 ..

기본적으로 JS에서 JSON 데이터는 콘솔이나 Alert 로 출력시 [Object object] 로만 출력되고 내용은 보이지 않는다. 이럴 경우 데이터를 제대로 갖고있는지 확인하려면 다음 함수를 사용하면 된다. JSON.stringify() //data == 확인할 JSON 데이터 console.log(JSON.stringify(data)); alert(JSON.stringify(data));

Node.js 처럼 Module.import/export 로 하는 방법말고 그냥 js에서 하는 방법을 찾고 있었는데 정상 동작하는 방법을 찾았다. 호출한 파일 : calc_forecasting.js 호출 대상 : erlangc.js // 외부 js파일 호출(erlangc.js) document.write(''); // 외부 js파일에 있는 함수 호출(Agents) // function Agents() --> erlangc.js 파일 내에 정의된 함수 // 사용 예시 var Agents_t = Agents(SLA, SERVICE_TIME, tempVal ,AHT);

기본 세팅 옵션 $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd',//날짜 포맷이다. 'yy-mm-dd' 를 보편적으로 사용 prevText: '이전 달',// 마우스 오버시 이전달 텍스트 nextText: '다음 달',// 마우스 오버시 다음달 텍스트 closeText: '닫기', // 닫기 버튼 텍스트 변경 currentText: '오늘', // 오늘 텍스트 변경 monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],//한글 캘린더중 월 표시를 위한 부분 monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월',..

데이터를 객체로 다루다보면 key값만 추출해서 따로 사용하거나 value값만 추출해서 사용해야하는 경우가 종종 생긴다. 이럴 때 배열에 돌려서 일일이 꺼내 쓰는건 굉장히 귀찮은 작업이기 때문에, JS에서는 Object.keys(), Object.values() 라는 메서드를 제공해준다. TIP 쉽게 설명하자면 특정 객체를 대상으로 key, value 값들만 뽑아서 배열로 리턴하는 함수다. var obj = { a: 1, b: 2, c: 3 }; var keys = Object.keys(obj); var values = Object.values(obj); console.log("결과1:"+keys); console.log("결과2:"+values); // 결과1 : [a, b, c] // 결과2 : [1,..