Hello,

kok nae-ga ha-myun an-dweneun MAGIC...🧚

웹 프로그래밍 119

웹 프로그래밍
[ MySQL ] 그룹별 최근 n개의 데이터 가져오기

저번엔 가장 최근데이터 가져오기를 짤막하게 포스팅했는데 이번엔 그룹별 최근 데이터를 가져오는 일이 생겼다. 사실 저렇게 해야하는줄 알았는데 어차피 반복문 돌려서 배열을 만들었어야 했지만.... 아래 참고 블로그링크를 걸어 놓겠다. 똑같은 쿼리지만 그래도 내가 글을 적어놓는게 한번 더 기억할거니까 :) 헣허... 컬럼이 좀 많지만 다 무시하고 우선 내가 원하는 목표는 eventId로 묶은 그룹별 최신 데이터를 두개만 가져오는 것이었다. 그러니 eventId와 regDate를 사용하게 될 것 같다. SELECT *, rnum FROM( SELECT a.*, (CASE @groupId WHEN a.eventId THEN @rownum:=@rownum+1 ELSE @rownum:=1 END) AS rnum, (..

2020.03.13 ﹒ 18:44
웹 프로그래밍/공부일지
[ 원페이지 스크롤 + 일반 스크롤 ] 화나서 직접 만든 원페이지 스크롤 2탄

2019/08/01 - [웹 프로그래밍] - [ JS / jQuery ] 화나서 직접 만든 원페이지 스크롤 [ JS / jQuery ] 화나서 직접 만든 원페이지 스크롤 검색해보면 좋은 원페이지 스크롤 플러그인들이 많다... 잘 만들었지만.. 내가 원했던건 원페이지 스크롤과 일반 스크롤이 합쳐진 것.. 그러니까 원페이지로 잘 가다가 특정 부분에선 일반 스크롤이 되었으면 했던.. do-dam.tistory.com 제 블로그에서 많은 요청을 차지하고 있는 원페이지 스크롤을 이제서야...하하 다시 다룬다. 크게 바뀐점은 없다 여전히 하드 코딩이고 버그가 있다. 예전 코드가 벌써 1년전이라 다시 만들어볼겸 + 원페이지 스크롤 부분과 일반 스크롤을 섞어서 가능하게끔 해놨다. 그래서 원랜 코드좀 이쁘게 라이브러리 ..

2020.03.12 ﹒ 18:16
웹 프로그래밍
다중 정렬 ( 드래그 앤 드랍 )

회사에서 어떤 리스트를 다중 선택 드래그 해달라는 요청을 받아 코드를 열어봤더니 table을 사용하셔서 그런지 tableDnD라는 라이브러리를 사용해 놓으셨었다. 단점이 다중 선택이 안되고 스크롤 인식이 fixed되어 있는 느낌..? 그러니까 브라우저창 기준으로 스크롤 하고 있지 않은 리스트였는데 스크롤 하고 있는 태그가 아닌 body기준으로 드래그앤 드랍 기준을 잡는것 같았다... 그래서 사수라고 해야하나..? 옆분에게 여쭤보니 코드 결국 바꾸어야 한다며.... sortable을 사용할려고 하니 테이블은 또 ui가 깨지더라구 증말이지^^ 어찌됐든 저찌됐든 간단하게 업데이트를 해주려고 했으나 시간이 걸릴 작업이기에 양해를 구하고... 이번 포스팅은 multisortable을 쓰기 위해 코드를 고치며 해당..

2020.03.06 ﹒ 11:24
웹 프로그래밍/공부일지
[Node.js] 실시간 멀티 채팅 만들기 3탄 (브로드캐스팅)

[Node.js] 실시간 멀티 채팅 만들기 1탄 [Node.js] 실시간 멀티 채팅 만들기 2탄 대망의 3탄 서버에 사용자가 보낸 문자열을 받았으니 이제 뿌려주기만 하면 된다💪 socket.io에서는 연결된 모든 소캣에 이벤트를 발생시키도록 하는 해당 함수를 사용할 것이다. 함수명도 외우기 쉽다. ( emit : 방출하다 ) io.emit('some event', { someProperty: 'some value', otherProperty: 'other value' }); 해당 이벤트를 메세지 받고 발생 해주어야 하니 2편에서 등록했던 chat message 이벤트 발생시 메세지를 방출 하도록 해놨다. socket.on('chat message', function(msg){ console.log('me..

2020.02.23 ﹒ 16:19
웹 프로그래밍/공부일지
[Node.js] 실시간 멀티 채팅 만들기 2탄

[Node.js] 실시간 멀티 채팅 만들기 1탄 [Node.js] 실시간 멀티 채팅 만들기 1탄 Node.js라는 친구를 소개하고 멀티 채팅 구현글을 임시 저장해놓고 시간이 없다는 핑계로 일주일을 방치했더니 날아가버려서 다시 쓴다^^... 정리 잘해놨는데... 참고 블로그 - https://jinblog.kr/156 Socket.IO.. do-dam.tistory.com 1편은 사실 맛보기 였던것 같다. 아직도 너무 신기한 기술이다. 👍 1편에선 res.send()를 통해 html 문자열을 반환하여 보여주었는데, 이렇게 관리하기엔 힘들테니 이번엔 html파일을 호출해보자 :D socket.io의 예제 html을 스타일만 변경했다. html코드는 요로코롬...! 전송 그리고 1편에서 작성했던 index.j..

2020.02.20 ﹒ 12:42
웹 프로그래밍/공부일지
[Node.js] 실시간 멀티 채팅 만들기 1탄

Node.js라는 친구를 소개하고 멀티 채팅 구현글을 임시 저장해놓고 시간이 없다는 핑계로 일주일을 방치했더니 날아가버려서 다시 쓴다^^... 정리 잘해놨는데... 참고 블로그 - https://jinblog.kr/156 Socket.IO 문서 - https://socket.io/docs/ Node.js로 실시간 멀티채팅을 하기위해 뒤져보니 socket.io라는 친구가 필요했다. socket.io가 뭐야? 하고 검색을 해보니 웹소켓을 기반으로 실시간 웹 기술을 모아 하나의 API로 만든 Node의 모듈이다. 브라우저와 웹 서버의 종류, 버전을 파악해 기술을 선택해서 브라우저의 호환성은 좋은듯 하다 :) 신기해 계속 이어서 또 웹 소켓에 대해 검색 해봤다. 소켓을 검색 해보니 "응용 프로그램에서 TCP/I..

2020.02.14 ﹒ 18:11
웹 프로그래밍/공부일지
[ jQuery ] 컬러피커 플러그인 minicolors

jQuery에 컬러피커를 지원해주는게 있어 포스팅해본다. 깃허브 - https://github.com/claviska/jquery-minicolors 참고 - https://labs.abeautifulsite.net/jquery-minicolors/#instantiation 깃허브에서 zip파일을 받아 압축을 풀어 여느 플러그인처럼 자바스크립트 min파일과 스타일시트 min을 넣어줬더니... 이렇게 나온다... 컬러피커의 색상이 제대로 표시되지 않는다 ㅠㅠ... 아니 다들 스크립트랑 스타일시트만 넣어주더만 왜 나한테만 이러는거야? 했더니 안되는데엔 다 이유가 있는 것이여라^-^;; 콘솔 에러와 폴더를 다시보니 이미지 하나를 못 불러오는 듯 했다. 폴더에 보면 jquery.minicolors.png 라는 ..

2020.02.13 ﹒ 14:40
웹 프로그래밍/공부일지
인스타그램 그래프 api 검수 완료😭

혹시 몰라 검수통과했던 설명을 첨부해놓겠습니다. Facebook 검수자가 회원님이 Facebook 플랫폼 정책에 따라 권한 또는 기능을 사용하고 있는지 확인하기 위해 회원님의 앱에 액세스하거나 로그인할 수 있나요? 1. "사이트URL" 으로 이동 2. 페이스북 로그인 버튼 클릭 3. 권한 요청 ( public_profile,email,manage_pages,instagram_basic ) 4. 로그인한 사용자의 페이스북 앱 ID 및 연결된 비즈니스 인스타그램 미디어 불러오기 5. 화면에 가져온 미디어 표시 instagram_basic **페이스북 로그인 및 인스타그램 미디어 받아오는 방법 1. 사이트URL" 으로 이동 2. 페이스북 로그인 버튼 클릭 3. 권한 요청 ( public_profile,emai..

2020.02.07 ﹒ 11:15
웹 프로그래밍/공부일지
[html2canvas] 웹 화면을 이미지로 저장하는 방법 ( 캔버스 )

회사 업무를 하다가 신기한 기능하나를 구현해서 기록하려한다. "웹페이지를 이미지화 시켜 저장하는 방법"이다. 백단으로 넘어가지 않고 라이브러리를 사용해 스크립트만 사용하여 페이지의 일부분을 저장하는 것이다. 해당 기능을 도와준 친구들은 html2canvas라는 친구다 :D https://html2canvas.hertzen.com/ html2canvas - Screenshots with JavaScript Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture html2canvas.hertzen.com 자바스크립트 코드만 간단히 들고 왔다. download버튼을 클릭시 section을 모..

2020.02.05 ﹒ 13:01
웹 프로그래밍/공부일지
[ Node.js ] Node.js 친구 소개 시간 :)

프론트엔드라면 공부해야할...! Node.js와 react.js를 올해 공부하려구 한다. 아마 회사에서 사용할 것 같지는 않아서 따로 프로젝트까지 하나 하는걸로 :D Node.js에 들어가기 앞서 이 친구가 뭔가에 대해 적어보려한다. 머리가 나쁜 나는 이친구가 뭔지에 대해 알기 위해 여러 node에 대한 글을 여러개 읽었다 🤨 여러개를 종합한 Node라는 친구는 자바스크립트 기반의 언어이며, 브라우저에서만 돌아가는 js를 서버처럼 사용할수 있도록 Chrome V8 엔진을 이용해 확장 시켰다고 한다. 크롬 엔진을 이용했다고 하길래 그럼 IE에서는 돌아가지 않겠네?! 하며 봤더니 일부 코드 수정을 하면 되는 것 같다. ( 추후에 Node.js를 IE에 사용하는 방법 참고 - https://jsdev.kr/t..

2020.01.23 ﹒ 18:07