웹 만드는 또름이

파일 업로드를 할때 간단히 올라갈 파일의 미리보기를 제공 해 줄수 있는 방법이다. 바로 URL API의 createObjectURL 메소드를 이용하는 방법인데 해당 메소드는 주어진 객체의 URL을 받아 DOM으로 반환하여 보여준다. *해당 페이지에서만 사용이 가능한 것이 특징* 사용 가능한 매개변수로는 File, Blob, MediaSource가 있다. 즉 파일을 서버에 업로드하지 않고도 createObjectURL 메소드를 통해서 DOM객체를 생성 할 수 있단 말! 헐레벌떡 구현해 보았다. 복잡할 것 없이 HTML은 심플하게...! 업로드 Input과 미리보기 이미지가 보여 질 imgArea 라는 DIV를 생성했다. 스크립트 부분도 크게 복잡한게 없다. 파일 Input change시에 createObj..

저번글에서 페이지 아래에 도달하면 jquery 이벤트를 실행 되도록 작업하였다 https://ddorm.tistory.com/5 jQuery + Ajax로 인피티니 스크롤, 무한 스크롤을 구현해보자. -1- 게시판 리스트를 pagination 형식에서 무한 스크롤 형식으로 변경해 달라는 요청이 있었다. 계속 테스트를 하면서... 나도 사실 많은 게시물을 페이지를 넘나들며 보기엔 너무 귀찮았다. 비록 장점 ddorm.tistory.com 이번글에서는 Ajax를 이용해서 데이터를 불러오는 작업을 해보도록 하겠다. 현재 테스트에 사용되고 있는 쿼리는 페이지의 갯수를 정해놓고 paging 변수를 받아 LIMIT을 주는 형식으로 짜여져 있다. 예) 50개의 목록을 가진 게시판 2page = SELECT * FRO..

쌀쌀한 일요일 저녁, 출출해하시는 대장님에게 뭘 대접해야 불똥이 안튈까 고민고민 하는 찰라 어제 홈플러스에서 홀린듯 사온 녀석. 이춘삼짜장라면을 끓여보았다 이춘삼이 짜장의 대부, 장인인가? 근데 4개에 이천원??? 지리는 가성비에 홀린듯 사온 두봉지... 시원하게 개봉했다. 뭐 흔한 후레이크 스프하나 없는걸 보니 역시 500원짜리 가성비짜장인가... 하고 실망했지만 없으면 만들어넣으면 되잖아???? 하고 냉장고를 뒤져 끓이기 시작! 다짐육 조금, 파 약간을 식용유 둘러 볶아볶아해준다. 이춘삼에는 액상스프에도 건드기가 읍어요~~~ 고기가 적당하게 익어보이면 양파투하! 양파의 식감이 완전히 죽지않게 조금 늦게 넣구 볶아 준다. 이쯤되면 짜장라면이고 뭐고 그냥 맛있겟다.... 그 사이 옆에서 면을 팔팔 끓여준..

오늘은 부동산에 볼일이 있어 나간 김에 오랜만에 좋아하는 커피집을 방문했다.COMAGINE ESPRESSO라는 카페인데 처음 한번 먹고. 우와우와 했었던...ㅎㅎ주택가 골목에 위치해 있지만 입소문이 나서인지 손님이 자주 드나들었다.테이크아웃 손님도 자주 보이고...항상 방문하면 소금이 첨가되어 짭짤하고 부드러운 서남라테와 설탕알갱이가 오독오독 씹는 맛이 있는 아수카르를 먹는데나는 월요일 대장내시경 관계로 라떼를 못 먹어서ㅠㅠㅠㅠㅠ 아메리카노를, 같이 간 대장님은 항상 먹던 아수카르를 주문했다.개인적으로 서남라떼가 정말 맛있다고 생각되는데 아수카르는 설탕알갱이와 함께 씹는 맛이 있고, 설탕이다 보니 달콤하다!!!!! 맛있다!!!!다른 분들은 서남라떼만 먹으면 된다고들 하시는데 아수카르도 꼭 드셔보세요.....

게시판 리스트를 pagination 형식에서 무한 스크롤 형식으로 변경해 달라는 요청이 있었다. 계속 테스트를 하면서... 나도 사실 많은 게시물을 페이지를 넘나들며 보기엔 너무 귀찮았다. 비록 장점과 단점이 명확한 방식이지만, 또 생각없이 쭉쭉 보기에는 이만한게 없지. 이왕 작업할거 나중에 작업하기도 편하게 블로그에 적어놓고 틈틈히 고도화? 해야겠다. 인피니티 스크롤 즉 무한 스크롤 이라고도 불리는 형식은 여러곳에서 볼 수 있다. 대표적으로 인스타그램 이라던지 트위터 라던지... 리스트에서 페이지 번호가 달려있지 않고 쭉쭉 드래그 하여 새로운 게시물 들이 막 불러와지는 그 기능... 맞다. 시작하기 앞서 500개의 임의 데이터를 집어넣고 기존의 방식대로 pagination 형식으로 리스트를 뿌려보았다...

여러분들의 모든 말씀이 옳습니다. 많이 가르쳐 주세요...! 작업 내용 1. 이미지가 존재하는 DIV가 있다 2. 해당 이미지를 클릭하였을 경우 이미지에 대한 위치정보를 가져온다 - (저번에 썼음) 3. 필요한 값을 별도의 입력폼으로 입력받아 해당 위치에 플로팅한다. - (어제 썼음) 4. 플로팅된 리스트를 나열하여 수정 OR 삭제가 되도록 한다. - (오늘 내용) 어제 작성한 글을 통해서 이미지 위에 해당 태그를 올리는 것 까지 작업해두었다 허나 문제는 픽셀로 top과 left를 잡아 올리면 디바이스에 따라 이미지 width 와 height가 바뀔시 엄한곳을 찍는다는것...!! px로 css 적용시키지 말고 계산해서 %로 변경하세용... 오늘은 리스트표시 & 태그 내용 수정 및 삭제를 할 수 있도록 작..

여러분들의 모든 말씀이 옳습니다. 많이 가르쳐 주세요...! 작업 내용 1. 이미지가 존재하는 DIV가 있다 2. 해당 이미지를 클릭하였을 경우 이미지에 대한 위치정보를 가져온다 - (어제썼음) 3. 필요한 값을 별도의 입력폼으로 입력받아 해당 위치에 플로팅한다. - (이번 내용) 4. 플로팅된 리스트를 나열하여 수정 OR 삭제가 되도록 한다. - (나중에써야징) 1번글을 통해 간단히 img tag를 클릭하였을 시 좌표를 반환하는 것을 만들었었는데 좀 더 심화해서 이미지 클릭 > 태그 입력폼 보여주기 > 입력버튼을 통하여 태그 플로팅 하기 기능을 만들어봤당. 어제의 html 태그 아래 입력폼을 간단히 만들어준다. ( inputArea ) 클릭하기 전에 입력폼이 나와있으면 안되니까 기본적으로 inputAr..

작업 필요 내용 1. 이미지가 존재하는 DIV가 있다 2. 해당 이미지를 클릭하였을 경우 이미지에 대한 위치정보를 가져온다 3. 필요한 값을 별도의 입력폼으로 입력받아 해당 위치에 플로팅한다. - (나중에써야징) html로 간단히 div와 img 태그를 작성해준다. 이벤트 바인딩 (이미지를 클릭했을때만 작동되도록 이미지에) 이미지를 클릭후 console.log로 해당값 확인 (x,y값) $(this)[0] 부분을 console.log로 찍어 보면 다양한 값들을 확인 할 수 있으니 한번 둘러봐도 좋을듯 아래는 지금까지 소스...