대가는 결과를 만든다

QR코드 이미지를 전체화면으로 출력하는 예시 const html = document.querySelector('html'); //qr code가 담겨 있는 img dom element 객체로 resource 가져오기 const printContents = document.querySelector(`.qr-code-container`).childNodes[0]; const imgResource = printContents.toDataURL(); //출력할 img dom을 담을 container div 생성 const printDivContainer = document.createElement('div'); printDivContainer.style = ` width:100%; height: 100%; di..

PWA란? Vue나 React Cli로 프로젝트를 만들면서 PWA대헤 아마 한두번씩 마주쳤을 것이다. PWA란 무엇일까? 간단하게 말해서는 웹과 네이트 앱의 이점들을 가지도록 개발된 짬뽕 웹 앱이라고 보면된다. 그럼 Web App과 Native App의 장점들을 한번 가볍게 짚어보자. - Web App : App을 설치할 필요 없이 웹페이지에 접속하면 된다. 링크로 공유가 용의하다. - Native App : 운영체제와 잘 통합되므로 성능이나 UX면에서 더 자연스럽고 부드럽다. 오프라인에서도 동작한다. 한번 설치 후에는 홈 아이콘으로 쉽게 접근 가능하다. 위에 나열한 두 방싱의 장점들을 다 포섭하고자 PWA가 나왔다고 보면된다. 위의 장점들 말고도 더 있을 수 있다. (PUSH 알림 기능 등) PWA는 ..

Web 3D Viewer에서 raycast를 사용하기 위해 마우스의 좌표값을 이용하게 된다. 이때 3D rendering이 되는 canvas의 절대 좌표가 고려되어야 한다. 고려되지 않는다면, 실제 마우스의 위치와 3D viewer 상에서 교차하는 위치가 오차가 발생할 수 있다. (canvas의 절대 좌표 위치가 x:0, y:0이 아니라면) 초기에는 이부분 처리를 viewer의 margin 값을 기준으로 tolerance 값을 하드코딩으로 부여했는데, 당연히 이렇게 부여하는건 부적절하다. 이참에 정리! 1. Viewport : 전체 웹페이지 중 브라우저 상에서 사용자가 보고 있는 화면 부분 2. 절대위치 : 전체 웹페이지 기준으로 해당 Element의 절대적인 위치 3. 상대위치 : 특정 Element ..

- 각 HTTPS와 HTTP의 전송의 경우 내부 데이터를 평문으로 확인이 가능한지를 Wireshark로 패킷 확인 해보자 - 보라색 부분이 HTTPS 통신 패킷, 연두색 부분이 HTTP 통신 패킷 - 각 통신에서 Application Data가 들어 있는 패킷을 열어보았다. (빨간 밑줄 친 패킷) - 위가 HTTPS 패킷(198163), 아래가 HTTP 패킷(198787) - 아래 비교 사진에서 볼 수 있듯이 HTTPS 패킷에서는 전송 내용을 평문으로 확인할 수 없도록 암호화되어 있는 반면에, HTTP 통신 패킷에서는 값이 평문으로 그대로 노출되는 것을 확인할 수 있다. - 이에서 확인할 수 있듯이, HTTP 전송의 경우 데이터 자체를 암호화 하지 않으면 패킷 도청으로 데이터 유출이 가능하다. 알아야할 ..

INTRO SSO는 Single Sign-On의 약자로 한번의 로그인으로 여러개의 다른 도메인을 이용한다는 의미를 담고 있다. 예를들어, 로그인 검증은 A라는 곳에서 하고, B라는 곳에서는 A에서 검증된 로그인 정보라면 검증을 따로 하지 않게끔 하는 것이 SSO에 해당한다. 이런 SSO를 구현하기 위한 대표적인 방법으로 SAML, OAuth가 많이 사용된다. 1. SAML (Security Asserting Markup Language) : (로그인) 인증/인가 정보를 담은 XML : cross domain 상황, 다양한 플랫폼에 관계없이 표준적인 방법으로 SSO 구현이 가능하게 함 : 아래와 같이 3가지의 구성원이 존재 1) Service Provideer (SP) : 서비스 제공 주체 2) User ..

(이슈를 설명하려고 적었던 글이였고, 블로그에 옮기는 과정에서 약간 수정한 글이라 조금 글이 매끄럽지 않음) 이슈 웹뷰가 아닌 일반 브라우저 app(pc, mobile 포함)에서는 모두 http=>https, www.realies.kr=>realies.kr로 redirect를 정상적으로 동작한다. 그런데 라인/카카오톡 같은 메신저에서 홈페이지 url을 공유 후 클릭하면 상황이 달랐다. 라인에서는 아예 웹사이트가 뜨지 않았고, 카카오톡에서는 유효하지 않은 인증서라는 문구가 한번 뜨고 나서 https로 연결이 정상적으로 되었다. 아래 과정으로 수정을 해서 이슈는 해결했지만, 애초에 ACM 인증서 설정 자체를 잘했다면 안해도 됬을 삽질이었다-_-;; 이슈의 원인을 파악하고, 해결한 방법을 설명하는 글로, 글이..

server side에서 swagger ui로 간단히 api 목록 페이지를 구성하려고 하는데, 기본 swagger ui 프리셋에 적용되어 있는 default url을 바꾸는 방법을 찾을 수 가 없다. (기본으로 petstore의 api목록이 뜸) 같은 이슈에 대한 답변을 찾아 기록한다. const fs = require("fs") const express = require("express") const pathToSwaggerUi = require("swagger-ui-dist").absolutePath() const indexContent = fs.readFileSync(`${pathToSwaggerUi}/index.html`).toString() .replace("https://petstore.swa..

최근 frontend 개발 패키지 중 Babel은 필수라고해도 과언이 아니다. 이 Babel에 대한 개념을 정확히 정리하고자 한다. Babel이란? 최신 버전의 자바스크립트 코드를(ECMA 2015+/ES6 코드를) ES5 환경에서 동작하도록 컴파일하는 자바스크립트 컴파일러이다. (트랜스파일러라고 칭하기도 함.) 여기서 말하는 ES5 환경이란 즉 현재나 이전 브라우저 환경을 의미한다. * ECMA자바스크립트 버전에 대한 내용 정리는 다른 글에서 하겠다. babel의 주요 역할을 열거하자면, 문법의 변형 타겟 환경에서 누락되어있는 부분을 보충하는 Polyfill 기능 (런타임에서 보충) 소스코드의 변형 (codemods) 기타 등등(여기서 비디오로 확인하라고 함 : https://babeljs.io/vid..