[분류 전체보기]검색결과, 375건
- 이런..구글, 프랜즈 어디 간거야? 2012.03.09
- PMP, PDU 등록 완료!! 2012.03.01
- 지식 탐구욕 2012.02.26
- 요즘... 2012.02.22
- 차엘소넨 2012.02.10
- 자동화의 폐해? 2012.01.05
- 새출발! 2011.12.23 1
- 아.. PMP 갱신해야 겠구나... 2011.12.23
- 아버지와 아들 2011.08.12 1
- 자주 쓰는 jQuery 기능 - 이벤트 편 2011.08.04
- 제발, 헤어질 땐 쿨(Cool) 하게 하자 2011.08.04
- 자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편 2011.08.03 2
- Razor 구문 2011.07.19
- 브라우저 점유율 2011.05.23
- 그래, 얕은 정보가 지식으로 둔갑하는 것을 조심하자 2011.01.12 1
728x90
젠장, 구글 프랜즈 쇼설 댓글과 회원 기능 달아놨더니 어느새 사라져 버렸네.
언젠가 공지 글을 본 것 같기도 한데, 한방에 날라가 버렸구나.
구글 프랜즈 사이트(http://www.google.com/friendconnect/?hl=ko)의 내부 링크도 400 오류를 뱉어 내는구먼.
아.. 그간 등록된 글과 회원 가입 사항은 어케 되는 거야!
서비스 이렇게 빨리 접을꺼면 왜 하냐구. 구글아...
그간의 글이 많고 적음이 문제가 아니라, 그 공간에 글을 작성하고 회원 가입을 했던 블로그 방문자들에 대한 예의에 어긋나 버리잖아.
첨부터 페북 댓글,회원 기능을 쓰고 싶었더랬어...
언젠가 공지 글을 본 것 같기도 한데, 한방에 날라가 버렸구나.
구글 프랜즈 사이트(http://www.google.com/friendconnect/?hl=ko)의 내부 링크도 400 오류를 뱉어 내는구먼.
아.. 그간 등록된 글과 회원 가입 사항은 어케 되는 거야!
서비스 이렇게 빨리 접을꺼면 왜 하냐구. 구글아...
그간의 글이 많고 적음이 문제가 아니라, 그 공간에 글을 작성하고 회원 가입을 했던 블로그 방문자들에 대한 예의에 어긋나 버리잖아.
첨부터 페북 댓글,회원 기능을 쓰고 싶었더랬어...
728x90
아.. 드디어 3년 기한의 숙제(?)였던 PDU 취득을 벼락치기 수준으로 처리하고 등록을 마무리 했다.
마치 밀린 숙제 처리하듯 급하게 들었던 교육이지만, 그 속의 내용은 나름 얻을 것이 있었다.
차분히 시간을 내어 복습하면서, 프로젝트 관리에 대한 보다 효율적인 기법과 스킬들을 연마하고 정리해 두어야 겠다.
PMP, 이 자격증은 아직 내가 투자한 만큼 피드백이 없긴 하지만 이는 자격증 자체의 문제라기 보다는 현재 나의 회사, 상황에서 크게 요구되는 사항이 아닌 점도 있으며 이와는 별도로 프로젝트 관리에 대한 접근 방식, 고민 등 마인드 향상에 분명 도움이 분명 되는 자격증이라 본다.
이후 3년은 숙제 하듯 말고, PMI가 원래 의도했던 제대로된 전문가 활동으로 채워볼까 한다.
잘 될지 모르겠지만... ㅎ
마치 밀린 숙제 처리하듯 급하게 들었던 교육이지만, 그 속의 내용은 나름 얻을 것이 있었다.
차분히 시간을 내어 복습하면서, 프로젝트 관리에 대한 보다 효율적인 기법과 스킬들을 연마하고 정리해 두어야 겠다.
PMP, 이 자격증은 아직 내가 투자한 만큼 피드백이 없긴 하지만 이는 자격증 자체의 문제라기 보다는 현재 나의 회사, 상황에서 크게 요구되는 사항이 아닌 점도 있으며 이와는 별도로 프로젝트 관리에 대한 접근 방식, 고민 등 마인드 향상에 분명 도움이 분명 되는 자격증이라 본다.
이후 3년은 숙제 하듯 말고, PMI가 원래 의도했던 제대로된 전문가 활동으로 채워볼까 한다.
잘 될지 모르겠지만... ㅎ
728x90
지식에 대한 탐구욕이 많이 사라졌다는 걸, 이미 눈치챘지만 애써 모른체 하고 있었다.
그 이유가 무엇이든간에 모두 핑계란걸 잘 알고 있다.
이런저런 핑계는 많은 경우 스스로를 위로하고 안심시키기 좋은 수단이지만 그뿐이다.
몇 달간 많은 것들과 단절된 듯 하지만 스스로 벽을 깰 필요가 있다.
사실 벽이란 것도 내 안에서 능동적으로 만든 것에 불과하다.
외부 요인의 핑계를 그만두고 내 안의 중심을 다시 잡겠다.
하고 싶은 것, 알고 싶은 것이 많다.
모바일의 기술적 탐구를 계속해 나가고 싶다.
원래 사랑했던 닷넷 기술도 더욱 그 깊이와 넓이를 파헤치고 싶다.
클라우드도 개념을 넘어 실용의 차원으로 접근하고 싶다.
SNS 서비스 사용? 시간이 갈수록 무덤덤해지고 있지만, 서비스의 특징을 지속적으로 탐구하고 싶기에 적극적인 사용을 하고 싶다. 동네에 족구 동호회, 탁구 동호회에 가입하고 싶다. 얼마전 MRI를 보던 의사께서는 수영을 추천하셨다. 프로젝트의 효율적인 관리 방법을 탐구하고 싶다. 한참 끈을 놓았던 기술사를 다시 염두하려 한다. 책도 몇 권 쓰야 겠다. 대학원? 어떤 의미가 있을지 모르겠지만 재고할 필요는 있어 보인다.
절제와 잘 짜여진 계획 구체적인 실행 방안, 무모한 긍정과 때론 무감각.
오래 누워있다 일어났을 때보다 치열하게 성취한 뒤 일어났을 때가 훨씬 편안하다는 것 잘 알고 있다.
근데, 이 블로그... 모바일에 초점을 맞추기에는 내 상황이 너무 추상적이 된게 아닌가... ㅎ
그 이유가 무엇이든간에 모두 핑계란걸 잘 알고 있다.
이런저런 핑계는 많은 경우 스스로를 위로하고 안심시키기 좋은 수단이지만 그뿐이다.
몇 달간 많은 것들과 단절된 듯 하지만 스스로 벽을 깰 필요가 있다.
사실 벽이란 것도 내 안에서 능동적으로 만든 것에 불과하다.
외부 요인의 핑계를 그만두고 내 안의 중심을 다시 잡겠다.
하고 싶은 것, 알고 싶은 것이 많다.
모바일의 기술적 탐구를 계속해 나가고 싶다.
원래 사랑했던 닷넷 기술도 더욱 그 깊이와 넓이를 파헤치고 싶다.
클라우드도 개념을 넘어 실용의 차원으로 접근하고 싶다.
SNS 서비스 사용? 시간이 갈수록 무덤덤해지고 있지만, 서비스의 특징을 지속적으로 탐구하고 싶기에 적극적인 사용을 하고 싶다. 동네에 족구 동호회, 탁구 동호회에 가입하고 싶다. 얼마전 MRI를 보던 의사께서는 수영을 추천하셨다. 프로젝트의 효율적인 관리 방법을 탐구하고 싶다. 한참 끈을 놓았던 기술사를 다시 염두하려 한다. 책도 몇 권 쓰야 겠다. 대학원? 어떤 의미가 있을지 모르겠지만 재고할 필요는 있어 보인다.
절제와 잘 짜여진 계획 구체적인 실행 방안, 무모한 긍정과 때론 무감각.
오래 누워있다 일어났을 때보다 치열하게 성취한 뒤 일어났을 때가 훨씬 편안하다는 것 잘 알고 있다.
근데, 이 블로그... 모바일에 초점을 맞추기에는 내 상황이 너무 추상적이 된게 아닌가... ㅎ
'일상' 카테고리의 다른 글
| 이런..구글, 프랜즈 어디 간거야? (0) | 2012.03.09 |
|---|---|
| PMP, PDU 등록 완료!! (0) | 2012.03.01 |
| 요즘... (0) | 2012.02.22 |
| 차엘소넨 (0) | 2012.02.10 |
| 자동화의 폐해? (0) | 2012.01.05 |
728x90
출판사 대표님과 점심을 먹었다. 작년 9월인가 뵙고 오랜만에 인사드렸다.
요즘 이래저래 조금 혼란스럽다.
재작년 그리고 작년에 지대하게 관심을 두었던 분야에 대한 학습과 관심이 요 몇달간 전무하다.
심지어 개발자로써의 미래에 대한 방향성에도 혼란스럽다.
과연, 지금 내가 잘 하고 있는지 의아스럽다.
스스로 정해놓은 그림에 따른다기 보다는 주어진 그림에 날 끼워 맞추고 있는 느낌이 다분하다.
눈 높이를 유연하게 맞추는 것이 필요함을 알게 되었지만 기존 내 원칙에 어긋남을 간혹 견디기 힘들다.
의도적인 여유가 필요함도 알지만 본디 그렇게 생겨먹지 못해서 가면을 쓴 기분이기도 하다.
외부요인에 무던해서도 집착해서도 안되는 애매모호한 상황에서 기존의 불타오르든 열망마저 흔적이 희미해 져가는 것 같은 느낌은 스스로에게 굉장한 스트레스로 작용한다.
뭔가 체계적인 조절이 필요하다. 근간의 마음이 잡히지 않는다면 억지로라도 잘 짜여진 계획에 날 맞추어 가는게 필요하다. 마치 마음이 건강하면 몸이 건강하고 반대로 몸이 건강하면 마음이 건강해 질 가능성이 큰 것 처럼...
요즘 이래저래 조금 혼란스럽다.
재작년 그리고 작년에 지대하게 관심을 두었던 분야에 대한 학습과 관심이 요 몇달간 전무하다.
심지어 개발자로써의 미래에 대한 방향성에도 혼란스럽다.
과연, 지금 내가 잘 하고 있는지 의아스럽다.
스스로 정해놓은 그림에 따른다기 보다는 주어진 그림에 날 끼워 맞추고 있는 느낌이 다분하다.
눈 높이를 유연하게 맞추는 것이 필요함을 알게 되었지만 기존 내 원칙에 어긋남을 간혹 견디기 힘들다.
의도적인 여유가 필요함도 알지만 본디 그렇게 생겨먹지 못해서 가면을 쓴 기분이기도 하다.
외부요인에 무던해서도 집착해서도 안되는 애매모호한 상황에서 기존의 불타오르든 열망마저 흔적이 희미해 져가는 것 같은 느낌은 스스로에게 굉장한 스트레스로 작용한다.
뭔가 체계적인 조절이 필요하다. 근간의 마음이 잡히지 않는다면 억지로라도 잘 짜여진 계획에 날 맞추어 가는게 필요하다. 마치 마음이 건강하면 몸이 건강하고 반대로 몸이 건강하면 마음이 건강해 질 가능성이 큰 것 처럼...
728x90
나 이 친구가 좋아졌다. 뜬금 없지만...
728x90
기사원문: 초등학교 30%에 ‘일진 네트워크’ 침투
초등학교에도 폭력을 기반으로 한 일진 네트워크가 침투해 문제라는 기사인데...
기사 내용 중, '노페(노스페이스) 점퍼를 강제로 바꿔 입기'라는 악행을 언급하고 있다.
그런데 기사 삽화 밑에 너무나도 정확하게 노스페이스 점퍼 광고가 떡하니 자리하고 있다.
삽화에 사용된 점퍼의 색상과 스타일이 매우 일치한다. ㅎㅎ
기사 내용을 기반으로 한 자동화된 광고가 아닌지 싶은데.....
그렇다면, 이건 뭐 너무나도 정확하지 않은가..
정확도는 백점 만점에 백점, 광고 효과는... 글쎄... ㅎ 재밌군!
728x90
이러저러한 이유로 전 직장에서 퇴사하고 새로 출발한지 2주가 되었다.
나에게는 회사를 선택하기 위한 3대 핵심요소가 있다.
Role(Work), Money, Location
바로 일,돈,위치이다.
이 가운데 가장 중요한 것은 '어떤 일을 하는가?' 이다.
구체적으로는 어떤 프로젝트에 어떤 역할을 하게 되는가인데, 회사에서 중요하게 여기는 일,
내가 잘 할 수 있는 일, 적절한 부담감과 도전을 할 수 있는 역할을 선호한다.
다음으로 돈이다.
대부분의 사람들이 중요하게 여기며 나 또한 그러하다. 단순히 돈을 많이 받으면 좋겠다는 애매한 희망보다는 지금까지 쌓아왔던 경험과 가치에 대한 대우를 받는 느낌의 수준을 선호한다.
마지막으로 위치이다.
과거에는 위치를 크게 고려하지 않았었다. 대중교통으로 2시간이 넘는 거리도 출/퇴근 해 본적이 있다.
하지만 점점 나이가 들수록 몸도 힘들고 시간도 아깝고 해서 위치도 주요한 선택 기준이 되었다.
(8시간 근무에 4시간 출/퇴근이면 이상하자너??)
모든 것을 만족시킬 수 있으면 가장 좋겠지만, 현실에서는 항상 적절한 타협이 요구된다.
그리고 이왕 시작하기로 했으면 불만 없이 열심히 하는 것이 개인적으로나 조직적으로나 이득이다.
이번 새로운 회사의 위치는 꽤 맘에 든다. 사실 구로에 있던 회사가 이번에 판교로 옮기게 되었다.
분당 서현동에서 몇년 일한적이 있는데 판교는 서현동 못지않게 출퇴근 거리가 길지 않고 쾌적하다.
(신분당선 개통도 쾌적함에 일조를 하고 있다)
그리고 많은 IT기업들이 판교로 이전을 하거나 할 계획이어서 주변 여건도 점점 좋아지리라 본다.
2주전 월요일, 첫 출근 아침에 걸어가다 찍은 회사 건물 사진이다. 아직은 공사중인 곳도 많고 입주도 덜 된 상태라 주위가 좀 횡하다. 대략 2년 정도 지나면 꽤 번잡한 도시가 될 듯 하다.
나에게는 회사를 선택하기 위한 3대 핵심요소가 있다.
Role(Work), Money, Location
바로 일,돈,위치이다.
이 가운데 가장 중요한 것은 '어떤 일을 하는가?' 이다.
구체적으로는 어떤 프로젝트에 어떤 역할을 하게 되는가인데, 회사에서 중요하게 여기는 일,
내가 잘 할 수 있는 일, 적절한 부담감과 도전을 할 수 있는 역할을 선호한다.
다음으로 돈이다.
대부분의 사람들이 중요하게 여기며 나 또한 그러하다. 단순히 돈을 많이 받으면 좋겠다는 애매한 희망보다는 지금까지 쌓아왔던 경험과 가치에 대한 대우를 받는 느낌의 수준을 선호한다.
마지막으로 위치이다.
과거에는 위치를 크게 고려하지 않았었다. 대중교통으로 2시간이 넘는 거리도 출/퇴근 해 본적이 있다.
하지만 점점 나이가 들수록 몸도 힘들고 시간도 아깝고 해서 위치도 주요한 선택 기준이 되었다.
(8시간 근무에 4시간 출/퇴근이면 이상하자너??)
모든 것을 만족시킬 수 있으면 가장 좋겠지만, 현실에서는 항상 적절한 타협이 요구된다.
그리고 이왕 시작하기로 했으면 불만 없이 열심히 하는 것이 개인적으로나 조직적으로나 이득이다.
이번 새로운 회사의 위치는 꽤 맘에 든다. 사실 구로에 있던 회사가 이번에 판교로 옮기게 되었다.
분당 서현동에서 몇년 일한적이 있는데 판교는 서현동 못지않게 출퇴근 거리가 길지 않고 쾌적하다.
(신분당선 개통도 쾌적함에 일조를 하고 있다)
그리고 많은 IT기업들이 판교로 이전을 하거나 할 계획이어서 주변 여건도 점점 좋아지리라 본다.
2주전 월요일, 첫 출근 아침에 걸어가다 찍은 회사 건물 사진이다. 아직은 공사중인 곳도 많고 입주도 덜 된 상태라 주위가 좀 횡하다. 대략 2년 정도 지나면 꽤 번잡한 도시가 될 듯 하다.
'일상' 카테고리의 다른 글
| 차엘소넨 (0) | 2012.02.10 |
|---|---|
| 자동화의 폐해? (0) | 2012.01.05 |
| 아.. PMP 갱신해야 겠구나... (0) | 2011.12.23 |
| 아버지와 아들 (1) | 2011.08.12 |
| 제발, 헤어질 땐 쿨(Cool) 하게 하자 (0) | 2011.08.04 |
728x90
미루고 미루어 기억 저편에 밀려났던 PMP 자격 갱신이 불현듯 다시 생각났다.
다음 글로 인해...
http://mkexdev.net/Community/Content.aspx?parentCategoryID=4&categoryID=18&ID=178
이제 갱신 기한이 6개월도 채 남지 않았다.
뿌린대로 거두는게 바램인데, 이 자격증은 그야말로 뿌리고만 있는건 아닌지 한다.
와중에 그나마 힘이되는 긍정적 댓글에 살짝 고무되었다가 자격 갱신이 떠오르면서 맥 빠진다.
그나저나 저 <br>들은 다 무엇이란 말인가? ㅡ.ㅡ;
사이트 관리 허술이 여실히 드러나고 있구먼.....
이 블로그를 시작하면서 mkexdev.net 은 많이 소홀해진게 사실이다.
그러고보면, 항상 분리/통합은 고민거리가 아닐 수 없다!
-----
혹시 PMP 준비하시는 분이라면, 아래 글들 참고해 보세요...
http://mkexdev.net/Article/ArticleList.aspx?parentCategoryID=2&categoryID=27
자격증 따고 정리한 내용인데, 나름대로 핵심만 축약하려 노력한 글들입니다.
(단 댓글의 내용처럼, 시험 버전이 변경되어 제 글이 최신사항을 반영하지는 않습니다)
다음 글로 인해...
http://mkexdev.net/Community/Content.aspx?parentCategoryID=4&categoryID=18&ID=178
이제 갱신 기한이 6개월도 채 남지 않았다.
뿌린대로 거두는게 바램인데, 이 자격증은 그야말로 뿌리고만 있는건 아닌지 한다.
와중에 그나마 힘이되는 긍정적 댓글에 살짝 고무되었다가 자격 갱신이 떠오르면서 맥 빠진다.
그나저나 저 <br>들은 다 무엇이란 말인가? ㅡ.ㅡ;
사이트 관리 허술이 여실히 드러나고 있구먼.....
이 블로그를 시작하면서 mkexdev.net 은 많이 소홀해진게 사실이다.
그러고보면, 항상 분리/통합은 고민거리가 아닐 수 없다!
-----
혹시 PMP 준비하시는 분이라면, 아래 글들 참고해 보세요...
http://mkexdev.net/Article/ArticleList.aspx?parentCategoryID=2&categoryID=27
자격증 따고 정리한 내용인데, 나름대로 핵심만 축약하려 노력한 글들입니다.
(단 댓글의 내용처럼, 시험 버전이 변경되어 제 글이 최신사항을 반영하지는 않습니다)
728x90
4년 전에 보고 감명받은 영상인데, 오늘 우연히 다시 보니 여전히 감동이다!
위대한 아버지란 바로 이런게 아닌가... 눈물 날뻔 했다.
위대한 아버지란 바로 이런게 아닌가... 눈물 날뻔 했다.
'일상' 카테고리의 다른 글
| 새출발! (1) | 2011.12.23 |
|---|---|
| 아.. PMP 갱신해야 겠구나... (0) | 2011.12.23 |
| 제발, 헤어질 땐 쿨(Cool) 하게 하자 (0) | 2011.08.04 |
| 브라우저 점유율 (0) | 2011.05.23 |
| 그래, 얕은 정보가 지식으로 둔갑하는 것을 조심하자 (1) | 2011.01.12 |
728x90
다른 프로그래밍 언어와 마찬가지로 스크립트 환경에서도 이벤트 처리가 많은 부분을 차지하게 된다.
기존 자바스크립트의 addEventListener와 같은 함수를 랩핑한 jQuery 만의 이벤트 처리 방식을 정리해 보자.
기본 이벤트 처리
click, mousedown과 같은 일반적인 이벤트 이름을 그대로 사용하여 이벤트 처리기를 연결할 수 있다.
.이벤트명(이벤트처리기 함수)
선택자로 선택된 element에 이벤트명(ex:click, mousedown 등)을 지정해 특정 이벤트 발생시 이벤트처리기 함수가 실행되도록 한다
다음은 이 방식을 이용해 click, hover 두 이벤트를 처리하는 코드다.
bind() 함수를 이용한 이벤트 처리
jQuery가 이벤트를 일관적으로 처리하기 위해 만든 최최의 함수로 bind()함수를 이용해 이벤트를 처리할 수 있다. 앞서 소개한 '기본 이벤트 처리'는 이것의 단축 표현이다.
.bind('이벤트명', 이벤트처리기 함수)
bind()함수는 문자열로 지정한 이벤트 명과 이벤트 처리기 함수를 매개변수로 받아 이벤트를 처리한다.
이전 코드의 click 이벤트를 bind() 함수를 이용해 다음과 같이 구현할 수 있다
여러 이벤트를 동시에 등록
bind()함수를 이용하면 동일한 요소에 여러개의 이벤트를 한번에 연결할 수 있다. 아래와 같이 처리할 이벤트를 이어서 지정하면 된다. event.type으로 어떤 이벤트가 발생했는지 알 수 있을 것이다.
이렇게 하나 이상의 이벤트를 처리할 때 각각의 이벤트 처리 함수를 구분하고 싶을 경우가 있다. 이 경우 event.target 정보를 바탕으로 처리기 함수를 구분할 수 있지만 아래 코드와 같이 객체 형태로 정의할 수도 있다.(이 방식은 jQuery 1.4 이상부터 지원한다)
이벤트 매개변수 사용
이벤트 처리기 함수에 매개변수를 전달하고 싶은 경우 bind() 함수의 두 번째 매개변수에 지정할 수 있다. 다음 코드는 bind()함수의 두 번째 매개변수에 자바스크립트 객체형태로 매개변수를 전달하는 예이다.
여기서 한가지 짚고 넘어가야 할 것은, 위 예제는 이벤트를 등록하는 시점에 매개변수를 전달한다는 것이다.
즉 이벤트 바인딩 시점에 이미 데이터가 정의되어이 있어야 하고 전달가능해야 한다는 점이다. 그러나 대부분의 실제 환경에서는 이벤트 바인딩 시점이 아닌, 바인딩 이후 프로그램 동작 가운데 매개변수 정보가 생성된다는 점이다. 이처럼 동적인 매개변수를 처리하기 위해서는 이벤트를 스스로 발생시키는 trigger() 함수를 이용해 동적인 데이터를 매개변수로 전달할 수 있게 된다. 이때 bind() 함수에 매개변수를 받는 부분이 추가되어야 한다.
이벤트 제거
등록된 이벤트를 제거하려면 다음과 같이 unbind() 함수를 이용할 수 있다.
만일 <div> 요소의 특정 이벤트만 제거하고 싶을 경우 그 이벤트명을 지정해 주면 된다.
live() 함수를 이용한 이벤트 처리
bind() 함수 이후에 새로 추가된 live() 함수(1.3 버전 이후 추가)를 이용하면 응용프로그램 실행 도중 동적으로 추가된 요소에도 자동으로 이벤트를 바인딩 할 수 있다. 사용방법은 bind() 함수와 유사하다
.live('이벤트명', 이벤트처리기 함수)
아래 코드를 보면, HTML 영역에서 총 두개의 <li> element를 미리 정의해 두고, 이들에게 클릭 이벤트가 실행되도록 live() 함수로 이벤트를 등록했다. 이후 '아이템추가' 버튼을 클릭해서 새로운 아이템(<li>)을 추가할 수 있게 한다. 이때 동적으로 새로 추가된 <li> element 도 live() 함수로 등록한 클릭 이벤트가 반영된다.
만일 live()가 아니라 bind() 함수로 이벤트를 등록했다면 새로 추가된 <li> element는 클릭 이벤트가 발생하지 않을 것이다(새로 추가된 <li> 에 수동으로 bind() 해 줘야 한다)
이처럼 live() 함수를 이용한 이벤트 처리는 비동기 통신으로 페이지 갱신 없이 element가 추가되는 시나리오에 유용하게 사용할 수 있다.
live()로 등록한 이벤트는 die() 함수로 제거할 수 있다
delegate() 함수를 이용한 이벤트 처리
jQuery 1.4.2 버전 부터는 새로운 이벤트 처리 함수인 delegate()가 추가되었다. live()의 동적 이벤트 바인딩도 지원하며 기존 live() 에서 제한 되었던 몇 가지 단점을 보완하고 성능이 더 개선된 함수라고 한다. 자세한 사항은 jQuery API 문서를 참고하기 바라며 다음과 같이 사용할 수 있다. 아래 코드는 앞의 live()로 구현된 것을 delegate()로 바꾼 것이다.
.delegate('선택자', '이벤트명', 이벤트처리기 함수)
delegate()로 등록한 이벤트는 undelegate() 함수로 제거할 수 있다.
참고자료>
http://api.jquery.com/bind/
http://api.jquery.com/live/
http://api.jquery.com/delegate/
http://www.learningjquery.com/2010/03/using-delegate-and-undelegate-in-jquery-1-4-2
기존 자바스크립트의 addEventListener와 같은 함수를 랩핑한 jQuery 만의 이벤트 처리 방식을 정리해 보자.
기본 이벤트 처리
click, mousedown과 같은 일반적인 이벤트 이름을 그대로 사용하여 이벤트 처리기를 연결할 수 있다.
.이벤트명(이벤트처리기 함수)
선택자로 선택된 element에 이벤트명(ex:click, mousedown 등)을 지정해 특정 이벤트 발생시 이벤트처리기 함수가 실행되도록 한다
다음은 이 방식을 이용해 click, hover 두 이벤트를 처리하는 코드다.
$(function(){
$('div').click(function(event){
alert(event.target.innerText);
});
$('div').hover(function(event){
alert(event.type);
});
});
$('div').click(function(event){
alert(event.target.innerText);
});
$('div').hover(function(event){
alert(event.type);
});
});
bind() 함수를 이용한 이벤트 처리
jQuery가 이벤트를 일관적으로 처리하기 위해 만든 최최의 함수로 bind()함수를 이용해 이벤트를 처리할 수 있다. 앞서 소개한 '기본 이벤트 처리'는 이것의 단축 표현이다.
.bind('이벤트명', 이벤트처리기 함수)
bind()함수는 문자열로 지정한 이벤트 명과 이벤트 처리기 함수를 매개변수로 받아 이벤트를 처리한다.
이전 코드의 click 이벤트를 bind() 함수를 이용해 다음과 같이 구현할 수 있다
$(function(){
$('div').bind('click' ,function(event){
alert(event.target.innerText);
});
});
$('div').bind('click' ,function(event){
alert(event.target.innerText);
});
});
여러 이벤트를 동시에 등록
bind()함수를 이용하면 동일한 요소에 여러개의 이벤트를 한번에 연결할 수 있다. 아래와 같이 처리할 이벤트를 이어서 지정하면 된다. event.type으로 어떤 이벤트가 발생했는지 알 수 있을 것이다.
$(function(){
$('div').bind('click mouseenter' ,function(event){
alert(event.type);
});
});
$('div').bind('click mouseenter' ,function(event){
alert(event.type);
});
});
이렇게 하나 이상의 이벤트를 처리할 때 각각의 이벤트 처리 함수를 구분하고 싶을 경우가 있다. 이 경우 event.target 정보를 바탕으로 처리기 함수를 구분할 수 있지만 아래 코드와 같이 객체 형태로 정의할 수도 있다.(이 방식은 jQuery 1.4 이상부터 지원한다)
$(function(){
$('div').bind(
{
click: function(evnet){ alert(event.type); }
},
{
mouseenter: function(evnet){ alert(event.type); }
}
});
});
$('div').bind(
{
click: function(evnet){ alert(event.type); }
},
{
mouseenter: function(evnet){ alert(event.type); }
}
});
});
이벤트 매개변수 사용
이벤트 처리기 함수에 매개변수를 전달하고 싶은 경우 bind() 함수의 두 번째 매개변수에 지정할 수 있다. 다음 코드는 bind()함수의 두 번째 매개변수에 자바스크립트 객체형태로 매개변수를 전달하는 예이다.
$(function(){
$('div').bind('click', {key1:'value1', key2:'value2'} ,function(event){
alert(event.data.key1 + '/' + event.data.key2);
});
});
$('div').bind('click', {key1:'value1', key2:'value2'} ,function(event){
alert(event.data.key1 + '/' + event.data.key2);
});
});
여기서 한가지 짚고 넘어가야 할 것은, 위 예제는 이벤트를 등록하는 시점에 매개변수를 전달한다는 것이다.
즉 이벤트 바인딩 시점에 이미 데이터가 정의되어이 있어야 하고 전달가능해야 한다는 점이다. 그러나 대부분의 실제 환경에서는 이벤트 바인딩 시점이 아닌, 바인딩 이후 프로그램 동작 가운데 매개변수 정보가 생성된다는 점이다. 이처럼 동적인 매개변수를 처리하기 위해서는 이벤트를 스스로 발생시키는 trigger() 함수를 이용해 동적인 데이터를 매개변수로 전달할 수 있게 된다. 이때 bind() 함수에 매개변수를 받는 부분이 추가되어야 한다.
$(function(){
$('div').bind('click' ,function(event, data1, data2){
alert(data1 + '/' + data2);
});
//이벤트 바인딩 이후 trigger()함수로 이벤트 자동 발생시키기
$('div').trigger('click',['value1','value2']);
});
$('div').bind('click' ,function(event, data1, data2){
alert(data1 + '/' + data2);
});
//이벤트 바인딩 이후 trigger()함수로 이벤트 자동 발생시키기
$('div').trigger('click',['value1','value2']);
});
이벤트 제거
등록된 이벤트를 제거하려면 다음과 같이 unbind() 함수를 이용할 수 있다.
$('div').unbind();
만일 <div> 요소의 특정 이벤트만 제거하고 싶을 경우 그 이벤트명을 지정해 주면 된다.
$('div').unbind('click');
live() 함수를 이용한 이벤트 처리
bind() 함수 이후에 새로 추가된 live() 함수(1.3 버전 이후 추가)를 이용하면 응용프로그램 실행 도중 동적으로 추가된 요소에도 자동으로 이벤트를 바인딩 할 수 있다. 사용방법은 bind() 함수와 유사하다
.live('이벤트명', 이벤트처리기 함수)
아래 코드를 보면, HTML 영역에서 총 두개의 <li> element를 미리 정의해 두고, 이들에게 클릭 이벤트가 실행되도록 live() 함수로 이벤트를 등록했다. 이후 '아이템추가' 버튼을 클릭해서 새로운 아이템(<li>)을 추가할 수 있게 한다. 이때 동적으로 새로 추가된 <li> element 도 live() 함수로 등록한 클릭 이벤트가 반영된다.
만일 live()가 아니라 bind() 함수로 이벤트를 등록했다면 새로 추가된 <li> element는 클릭 이벤트가 발생하지 않을 것이다(새로 추가된 <li> 에 수동으로 bind() 해 줘야 한다)
이처럼 live() 함수를 이용한 이벤트 처리는 비동기 통신으로 페이지 갱신 없이 element가 추가되는 시나리오에 유용하게 사용할 수 있다.
- Html
<ul id="list">
<li>Item1</li>
<li>Item2</li>
</ul>
<button id="btnAdd">아이템추가</button>
- Script
//모든 <li> element에 click 이벤트 등록
$(function(){
$('li').live('click' ,function(event){
alert(event.target.innerText);
});
//'아이템추가'버튼에 클릭 이벤트 등록
$('#btnAdd').bind('click' ,function(event){
$('#list').append('<li>new Item</li>');
});
});
<ul id="list">
<li>Item1</li>
<li>Item2</li>
</ul>
<button id="btnAdd">아이템추가</button>
- Script
//모든 <li> element에 click 이벤트 등록
$(function(){
$('li').live('click' ,function(event){
alert(event.target.innerText);
});
//'아이템추가'버튼에 클릭 이벤트 등록
$('#btnAdd').bind('click' ,function(event){
$('#list').append('<li>new Item</li>');
});
});
live()로 등록한 이벤트는 die() 함수로 제거할 수 있다
$('li').die();
delegate() 함수를 이용한 이벤트 처리
jQuery 1.4.2 버전 부터는 새로운 이벤트 처리 함수인 delegate()가 추가되었다. live()의 동적 이벤트 바인딩도 지원하며 기존 live() 에서 제한 되었던 몇 가지 단점을 보완하고 성능이 더 개선된 함수라고 한다. 자세한 사항은 jQuery API 문서를 참고하기 바라며 다음과 같이 사용할 수 있다. 아래 코드는 앞의 live()로 구현된 것을 delegate()로 바꾼 것이다.
.delegate('선택자', '이벤트명', 이벤트처리기 함수)
$(function(){
$('ul').delegate('li','click' ,function(event){
alert(event.target.innerText);
});
$('ul').delegate('li','click' ,function(event){
alert(event.target.innerText);
});
delegate()로 등록한 이벤트는 undelegate() 함수로 제거할 수 있다.
$('ul').undelegate('li');
참고자료>
http://api.jquery.com/bind/
http://api.jquery.com/live/
http://api.jquery.com/delegate/
http://www.learningjquery.com/2010/03/using-delegate-and-undelegate-in-jquery-1-4-2
'모바일 > Javascript' 카테고리의 다른 글
| ProcessingJS, 자바스크립트 Canvas 라이브러리 (0) | 2013.07.12 |
|---|---|
| 평점에서 별표 마킹 (0) | 2012.11.16 |
| 자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편 (2) | 2011.08.03 |
| [jQTouch] Demos 훓어보기 (0) | 2010.10.28 |
| [jQTouch] Extensions (확장기능) (0) | 2010.10.28 |
728x90
웹 사이트, 회원가입과 탈퇴, 쉽고 깔끔하게 처리해 주자!
요즘은 조금 덜하지만 그래도 여전히 탈퇴 기능이 아예 없거나 탈퇴를 어렵게 만들거나 개인 정보가 정말로 삭제되는지 의심스럽게 만드는 구시대적 발상을 가진 사이트가 존재한다.
정말.. 없어 보이게 이러지 맙시다!
라고 외치고 싶다. 실제로 수 많은 사이트를 개발해 오면서 나 역시 이런 상황을 맞곤 한다.
말 그대로다. '탈퇴를 최대한 귀찮게 해서, 탈퇴율을 줄입시다' 라는 이상한(?) 전략 말이다.
활성 고객에게 더 많은 가치를 제공해 주고, 탈퇴라는 실제적 액션을 취하기 전에 탈퇴 조짐이 보이는지 체크하고 별도 그룹으로 관리하여 사전에 예방적 활동을 하면 된다. 그래도 굳이 사이트를 떠나겠다는 사람들은 쿨(Cool)하게 보내주는 것이 맞다.
관련 기사: 회원님, 이래도 탈퇴하시겠습니까?
회원탈퇴에 휴대폰 번호 입력란을 둔 사이트. 번호를 입력하지 않으면 탈퇴가 되지 않는다. 옆에 고객센터 서비스 번호를 남겨놓았는데, ‘정회원만 가능’하다고 강조해놓았다.
‘탈퇴’를 누르자 무조건 미안하다고 사과한다. ‘고객에게 불편을 드려 죄송합니다.’ 사과하며 한달 무료 이용권을 준다. 한달 무료 이용권에 제공 공지는 커다랗게 화면을 차지하고 아래에 작게 ‘그래도 회원 탈퇴하시겠습니까’라고 묻는다. ‘그렇다’고 하면 ‘불편함이 있으셨습니까’라고 묻고 사이트가 제공하는 정보를 길게 나열해서 보여준다. 마우스를 아래로 죽 끌어내리면 ‘잠깐’이라며 회원의 마일리지 내역을 보여준다(‘마일리지 0원’이다ㅠㅠ). ‘축적된 마일리지를 쓸 수 없는데’ 그래도 탈퇴하겠냐는 것이다.
모 대기업쇼핑몰은 회원 탈퇴 후에는 30일간 재가입할 수 없다는 점을 강조한다. 일종의 ‘벌칙’이다. 그러면서 ‘일주일 동안은 회원 메일이 갈 수 있다’고 ‘동의’하라고 한다. 참 복잡한 이별의 속내. ‘의도’인지는 알 수 없으나, 탈퇴를 몇 번이나 누르고 ‘정말 탈퇴하시겠습니까’ 팝업창에 여러 번 ‘그렇다’고 답했음에도 사이트 화면은 변함이 없었다. 3번을 반복해서 탈퇴 버튼을 누르고 나자 사이트의 메인화면으로 바뀌었다. 헤어지고도 모른 체하고 전화하는 연인? 어떤 쇼핑몰 사이트는 ‘의도’인지는 모르겠지만 창이 확 꺼졌다. 신경질 내며 확 돌아서버리는 연인?
회원 가입을 기본으로 사이트를 구성하는 ‘기본 틀’도 문제다. “뚜렷한 수익모델 없이 개인회원 수가 자산이던 인터넷 사업 초창기의 문화가 남아 있는 것”이라는 것이다.
'일상' 카테고리의 다른 글
| 아.. PMP 갱신해야 겠구나... (0) | 2011.12.23 |
|---|---|
| 아버지와 아들 (1) | 2011.08.12 |
| 브라우저 점유율 (0) | 2011.05.23 |
| 그래, 얕은 정보가 지식으로 둔갑하는 것을 조심하자 (1) | 2011.01.12 |
| 위치기반SNS, 1km 출시 (1) | 2010.12.24 |
728x90
증말이지... 나이가 들수록 점점 기억력이 감소하고 디지털 기기의 발전은 이를 더 부추긴다.
너무 많은 라이브러리와 프레임워크의 등장으로 함수 하나하나도 쉬이 기억나지 않음이야...
동일한 기능의 함수명과 사용법도 각 프로그래밍 언어별로 조금씩 달라 기억 창고에 두고 바로 사용할 수 없는 지경이다. 그래서 정리한다. jQuery의 자주 쓰는 기능편!!!
이것은 노하우보다는 노웨어(Know Where)를 위한 글이라 할 수 있다.
기본 셀렉터
일반적인 CSS 셀렉터를 그대로 이용할 수 있다. 태그명을 기준으로 선택하거나 id, class 명으로 선택한다.
$('태그명') : HTML 문서에서 해당 태그를 모두 선택
$('#id') : HTML 문서에서 해당 id가 지정된 element 선택
$('.class명') : HTML 문서에서 해당 class가 지정된 모든 element 선택
순서 기반 셀렉터
기본 셀렉터 외에 jQuery에서 추가로 정의한 커스텀 셀렉터를 이용하면 복수의 elements에서 지정한 순서에 해당하는 element(s)를 선택할 수 있다.
$('선택자:even')
선택자로 선택된 모든 elements 중 짝수 번째 elements를 선택한다. 셀렉터를 생략할 경우 문서 전체가 대상이다. 대부분의 프로그램이 그러하듯 순서 인덱스 번호는 0부터 시작한다.
$('선택자:odd')
선택자로 선택된 모든 elements 중 홀수 번째 elements를 선택한다.
$('선택자:eq(인덱스)')
선택자로 선택된 모든 elements 중 해당 인덱스 번째 element를 선택한다.
$('선택자:first') , $('선택자:last')
선택자로 선택된 elements 중 첫 번째(first)와 마지막(last) element를 선택한다
$('선택자:lt(인덱스)') , $('선택자:gt(인덱스)')
선택자로 선택된 elements 중 인덱스 보다 작거나(lt) 큰(gt) elements를 선택한다.
lt 는 부등호 기호 '<' , gt는 '>' 로 해석하면 이해할만 하다
관계 기반 셀렉터
부모/자식과 같은 DOM 관계를 기준으로 element(s)를 선택할 수 있다. 대표적인 관계가 DOM Tree 구조상의 부모/자식 관계이다.
$('선택자').children() : 선택자로 선택된 element의 바로 아래(한 단계 아래의) 자식 elements를 선택한다.
$('선택자').parent() : 선택자로 선택된 element의 바로 위(한 단계 위의) 부모 element를 선택한다.
$('선택자').next() , $('선택자').nextAll()
선택자로 선택된 element의 바로 다음 1개(next) 또는 전체(nextAll) 요소를 선택한다.
$('선택자').prev() , $('선택자').prevAll()
선택자로 선택된 element의 바로 전 1개(prev) 또는 전체(prevAll) 요소를 선택한다.
이와 같은 jQuery 메서드를 '트리 순환 메서드'라 부른다
조건 기반 셀렉터
특정 내용이 포함된 element, 특정 규칙에 맞는 element 즉 조건에 의해 선택하는 방법을 안내한다. 따지고 보면 모든 셀렉터가 조건 기반 셀렉터이다. 다만 단락 구분과 실제 규칙을 명시하는 범주를 여기서 다룬다.
$('선택자').filter('조건선택자')
앞의 '선택자'에 의해 선택된 elements에서 '조건선택자'에 해당하는 element(s)만 다시 선택한다. 아래 코드는 모든 <p> element에서 class명이 'filterName'인 <p> element를 걸러내는 코드다.
$('선택자').find('조건선택자')
앞의 '선택자'에 의해 선택된 elements의 자식을 대상으로 '조건 선택자'에 해당하는 element를 선택한다. 이때 자식 element의 단계(Dept)는 제약이 없다. 아래 코드는 모든 <div> element의 자식들 중 <span> element를 다시 선택하는 코드다.
filter() vs find()
여러 곳에서 언급하고 있지만 이 둘은 짐짓 헷갈리 수 있다. 이를 헷갈리지 않으려면 조건이 적용되는 대상 즉 검색 대상이 다르다는 걸 알면 된다.
filter() : 현재 선택된 집합을 대상으로 검색함
find() : 현재 선택된 집합의 자식 요소를 대상으로 검색함
filter()는 '선택자'로 선택된 요소를 대상으로 검색하는 반면, find()는 '선택자'로 선택된 요소의 자식 요소를 대상으로 검색하는 것이다. 다음 코드를 보자.
두 경우 모두 처음에는 모든 <div>를 선택하고, 이후 filter와 find를 같은 조건(class 명이 'tempClass' 인 것)으로 검색한다. 결과는 다음과 같다.
- filter()로 검색한 결과: 첫 번째와 세 번째 <div> 요소 반환
- find()로 검색한 결과: 두 번째 요소의 자식 요소인 <span> 요소 반환
이것 하나만 기억하자! find()는 자식을 기준으로 검색한다는 것!
$('선택자:contains("searchText")')
앞의 '선택자'에 의해 선택된 element(s)의 콘텐트에서 "searchText"가 포함된 element만을 다시 선택한다.
다음 코드는 모든 <div>요소의 내용에서 'mkex'가 포함된 요소만을 선택하는 코드이다. 참고로 contains로 내용을 검색할 때, 대/소문자를 구분하는 것에 주의하자
$('선택자:not(조건선택자)')
앞의 '선택자'에서 선택된 모든 elements에서 '조건선택자'에 해당하는 요소를 제거한다.
참고로 not 조건에 셀렉터를 중첩해서 사용 가능하다. 다음과 같이...
$('div:not(.divClass , #divID)');
위 코드는 모든 <div> 요소에서 class로 'divClass'가 지정되거나 id로 'divID'로 지정된 요소를 제거한다.
즉 조건식을 or 조합으로 만들 수 있다.
선택자 중첩
지금까지는 하나의 선택자만을 지정했는데 더 자세한 탐색을 위해 선택자를 중첩해서 지정할 수 있다.
기본 셀렉터를 사용해서 선택자를 중첩시켜 보겠다.
$('선택자 선택자 선택자 ...')
총 3개의 선택자를 지정한다. 셀렉터를 중첩해도 동일한 효과를 줄 수 있지만 여기서는 선택자를 중첩 지정하여 탐색의 깊이를 점점 좁혀가고 있다.
예를 하나 보자. 다음 코드는 ID가 'divID'인 요소 안에 있는 <span> 내의 모든 <a> 요소를 반환하는 코드다.
지금까지 설명한 셀렉터들을 조합해서 사용할 수도 있고 여기에 설명된 것 이외에도 더 다양한 셀렉터 기법이 존재한다. 그야말로 HTML 문서의 DOM을 자유자재로 그것도 매우 편리하게 탐색할 수 있는 아주 강력한 기능이라 하겠다.
jQuery 이용한 DOM 탐색에 익숙해 지기 위한 방법으로, 이런저런 시나리오를 정하고 특정 사이트를 마구 탐색해 보는 실습을 몇 차례 거쳐 보는 것이다.
너무 많은 라이브러리와 프레임워크의 등장으로 함수 하나하나도 쉬이 기억나지 않음이야...
동일한 기능의 함수명과 사용법도 각 프로그래밍 언어별로 조금씩 달라 기억 창고에 두고 바로 사용할 수 없는 지경이다. 그래서 정리한다. jQuery의 자주 쓰는 기능편!!!
이것은 노하우보다는 노웨어(Know Where)를 위한 글이라 할 수 있다.
기본 셀렉터
일반적인 CSS 셀렉터를 그대로 이용할 수 있다. 태그명을 기준으로 선택하거나 id, class 명으로 선택한다.
$('태그명') : HTML 문서에서 해당 태그를 모두 선택
$('#id') : HTML 문서에서 해당 id가 지정된 element 선택
$('.class명') : HTML 문서에서 해당 class가 지정된 모든 element 선택
- HTML
<p>Paragraph Element</p>
<div id="divID">Division Element</div>
<div class="className">Division Element</div>
- Script
$(function(){
var element = $('p'); alert(element.html());
element = $('#divID'); alert(element.html());
element = $('.className'); alert(element.html());
});
<p>Paragraph Element</p>
<div id="divID">Division Element</div>
<div class="className">Division Element</div>
- Script
$(function(){
var element = $('p'); alert(element.html());
element = $('#divID'); alert(element.html());
element = $('.className'); alert(element.html());
});
순서 기반 셀렉터
기본 셀렉터 외에 jQuery에서 추가로 정의한 커스텀 셀렉터를 이용하면 복수의 elements에서 지정한 순서에 해당하는 element(s)를 선택할 수 있다.
$('선택자:even')
선택자로 선택된 모든 elements 중 짝수 번째 elements를 선택한다. 셀렉터를 생략할 경우 문서 전체가 대상이다. 대부분의 프로그램이 그러하듯 순서 인덱스 번호는 0부터 시작한다.
$('선택자:odd')
선택자로 선택된 모든 elements 중 홀수 번째 elements를 선택한다.
$('선택자:eq(인덱스)')
선택자로 선택된 모든 elements 중 해당 인덱스 번째 element를 선택한다.
$('선택자:first') , $('선택자:last')
선택자로 선택된 elements 중 첫 번째(first)와 마지막(last) element를 선택한다
$('선택자:lt(인덱스)') , $('선택자:gt(인덱스)')
선택자로 선택된 elements 중 인덱스 보다 작거나(lt) 큰(gt) elements를 선택한다.
lt 는 부등호 기호 '<' , gt는 '>' 로 해석하면 이해할만 하다
- HTML
<p>Paragraph Element 0</p>
<p>Paragraph Element 1</p>
<p>Paragraph Element 2</p>
<p>Paragraph Element 3</p>
- Script
$(function(){
var elements = $('p:odd');
elements.each(function(){ alert($(this).html())});
elements = $('p:even');
elements.each(function(){ alert($(this).html())});
elements = $('p:eq(3)'); alert(elements.html())
elements = $('p:first'); alert(elements.html());
elements = $('p:last'); alert(elements.html());
elements = $('p:gt(1)');
elements.each(function(){ alert($(this).html())});
elements = $('p:lt(2)');
elements.each(function(){ alert($(this).html())});
});
<p>Paragraph Element 0</p>
<p>Paragraph Element 1</p>
<p>Paragraph Element 2</p>
<p>Paragraph Element 3</p>
- Script
$(function(){
var elements = $('p:odd');
elements.each(function(){ alert($(this).html())});
elements = $('p:even');
elements.each(function(){ alert($(this).html())});
elements = $('p:eq(3)'); alert(elements.html())
elements = $('p:first'); alert(elements.html());
elements = $('p:last'); alert(elements.html());
elements = $('p:gt(1)');
elements.each(function(){ alert($(this).html())});
elements = $('p:lt(2)');
elements.each(function(){ alert($(this).html())});
});
관계 기반 셀렉터
부모/자식과 같은 DOM 관계를 기준으로 element(s)를 선택할 수 있다. 대표적인 관계가 DOM Tree 구조상의 부모/자식 관계이다.
$('선택자').children() : 선택자로 선택된 element의 바로 아래(한 단계 아래의) 자식 elements를 선택한다.
$('선택자').parent() : 선택자로 선택된 element의 바로 위(한 단계 위의) 부모 element를 선택한다.
$('선택자').next() , $('선택자').nextAll()
선택자로 선택된 element의 바로 다음 1개(next) 또는 전체(nextAll) 요소를 선택한다.
$('선택자').prev() , $('선택자').prevAll()
선택자로 선택된 element의 바로 전 1개(prev) 또는 전체(prevAll) 요소를 선택한다.
이와 같은 jQuery 메서드를 '트리 순환 메서드'라 부른다
- HTML
<div id="root">
<p>Paragraph Element</p>
<div id="1deptCh">Division Element <div id="2deptCh">Sub Division Element</div></div>
</div>
- Script
$(function(){
var elements = $('#root').children();
elements.each(function(){ alert($(this).html())});
elements = $('#2deptCh').parent();
alert(elements.html());
});
<div id="root">
<p>Paragraph Element</p>
<div id="1deptCh">Division Element <div id="2deptCh">Sub Division Element</div></div>
</div>
- Script
$(function(){
var elements = $('#root').children();
elements.each(function(){ alert($(this).html())});
elements = $('#2deptCh').parent();
alert(elements.html());
});
조건 기반 셀렉터
특정 내용이 포함된 element, 특정 규칙에 맞는 element 즉 조건에 의해 선택하는 방법을 안내한다. 따지고 보면 모든 셀렉터가 조건 기반 셀렉터이다. 다만 단락 구분과 실제 규칙을 명시하는 범주를 여기서 다룬다.
$('선택자').filter('조건선택자')
앞의 '선택자'에 의해 선택된 elements에서 '조건선택자'에 해당하는 element(s)만 다시 선택한다. 아래 코드는 모든 <p> element에서 class명이 'filterName'인 <p> element를 걸러내는 코드다.
- HTML
<p class="filterName">Paragraph Element 0</p>
<p>Paragraph Element 1</p>
<p class="filterName">Paragraph Element 2</p>
<p>Paragraph Element 3</p>
- Script
$(function(){
var elements = $('p').filter('.filterName');
elements.each(function(){ alert($(this).html())});
})
<p class="filterName">Paragraph Element 0</p>
<p>Paragraph Element 1</p>
<p class="filterName">Paragraph Element 2</p>
<p>Paragraph Element 3</p>
- Script
$(function(){
var elements = $('p').filter('.filterName');
elements.each(function(){ alert($(this).html())});
})
$('선택자').find('조건선택자')
앞의 '선택자'에 의해 선택된 elements의 자식을 대상으로 '조건 선택자'에 해당하는 element를 선택한다. 이때 자식 element의 단계(Dept)는 제약이 없다. 아래 코드는 모든 <div> element의 자식들 중 <span> element를 다시 선택하는 코드다.
- HTML
<div>Division Element 0</div>
<div>Division Element 1<span> Span Element 1</span></div>
<div>Division Element 2<span> Span Element 2</span></div>
- Script
$(function(){
var elements = $('div').find('span');
elements.each(function(){ alert($(this).html())});
});
<div>Division Element 0</div>
<div>Division Element 1<span> Span Element 1</span></div>
<div>Division Element 2<span> Span Element 2</span></div>
- Script
$(function(){
var elements = $('div').find('span');
elements.each(function(){ alert($(this).html())});
});
filter() vs find()
여러 곳에서 언급하고 있지만 이 둘은 짐짓 헷갈리 수 있다. 이를 헷갈리지 않으려면 조건이 적용되는 대상 즉 검색 대상이 다르다는 걸 알면 된다.
filter() : 현재 선택된 집합을 대상으로 검색함
find() : 현재 선택된 집합의 자식 요소를 대상으로 검색함
filter()는 '선택자'로 선택된 요소를 대상으로 검색하는 반면, find()는 '선택자'로 선택된 요소의 자식 요소를 대상으로 검색하는 것이다. 다음 코드를 보자.
- HTML
<div class="tempClass">Division Element 0</div>
<div>Division Element 1<span class="tempClass"> Span Element 1-1</span></div>
<div class="tempClass">Division Element 2<span> Span Element 2-1</span></div>
- Script
$(function(){
elements = $('div').filter('.tempClass');
elements.each(function(){ alert('filter() :' + $(this).html())});
var elements = $('div').find('.tempClass');
elements.each(function(){ alert('find() :' + $(this).html())});
});
<div class="tempClass">Division Element 0</div>
<div>Division Element 1<span class="tempClass"> Span Element 1-1</span></div>
<div class="tempClass">Division Element 2<span> Span Element 2-1</span></div>
- Script
$(function(){
elements = $('div').filter('.tempClass');
elements.each(function(){ alert('filter() :' + $(this).html())});
var elements = $('div').find('.tempClass');
elements.each(function(){ alert('find() :' + $(this).html())});
});
두 경우 모두 처음에는 모든 <div>를 선택하고, 이후 filter와 find를 같은 조건(class 명이 'tempClass' 인 것)으로 검색한다. 결과는 다음과 같다.
- filter()로 검색한 결과: 첫 번째와 세 번째 <div> 요소 반환
- find()로 검색한 결과: 두 번째 요소의 자식 요소인 <span> 요소 반환
이것 하나만 기억하자! find()는 자식을 기준으로 검색한다는 것!
$('선택자:contains("searchText")')
앞의 '선택자'에 의해 선택된 element(s)의 콘텐트에서 "searchText"가 포함된 element만을 다시 선택한다.
다음 코드는 모든 <div>요소의 내용에서 'mkex'가 포함된 요소만을 선택하는 코드이다. 참고로 contains로 내용을 검색할 때, 대/소문자를 구분하는 것에 주의하자
- HTML
<div>Hi, mkex!</div>
<div>Hi, ohkebi</div>
<div>Hi, MKEX</div>
- Script
$(function(){
var elements = $('div:contains("mkex")');
elements.each(function(){ alert($(this).text())});
});
<div>Hi, mkex!</div>
<div>Hi, ohkebi</div>
<div>Hi, MKEX</div>
- Script
$(function(){
var elements = $('div:contains("mkex")');
elements.each(function(){ alert($(this).text())});
});
$('선택자:not(조건선택자)')
앞의 '선택자'에서 선택된 모든 elements에서 '조건선택자'에 해당하는 요소를 제거한다.
- HTML
<div class="divClass">Hi, mkex!</div>
<div>Hi, ohkebi</div>
<div class="divClass">Hi, MKEX</div>
- Script
$(function(){
var elements = $('div:not(.divClass)');
elements.each(function(){ alert($(this).text())});
});
<div class="divClass">Hi, mkex!</div>
<div>Hi, ohkebi</div>
<div class="divClass">Hi, MKEX</div>
- Script
$(function(){
var elements = $('div:not(.divClass)');
elements.each(function(){ alert($(this).text())});
});
참고로 not 조건에 셀렉터를 중첩해서 사용 가능하다. 다음과 같이...
$('div:not(.divClass , #divID)');
위 코드는 모든 <div> 요소에서 class로 'divClass'가 지정되거나 id로 'divID'로 지정된 요소를 제거한다.
즉 조건식을 or 조합으로 만들 수 있다.
선택자 중첩
지금까지는 하나의 선택자만을 지정했는데 더 자세한 탐색을 위해 선택자를 중첩해서 지정할 수 있다.
기본 셀렉터를 사용해서 선택자를 중첩시켜 보겠다.
$('선택자 선택자 선택자 ...')
총 3개의 선택자를 지정한다. 셀렉터를 중첩해도 동일한 효과를 줄 수 있지만 여기서는 선택자를 중첩 지정하여 탐색의 깊이를 점점 좁혀가고 있다.
예를 하나 보자. 다음 코드는 ID가 'divID'인 요소 안에 있는 <span> 내의 모든 <a> 요소를 반환하는 코드다.
- HTML
<div id="divID"><span><a href="#">Go!!</a></span></div>
- Script
$(function(){
var element = $('#divID span a');
alert(element.text());
});
<div id="divID"><span><a href="#">Go!!</a></span></div>
- Script
$(function(){
var element = $('#divID span a');
alert(element.text());
});
지금까지 설명한 셀렉터들을 조합해서 사용할 수도 있고 여기에 설명된 것 이외에도 더 다양한 셀렉터 기법이 존재한다. 그야말로 HTML 문서의 DOM을 자유자재로 그것도 매우 편리하게 탐색할 수 있는 아주 강력한 기능이라 하겠다.
jQuery 이용한 DOM 탐색에 익숙해 지기 위한 방법으로, 이런저런 시나리오를 정하고 특정 사이트를 마구 탐색해 보는 실습을 몇 차례 거쳐 보는 것이다.
'모바일 > Javascript' 카테고리의 다른 글
| 평점에서 별표 마킹 (0) | 2012.11.16 |
|---|---|
| 자주 쓰는 jQuery 기능 - 이벤트 편 (0) | 2011.08.04 |
| [jQTouch] Demos 훓어보기 (0) | 2010.10.28 |
| [jQTouch] Extensions (확장기능) (0) | 2010.10.28 |
| [jQTouch] GET, POST 전송 (0) | 2010.10.27 |
728x90
체계적으로 한번은 봐야하는 Razor!. 다른 곳에 집중하느라 아직 제대로 훓어 보지 못하고 있다.
일단 간단한 Razor 구문을 정리해 본다.
1. Razor 코드 블럭
Razor 에서는 골뱅이(@) 키워드가 핵심이다.
과거 ASP.NET 에서 인라인 코드 작성할 때 사용했던 아래와 같은 구문이,
<script runat="server"> ... </script>
Razor에서는 다음과 같이 축약되었다. 과거에 존재했던, 스크립트 선언문과 서버로직이라는 명시가 필요 없어져 매우 간단해졌다
@{ ... }
이 코드 블럭에 닷넷 로직을 구현할 수 있다. 대략 다음과 같이...
@{
일단 간단한 Razor 구문을 정리해 본다.
1. Razor 코드 블럭
Razor 에서는 골뱅이(@) 키워드가 핵심이다.
과거 ASP.NET 에서 인라인 코드 작성할 때 사용했던 아래와 같은 구문이,
<script runat="server"> ... </script>
Razor에서는 다음과 같이 축약되었다. 과거에 존재했던, 스크립트 선언문과 서버로직이라는 명시가 필요 없어져 매우 간단해졌다
@{ ... }
이 코드 블럭에 닷넷 로직을 구현할 수 있다. 대략 다음과 같이...
@{
int i = 10;
Response.Write(i.ToString());
Response.Write(i.ToString());
}
여기서 한가지 주의할 점은, 코드 블럭을 시작하는 @와 중괄호({) 사이에는 공백이 허용되지 않는다는 것이다.
즉, 아래와 같이 작성하면 런타임 오류를 만나게 된다.
@
{
...
}
2. Razor 주석
다른 구문을 보기 전에 주석문 정의를 살펴보자. Razor의 코드 블럭안에서의 주석은, 이전과 동일하게 한줄 주석은 //, 여러줄 주석은 /* ... */ 로 가능하다. 대략 다음과 같다.
@{
//주석...
/*
int i = 5;
Response.Write(i.ToString());
*/
}
코드 블럭 바깥에서의 주석 역시 지원하는데 다음과 같이 사용가능하다. @와 *를 같이 사용한다.
@*
Razor 주석
*@
참고로 당연한 말이지만, Razor 주석은 HTML 주석(<!-- ... -->과는 달리, 서버측 주석이기 때문에 페이지 페이지 랜더링 후, DOM으로 생성되지 않는다.
3. 변수 출력
이전 환경의 ASP.NET 에서는 서버 로직에 구현된 변수를 페이지에 출력하기 위해서는 코드 블럭 안에서는Response.Write 메서드, 코드 블럭 바깥에서는 <%= 변수 %> 구문을 사용했었다. 그러나 Razor 에서는 두 경우 모두 변수에 @만 붙여주면 된다.
@{
var str = "Hello, Razor!";
@str;
}
코드 블럭 바깥에서도 단순히 아래와 같이 변수를 출력할 수 있다.
여기서 한가지 주의할 점은, 코드 블럭을 시작하는 @와 중괄호({) 사이에는 공백이 허용되지 않는다는 것이다.
즉, 아래와 같이 작성하면 런타임 오류를 만나게 된다.
@
{
...
}
2. Razor 주석
다른 구문을 보기 전에 주석문 정의를 살펴보자. Razor의 코드 블럭안에서의 주석은, 이전과 동일하게 한줄 주석은 //, 여러줄 주석은 /* ... */ 로 가능하다. 대략 다음과 같다.
@{
//주석...
/*
int i = 5;
Response.Write(i.ToString());
*/
}
코드 블럭 바깥에서의 주석 역시 지원하는데 다음과 같이 사용가능하다. @와 *를 같이 사용한다.
@*
Razor 주석
*@
참고로 당연한 말이지만, Razor 주석은 HTML 주석(<!-- ... -->과는 달리, 서버측 주석이기 때문에 페이지 페이지 랜더링 후, DOM으로 생성되지 않는다.
3. 변수 출력
이전 환경의 ASP.NET 에서는 서버 로직에 구현된 변수를 페이지에 출력하기 위해서는 코드 블럭 안에서는Response.Write 메서드, 코드 블럭 바깥에서는 <%= 변수 %> 구문을 사용했었다. 그러나 Razor 에서는 두 경우 모두 변수에 @만 붙여주면 된다.
@{
var str = "Hello, Razor!";
@str;
}
코드 블럭 바깥에서도 단순히 아래와 같이 변수를 출력할 수 있다.
@str
4. Razor 구문 안의 일반 텍스트
만일 Razor 구문안에서 일반 텍스트를 한번에 표현하고 싶을 경우 @: 키워드를 사용할 수 있다.
이전 같으면 변수와 문자열을 + 연산자로 합치고 Response.Write 해야 할 것을 다음과 같이 간단해졌다.
@{
var str = "Hello, Razor!";
@:Plane Text... @str;
}
5. Razor 구문 안의 마크업 태그
일반 텍스트와는 달리 태그의 경우에는 Razor 구문에서 별다른 키워드 없이 바로 사용가능하다
@{
var str = "Hello, Razor!";
<b>@str</b>
}
그리고 태그와 함께라면 일반 텍스트도 바로 사용 가능하다.
@{
var str = "Hello, Razor!";
<b>반갑습니다</b>
}
Razor 엔진에서는 태그를 인식해서 특별한 구문 없이 바로 출력 가능하도록 한 것 같다.
그렇다면 Razor 엔진이 HTML 태그를 모두 기억하고 있는 것일까? 그렇진 않은 것 같다. 다음과 같이 의미없는 태그를 삽입해도 오류 없이 결과를 내뱉는걸 보니, 태그를 기억하는 것이 아니라 태그 기호( <태그>)를 인식하는 듯 하다.
@{
var str = "Hello, Razor!";
<btt>@str;</btt>
}
한가지 주의할 점은, Razor 구문안에 태그를 혼용할 경우 반드시 여는 태그와 닫는 태그가 쌍으로 존재해야 한다. 다시 말해 다음과 같은 태그 작성은 허용되지 않는다.
@{
var str = "Hello, Razor!";
<b>@str;
}
6. 조건문
조건문 역시 @ 키워드와 함께 사용할 수 있다. 다음과 같이.
@if(1==1) {
<font size=@i>@str</font>
}
7. 반복문
반목문도 사용패턴이 동일하다. 아래 코드는 목록을 만드는 반복문 예를 보여준다.
<ul>
@for (int i = 0; i < 5; i++)
{
<li>@i</li>
}
</ul>
동일한 예를 while 반목문으로 처리하는 다음과 같다.
<ul>
@{
int i = 0;
while(i < 5)
{
<li>@(i++)</li>
}
}
</ul>
8. 키워드가 아닌 문자로써 '@' 사용하기
Razor 에서는 @ 자체가 키워드이기 문자 출력에 바로 사용할 수 없다. 즉 실제 '@'라는 문자를 출력하고 싶을 경우에는 다음과 같이 @@ 연속해서 두번 써 줘야 한다. 이렇게 하면 Razor 엔진은 @를 키워드로 인식하지 않고 일반 문자로 출력해 준다.
<span>@@난 그냥 골뱅이 문자야</span>
지금까지 아주 기본적인 Razor 구문을 살펴 봤다. 실제 구현시에는 더 많은 상황이 닥칠 것이다.
그럴땐 아래 asp.net 사이트 글을 참조하도록 하자. Razor 구문의 대부분의 규칙을 확인할 수 있다
=> Introduction to ASP.NET Web Programming Using the Razor Syntax
4. Razor 구문 안의 일반 텍스트
만일 Razor 구문안에서 일반 텍스트를 한번에 표현하고 싶을 경우 @: 키워드를 사용할 수 있다.
이전 같으면 변수와 문자열을 + 연산자로 합치고 Response.Write 해야 할 것을 다음과 같이 간단해졌다.
@{
var str = "Hello, Razor!";
@:Plane Text... @str;
}
5. Razor 구문 안의 마크업 태그
일반 텍스트와는 달리 태그의 경우에는 Razor 구문에서 별다른 키워드 없이 바로 사용가능하다
@{
var str = "Hello, Razor!";
<b>@str</b>
}
그리고 태그와 함께라면 일반 텍스트도 바로 사용 가능하다.
@{
var str = "Hello, Razor!";
<b>반갑습니다</b>
}
Razor 엔진에서는 태그를 인식해서 특별한 구문 없이 바로 출력 가능하도록 한 것 같다.
그렇다면 Razor 엔진이 HTML 태그를 모두 기억하고 있는 것일까? 그렇진 않은 것 같다. 다음과 같이 의미없는 태그를 삽입해도 오류 없이 결과를 내뱉는걸 보니, 태그를 기억하는 것이 아니라 태그 기호( <태그>)를 인식하는 듯 하다.
@{
var str = "Hello, Razor!";
<btt>@str;</btt>
}
한가지 주의할 점은, Razor 구문안에 태그를 혼용할 경우 반드시 여는 태그와 닫는 태그가 쌍으로 존재해야 한다. 다시 말해 다음과 같은 태그 작성은 허용되지 않는다.
@{
var str = "Hello, Razor!";
<b>@str;
}
6. 조건문
조건문 역시 @ 키워드와 함께 사용할 수 있다. 다음과 같이.
@if(1==1) {
<font size=@i>@str</font>
}
7. 반복문
반목문도 사용패턴이 동일하다. 아래 코드는 목록을 만드는 반복문 예를 보여준다.
<ul>
@for (int i = 0; i < 5; i++)
{
<li>@i</li>
}
</ul>
동일한 예를 while 반목문으로 처리하는 다음과 같다.
<ul>
@{
int i = 0;
while(i < 5)
{
<li>@(i++)</li>
}
}
</ul>
8. 키워드가 아닌 문자로써 '@' 사용하기
Razor 에서는 @ 자체가 키워드이기 문자 출력에 바로 사용할 수 없다. 즉 실제 '@'라는 문자를 출력하고 싶을 경우에는 다음과 같이 @@ 연속해서 두번 써 줘야 한다. 이렇게 하면 Razor 엔진은 @를 키워드로 인식하지 않고 일반 문자로 출력해 준다.
<span>@@난 그냥 골뱅이 문자야</span>
지금까지 아주 기본적인 Razor 구문을 살펴 봤다. 실제 구현시에는 더 많은 상황이 닥칠 것이다.
그럴땐 아래 asp.net 사이트 글을 참조하도록 하자. Razor 구문의 대부분의 규칙을 확인할 수 있다
=> Introduction to ASP.NET Web Programming Using the Razor Syntax
'.NET Framework' 카테고리의 다른 글
| LING to SQL에서 다중 결과 셋 받기 (0) | 2012.11.13 |
|---|---|
| MVC 다중 폼 유효성 체크 (0) | 2012.09.07 |
| ASP.NET Razor (5) | 2010.12.13 |
| 웹 리소스 요청 막기, HttpNotFoundHandler (0) | 2010.08.09 |
| ASP.NET MVC, 폼 데이타 전송하기 (0) | 2010.08.06 |
728x90
5대 브라우저 지원! 괜히 멋있어 보이는 선언 ㅎㅎ.
비용 효율성을 보면 오히려 오버(over) 스펙일 수도 있지만 개발자의 지향점으로서의 가치를 둘 수 있다.
---------------------------------------------------------------------------------------------------------------------------------
드넓은 인터넷(WWW) 공간에 또 하나의 새로운 웹 사이트를 올려야 한다. 서비스 대상 국가는 대한민국이다.
국내 환경의 뻔한 브라우저 점유율을 가늠할 수 있지만, 그래도 새로운 기술 좀 써 먹을 수 있나 하고 조사해 본다. 역시 국내는 IE 절대 우위!!
아래 자료는 StatCounter(http://gs.statcounter.com/)에서 조사한 자료이다.
1. 전 세계 브라우저 점유율
과거 1년을 기준으로 데이터를 산출한다. IE가 높긴 하나, 파이어폭스의 선전이 볼 만하다.
결과> IE: 48.57%, Firefox: 30.8%, Chrome: 13.19%, Safari: 4.63%, Opera: 1.97%
2. 대한민국 브라우저 점유율
역시 과거 1년을 기준으로 데이터를 산출한다. IE 의존성이 만점에 가깝다. 그리고 국내에서는 구글 크롬과 파이어폭스가 유사한 점유율을 보이지만, 뭐 IE에 비하면 조족지혈!. 사파리, 오페라는 완전 듣보잡!!! 수준.
결과> IE: 93.62%, Chrome: 2.69%, Firefox: 2.68%, Safari: 0.65%, Opera: 0.13%
2.1. 대한민국 브라우저 버전 점유율
IE 절대강자! 일단 알겠고. 다음으로 버전 좀 살펴보자. 역시 과거 1년 기준.
IE 8.0이 가장 높다. 다음으로 6.0, 7.0 수순... 음.. IE6.0 넌 뭐니? 이제 우리 헤어져도 되잖어!
결과> IE8.0: 40.04%, IE6.0: 27.56%, IE7.0: 25.59%, .....
3. 유럽 브라우저 점유율
유럽의 경우 꽤 의미 있는 통계가 나온다. 2010년 10월을 기점으로 파이어폭스가 IE의 점유율을 앞질렀다.그리고 구글 크롬의 점유율이 급속도로 상승하고 있다.
국내, 불특정 다수의 사용자를 대상으로 웹 서비스를 할 경우 아직까지 IE의 틀에서 벗어날 수 없다. IE 중에서도 8.0, 7.0, 6.0이 대부분을 차지한다. 이말은 데스크톱 환경에서는, 아름다운 차세대 웹표준 기술인 HTML5, CSS3와 같은 것들을 도입하게에는 매우 이르다는 의미이다. (IE에서도 HTML5의 특정 기능을 동작하게끔 하는 컨테이너나 별도 모듈이 있지만 정석은 아니니 예외로 한다.)
'일상' 카테고리의 다른 글
| 아버지와 아들 (1) | 2011.08.12 |
|---|---|
| 제발, 헤어질 땐 쿨(Cool) 하게 하자 (0) | 2011.08.04 |
| 그래, 얕은 정보가 지식으로 둔갑하는 것을 조심하자 (1) | 2011.01.12 |
| 위치기반SNS, 1km 출시 (1) | 2010.12.24 |
| 애자일 선언문 (0) | 2010.12.07 |
728x90
나는 평소, 관심있는 주제의 내용은 인터넷보다 책으로 보기를 원한다. 특히 내가 몸 담고 있는 기술 분야의 서적을 꽤 사다 보는 편이다. 평소 책 한권에서 한 가지 뚜렷한 지식만 얻으면 그것으로 만족한다는 가치의식을 가지면서...
인터넷에도 많은 자료가 있고 그 중 양질의 글도 많지만, 사실 컴퓨터 화면으로 보는 글은 확실히 집중을 할 수 없다. 이건 마치 컴퓨터로 영화를 못보고 반드시 TV로 봐야 되는 내 성격과도 관련이 있는 것 같다.
물론 그렇다고 컴퓨터, 인터넷으로 지식을 쌓지 않는 것은 아니다.
현재 내가 가진 지식의 많은 부분도 인터넷을 통해 얻어진 산물이다. 다만 오늘 이 기사를 보니 평소 지식으로 생각했던 많은 것들이 체계화되지 않은 얕은 정보덩어리에 지나지 않았나? 하는 생각이 든다.
즉 얕은 정보를 마치 습득된 지식으로 착각하고 있지 않나.. 하는 것이다
인터넷, 하이퍼링크, 하이퍼텍스트 구조의 정보 취득이 가진 한계와 정보와 지식을 구분하고 체계적인 지식 습득을 위한 올바른 길을, 조심스레 생각하게 만드는 좋은 글이다
기사원문: 당신도 '인터넷의 저주'에 걸리셨나요?
인터넷에도 많은 자료가 있고 그 중 양질의 글도 많지만, 사실 컴퓨터 화면으로 보는 글은 확실히 집중을 할 수 없다. 이건 마치 컴퓨터로 영화를 못보고 반드시 TV로 봐야 되는 내 성격과도 관련이 있는 것 같다.
물론 그렇다고 컴퓨터, 인터넷으로 지식을 쌓지 않는 것은 아니다.
현재 내가 가진 지식의 많은 부분도 인터넷을 통해 얻어진 산물이다. 다만 오늘 이 기사를 보니 평소 지식으로 생각했던 많은 것들이 체계화되지 않은 얕은 정보덩어리에 지나지 않았나? 하는 생각이 든다.
즉 얕은 정보를 마치 습득된 지식으로 착각하고 있지 않나.. 하는 것이다
인터넷, 하이퍼링크, 하이퍼텍스트 구조의 정보 취득이 가진 한계와 정보와 지식을 구분하고 체계적인 지식 습득을 위한 올바른 길을, 조심스레 생각하게 만드는 좋은 글이다
기사원문: 당신도 '인터넷의 저주'에 걸리셨나요?
모든 이가 알고 있듯, 우리가 정보를 얻는 방식은 크게 바뀌었다. 집중과 사고로 캐내야 했던 정보들은 이제 검색어 하나로 간단히 모습을 드러낸다. 그럼에도 불구하고 우리는 지식 개념이 과거와 동일하다고 착각하곤 한다. 지식에 대한 존경과 열망도 여전하다.
정보가 외부에서 주어지는 자료라면, 지식은 그 자료를 능동적이고 비판적으로 수용하는 과정까지 포함한다
하이퍼텍스트는 이런 선형성을 파괴한다. 문장을 다 읽기도 전에 링크를 클릭해 다른 기사로 넘어가기도 하고, 논의의 맥락을 소화하기도 전에 엉뚱한 자료를 뒤지고 있는 자신을 발견하기 일쑤다. 선형텍스트와 하이퍼텍스트가 집중과 이해에 끼치는 영향에 대해서는 많은 논문이 나와 있다. 이 가운데 다수가 하이퍼텍스트가 정보의 이해와 기억에 끼치는 부정적 측면을 지적한다.
그러면 어떻게 해야 할까? 인터넷을 포기할 수 없듯, 하이퍼텍스트를 포기하는 것도 불가능한 일일 것이다. 또 다른 연구가 시사점을 준다. 앞서 지적했듯, 하이퍼텍스트는 대체로 선형텍스트에 비해 내용을 파악하기 어렵고 기억하기도 어렵다. 하지만 이런 혼란은 특정 분야의 지식이 얕은 사람에게 더 강하게 나타나는 경향이 있다. 다시 말해, 일정 수준의 체계적 지식을 쌓은 사람들일수록 인터넷을 더 효율적으로 쓸 수 있는 것이다. 이 사실은 종이책이 인터넷이나 전자책을 보완하는 역할을 해야 한다는 사실을 보여준다
가장 중요한 것은 체계적으로 조직화된 '선형 텍스트'를 많이 소비하는 것이다. 즉 인터넷을 쓰더라도 책 읽기를 게을리하지 않는 것이다. 특히 특정 분야에 지식이 부족하다고 생각한다면, 인터넷 검색으로 얻는 단편적 정보보다는 완결된 구조의 글이 도움이 될 것이다
더욱이 인터넷은 가치중립적인 공간이 아니다. 상업적 이해관계가 침투해 있고, 통제를 열망하는 권력이 도사리고 있다. 때로 합리적인 토론의 공간이기도 하지만, 순진한 자기애가 표출되는 곳이기도 하고, 억지와 무례로 남의 목소리를 억누르려는 욕망의 장이기도 하다. 이런 곳에서 손쉽게 얻는 정보를 '지식'으로 받아들이는 것은 위험한 일이다
인터넷과 책 없이 머리에 담긴 지식과 관찰만으로 기사를 쓰자니, 한 줄 한 줄이 고난의 연속이었다. 그전까지 인터넷을 '분뇌'처럼 쓰면서 그 사실을 인식하지 못하고 있었던 것이다. '빈 머리의 자각'이 고통스러웠을망정, 인터넷 없이 지낸 보름간은 아주 기쁘고 행복했다. 어쩌면 1995년 이래, 내 머리로 사고한 유일한 시간이었는지도 모른다
'일상' 카테고리의 다른 글
| 제발, 헤어질 땐 쿨(Cool) 하게 하자 (0) | 2011.08.04 |
|---|---|
| 브라우저 점유율 (0) | 2011.05.23 |
| 위치기반SNS, 1km 출시 (1) | 2010.12.24 |
| 애자일 선언문 (0) | 2010.12.07 |
| 록멜트(RockMelt), 이제 소셜 웹브라우저다 (0) | 2010.12.03 |
