comtK

안녕하세요~ 오늘은 선택자(selector)에 대해서 알아볼께요!!

이게 참 javascript나 CSS, jQuery에서 공통적인부분이라 카테고리 나누기가 참 애매했네요 ㅋㅋ

간단하게 id와 class로 특정개체 혹은 개체집합을 선택하는걸 해보겠습니다.

일단 id와 class의 개념부터 먼저 잡고가실까요.

아 물론 제가 알고있는부분에 한해서 적기때문에, 설명에 대해 공감못하실수도있고, 틀린부분이 있을수도 있어요.

틀린부분은 말씀해주시면 참고하고 수정작업을 하겠습니다.

일단 컨셉하나 잡고 설명들어가겠습니다.

지금 제가 이 포스팅을 작성하고있는 페이지나, 혹은 네이버 메인, 티스토리 메인 등등 기타 모든 페이지들 하나하나를 '나라' 또는 '지역' 이란 개념으로 생각해주시면 이해가 빠르실겁니다. 제가 이렇게 설명을 할거거든요 ㅋㅋㅋ

페이지 = 나라

id = 주민번호

class = 인종, 지역주민등 사람이 모여있는 그룹

개체 = 사람

저는 개인적으로 이런식으로 생각하고있습니다.

페이지 하나하나를 각각의 나라로 보고, id를 그 나라의 고유한 주민번호로 생각하면 됩니다. 그리고 class는 지역주민 혹은 인종, 게체를 사람으로 보겠습니다.

먼저 id에 대해서 이야기해보겠습니다.

하나의 나라(페이지)에는 모든사람(개체)이 고유한주민번호(id)를 갖고있어야 합니다. 만약 중복된 주민번호(id)가 있다면 그건 그나라에 문제가 있는거겠죠? 그들중에서 한사람을 특정지을수가 없잖아요. 이름도 동명이인이 있을수 있으니까요. 이들을 각각 구분할 수 있는건 주민번호(id)밖에 없습니다.

이렇게 생각하시면 따로 외울 필요가 없습니다. 우리는 이미 다 알고있는 사실이니까요.

단어만 몇개 바꿔주면 바로 이해가 갑니다. 이처럼 id는 하나의 페이지안에서 주민번호와 같은 역할을 합니다. 특정개체 하나만을 선택할 수 있는거죠.

이번엔 class에 대해서 이야기해볼까요?

하나의 나라(페이지)에는 여러 사람(개체)들이 있습니다. 그들은 특정 인종(백인 및 여러 유색인종)이거나, 종교를 갖고있거나, 특정 지역에 모여산다거나 여러가지 기준으로 그룹(class)으로 나눌수있습니다. 그룹(class)은 기준을 어떻게 잡느냐에 따라서 달라지죠.

이처럼 class는 하나의 페이지안에서 특정그룹을 지칭하는 역할을 합니다. 1개이상의 개체를 선택할때 사용합니다.

class는 하나 이상의 개체를 선택할때 사용한다고 방금 말씀드렸습니다. 여러개체에 같은 class명을 지정해주어도 무방하다는 말이죠. 그런데 좀 생각해보면, 그룹화하는 기준에 따라 그룹(class)안의 개체는 바뀔 가능성이 있습니다.

마치 '남자사람' 이라는 개체는 남자, 사람, 생물, 동물 등등의 여러가지 그룹에 포함됩니다. 하나의 그룹으로는 '남자사람'을 온전하게 정의할 수 없어요. '사람' 으로만 정의하면 성별이 빠지고, '생물' 로만 정의하면 동물이면서 사람인부분이 빠집니다. 성별역시 빠지게 되죠. 그러나 다행히도,class는 하나이상의 설정이 가능합니다. 이점은 알아두시면 유용해요!!!

어떤 사람이 '○인종이고, □종교를 갖고있고, 그사람이 X지역에 산다.' 라고 가정하면 그사람을 나누는 기준은 확인가능한것만 3가지(인종, 종교, 지역)나 됩니다. 저는 이 그룹에 이름을 지어줘볼까 합니다.

인종그룹 = groupA_W(백인), groupA_B(흑인), groupA_Y(황인)

종교그룹 = groupB_CA(천주교), groupB_CH(기독교), (무교는 추가 안함)

지역그룹 = groupC_S(서울), groupC_I(인천)

이렇게 이름을 붙여보겠습니다. 위 이름들은 나중에 또 사용하게 될거에요.

그러고보니 개체를 신경 안쓰고있었네요 ㅋㅋ 다만들어놓고 사람이 없....

개체를 만들겠습니다. A씨, B씨, D양, E양

(C씨는 어감이 맘에 안들어서 안만들어요. 왠지 부럽고 질투남)

A씨는 백인이고, 인천에 살고있으며 종교는 천주교입니다. 주민번호는 num1 이구요.

B씨는 흑인이고, 서울에 살고있으며 종교는 무교입니다. 주민번호는 num2 이구요.

D양은 백인이고, 서울에 살고있으며 죵교는 기독교입니다. 주민번호는 num3 이구요.

E양은 황인이고, 인천에 살고있으며 죵교는 무교입니다. 주민번호는 num4 이구요.

이걸 나름 코드로 표현해볼께요.

CSS(Cascading Style Sheets)는 제가 정리를 아직 안해서 옆에 주석을 달아놨습니다. 알아봐주셨으면 해요ㅠ

이렇게 각 개체에 고유한 id를 주고, 기준별로 나눈 그룹에 해당하는 class명을 설정해줍니다.

이제 결과를 보실까요?

그럼 이런식으로 표시가 됩니다.

id와 class는 각 개체를 선택하는데 필요한 아주 중요한 속성들입니다. 이것들을 헷갈릴경우, 다른 사람들과의 협업이 제대로 이뤄지지 않을수도 있으며, 원하는대로 스크립트가 동작하지 않을 수 있습니다. 이점 꼭 알아두셨으면 해요!!

id와 class의 이름은 좀 시간을 들이셔서 의미가 있게 만들어주시면 굉장히 도움이 됩니다. id명과 class명만 보고도 이 개체가 어떠한 기능을 하며, 어떠한 내용을 담을것인지를 짐작 할 수 있으니까요. 저는 설명한다는 핑계로 엄청 대충지었습니다ㅠㅠ 미안해요ㅠㅠ 이름짓는거는 따라하지마세요ㅠㅠ

소스 첨부해놓을께요!!

selector.html

안녕하세요~ 오늘은 자바스크립트에 대해서 이야기해볼까 합니다.

간단한건데 스크립트 디버깅이라던지 뭐 다양한 경우가 있지만 자주쓰는것들에 대해서 이야기해볼겁니다.

바로 alert()과 confirm(), prompt()에 대해서 이야기해보겠습니다.

'alert'을 검색해봤는데 여러가지 뜻중에 '알리다' 라는 뜻이 있네요.

다른뜻은 지금 처음알았습니다.... 저는 그냥 '알리다'만 알고있었어요.. 여하튼..!! 뜻 그대로 뭔가를 알려주는것이라고 생각하시면 됩니다. 보통 회원가입하실때나, 비밀번호 설정할때 자주 보셨을것으로 생각됩니다. 계정을 생성할경우 중복체크할때나(뭐 요즘은 alert말고 ajax로 바로바로 체크해서 옆에 텍스트로 알려주는곳이 더 많은거같아요..) 비밀번호 설정시 처음 비밀번호와 입력한 비밀번호를 확인하는 과정에서, 두개의 비밀번호가 일치하지 않는경우 '비밀번호가 일치하지 않습니다.' 같은 확인창이 '띵!' 하고 나타나죠. 물론 계정 로그인시 비밀번호가 틀렸을때도 자주볼수있습니다.

이렇게 뭔가를 사용자에게 알려줄 경우에 많이 사용합니다. 사용법 역시 간단하죠.

위 이미지처럼 스크립트를 짜고, 아래 이미지처럼 버튼에 이벤트를 걸어서 호출합니다.

그러면 결과는

위 이미지처럼 나옵니다. 아주 간단해요. 참 쉽죠? 밥아저씨가 생각나는것은 기분탓일껍니다....ㅋㅋ

'confirm'역시 검색해봤어요.

대충 예상은 했어요. 그런데 일본어 사전에나온뜻이 더 맘에드는건 저뿐인가요...ㅋㅋ 저는 '확인하다' 라고 굳게믿고있었는데 영어사전은 절 배신했습니다. 아주 못된친구네요. 뭐 이상한이야기는 이쯤하고. '컨펌'이라는 단어 익숙하실겁니다. 프리랜서분이시던, 직장은 다니는 분이시던간에 작업하면서 한번씩 거치는과정이죠. '요구하신게 이거맞나요?' 혹은 '이렇게 진행하려하는데 어떤가요?'등 보통 1안부터해서 3안쯤까지 가다가 4안쯤가면 1안이 제일좋다고들 하시죠.. 역시 처음이 제일좋아요...ㅠㅜ

이제 언제쓰는건지 아실거라 생각됩니다. 사용자들에게 이 작업을 할것인지 말것인지를 물어보고 사용자의 결정에 따라 처리를 할 수 있는 함수입니다. alert()는 '확인'버튼 하나였지만, confirm()은 '확인'과 '취소'버튼이 있습니다. 어떠한 버튼을 누르냐에 따라서 분기를 할 수 있어요. 결과값은 boolean형으로 리턴됩니다. 변수에 따로 받아서 처리하셔도 되고, if문의 조건을 설정하는쪽에 직접 작성하셔도 됩니다. 뭔가를 결정할때 주로 볼수있어요. 결제를 한다던지(결제하는거 참 좋아하는데 할때마다 손이 부들부들....), 글을 작성하고 저장할때도 주로볼수있어요. 그러고보니 티스토리 블로깅할때는 못본거같은데 뭐 그럴수도 있죠. 이제 사용법을 알아볼까요.

저는 이런방식으로 사용합니다. 기호에 맞게 작성하세요 ㅋㅋ

그리고 아래 이미지처럼 버튼에 이벤트를 걸어서 호출합니다.

이제 함수를 호출해보겠습니다. 아래 이미지는 confirm()을 호출한 모습입니다.

실행하면 이렇게 나와요!! 그리고 각 버튼별로 분기를 하면

이런식으로 분기가 가능합니다. 이거역시 어렵지 않아요. 쉽게 사용하시면 됩니다.

'prompt'는 검색결과가 맘에들지않아요 ㅋㅋ 올리지 않을래요ㅠㅠ

'prompt'는 사용자에게 입력을 요구할때 사용합니다. 그런데 개인적으로 저는 잘 사용하지 않아요.. 지금 정리하면서 오랜만에 만나서 반갑네요. 아마 많이 못보셨을거라고 생각됩니다. 제가 여기저기 막 돌아다니고 그러는데 저도 많이 못봤어요.. 그래서 많이 할말이 없어요ㅠㅠ 보통 뭔가 입력받을때 form을 만들어서 그안에 입력하고 확인버튼 누르면 체크하시지 않나요ㅠ? 저만그런가요.. 뭐 각설하고 바로 사용법을 알아보겠습니다.

위 이미지처럼 스크립트를 작성한 후에, 아래 이미지처럼 버튼에 이벤트를 걸었습니다.

저는 이런방식으로 사용합니다. 정말 어색해요 마치 초등학교때 그냥저냥 알던친구를 버스에서 우연히 만나서 서로 알아보고 옆자리에 앉아서 어색하게 대충 안부물으면서 가는데 심지어 목적지까지 같아서 가는길 내내 어색할때정도의 어색함이랄까.. 와닿으실지 모르겠네요.. 대충 상상해보시면 상상만으로도 불편하지않을까 싶습니다. 이제 호출해볼까요.

이렇게 사용자에게 입력을 요구합니다. 그런데 이렇게 뜨는거 저는 별로 않좋아해요ㅠㅠ '띵! 띵!' 그러면 좀 거슬려요ㅠ

그래도 예시니까 값을 입력하고~ 확인을 딱!! 누르면

이렇게 활용이 가능합니다 ㅋㅋㅋ 저는 변수에 담아서 alert로 값을 띄웠어요 ㅋㅋ

이렇게 입력받은 값은 따로 변수에 저장해서 가공할 수 있습니다. 이친구는 정말 할말이 많이 없네요.

오늘 작업한 내용을 파일로 올려놓을께요!! 

alert.html

블로그 내용중에 제가 표로 만든내용이나 기타 설명같은부분들이 맘에 안드시거나 그렇게 생각하지 않는분이 계실수도 있는데, 지극히 개인적으로 느끼고, 작업한것을 토대로 작성한것입니다. 틀린부분은 지적해주시면 확인하는대로 수정하겠습니다~ 개인의견차가 있는 부분은 그냥 '아 이친구는 이렇게 생각하는구나' 하고 넘어가주셔도 괜찮을거같아요~

안녕하세요~ 공부를 시작하는데 정리하면서 같이 공유도 할겸 블로깅을 시작하게되었습니다.

혹시 생각하시는것과 다른것이 있거나, 혹은 틀린부분이 있다면 알고게시지만말고 알려주세요!!

오늘은 제가 항상 헷갈려하는 메소드 오버로딩과 오버라이딩에 대해서 정리를 해볼까 합니다.

정리하면서 개념좀 확실히 잡혀서 안헷갈렸으면 하는 바램이 있어요ㅠ

시작합니다!

메소드 오버로딩은 하나의 클래스 안에서 같은 이름의 메소드를 여럿 생성하는것이라고 보시면 됩니다.

그런데 메소드명이 같으면, 메소드를 호출할때 어떻게 구분할까요?? 같은 이름의 메소드들 사이에 뭔가 차이점이 있으니 그걸 통해서 각각 구분을 하는거겠죠? 그 차이점은 크게 3가지로 볼수있습니다.

먼저 기존의 메소드를 확인하겠습니다.

1. 인자의 자료형

인자의 자료형 역시 메소드를 구분하는 기준점이 됩니다.

2. 인자의 갯수

같은 메소드명이 여러개있을때 인자의 갯수에 따라 구별이 가능합니다.

3. 인자의 순서

메소드가 넘겨받는 인자의 순서도 역시 메소드를 구분하는데 영향을 미칩니다.

4. 메소드를 호출

메소드를 호출할때의 모습입니다.

이런식으로 호출할때 어떤 메소드를 사용할지 알 수 있습니다.

툴에따라 다를수도 있어요..!!

이렇게 하나의 클래스 내에서 같은목적을 갖고있는 메소드들에게 같은 이름을 사용하려할때 메소드명을 목적에 맞게 지정해주면서 각 메소드들마다의 동작을 할 수 있게끔 하는것을 메소드 오버로딩 이라고 합니다.

메소드 오버라이딩은 하위 클래스에서 상위 클래스를 상속받아서 사용할 경우, 상위클래스에서 정의된 메소드를 하위클래스에서 필요에 맞게 재정의하여 사용하는것을 말합니다.

예를들어서 작업을 하는데 있어서 직상 상사 또는 선배와 같이 일을하는데, 이사람이

'이런 기능을 하는게 필요할거야. 내가 만들어뒀으니 그냥 써 찡긋★'

하면서 클래스를 하나 던져줬습니다. 그래서 '감사합니다!!' 하고 받아서 쓰고있는데 사용하다보니 제한이 있는걸 알게되었습니다. 그래서 클래스를 열어봤더니 매우 마음에 들지 않는거죠.

예시를 들면서 짰지만 정말 마음에 들지 않아요. 뭐 갯수가 한정되어있다면 할말없긴하지만... 여하튼!

이걸 전해받은 거는 정말 너무 싫었어요. 그런데 이걸 수정하자니 우리 착한 선배 or 상사님께 상처가 될까 말하기도 좀 그런겁니다. 그래서 저는 이렇게 다시 짜기로 했어요.

이렇게 하였을 경우 위의 방식보다는 활용도가 높죠. 경우에 따라 다르긴 하겠지만 적어도 글자수에 제한은 없으니까요. 제가 오버라이딩한 메소드와 상위클래스의 메소드의 결과를 비교해볼까요.

위아래 결과가 다른것을 확인할 수 있습니다.

위의 결과값은 0~9까지 10개의 문자를 입력해도 최대 8까지밖에 나오지 않아요.

그러나 아래는 입력한 만큼 별이 찍힙니다. 글자수에 제한을 두고싶지 않아서 재정의하여 사용한것입니다.

지금 이 상황은 제가 어거지로 만든겁니다. 그냥 설명하는거보다 이미지로 남는게 좀 더 쉽게 기억되지 않을까 하는 마음에... 그리고 위에서 이렇게 짜주는경우는 정말 흔치않아요. 그건 너무하잖아요..ㅠㅠ (혹시 있을지도 모르니 절대라고는 말 못하겠습니다.)

지금처럼 상위클래스의 내용을 하위클래스에서 필요에 맞게 재정의하여 사용하는것을 오버라이딩이라고 합니다.

오늘 작업한 내용을 파일로 올려놓을께요!!

method.zip

다음에는 또 다른거 정리해야지.