CODE CAVE

안녕하세요~ 자바스크립트의 기본에 대해 정리를 한번 해보려고 합니다. 저는 포스팅 하면서 자바스크립트에 대해 리마인드가 되는 효과가 있고 이제 막 자바스크립트를 시작한 분 들에겐 한 눈에 기본을 쭉 볼 수 있는 기회가 되었으면 좋겠습니다. 자바스크립트를 공부하기 앞서 가장 먼저 해야할 일은 실습 환경 구성 일 것입니다.저는 개인적으로 어떤 새 언어를 공부할 때 실습환경 구성할 때가 가장 설렙니다 ㅎㅎ 공부할 것에 대해 설레고 그 것을 준비하는 과정이 즐겁더라고요. 마치 내가 원하는 집으로 이사 갈 때 이사짐 싸는 것 처럼 설렙니다! 아무튼 본론에 들어가서, 자바스크립트만 공부한다는 가정을 두고 실습환경을 말씀드리자면 서브라임텍스트와 크롬브라우저. 이 2가지면 실습 준비 끝입니다. 다른 언어는 별도의 컴파..

자바스크립트는 맨 처음 나오게 된 계기는 브라우저에 랜더링 된 정적인 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 하실 때 참고하시라고 제가 작업했던 내용을 공유드리려고 합니다...

개인적으로 인텔리제이는 강력한 IDE로서 안되는게 없는 엄청난 툴이라고 생각합니다. 그래서 그런지 세계적인 기업인 구글에서 인수하고 이를 기반으로 안드로이드 스튜디오를 만들었나봅니다. 일단 제가 뭐 메뉴얼을 갖고 있는게 아니라서 하나하나 생각날 때마다 정리하려고 합니다. 개인 적인 바램은 제가 적지 않은 단축키 말고 다른 유용한 단축키를 알고 계신 분이 계시다면 댓글로 공유해주셨으면 좋겠어요! 서로 지식은 공유하는 것 이니까요. ㅎㅎ ---- IntelliJ 단축키 ---- # Command + Option + L소스코드 정렬. 코드 들여쓰기나 탭 등을 이쁘게 정렬 해줍니다. - 남의 소스코드를 받고 유지보수를 하게 되었을 때 소스코드가 더러우면 제가 종종 쓰는 단축키 입니다. # Command + F ..

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

쿠키 값을 확인하고 변조하는 일은 아마 해킹 보안 쪽 공부하시거나 일하시는 분들이 많이 하는일이 아닐까 생각이 드는데요 저도 보안을 잠깐 공부 했었는데 편한 툴을 쓴다기보단 기초를 가르치기 위해서 노가다 성인 작업이 꾀 많았었습니다. 하지만 기초를 익혔다면 그 이후 부터는 툴의 도움을 받아야 공부 시간이던 일의 시간이던 절약할 수 있지 않을까요? 그래서 이번에는 쿠키의 값 확인 및 변조를 할 수 있는 방법을 소개하고자 합니다. 쿠키 값 확인은 크롬 개발자도구 (F12, 맥에선 Command+Option+I) 에서도 아래 처럼 쿠키 값 확인이 가능합니다만 편집은 불가합니다. 확인만 하실 용도라면 크롬개발자 도구도 충분히 편리합니다. 하지만 이번엔 확인 및 변조가 모두 가능한 툴을 소개시켜드리고자 합니다. ..

이번 포스팅으로 공유드릴 내용은어떤 날짜가 있을 때, 그 날이 무슨 요일인지 구하는 코드 입니다. 왠지 많이들 필요하실 것 같아서 생각할 시간을 줄이고 복붙 하실 수 있게 도움이 되고자 공유드립니다!아래 제가 작성한 소스코드 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 문에서는 이 프로퍼..