본문 바로가기

Programming

 (477)
3. 입력 양식 작성(2) - input 태그 6 ○ input type="file" : 파일 첨부가 필요할 때 input type에서 file을 사용하게 되면, 우리가 흔히 PC에서 파일을 업로드할 때 사용하는 첨부파일 기능을 사용할 수 있게 됩니다. 물론, 일반적으로는 해당 파일이 저장되고 서버로 전송되는 과정을 거치게 되지만 여기서는 입력 폼만 간단하게 살펴보도록 하겠습니다. 배송정보 리스트 이름 주소 이메일 휴대전화번호 레드 옐로우 화이트 그레이 배송비 선택 선불결제 착불 할인 인증 서류 HTML 삽입 미리보기할 수 없는 소스 ○ input type="hidden" : 유저에게 보이지 않는 정보 input 태그를 작성하는 것은 대부분 유저에게 무엇인가 값을 입력받아, 그것을 서버로 전송하는 목적으로 사용됩니다. 히든 태그를 사용하게 되면, 해당 ..
상속(13) - 추상 메서드 + 오버라이드 우리는 지금까지 추상 클래스의 개념과 사용법에 대해서 살펴보았습니다. 이제 메서드 사용과 관련된 내용을 좀 더 구체화시켜서 살펴보도록 하겠습니다. 만일, 추상 클래스를 사용할 때 모든 실체(자식) 클래스가 추상(부모) 클래스에 선언된 메서드를 그대로 사용한다면 큰 문제가 없을 것입니다. 하지만, 실체 클래스에서 각각 메서드가 조금씩 다른 동작을 해야 한다면? 문제가 됩니다. 예를 들어, 알아서 실체 클래스에서 메서드를 선언해서 정의하라고 할 경우에는 우리가 추상 클래스를 만드는 목적처럼 각각 메서드 이름이 제멋대로 선언될 가능성도 있습니다. 혹은, 실수로 해당 메서드를 빼먹는 실수를 할 수도 있지요. 물론 '추상 클래스에서 메서드를 선언해두고, 실체 클래스에서 알아서 오버라이드 하면 해결되는 문제 아닌가..
상속(12) - 추상 클래스 2 앞의 추상 클래스 아티클에서는 다소 길지만 추상 클래스의 개념과 관념적인 특성을 함께 살펴보았습니다. 추상 - 실체 클래스의 관계가 부모 - 자식 클래스의 기본 관계를 의미하며, 추상 클래스는 일반적인 부모 클래스처럼 인스턴스 생성이 불가능하고 오로지 실체 클래스들의 공통 성분을 상속하는 역할만을 한다고 했습니다. 이제, 이러한 추상 클래스의 기본 특성을 바탕으로 왜? 이러한 클래스를 사용하는지 살펴보겠습니다. 상속(12) - 추상 클래스 1 추상 클래스는 이름만 보았을 때는 상속과 관계가 없어 보이지만, 사실 추상 클래스는 부모-자식 클래스의 사용의 응용된 버전입니다. 그래서 기본적인 클래스 상속 관계에 대한 이해도 뒷받침 nozeroslope.tistory.com 기본적으로 추상 클래스의 목적을 이해..
상속(12) - 추상 클래스 1 추상 클래스는 이름만 보았을 때는 상속과 관계가 없어 보이지만, 사실 추상 클래스는 부모-자식 클래스의 사용의 응용된 버전입니다. 그래서 기본적인 클래스 상속 관계에 대한 이해도 뒷받침되어야 공부하기 편하니, 염두에 두시기 바랍니다. 일단, 개념부터 잡아보겠습니다. 여기서 말하는 '추상(abstract)'의 개념은 "어떤 실체가 있는 존재에서 공통되는 특성을 추출한 것"을 의미합니다. 뜬구름 잡는 소리 같다고요? 전혀 아닙니다. '공통되는 특성'을 뽑아서 만든 것이 추상 클래스의 핵심입니다. 그럼, 어떤 것들의 '공통되는 특성'을 뽑는 것일까요? 바로 [실체가 있는 클래스]의 공통된 특성을 뽑아서 모으는 것입니다. 여기에 상속의 개념을 덧붙여 보겠습니다. 등장인물은 '추상 클래스'와 '실체 클래스'입니다..
3. 입력 양식 작성(2) - input 태그 5 ○ type="submit", type="reset" : 전송과 리셋 submit 타입은 우선 특정 form에 입력한 정보를 서버로 전송하는 역할을 합니다. 이를 통해서 전달되는 정보는 태그의 action 속성에서 지정한 처리 서버에 전달되고, reset 버튼은 말 그대로 해당 폼에 입력된 모든 값들을 지우게 됩니다. 두 타입 모두 value를 통해 버튼에 나타나는 텍스트를 입력하게 되죠. 중요한 역할을 하지만, 구현 자체는 간단하므로 바로 예시를 살펴보겠습니다. (참고로 예제에서는 form action 속성에 아무것도 연결되어 있지 않기 때문에, 전송을 하더라도 별도의 동작은 일어나지 않습니다. 각각의 폼에 텍스트와 체크 박스, 라디오 버튼을 클릭한 후 reset을 눌러 테스트해보시기 바랍니다) 배송정..
상속(11) - 객체의 타입 확인(instanceof) 우리는 앞선 아티클에서, 다소 머리는 아팠지만 자식 클래스 타입의 객체를 부모 클래스 타입 객체로 강제 타입 변환을 진행하는 과정을 살펴보았습니다. 여기서, 당연한 이야기를 하나 하자면 "순수 부모 클래스 타입의 객체"는 자식 클래스 타입의 객체로 강제 타입 변환이 불가능합니다. 아래와 같은 경우를 의미하죠. Parent parent = new Parent(); Child child = (Child) parent; // 불가능 반복되는 얘기지만, 부모 클래스의 경우에는 자식 클래스 고유의 속성들을 갖고 있지 않기 때문에 이런 변환은 불가능합니다. 자, 그럼 어떤 코드를 설계하는 과정에서, "부모 클래스 타입의 변수"가 있다고 가정하고 이를 캐스팅(casting)할 때 우리는 한 가지를 주의해야 합니다. ..
3. 입력 양식 작성(2) - input 태그 4 계속해서 input 타입의 여러 종류에 대해서 살펴보도록 하겠습니다. 이번에는 날짜, 시간과 관련된 태그를 살펴보도록 하겠습니다. ○ type="date" / "month" / "week" : 날짜 입력을 위한 input type 타입 값으로만 보았을 때는 일/월/주를 단일로 입력하는 필드일 것으로 보이지만, 실제로 각 타입에 따라 입력되는 값들은 다음과 같습니다. - data : yyyy-mm-dd - month : yyyy-mm - week : 특정 주를 선택해 표시(yyyy-w) 이 태그는 설명하는 것보다는 직접 태그를 입력하고, 결과를 보는 것이 좋을 것으로 보입니다. 아래 코드를 참고해 주세요. 날짜 지정 타입 사용예시 HTML 삽입 미리보기할 수 없는 소스 ○ type="time" / "dat..
3. 입력 양식 작성(2) - input 태그 3 이번에는 지난 시간에 이어서 주요 input type 중 숫자 입력 필드와 관련된 내용을 체크해 보도록 하겠습니다. ○ type="number" / "range" : 숫자 입력 전용 타입 '숫자'를 입력한다고 설명했는데, 단순히 키보드나 키패드로 입력하는 것을 의미하는 것이 아니라 숫자 전용 UI를 이용해 입력할 수 있는 필드를 의미합니다. 정확하게는 타입 "number"의 경우에는 스핀 박스(화살표를 클릭해 숫자를 증가/감소)를 의미하고 "range"의 경우에는 슬라이드 막대를 이용해 숫자 값을 조정하게 됩니다. 그럼 input type "number"와 "range"에서 사용할 수 있는 속성도 알아보겠습니다. - min : 필드 입력 최솟값(디폴트는 0) - max : 필드 입력 최댓값(디폴트는 10..

티스토리툴바