웹 개발을 하다 보면 자주는 아니지만 간혹 웹페이지 화면을 이미지로 저장해야 하는 경우가 생긴다. 당연히 관리자 화면의 통계나 일부 화면을 이미지로 저장하고 싶다고 할 때는 이렇게 말을 한다. 스크린 캡처를 이용하시는게 좋을 듯 합니다. 캡처 프로그램을 실행하고 영역을 마우스로 드래그하는 과정이 귀찮을 수는 있지만... 원하는 영역만 지정해서 저장할 수 있고 정말 심플한 방법이다. 중요한건 추가적인 개발 비용도 안든다 하지만 스크린 캡쳐만으로 해결할 수 없고 이미지로 저장해야 할 수밖에 없는 상황이 왔다. 나 : 영수증 프린트 출력이 PC버전에는 되는데 모바일에서는 안돼요. 뺄까요? 클라이언트 : 음..모바일에서는 이미지 저장으로 하면 안 될까요? 나 : 네.... 잘 사용하지 않는 플러그인이지만 어쩔 ..

우리가 웹사이트를 접속 할 때 서버에서 불러오는 리소스(js, css, image) 등을 파일로 저장해 두었다가 다시 접속할 때 서버에서 로딩하지 않고 캐시 파일을 불러와 사용합니다. 브라우저의 개발자 도구를 통해 확인해보면 캐시된 파일들을 확인 할 수 있습니다. 캐시를 사용할 때 장점 대부분 브라우저는 캐시 사용이 기본 사용으로 설정되어있습니다. 캐시를 사용할 경우 웹페이지에 접속할 때 마다 사용되는 리소스 파일들을 서버에서 불러오지 않고 파일로 불러오기 때문에 웹사이트 접속을 빠르게 할 수 있습니다. 캐시를 끈 상태에서 웹사이트를 이용해 보면 실제로 체감이 될 정도의 속도차이를 느낄 수 있습니다. 또한 웹사이트 운영자는 캐시로 인해 서버에서 불러오지 않는 파일은 트래픽에 영향을 주지 않기 때문에 트래..

보통 개발을 진행할 때 주로 UTF-8로 문자셋을 사용합니다. 일반적으로 개발할 경우는 문제가 없지만, 외부 서비스를 연동할 때 문자셋이 다른 경우가 있습니다. 그리고 개발된 지 오래되어 EUC-KR로 되어있는 홈페이지를 수정할 때 문자셋이 달라 문자가 깨지는 경우를 많이 접하게 됩니다. 보통은 iconv() 함수를 이용해서 변환을 해주지만 이 함수는 원래의 문자셋을 알아야 하기 때문에 현재 변수에 문자가 어떠한 문자셋으로 들어가 있는지 알아야 합니다. 하지만 문자셋 확인이 안 되어 iconv() 함수를 사용하더라도 문자가 깨지는 경우가 있습니다. 이럴 경우 현재 변수에 담긴 값의 문자셋이 무엇인지 알아내기 위해 mb_detct_encoding() 함수를 사용합니다. $str = "테스트 문자"; $en..

Ajax로 프로그램을 만들 때 혹은 Form데이터를 Query String 형식으로 변경해서 사용할 때 어떠한 방법을 사용하시나요? 일일이 하나씩 데이터를 불러와서 사용합니다! 네, 보통은 폼 값을 하나씩 불러와 Ajax 데이터로 만들어서 사용하는 경우가 대부분일 겁니다. 하지만 불어와야 하는 Form 데이터가 30개? 50개? 100개? 이렇게 항목이 많은 경우에는 하나씩 불러와서 넣어주는 건 너무 힘들어요ㅜ 이럴 때 사용할 수 있는 jQuery의 유용한 함수가 있습니다. 바로 serialize()입니다. serialize함수는 실렉터 한 폼의 input 데이터들을 쿼리 스트링으로 변경해주는 역할을 합니다. 저는 ajax로 예를 들었지만 폼 데이터를 쿼리 스트링으로 사용해야 할 때 유용하게 사용할 수 ..

상담 신청 혹은 문의를 받기 위해 홈페이지에 간단하게 폼을 만들어 놓으면 지긋지긋하게 스팸글이 올라오곤 합니다. 그래서 캡챠 기능을 많이 이용합니다. 캡챠 기능이 너무 불편해요. 저는 캡챠 기능이 사실 너무 싫어요ㅠ 스팸글을 막기 위해서는 어쩔 수 없다는 생각도 합니다. 글자를 보고 입력을 해야하는데 그나마 보기 편한 곳은 한 번에 통과하는 경우도 있지만 보기 힘들게 해 놓은 곳은 5번 이상을 시도해도 실패한 적이 많아요. 하지만 구글에서 서비스 중인 reCaptcha v3를 사용하면 이런 문제를 해결할 수 있습니다. 어떠한 입력도 없이 구글이 판단하는 사용자의 점수를 기준으로 스팸글인지 판단해서 막아주는 서비스 입니다. 점수가 어떻게 계산되는지는 모르겠지만 작동 방식을 보면 구글이 보내주는 키값을 함께..

고도몰5 Pro를 이용해서 스킨 작업을 하거나 튜닝을 진행할 때 게시판 말머리로 검색하는 기능을 사용하는 경우가 있습니다. 물론 일반적인 게시판 스킨에는 기본적으로 말머리를 사용하게 되면 셀렉트 박스로 선택할 수 있도록 나오기 때문에 문제가 되지 않습니다. 하지만 셀렉트 박스가 아닌 다른 방식으로 사용할 때 혹은 말머리 기능이 나오지 않는 곳에서 사용하는 방법을 알려드릴께요~ ⚠️ 해당 포스팅에서 사용된 Skin은 Moment이며, 스킨에 따라 파일 위치, 스크립트 내용들이 달라질 수 있습니다. 👉 게시판에서 셀렉트 박스가 아닌 다른 방식으로 사용하는 경우 말머리를 셀렉트 박스가 아닌 페이지에 리스트로 전부 노출 시키는 경우에는 간단하게 링크에 파라미터 값을 추가해주시면 사용가능합니다. &category..

웹사이트를 만들 때 클라이언트의 요구 혹은 디자이너의 요구로 인해 커서를 내가 원하는 이미지로 변경해야 하는 경우가 생깁니다. 시스템에서 제공해주는 기본 커서로 변경하는 방법은 매우 간단합니다. 시스템 기본 커서로 변경하는 방법 입니다. .link:hover { cursor : pointer; } 가장 많이 쓰이는 방법이며, 특정 태그를 마우스 오버 했을 때 손가락 모양으로 바꾸는 코드입니다. pointer 외에도 기본적인 시스템 커서는 아래 링크에서 확인해 보시면 됩니다. https://developer.mozilla.org/ko/docs/Web/CSS/cursor cursor - CSS: Cascading Style Sheets | MDN CSS cursor 속성은 요소 위에 마우스 커서가 올라갔을 ..

퍼블리싱하실 때 Div 나 li 등의 태그 사이즈 지정해 줄 때 어떻게 하시나요? 저는 box-sizing을 알기 전에는 상당히 복잡하게 했던거 같아요 디자이너가 넘겨준 전체 사이즈에서 border 사이즈 빼고 padding 넣어줄 사이즈 빼고 남은 사이즈를 width로 넣어줬는데요. 다들 그렇게 하셨나요? 물론 디자인 파일을 받아서 작업을 하다 보니 그렇게 계산해서 작업을 한 거고 content-box 방식의 나름 장점도 있겠죠^^ width영역의 사이즈를 고정해서 주고 싶다거나 할때 말이죠 자 여기서 잠깐!! 중간 중간 box-sizing, content-box 이런 말들이 나왔는데 이게 뭐죠? 이게 바로 오늘 알아볼 CSS의 box-sizing이고요~ content-box는 box-sizing의 속..

안녕하세요~ 이번 시간에는 PHP의 explode와 implode에 대해서 알아보겠습니다. 간단하게 설명을 드리자면, explode는 문자열을 특정 문자로 분리해서 배열로 만들어 줍니다. implode는 배열을 특정 문자로 합쳐서 문자열로 만들어 줍니다. 이게 도대체 무슨 말?ㅎㅎ 사실 프로그램 공부하면서 제일 어려운 건 이해가 쉽지 않은 것도 있지만 이걸 왜! 어디에! 써야 하는지를 모르겠다는 게 제일 힘든 거 아닐까요? 물론 저도 처음에 공부할때 그런 어려움이 있었어요ㅠ 자! 일단 어떻게 사용하는지에 대해서 알아볼게요 string implode ( string $glue , array $pieces ) implode를 먼저 알아볼게요.. 사용법은 위와 같습니다. // 결과 a1 is: 1,2,3 a2..

파일 다운로드를 구현할 때 아주 간단하게 a태그를 이용해서 구현을 합니다. 하지만 그렇게 할 경우 파일 경로가 아주 쉽게 노출이 되어버립니다. 보통 노출되어도 크게 상관없는 경우가 많지만 유료 클래스 상품을 구매한다거나 온라인 컨텐츠를 유료로 판매할 경우에는 파일의 경로가 노출되면 쉽게 공유가 되어버리기 때문에 노출을 막습니다. 물론 스토리지나 CDN 서비스 자체에서 경로를 알더라도 권한을 막아 불가하게 설정할 수 있지만 단순 웹호스팅을 이용하거나 보안 설정이 불가피 할 때 PHP에서 파일 경로를 노출하지 않고 원격지 파일을 다운로드를 받을 수 있는 방법을 포스팅 합니다. // 파일을 받을 권한이 있는 지 체크 if($is_guest) alert('다운로드 권한이 없습니다.'); $filepath = "..