서버에서 다운받은 바이너리 데이터를 img 태그에 넣고 이미지로 표시하는 방법?

바이너리 데이터 서버에 이미지를 저장한 후, 그 이미지를 바이너리 데이터로 가져오면 콘솔에서 아래와 같이 출력됩니다. 이것이 바이너리 데이터라는 것만 이해하고, 어떻게 변환해서 이미지로 출력해야 할지 몰라서.. base64로 디코딩, 인코딩 등등 별짓을 다해봤으나 실패했죠...! POSTMAN에선 이미지 불러와짐? 그런데 postman에서 통신해 다운받아보면 이미지가 잘 불러와집니다. GET 사용하고, URL + '/ws/upload/1' (1번 이미지 파일) 이런 식으로요! 그럼 통신이나 서버엔 문제가 없고, 중간 과정에서 어떤 문제가 있을 것이라고 파악이 됐습니다. 하지만 여전히 방법은 몰랐고, 시간은 흘러갔습니다.. 해결 열심히 찾던 중 역시 갓구글... 찾았습니다...!! 해석이 구글 번역기 돌린..

→2021.06.25

Language/React

React 장단점 분석 정리

안녕하세요 프론트엔드개발자 웹코기입니다. React 공부를 계속하면서 실무에서 사용해왔지만, 장단점을 직접 말로 해보려고 하니 제 머릿속이 정리가 안돼서 난잡해지더라고요. 그래서 오늘은 스스로 정리도 할 겸 React 장단점에 대해 분석해보겠습니다!! React 장점 1. Virtual DOM 사용 DOM 이란? 문서 객체모델 (Document Object Model) 말이 어려워서 쉽게 머리에 들어오지 않으실 텐데요, 쉽게 생각하면 html 태그 하나하나의 요소를 지칭한다고 생각하시면 되겠습니다. Real DOM 이란? Real DOM = 실제 DOM 처리 기존 Javascript & jQuery는 real DOM을 사용합니다. (최근 떠오르는 스벨트도 Real DOM을 사용한다고 합니다...) DOM..

→2021.06.09

Language/JS

브이월드) 내가 찍은 좌표대로 경로 이동하기 [결론 : 실패]

cameraAction 객체를 사용해보자 안녕하세요 웹코기입니다. 요즘 사내 프로젝트를 위해서 브이월드에 대해 홀로 연구중입니다. 브이월드에는 'cameraAction' 객체안에 비행모드, 운전모드 등 지도위에서 실제로 달리는 듯한 카메라모션을 경험해볼 수 있습니다 !! 아래는 운전모드 코드샘플예제입니다. 공간정보 오픈플랫폼 오픈API (vworld.kr) 공간정보 오픈플랫폼 오픈API 웹지엘 3D지도 API 2.0 레퍼런스 웹지엘 3D지도 API 2.0 레퍼런스를 제공합니다. www.vworld.kr 내가 찍은 좌표 구간을 cameraAction 객체를 이용해 시뮬레이션해보자 저는 현재 실무에서 이 카메라액션을 이용해, 내가 찍은 여러개의 좌표대로 이 액션을 취하는 것을 목표로 하고 있습니다. 하지만 ..

→2021.06.08

Language/JS

websocket 사용하기 (라이브러리X)

안녕하세요 웹코기입니다. 저는 현재 사내에서 웹소켓을 이용해 실시간 채팅 기능을 구현하고 있습니다. 웹소켓은 개념 정도만 알고 있었는데, 역시 실제로 사용해보니 어떤 녀석인지 확 와닿더군요...!! 기존에 서버에서 통신할 땐 ajax나 axios만 사용했던 터라 단방향 통신에만 익숙했었는데요, websocket을 이용해 양방향 통신을 해보니 신세계네요 :) websoket.io나 다른 웹소켓 관련 라이브러리를 사용하면 더 편하게 사용할 수 있는 것으로 파악됐으나, 저는 사내 프로젝트가 프런트엔드 프레임워크나 nodejs를 사용하지 않은 이미 날 것(?)의 재료를 썼으므로, 저 또한 날 것의 websocket을 쓰기로 했습니다. 아래는 라이브러리를 전혀 사용하지 않고 작업한 소스입니다. 웹에 갖다 붙이면 ..

→2021.06.07

Language/HTML

<head>의 css, js파일에 조건걸기 (<link>, <script> 파일 import)

꼭 CSS, JS를 항상 import 해야할까?? 안녕하세요 프론트엔드개발자 웹코기입니다. 프로젝트 규모가 커지다보면 css, js 파일의 개수가 많아지게 되는데요. 프로젝트의 페이지를 하나씩 열때마다 모든 css, js가 읽히는 것이 너무 비효율적이라고 생각했습니다. 해당 페이지에 들어갔는데 그 페이지에 필요없는 코드도 읽어버리면 그만큼 속도가 느려지게 될테니까요...!! react와 같은 프론트엔드 프레임워크를 사용하면 이 문제가 자연스럽게 해결되겠지만 ... 그렇지 않은 경우에는 1) ... 대신 이렇게 할 경우, 내부 함수를 즉시 사용하려면 DOM이 모두 준비됐을 때 실행해야 먹힙니다. 따라서 함수를 사용하려면 window.load안에다가 꼭 넣어줍시다. $(document).ready(funct..

→2021.06.04