積小成大:티끌 모아 개발

[HTML] input type=date (yyyyyy-mm-dd) 해결 방법 | 달력 표시하기캘린더에서 날짜를 선택하는 방식, 직접 날짜를 입력하는 방식으로 내가 검색 조건을 받을 때 제이쿼리대신 간편하게 쓰는 태그 중 하나다. 제이쿼리 캘린더를 사용하면 커스텀이 용이하지만chun-k.tistory.com 지난 포스팅에서 input type이 date 타입일 때 연도가 6자리로 표시되는 것과 달력 표시하는 방법에 대해 적어 놨었다. 오늘은 input type이 date일 때 placeholder 적용하는 방법이다.label이 있다면 굳이? 싶은 기능이지만 input date는 연도-월-일 이라는 내용이 자동으로 적용되기 때문에label 없는 디자인에서는 뭐가 무슨 날짜인지 알 수가 없다. 그럴 때 우리..

캘린더에서 날짜를 선택하는 방식, 직접 날짜를 입력하는 방식으로 내가 검색 조건을 받을 때 제이쿼리대신 간편하게 쓰는 태그 중 하나다. 제이쿼리 캘린더를 사용하면 커스텀이 용이하지만 아직까지 커스텀을 휘황찬란하게 할 일이 없어서  주로 input 태그의 date 타입을 자주 사용한다. 손쉽게 캘린더를 만들 수 있지만 몇가지 단점이 있는데 그 단점을 보완?하는 방법이다.단점1. yyyyyy-dd-mm캘린더에서 날짜를 선택한 경우 yyyy-mm-dd 형태로 잘 입력이 된다. 그러나 input창에 직접 연도월일을 입력하게되면 yyyyyy-mm-dd의 형태로 연도가 6자리까지 입력을 받을 수 있게 되는데이게 사용성 측면에서는 별로인거다. 기본 설정이 6자리이기 때문에 발생하는 현상이라 별도로 max값을 지정해서..

태그는 원래 "italic"을 나타내기 위해 사용되었지만, 최근에는 HTML에서는 주로 아이콘을 삽입할 때 사용되고 있다. FontAwesome과 같은 라이브러리와 태그를 사용하면 특정 아이콘 클래스를 적용하여 아이콘을 쉽게 추가할 수 있게된다. 아이콘을 적용하는 순서1. FontAwesome CSS 링크 추가헤드 태그 안에 FontAwesome CSS 링크를 추가하여 아이콘을 사용할 수 있도록 한다. 2. 아이콘 클래스 적용 태그에 fa와 특정 아이콘 이름 클래스를 추가하여 원하는 아이콘을 표시한다.ex)  주로 많이 사용하는 아이콘은 아래와 같이 다양하게 있고 더 많은 아이콘은 FontAwesome 페이지에서 복붙해서 사용이 가능하다.fa-user: 사용자 아이콘fa-envelope: 이메일 아이콘..

백엔드 개발자를 꿈꾸며 취뽀에 성공했지만 어쩌다보니 풀스택의 길을 걷고 있는 청크씨. 찍먹 js의 지식으로 현업에서 살아남기란 여간 쉬운게 아니다. 그 중 온 몸으로 js의 풍파를 가장 많이 겪은 ajax를 내가 이해하기 쉽게 파헤쳐놓으려고 한다.(왜 다들 어려운 용어로 설명해놓는지 모르겠다. 한글로 써있는데 뭔말인지 몰라서 내가 보려고 만드는 것...) 언젠가 내가 10년차 개발팀장(?)이 되었을 때 나같은 꼬마 개발감자 후임이 온다면 내 블로그를 당당히 던져줄 수 있도록 쉽게쉽게 가보자- 2024년 4월 16일 취뽀 2개월차 개발감자 청크가 10년 뒤 개발팀장 청크에게-AjaxAsynchronous JavaScript and XML의 약자로 자바스크립트와 XML을 이용한 비동기적 통신방법이다.프론트와..

프로그래밍에서 함수는 정해진 일을 하는 것으로 이해할 수 있다. 단순히 동작 하나만 실행되는 게 아닌, 여러 동작이 연결되어야 하나의 프로그램이 되는데 이렇게 동작해야 할 목적대로 묶은 명령을 함수(function)이라고 한다. 함수는 자바스크립트에 들어 있는 함수 또는 필요한 명령에 맞춰 직접 만든 함수를 사용할 수 있다. 함수는 함수를 만들 때 이름을 붙이고 필요할 때마다 함수 이름을 호출하여 실행할 수 있고, 각 명령의 시작과 끝을 명확하게 구별할 수 있는 장점이 있기 때문에 잘 사용한다면 굉장히 편리한 기능이다. 함수 선언 및 호출 함수 선언이란 함수가 어떤 명령을 처리할지 미리 알려주는 것을 의미한다. //함수 선언 function 함수명() { 명령 } 함수 호출은 함수를 선언한 후 실행 할 ..

반복문은 어떠한 동작을 여러 번 실행해야 할 때 사용한다. 만약 1부터 100까지의 숫자를 더해야 한다면 명령을 100줄 작성해야 하지만, 반복문을 사용하면 간단명료하게 코드를 작성할 수 있다. for문 for문가장 많이 사용되는 반복문으로, 값이 일정하게 커지면서 명령을 반복하여 실행할 때 사용한다. //for문 기본형 for(초깃값; 조건; 증가식) { 실행 할 명령 } for문은 초깃값->조건->명령->증가식의 순서로 실행되고, 초깃값은 카운터 변수를 초기화하는 것으로 0이나 1부터 시작한다. 조건은 명령을 반복하기 위한 조건을 체크하는 것으로, 이 조건을 만족해야만 그다음에 오는 명령을 실행한다. 증가식은 명령을 반복한 후 실행되는데, 보통 카운터 변수를 1 증가시키는 용도로 사용한다. //for..

조건문은 프로그래밍을 할 때 특정 조건과 명령에 따라 실행 순서를 정할 때 사용하며, 가장 많이 사용되는 구문이다. if 문 //if문 기본형 if (조건) { 조건이 true일 때 실행 할 명령 } if문은 어떠한 조건을 체크하여 결괏값이 true면 if문 다음에 나오는 조건값을 실행하고, false라면 아무 실행도 하지 않는다. 만약 조건을 만족했을 경우 실행할 명령이 여러 개라면 중괄호({ })로 묶고, 그 안에 명령을 나열하여 순서대로 한꺼번에 처리하라고 표시할 수 있다. 중괄호로 묶은 영역은 코드블록이라고 한다. if-else 문 //if-else문 기본형 if (조건) { 조건이 true일 때 실행 할 명령 } else { 조건이 flase일 때 실행 할 명령 } if-else문은 조건의 결괏..

연산자(operator)란? 프로그래밍에서 '연산'은 새로운 문자열을 만들거나 값의 크기를 비교하는 등의 여러 가지 동작을 의미한다. 이런 연산의 특정한 동작을 지시하는 기호가 연산자다. 산술 연산자 산술 연산자는 수학 계산을 할 때 사용하는 연산자로 우리에게 익숙하다. 연산자의 왼쪽 또는 오른쪽에 있는 연산 대상을 '피연산자'라고 하며, 피연산자는 숫자 또는 변수를 작성한다. 산술 연산자의 종류 + : 두 피연산자의 값을 더함 (c = a + b) - : 첫 번째 피연산자 값에서 두번째 피연산자의 값을 뺌 (c = a - b) * : 두 피연산자의 값을 곱함 (c = a * b) / : 첫 번째 피연산자 값을 두 번째 피연산자 값으로 나눔 (c = a / b) % : 첫 번째 피연산자 값을 두 번째 피..

자료형이란? 프로그램에서 처리할 데이터의 형태를 말한다. 예를 들어 '10'을 숫자로 처리할지 문자로 처리할지에 따라 프로그램의 결과는 달라진다. 자바스크립트의 자료형 기본유형, 복합유형, 특수유형으로 나누어진다. 기본유형 ① 숫자형(number) : 따옴표 없이 숫자로만 표기 //예시 var age = 20; 숫자형은 정수와 실수로 한번 더 구분이 된다.정수 : 소수점이 없는 숫자실수 : 소수점이 있는 숫자 정수는 표현 방법에 따라 10진수, 8진수, 16진수 세 가지 유형으로 나누기도 한다.8진수와 16진수는 이해가 조금 어렵지만 반드시 알아두어야 하는 개념이다. 10진수 : 0~9로 표현할 수 있는 숫자 예시) 2000, 17 8진수 : 0~7로 표현할 수 있는 숫자 예시) 012, 013, 020..

변수란? 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터로 어떠한 상자 안에 값을 담는 개념으로 이해할 수 있다. 변수의 선언 변수의 선언이란 변수를 구별할 수 있도록 각각 이름을 붙여주는데, 이를 '변수 선언'이라고 하며 대입 연산자(=)를 이용해 변수에 초기 값을 대입하는 것을 초기값 할당이라고 한다. Javascript는 다양한 변수 선언 방법이 있다. ① var : ES6 이전 자바스크립트에서 사용되던 변수 선언 예약어로, 재선언과 재할당이 가능하며 변수를 선언 한 후 초기화를 할 수도 있고, 변수 선언과 함께 초기화를 할 수도 있다. (스코프 : 함수영역) //var 변수 선언 후 초기화 var name; name = 'A'; //vat 변수 선언 시 초기화 var name = '..