CODE CAVE

콤마 삭제 함수 rm_comma(number)//콤마 삭제 function rm_comma(num){ var number = num + ""; return number.replace(",",""); } 먼저 파라미터 이름이 num 이라서 숫자만 받아올 것 처럼 짜놓긴 했는데요~ 문자열을 넘기든 숫자를 넘기든 어차피 num + "" 을 해서 문자열로 만들기 때문에 상관은 없습니다. 파라미터를 문자열로 만들고 거기서 "," 를 ""(공백)으로 replace 해서 return 하는 것 입니다. -- 웹 사이트를 만들다보면 콤마를 삭제하는 경우가 종종 있는데요~ 이건 제 얘기입니다만.. 어디 회사에 새로 들어가게 되었는데 디비 설계가 잘못 되어있었습니다. Database 의 상품 테이블의 1 상품이 1 필드에 ..

안녕하세요~ 이번엔 jQuery의 요소 반복으로 매우 매우 자주 사용되는 each() 에 대해 알아보려 합니다~ 클라이언트 프로그래밍을 하다보면 자주 마주치게 되는데요. 요새 쇼핑몰에서 제품을 구매할 때 옵션을 선택하면 해당 옵션 별로 상품 카드(?)가 추가 되는 것이 일반적이죠.제가 써놓고도 뭔말인지 모르겠네요 ㅋㅋ 사진으로 보시죠![출처 : trymoon(트라이문)] 온라인 쇼핑몰에서 이런 화면 많이 보셨을겁니다. 상품 옵션을 고르면 해당 옵션의 상품이 카드형식으로 하나하나 추가되는 방식이죠. 이렇게 사용자의 입력에 따라 html 추가되는 건 append() 라는 메서드를 쓰시면 됩니다! 옵션 클릭 리스너에서 옵션 클릭을 감지하고 클릭한 요소에서 옵션(컬러,상품명 등)값 들을 가져와서 append로 ..

자바스크립트는 맨 처음 나오게 된 계기는 브라우저에 랜더링 된 정적인 HTML을 동적으로 제어할 수 있게 하기 위해 나왔습니다. HTML로만 작성한 정적인, 멈춰있는 사이트를 동적으로 만들어 주는 역할을 합니다. 예를 들어 HTML의 table 태그로 만들어진 어떤 시간표 테이블이 있다고 가정합니다. 또한 이 시간표의 색상을 바꾸는 "파란색으로 변경"이란 버튼이 있다고 합시다. 이제 처음 시간표 페이지를 브라우저에 띄웠을 때 시간표 색상이 초록색이 나왔습니다.이 초록색을 파란색 버튼으로 바꾸기 위해 "파란색으로 변경하기" 버튼을 누릅니다. 하지만 아무 반응이 없습니다. HTML은 그저 화면의 구조를 정하고 CSS는 이 HTML과 함께 레이아웃, 스타일을 지정할 뿐 뭔가 파란색으로 변해라! 하고 버튼을 눌..

쇼핑몰을 운영하는 회사에서 종사하시는 개발자 분들은 광고 시스템과의 연동 등의 사유로 전체 상품리스트를 XML로 뽑아야하는 경우가 있을 것이라고 생각되는데요. 이번 포스팅에서 제가 실제로 회사에서 활용한 코드를 가지고 상품 목록을 XML로 출력하는 방법에 대해서 얘기하고자 합니다. 개발 환경은 APM(Apache+PHP+MySQL) 입니다. PHP의 버전은 5.5구요! 소스코드는 아래와 같습니다. 제일 먼저 해야할 부분은 응답헤더 설정입니다. 웹은 기본적으로 Content-Type이 html 이므로 이것을 xml로 변경해주어야 합니다.header("Content-type: text/xml");주의할 점으로는 header 위에는 아무런 공백이 있어선 안됩니다.공백이 있으면 인식하지 못할 수 있습니다. 그리..

이젠 모바일 웹앱은 필수가 되면서 반응형은 필요요소가 되었습니다. 적응형으로 모바일 디자인을 따로 만든다고해도, 모바일 디스플레이가 워낙 크기가 다양해서 어쨌든 준(?) 반응형으로 만들어야 합니다. 적응형은 미디어쿼리를 쓰지 않을 뿐이지 각종 디스플레이 크기에 반응해야하기 때문에 고정값으로 가로세로 크기를 지정하면 안되니까요~ 적응형이라고 꼭 미디어쿼리를 쓰지 않는다는 것은 또 아니고, 결국 적응형도 반응형이나 다름 없다는 것이죠. 반응형은 반응하는 기기의 범위가 데스크탑 까지 가있는 것입니다. 뭔가 시작부터 되게 헷갈리게 만드는 말들을 주저리 주저리 했네요.. 아무튼 그래서 이번 포스팅에서는 반응형으로 동영상쪽 퍼블리싱+JavaScript 하실 때 참고하시라고 제가 작업했던 내용을 공유드리려고 합니다...

로그인 할때 아이디 저장 기능은 많이들 쓰죠!아이디 저장 기능을 제공하지 않는 사이트를 찾는게 더 힘든 요즘 입니다. 이번에 제가 값 저장 기능. 다시 한번 개발하면서 사용한 소스를 공유 하려고 합니다~ 값의 저장에는 여러가지 방법이 있죠.PHP의 세션으로 웹서버에 어떤 값을 키와 함께 저장할 수 있지만클라이언트 단에서 쿠키의 사용도 가능합니다! 자바스크립트가 있기에 가능한 일이죠. 이번에 포스팅 할 것은 이 쿠키를 사용하여 어떤 값을 키:값 형태로 브라우저에 저장해서 사용 해보는 것을 보여 드리려고 합니다. 일단 쿠키의 생성(setCookie), 삭제(deleteCookie), 얻기(getCookie)는 인터넷에 여기저기 퍼져있는 자바스크립트 소스 그대로 가져왔습니다! 뛰어나신 프로그래머들이 매우 많기..

이번 포스팅으로 공유드릴 내용은어떤 날짜가 있을 때, 그 날이 무슨 요일인지 구하는 코드 입니다. 왠지 많이들 필요하실 것 같아서 생각할 시간을 줄이고 복붙 하실 수 있게 도움이 되고자 공유드립니다!아래 제가 작성한 소스코드 3줄을 함수 하나를 만드시고 그 안에 붙혀 넣으시면 됩니다.마지막 코드에 보면 "return"이란게 있으니 함수라는 것은 말하지 않아도 아시겠죠?! 자바스크립트를 기초부터 다시 살펴보고 싶으신 분들은.. "자바스크립트 이야기"라고 제 블로그에서 검색하시면 다양한 이야기들이 나옵니다. ㅎㅎ var week = ['일', '월', '화', '수', '목', '금', '토']; var dayOfWeek = week[new Date('2016-07-28').getDay()]; return ..

웹을 개발하다보면 (웹이 아니여도) 여러모로 문자열 자르기는 거의 매번 하는 작업중 하나죠! 그래서 문자열을 자르는 상황을 대표적인 두가지로 정리해봤습니다! 1첫번째 문자열을 자르는 경우는 어떤 제목을 몇글자 출력하고 "..." 을 붙혀주고 싶은 경우.(substr 함수 사용) if(input.length >= 14){ return input.substr(0,14)+"..."; }위는 14글자 이상이면 첫번째 글자부터 14번째 글자까지 자르고 + 연산자로 뒤에 "..." 을 붙혀주는 내용입니다. 좀 더 상세하게 설명 드리자면 자바스크립트의 객체에는 기본적으로 length라는 프로퍼티가 있습니다. 이 프로퍼티는 그 객체가 문자열일 경우 그 문자열의 문자 갯수를 가지고 있습니다. 위 if 문에서는 이 프로퍼..

이번 포스팅에는 모바일 기기 체크 하는 방법 중에도 PHP로 하는 방법을 공유하고자 합니다. 보통 접속 기기의 종류는 자바스크립트에서 많이들 확인 하실거라고 생각이 되는데 RestAPI 방식이나 MVC로 로직이 분리가 되어있는 서버가 있을 경우 클라이언트(뷰) 단인 자바스크립트가 아니라 컨트롤러가 뷰로 데이터를 넘길때 여기에서 요청한 쪽의 헤더를 보고 모바일인지 데스크탑인지 확인하여 각기 다른 데이터를 리턴하면 될 것 같습니다. 다시 말해, 새 API를 아예 새로 받는 것보다 컨트롤러에서 return [view] 했던 것을 모바일 기기인지 체크하여 모바일이면 json 반환, PC면 뷰를 반환하도록 처리하면 구지 두번 작업하지 않아도 될 것입니다. 생각보다 단순합니다. 소스는 아래와 같습니다. //Chec..

placeholder가 되게 간편한 기능 중 하나죠! 필수적인 기능이기도 하구요 ㅋㅋ 2009년도였나~ 그 때쯤 저는 placeholder 를 하기 위해서 홀더로 쓸 이미지를 자르고 input 에 onfocus등을 이용해서 개발했던 때가 떠오르네요.. 정말 귀찮고 힘들고 개발이 하기 싫은정도까지 만드는 작업이였습니다. 이럴 시간에 로직에 좀 더 고민을 하고 싶었는데 말이죠.. 그래서 placeholder라는 속성이 나와서 편해지긴 했습니다. 하지만 편리해지면 편리해지는 만큼 동시에 호환성은 항상 문제로 뒤따라오죠! placeholder를 IE8,9에서도 호환시키는 방법은 여럿 있겠지만 아마 제일 중요한 부분은 플랫폼에 독립적이고 (부트스트랩과의 충돌문제 제거) 사용하기가 쉬워야 하는 것이지 않을까요. 이..