JavaScript & jQuery 썸네일형 리스트형 node.js Mobile 디바이스 종류 확인하기 (mobile-detect) 금일 작업을 하다가 접속환경이 PC 인지 모바일인지, 모바일이면 아이폰인지 아이폰이 아닌지에 대한 값을 구분해서 뿌려주는 페이지가 달라져야 하기 때문에 서칭을 하다가 간단하고 쉬운 방법을 찾아서 정리해보려 한다. 'mobile-detect' npm 패키지로서 자세한 설명은 공식사이트에 아주 쉽게 나와 있다. https://www.npmjs.com/package/mobile-detect npm install mobile-detect 실제 사용한 코드 일부를 따오면 const MobileDetect = require('mobile-detect'); app.get("/~~~~/:code", (req, res) => { const md = new MobileDetect(req.headers['user-agent.. 더보기 javascript location.href, location.assign, location.replace 개발을 하면서 페이지를 이동시킬 일이 있다. 특정 이벤트가 발동 되었거나 콜백으로 어떤 값을 저장하고 성공했을 떄 이동시킨다거나 등등 본인이 원할 때 페이지를 이동시키는 경우는 자주 볼 것이다. location.href == 페이지 이동 with history location.assign == 페이지 이동 with history location.replace == 페이지 이동 without history 즉 location.href 와 location.assign 은 동일하다고 생각해도 무방하고 그 둘과 location.replace 의 차이를 알면 되겠다. history 객체에 접근해서 작업할 일이 있거나 웬만하면 뒤로가기 버튼을 눌렀을 때 직전의 페이지로 이동시키고 싶다면 replace 말고 나머지를.. 더보기 배열 중복제거 및 빈 요소 제거 간단히 내가 쓸 메모장용으로 정리해보겠다. 배열 중복제거 const newArray = [...new Set(array)]; // 중복제거 배열 빈 요소 제거 filter를 이용 array.filter(n=> n) // 빈 요소 제거 더보기 <Jquery UI>Dialog 사용하기 jQuery UI 는 jQuery 와 CSS 와 HTML 이 짬뽕된 묶음이라고 생각하면 되겠다. jqery 의 문법형식을 쓰며 HTML로 구조도 바꿀수 있고 부트스트랩처럼 클래스이름을 붙여줌으로써 자동으로 스타일링이 들어간다. jQuery UI를 사용했을 때 (Dialog) 와 사용하지 않았을 때를 비교해서 한번 정리 해보겠다. 먼저 UI 라이브러리를 사용하지 않았을 때 Dialog 의 기능을 대신하려면 직접 템플릿을 만들어서 붙여주어야 한다. $(".crud-c").click(function(){ $("body").append(""+ ''+ ''+ '제목 :'+ ''+ ''+ '아이디 :'+ ''+ ''+ '카테고리 :'+ ''+ '자유'+ '공지'+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ .. 더보기 <JavaScript> 배열 초기화 방법 배열은 하나의 객체에 여러 값들을 담을 수 있기 때문에 유용하게 많이 쓰이기 때문에 실제로 진행중이던 프로젝트에서 그 필요성과 초기화 방법등을 알아보겠다. 먼저 배열 초기화를 선언하는 방법은 한 가지가 아니다. 1. Array.prototype.pop() 함수를 이용해서 반복문을 돌면서 값들을 뺴내는 방법. var wayArray1 = [1,2,3,4,5]; for(var i = wayArray1.length; i++){ wayArray1.pop(); } console.log('wayArray1 = '+ wayArray1); // array = []; 2. length 값을 0 으로 설정 var wayArray2 = [1,2,3,4,5]; wayArray2.length = 0; console.log('w.. 더보기 <javascript> Scope 간단히 말해서 자바스크립트에서 스코프란 어떤 변수들에 접근 할 수 있는지를 말한다. 그 종류엔 전역 스코프와 지역 스코프가 있는데 이름도 전역변수와 지역변수가 떠오르는데 의미도 비슷하다고 볼 수 있겠다 . 접근가능한 정도(범위) == 스코프!! var name = "sanghoon"; // 전역변수 function sayName(){ console.log(name); } console.log(name) // sanghoon sayName(); // sanghoon 전역변수를 선언하면 코드 모든 곳에서 해당변수를 사용 할 수 있다. function sayName(){ var name = "sanghoon"; // 전역변수가 아닌 함수블록내부에 선언 console.log(name); } sayName(); .. 더보기 append(), prepend()의 차이점 오늘은 비슷하지만 매우 다른 용도와 알고나면 엄청 편한 두 함수에 대해 알아보겠다. 우선 간단하게 말하면 1. append() 는 그냥 선택한 블록에 제일 마지막으로 넣어주는 것 (기존의 내용이 있으면 그 뒤에) 2. prepend() 는 그냥 선택한 블록에 제일 첫번째로 넣어주는 것 (기존의 내용이 있어도 그 앞에) See the Pen ExKaJaq by Sang Hoon Jeong (@DevilFront) on CodePen. 위에서 각각 버튼을 눌러보다 보면 두 함수의 차이점을 알 수 있을 것이다. 매우 유용한 것이 가령 본인도 프로젝트 진행 간 게시판 부분에서 특정 캠핑장에 대한 정보를 꼽아주는 부분이 있었는데 사용자 입장에서 생각해보면 사용자는 정해져있는 틀이 없다 후기를 작성하다가 중간에 파.. 더보기 <jQuery> 페이지 이동 시키기 (location.replace()) 우선 이건 내가 프로젝트 진행중에 겪었던 일을 바탕으로 했기 때문에 필요한 사람만 참고하면 될 것 같다. 우리 페이지의 게시판 후기 등록 페이지인데 기존의 태그를 사용하지 않고 진행중이어서 저 등록버튼도 기능을 담고 있지 않은 그저 일반 버튼에 불과한 상태다. 데이터를 컨트롤러단에 보내는 작업은 전부다 jquery ajax 를 이용해서 처리했다. 물론 을 이용해서 submit 으로 편하게 처리를 해줄 수 있었지만 한번 새롭게 해보고 싶어서 데이터를 주고 받고 하는 작업을 ajax를 통해서 했었다. 문제점은 post 방식으로 보내주고 나서 컨트롤러에서 redirect 로 페이지를 변경해주고 싶었지만 작동을 하지 않았다. 글을 등록하면 바로 그 등록된 페이지(detail 페이지)로 가고 싶었는데 그 방법을 .. 더보기 이전 1 2 3 다음
