본문 바로가기
반응형

전체 글88

websocket 사용하기 (라이브러리X) 안녕하세요 웹코기입니다. 저는 현재 사내에서 웹소켓을 이용해 실시간 채팅 기능을 구현하고 있습니다. 웹소켓은 개념 정도만 알고 있었는데, 역시 실제로 사용해보니 어떤 녀석인지 확 와닿더군요...!! 기존에 서버에서 통신할 땐 ajax나 axios만 사용했던 터라 단방향 통신에만 익숙했었는데요, websocket을 이용해 양방향 통신을 해보니 신세계네요 :) websoket.io나 다른 웹소켓 관련 라이브러리를 사용하면 더 편하게 사용할 수 있는 것으로 파악됐으나, 저는 사내 프로젝트가 프런트엔드 프레임워크나 nodejs를 사용하지 않은 이미 날 것(?)의 재료를 썼으므로, 저 또한 날 것의 websocket을 쓰기로 했습니다. 아래는 라이브러리를 전혀 사용하지 않고 작업한 소스입니다. 웹에 갖다 붙이면 .. 2021. 6. 7.
시놀로지 나스) nodejs App 영구적으로 실행하기 안녕하세요 프론트엔드개발자 웹코기입니다. 전 예전부터 가정용 나스서버를 구매해 사용 중이었지만, 지식이 부족해 활용도가 많이 낮습니다. 다른 패키지나 서버사이드 언어의 사요 없이 FTP 대용으로 사용하는 정도랄까요.. 시놀로지 나스 패키지센터에 가보면 정말 많은 종류의 앱을 볼 수 있습니다!! 하지만 정작 알고 사용하는 건 몇 개 없다는 사실...ㅜㅡㅜ 어쨌든 전 nodejs 작업 후 로컬이 아닌 서버에서 그대로 작업 결과물을 보고 싶어서 찾던 도중 방법을 발견해 공유하고자 이 글을 씁니다. 1) nodejs를 패키지센터에서 설치 우선 node.js를 설치해야겠죠?? 시놀로지 나스는 클릭만으로 사용자가 편하게 사용할 수 있도록 되어 있습니다. 패키지센터에 가서 node.js를 설치해줍니다. 클릭 한 번만.. 2021. 6. 6.
<head>의 css, js파일에 조건걸기 (<link>, <script> 파일 import) 꼭 CSS, JS를 항상 import 해야할까?? 안녕하세요 프론트엔드개발자 웹코기입니다. 프로젝트 규모가 커지다보면 css, js 파일의 개수가 많아지게 되는데요. 프로젝트의 페이지를 하나씩 열때마다 모든 css, js가 읽히는 것이 너무 비효율적이라고 생각했습니다. 해당 페이지에 들어갔는데 그 페이지에 필요없는 코드도 읽어버리면 그만큼 속도가 느려지게 될테니까요...!! react와 같은 프론트엔드 프레임워크를 사용하면 이 문제가 자연스럽게 해결되겠지만 ... 그렇지 않은 경우에는 1) ... 대신 이렇게 할 경우, 내부 함수를 즉시 사용하려면 DOM이 모두 준비됐을 때 실행해야 먹힙니다. 따라서 함수를 사용하려면 window.load안에다가 꼭 넣어줍시다. $(document).ready(funct.. 2021. 6. 4.
google material-icons 홈페이지에 적용하기 (outlined, filed, Rounded, sharp, tow tone) 폰트 아이콘이란? 안녕하세요 웹코기입니다. 보통 홈페이지에서 아이콘은 이미지로도 사용하지만, 모바일도 지원해야 할 경우에 이미지의 크기를 조정해야 합니다. 이미지의 크기를 2배 이상으로 넣어야 하고, 크기를 마음대로 늘리고 줄일 경우 깨짐 현상이 발생할 수도 있습니다. 이런 경우에 사용하는 것이 폰트 아이콘이죠! 폰트 아이콘은 말 그대로 폰트 스타일 내부에 아이콘을 삽입해 제공함으로써 벡터 이미지의 형태를 띠게 됩니다. '폰트'이기 때문에 사이즈나 컬러도 마음대로 조정할 수 있습니다. 물론 깨지지도 않고요!! google material icons 적용하기 google material icons는 사용성 높은 폰트 아이콘 중의 하나이며 이 재료의 강력한 점은 한 아이콘에도 여러 가지 스타일을 제공한다는 .. 2021. 6. 4.
브이월드) x,y,z 좌표 값 가져오기 (webGL 3D) 안녕하세요 웹코기입니다 ! 요즘 브이월드를 이용해 사내 프로젝트를 개발 중입니다. 아래의 링크를 보면 코드 샘플 예시가 잘돼 있어서, 커스텀하기에도 큰 무리가 없을 줄 알았습니다만... 브이월드 커스텀을 위해 가장 필요하고 기본적인 X, Y, Z 좌표를 가져오는 것부터가 막혀서 애를 먹었습니다. 하지만 알아냈어요!! 그 내용을 공유하겠습니다 :) https://www.vworld.kr/dev/v4dv_opnws3dmap2exam_s001.do 공간정보 오픈플랫폼 오픈API 웹지엘 3D지도 API 2.0 코드샘플 웹지엘 3D지도 API 2.0 코드샘플을 제공합니다. www.vworld.kr 맵 초기화 그럼 좌표를 가져와봅시다. 우선 좌표를 가져오기 전에 기본적인 지도 생성부터 시작합니다. 지도 생성은 위 .. 2021. 6. 3.
브이월드) 정부제공 지도플랫폼 알아보기 안녕하세요 프론트엔드 개발자 웹코기입니다. 여러분은 지도하면 어떤 플랫폼이 떠오르시나요?? 주로 네이버 지도, 카카오 맵, 구글맵이 떠오르실 거라 생각합니다. 이번에 V world는 지도 플랫폼을 접하게 되었는데요, 눈에 띄는 장점이 있어 공유하고자 글을 씁니다. 브이월드란? 브이월드는 국가에서 제공하는 지도입니다. 본 사이트에서는 '민간 활용이 본 오픈 플랫폼의 궁극적인 목적'이라고 적어놓았는데요! 공식문서를 봤을 때, 사용하기 정말 편리하게 잘 정리가 되어 있다는 느낌을 받았습니다. 그리고 모두 자바스크립트를 이용해 작성되어 있기 때문에 기존 웹 개발자라면 어렵지 않게 접근이 가능합니다. 그럼 구체적으로 브이월드가 어떤 장점을 갖고 있는지 알아볼게요 브이월드 장점 브이월드는 국가정보를 지도 위에 표현.. 2021. 5. 28.
반응형

티스토리툴바