개발자 도담씨

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

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

혹시 몰라 검수통과했던 설명을 첨부해놓겠습니다. 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..

회사 업무를 하다가 신기한 기능하나를 구현해서 기록하려한다. "웹페이지를 이미지화 시켜 저장하는 방법"이다. 백단으로 넘어가지 않고 라이브러리를 사용해 스크립트만 사용하여 페이지의 일부분을 저장하는 것이다. 해당 기능을 도와준 친구들은 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을 모..

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

저번에 포스팅 한거같은데..아닌가보다. 못찾겠다😋 요즘 웹사이트를 보면 스크롤에 따라 이벤트로 애니메이션을 준 것을 많이 볼 수있다. 예를 들면 LG그룹 홈페이지나, 스타벅스만 봐도 알 수 있다. 아래는 자바스크립트 코드다 :D /*스크롤에 반응하는 박스*/ $("#page .page_event_box").each(function(){ var box_offset=$(this).offset(); var box_top=box_offset.top; //if(window_scroll_top+window_height-50>box_top){$(this).addClass("active");} if(window_scroll_top=box_top){$(this).addClass("active");} //else $(th..

단순 모달창이었다면 포스팅하지 않았겠지만..! 오늘 일을하다가 모달창을 만들었는데 길이 길어서 스크롤이 이중으로 생겨버렸다. 그걸본 사수분이 스크롤 두개는 싫어..! 하시며 fixed시키면 돼요~ 하셨는데 무슨 말인지 못알아 먹어서 하는 포스팅이다. 한마디로 모달창에 스크롤이 생길때 뒤에 있는 친구까지 스크롤이 되는 현상을 막는 방법이다. 정말 간단하지만 생각치 못한거였으므로 살포시 포스팅한다 :D HTML What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1..

프론트작업을 하면서 단순히 디자인을 그대로 옮기는것이 아닌 사용자들의 편의를 생각하는 부분들이 아직 부족한거 같다:_( 처음 웹을 만들때 내가 빠트렸던 사소한 부분들을 정리해 놓을려고한다. +) 나는 의외로 꼼꼼하지 못한거같다..ㅎㅎ 노력해서 점차 나아지는것 같지만... 1. 슬라이드(캐러셀)을 할 때 다음에 컨텐츠가 있다는 것을 나타내기 2. 아이콘이나 이미지등의 깨짐 문제 ( 모바일도 확인해 볼 것 ) 3. 크로스 브라우징 4. 회원가입시 특정 입력값에 조건이 있다면 명시 5. 한페이지에 중복되는 정보가 있는건 자제 ( 촌스러운 요소이다 ) 새로 알아가는 CSS부분들 1. 세로 정렬하는 새로운 방법을 알았다. 부모에 relative가 되어있고, 정렬하고자 하는 태그에 absolute, top:50%,..

2020년에 기존의 인스타그램 API가 중단된다고 하여 새로운(?) 인스타그램 API방법을 사용하기로 했다. 근데 정말이지 답답하다.... 보안상의 이유때문인것 같은데 인증절차가 너무 힘들다..😢 대충 정리해보는 절차는 아래와 같다. 하면서 업데이트할 예정이라 정확하진 못하다. 1. 페이스북 비즈니스 페이지, 인스타그램 비즈니스 계정 필요 ( 방법은 따로 첨부 안함 ) 2. 페이스북과 인스타그램 서로 연결 3. 앱 검수 ( 환장하는 단계 ) 4. 토큰 발급 5. 발급 받은 토큰으로 페이스북 아이디 값 가져오기 6. 페이스북 아이디 값으로 인스타그램 아이디 가져오기 7. 인스타그램 정보 받아오기 인스타그램 정보중 단순히 계정의 정보만 가져온다고 하면 앱 검수는 필요가 없었다. 나는 특정 인스타 계정의 미디..

이 블로그는 내가 공부한것들을 까먹지 않도록 포스팅하는 용도라 간단한 부분들은 슝하고 지나가겠다😅 1. SASS의 변수는 $로 정의한다. 2. 중첩 ( 아래 코드로 설명 끝ㅎㅎ.. ) 아래의 코드처럼 작성후 컴파일 하면 nav{} nav ul{} 처럼 css파일이 작성된다. header { background-color: $header-back; display:block; height:100px; nav { ul { list-style:none; float:right; li{ display: inline-block; a { display: block; padding: 5px 3px; margin:10px 20px; } } } } } 3. 부분화 및 불러오기 설명을 보니 내가 느낀바로는 전역변수를 별도의 ..