본문 바로가기

분류 전체보기518

node.js 서버배포 후, https 리소스 요청으로 화면 깨지는 문제 해결 방법(helmet 모듈) # 문제 현상 node.js 웹서버를 배포, 기동 후 접속했는데, CSS, JS, 이미지 리소스 로드에 실패하여 화면이 깨지는 현상이 발생할 때가 있다. (자바스크립트를 로드하지 못해서 웹페이지 자체가 작동을 안 하기도 한다) 브라우저 개발자도구의 network탭을 보면, CSS, JS, 이미지 등을 모두 HTTPS로 요청하면서 리소스를 불러오지 못해 에러가 발생하는 케이스일 가능성이 있다. 이 경우, node.js의 미들웨어에 helmet 모듈을 장착한건 아닌지 확인해보자. app.use(helmet()); helmet 모듈은 웹 취약성으로 부터 웹서버를 보호하는 역할을 하는데, 내부적으로 다음의 코드를 실행한다. app.use(helmet.contentSecurityPolicy()); app.use(.. 2021. 1. 25.
node.js puppeteer 리눅스VM 실행 불가 해결 방법(CentOS, 우분투): Failed to launch the browser process AWS, GCP, Azure 와 같은 클라우드 VM환경에서 puppeteer 패키지(모듈)을 사용하면 에러가 발생하는 경우가 많다. (내 컴퓨터 개발환경에선 잘 되는데, 우분투나 CentOS 환경의 클라우드에 배포하면 안 될 가능성이 높다.) 원인과 해결책을 정리해본다. # 해결책1: 기본 모듈 설치 1. puppeteer 설치 : sudo npm install puppeteer (참고) puppeteer를 설치하면 자동으로 Chromium 브라우저가 다운로드 된다. 2. puppeteer-core : sudo npm install puppeteer-core 그러나, 설치한 이후에도 아래와 같은 에러 메시지가 뜨는 경우가 많을 것이다. Failed to launch the browser process! .. 2021. 1. 24.
[자바스크립트] html table 태그 행(tr) 개수 파악 방법(+ 전체 행 삭제) 자바스크립트만으로 table태그의 행 갯수를 파악하고, 특정 행이나 전체 행을 삭제할 수 있다. # HTML table 행 갯수 파악 방법 : table태그.rows.length [HTML코드] table 태그의 id 값을 'myTable'로 주었다. 항목 가격 사과 1,000 귤 500 [Javascript코드] table태그를 취득 후, 행의 개수를 숫자로 출력한다. const $table = document.getElementById('myTable'); // table 엘리먼트 취득 console.log($table.rows.length); // 3, 행 갯수 출력 테이블의 행을 삭제할 때, 아래와 같이 활용할 수 있다. # HTML table 행 전체 삭제 방법 : table태그.deleteRo.. 2021. 1. 23.
[HTML] number타입 INPUT입력창에 소수점 입력 허용 방법(step속성 활용) 아래와 같이 number 타입의 input 입력창을 생성하면, 아래처럼 소수점 입력이 안 된다... 자바스크립트 없이 해결하는 방법이 있다. 즉, INPUT 엘리먼트의 속성 조정만으로 "소수점 입력"을 가능하게 할 수 있다. # INPUT:number 태그에 소수점 숫자 입력 방법 => step 속성 설정 1. 소수점 1자리까지 입력 설정: input태그에 step="0.1" 속성 추가 2. 소수점 2자리까지 입력 설정: input태그에 step="0.01" 속성 추가 이렇게하면 소수점 숫자도 입력이 가능해진다. (물론 number 타입이므로, 숫자외의 문자 등은 입력이 불가하다) # step 속성이란? : step속성은 input 입력창의 숫자 간격을 설정하는 속성이다. : number 타입의 inpu.. 2021. 1. 22.
마진 통합 계산기(수수료, 부가세, 종합소득세, 마진금액, 마진율 등): 도구마스터 # 마진 통합 계산기 쇼핑몰(스마트 스토어 등) 셀러 들이 이용할 수 있는 마진 계산기를 소개합니다. 아래와 같이 매입가, 판매가, 경비 등을 입력하면, 수수료, 부가세, 종합소득세는 물론 마진금액과 마진율까지 계산해줍니다. 계산한 결과는 누적기록되며, 엑셀이나 CSV로 다운로드 받을 수도 있습니다. 주소는 아래와 같습니다. http://dogumaster.com/cal 계산기 마진 계산기 마진과 세금을 계산합니다.(결과 누적) ⓘ 정확한 수치는 다를 수 있으니, 참고 용도로만 활용하세요 초기화 엑셀 다운로드 csv 다운로드 상품명 매입가 판매가 경비 수수료 부가세 dogumaster.com 회원가입이나 로그인은 필요없습니다. 스마트폰(모바일)에서도 이용 가능합니다. 도움이 되시길 바랍니다. 2021. 1. 21.
중국 사입 통합계산기(단가, 관세, 부가세, 구매대행비 등): 도구마스터 중국사입 통합 계산기 중국에서 상품 사입시, "관세, 부가세, 구매대행비용, 총매입금액, 개당매입금액" 등을 계산할 수 있는 계산기를 소개합니다. 계산 결과는 누적되며, 엑셀이나 CSV로 다운로드 받을 수도 있습니다. 주소는 아래와 같습니다. http://dogumaster.com/cal 계산기 마진 계산기 마진과 세금을 계산합니다.(결과 누적) ⓘ 정확한 수치는 다를 수 있으니, 참고 용도로만 활용하세요 초기화 엑셀 다운로드 csv 다운로드 상품명 매입가 판매가 경비 수수료 부가세 dogumaster.com 사이트에 들어가서, 두번째 탭인 "중국 사입 계산기"를 선택하면 됩니다. 회원가입이나, 로그인은 필요 없고, 모바일도 지원됩니다. 도움이 되시길 바랍니다. 2021. 1. 21.
[CSS] 아이폰(iOS) input, button 기본 테두리, 색(그라데이션) 스타일 제거 방법 모바일 웹을 개발해보면, iOS에서 input의 테두리나, button의 색상이 내가 설정한대로 적용되지 않는 현상이 나타난다. # 문제 현상 버튼(input[type=submit])은 그라데이션이 먹고,(그림자도 있는듯?) 입력창도 테두리(border-radius) 등이 정상 작동하지 않는다. 아이폰 사파리 브라우저에 적용된 기본 스타일 때문인데, 쉽게 해결할 수 있다. # iOS 사파리 기본 스타일 제거 방법 1. -webkit-appearance 속성을 none으로 설정 해준다.(CSS에 아래와 같이 작성하고 시작.) 2. -webkit-border-radius 속성을 0으로 설정 해준다.(CSS에 아래와 같이 작성하고 시작.) input, textarea, button { appearance: n.. 2021. 1. 21.
[HTML] 스마트폰(모바일) input 입력창 포커스 시, 화면 확대 방지 방법 스마트폰으로 모바일 웹에 접근시, input 입력창을 터치(클릭)하여 포커스가 먹으면, 화면이 확대될 때가 있다. 당췌 어떻게 해결해야할지 난감할 수 있지만, 해결책은 아주 쉽고 간단하다. #모바일 화면 자동확대 방지 방법 사이에 viewport 메타태그를 아래와 같이 설정해주면 된다. 필요에 따라 maximum-scale=1 속성을 추가하여 확대 배율을 설정할 수도 있다. 도움이 되셨길 바랍니다. (참고) viewport 속성 width=device-width : 화면 너비를 기계 너비로 맞춤 initial-scale=1.0 : 초기 화면 크기 배율 설정 minimum-scale=1 : 최소 화면 크기 설정 maximum-scale=1 : 최대 화면 크기 설정 user-scalable=no : 사용자가.. 2021. 1. 20.
[HTML] input:radio 여러개(다중) 선택될 때, 하나만(단일) 선택 방법 radio 타입의 input 태그를 사용하다보면, 가끔(?) 라디오 버튼이 한번에 여러개가 선택되는 문제가 발생할 때가 있다. (물론 의도할 때도 있지만...) 즉, 아래와 같이 라디오 버튼을 만들면, 10대 20대 30대 아래와 같이 여러개가 동시에 선택되는 것이다. 라디오 버튼은 보통, 특정 변수 하나에 특정 값 하나만 할당하기 위해 많이 사용한다. 이를 위해 name 속성을 활용하는 것으로 알고 있다. 즉, 라디오 버튼들의 name 속성을 모두 동일하게 주어야, 라디오 버튼 간에 연관성(?)이 확보되어 단 하나만 선택할 수 있게 된다. 아래처럼 name 속성을 동일하게 주면, 10대 20대 30대 아래처럼 단 하나만 다중택일 된다. 해결 완료! 2021. 1. 19.

티스토리툴바