평생 공부만 해야할듯

IE(익스플로러) 는 너무나 문제가 많은것 같습니다.

업데이트도 종료되었는데 한국은 ActiveX 나 exe 파일을 설치하여 시스템 정보를 확인하고 처리하는 작업이 많습니다.

대표적으로 은행관련 업무이죠.

그렇기에 IE 브라우저는 버리지 못하는 하나의 골칫덩어리가 되어졌습니다.

이번엔 특정 조건에 따라서 select option 의 선택값을 제어하려고 했습니다.

Jquery를 사용하여 아래와 같이 처리하던 코드들이 IE 에서는 동작하지 않았습니다.

$("선택자").hide();
$("선택자").show();

or

$("선택자").css('display','none');
$("선택자").css('display','block');

이런걸 해결하려고 script 로 select option 내용을 새로 만들어서 보여주는 방식도 있습니다.

하지만 보여는 주고 선택이 되지 않는 방법도 좋은방법인것 같아서 아래와 같이 진행했습니다.

간단하게 앞에 속성값을 추가함으로써 복잡한 로직을 추가하지않고 다른 브라우저에도 대응하도록 처리할 수 있습니다.

$("선택자").attr('disabled', 'disabled').hide();
$("선택자").removeAttr('disabled').show();

or

$("선택자").attr('disabled', 'disabled').css('display','none');
$("선택자").removeAttr('disabled').css('display','block');

업데이트도 진행되지않는 IE (익스플로러) 를 이제는 보내줘야 되지 않나 생각합니다.

관리자 화면에서 공지사항이나 자주묻는 질문들을 저장하고, Client 에서 보여주도록 진행하고 있습니다.

하지만 Textarea 는 Enter 입력까지도 잘 보이지만 Content 내용에 맞게 높이조절을 하기가 여간 쉬운일이 아니었습니다.

PC 화면에서 로드가 되었을때 내용의 Scroll 의 높이를 가져온뒤 그 높이만큼 Textarea 높이를 바꿔주는 방식을 많이 사용하는것 같은데

이게 문제가 발생되는건 브라우저 크기가 변할때에는 반응을 하지 않아 최초 로드된 높이만을 갖고 있다는것입니다.

이 단점까지 처리해주는 라이브러리를 찾을수 있었습니다.

내용은 아래의 주소로 이동해서 확인할 수 있습니다.

https://www.jacklmoore.com/autosize/

다운로드 받거나 CDN 을 사용하여 script를 불러옵니다.

<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>

autosize 라는 함수를 호출하면 간단하게 자동 높이 조절이 됩니다.

// TextArea 자동 높이 설정
autosize($("textArea"));

기본 사이즈는 css를 통해 주면 됩니다.

내용을 입력하거나 저장된 데이터를 불러와도 높이가 자동으로 설정됩니다.

반응형 홈페이지를 만드는 분들이라면 autosize 라는 라이브러리를 추천드리겠습니다.

웹에서 자주 다루던 '아이디 기억하기' 를 해보려고 했던적이 있는데. 간단한 코드인데도 동작을 안하고.. 몇줄이나 따라서 썻지만 안되면 다 지우고 했던적이 한두번이 아닙니다.

찾다보니 간단하게 cookie를 사용할 수 있도록 jquery 에서 지원하는 plugin을 찾았습니다.

다운로드는 아래 url로 이동해서 받으면 됩니다.

https://plugins.jquery.com/cookie/

요즘은 웹 cookie를 잘 사용하지 않고 기본적으로 javascript 에서 지원하기 때문에 version이 올라가지 않습니다.

Download now 를 클릭하여 다운로드를 받습니다.

Jquery 와 함께 load

다운로드를 받았다면 아래와같이 코드에 script를 불러옵니다.

<script type="text/javascript" src="https://code.jquery.com/jquery-x.x.x.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

Cookie 생성

// 세션 쿠키 생성 - 브라우저를 종료하면 소멸
$.cookie('name', 'value'); 

// 7일 뒤에 만료되는 쿠키 생성 
$.cookie('name', 'value', { expires: 7 }); 

// 전체 사이트에 대해 7일 뒤에 만료되는 쿠키 생성 
$.cookie('name', 'value', { expires: 7, path: '/' });

Cookie 조회

// key로 cookie 조회
$.cookie('name'); 

// {key: value} 형태의 모든 쿠키 반환
$.cookie();

Cookie 제거

// 기본 cookie 제거 방법
// 성공여부에 따른 boolean 값을 반환
$.removeCookie('name'); 

// domain 설정
$.cookie('name', 'value', { path: '/' }); 

// domain을 설정시 cookie 제거방법
$.removeCookie('name', { path: '/' });

간단하게 사용하는 방법을 알아보았습니다.