프로그래밍/웹 관련 27

[javascript] 배열을 모두 비우는 방법

개요JavaScript에서 배열을 모두 비우는 여러 가지 방법들을 정리해 둡니다.배열을 모두 비우는 방법JavaScript에서 배열을 모두 비우는 방법은 다음과 같이 여러 가지가 있습니다. 각 방법의 특징과 함께 알아보겠습니다.1. 길이를 0으로 설정let arr = [1, 2, 3, 4, 5];arr.length = 0;이 방법은 가장 효율적이고 빠르며, 원본 배열 참조를 유지합니다.2. 빈 배열 할당let arr = [1, 2, 3, 4, 5];arr = [];새로운 빈 배열을 할당합니다. 원본 배열 참조가 변경됩니다.3. splice() 메소드 사용let arr = [1, 2, 3, 4, 5];let removed = arr.splice(0, arr.length);원본 배열을 수정하며, 제거된 요소..

[js] vite - "Two output files share the same path" 오류 문제

문제점 및 증상VS code 상에서 오류가 있으면 안되는 math.js 파일을 임포트 하는 부분에 오류 표시가 되었습니다. Vite가 실행되어 자동으로 빌드되는 과정중에 다음과 같은 오류가 발생하였습니다.Error: Build failed with 1 error:error: Two output files share the same path but have different contents: node_modules\.vite\deps_temp\ol_math__js.js at failureErrorWithLog (D:\Dev\node\my-demo\node_modules\esbuild\lib\main.js:1575:15) at D:\Dev\node\my-demo\node_modules\e..

Let’s Encrypt SSL 인증서 만료 메일 주소 변경 방법

개요 "Certbot"을 이용하여 Let’s Encrypt에서 최초 SSL 인증서를 발급 받을 때(계정을 만들 때) 이메일 주소를 제공한 경우, 인증서가 갱신될 때 만료 통지를 자동으로 보냅니다. 만료 이메일은 SSL 인증서가 만료되기 20일 전에 발송하고, 통지는 만료되기 10일과 1일 전에 각각 발송합니다. 만료 메일 주소 변경 여러 이유로, 만료 메일을 받을 이메일을 변경해야할 수도 있는데, 그럴 경우에 다음과 같이 이메일 주소를 변경할 수 있습니다. certbot update_account --email yourname@example.com "certbot/certbot" 도커를 이용할 경우에는 다음가 같이 만료 이메일 주소를 변경할 수 있습니다. docker run -it --rm --name ..

[javascript] 날짜 문자열 만들기

자바스크립트로 날짜 문자열을 "YYYY-MM-DD hh:mm:ss" 형식으로 만드는 방법을 정리해 둡니다. "Date" 클래스의 getFullYear(), getMonth, getDate() 가장 쉬운방법으로 "Date" 클래스의 getFullYear(), getMonth, getDate() 함수를 이용하면 다음과 같이 "YYYY-MM-DD" 문자열을 만들 수 있습니다. let current_date = new Date() let current_date_string = current_date.getFullYear() + '-' + (current_date.getMonth() + 1) + '-' + current_date.getDate() // Result // 2022-8-2 위와 같이 수행하면 10이하..

자바스크립트 코드 최적화 문제 #1

프로젝트 실무에서 적용한 코드 리팩토링 예를 정리해 봅니다. 위 화면과 같이, 어떤 결과에 대해 화면에 테이블 형태로 표시하여주는 함수를 최적화하여 보았습니다. /** * @brief 수행한 BIT 결과를 하단 상태바의 자체점검 결과에 표시합니다. * @param bit_results 수행한 BIT 결과를 담고 있는 객체 */ function load_bit_results_on_footer(bit_results) { let elmTable = document.querySelector('#bit_latest_footer'); if (elmTable == null) { elmTable = document.createElement('tr') elmTable.id = 'elmfooter' document.bod..

Mixed content 문제 해결 방법

문제점 및 증상 잘 접속이 되던 웹 서비스가 https를 적용한 이후, 갑작스럽게 접속에 문제가 발생하기 시작하였습니다. 특정 리소스들이 모두 불러와지지 않고 화면이 깨지는 현상이 발생하였습니다. 원인분석 브라우저의 개발자 도구를 통하여 웹 서비스에 접속하여 보니, 다음과 같은 오류들이 콘솔창에 표시되었습니다. "Mixed Content" 관련 내용을 확인하여 다음과 같은 해결 방법들을 찾았습니다. 사용자가 브라우저에서 임시 해결하기 최종 사용자 입장에서 웹 서비스에서 바로 수정이 어려운 경우, 브라우저에서 URL 주소 옆의 자물쇠 버튼을 눌러 "사이트설정"을 선택하고, 그 사이트 설정에서 "안전하지 않은 콘텐츠"가 기본적으로 "차단"으로 설정되어 있는 것을 "허용"으로 변경하면 http 컨텐츠를 불러올..

javascript FORM 태그 시리얼라이징

개요 AJAX API 호출을 위하여 FORM 태그의 여러 INPUT 컨트롤의 입력 정보를 모아서 호출하려면, jQuery를 이용할 경우 다음과 같이 작성하게 됩니다. form_data = 'user_name=' + $('#user_name') + '&passowrd=' + $('#password') //+ ... 위와 같이 INPUT 컨트롤의 ID로 직접 값을 가져오는 방식은 컨트롤의 개수가 적을 때는 크게 문제가 되지 않지만, 수 십개가 넘어가게 되면 노가다?가 되어 버립니다. 중간에 오타라도 있다면 재앙이 시작됩니다. ^^; FORM의 모든 INPUT 태그를 getElementsByTagName() 함수로 얻어, forEach 하는 방식도 이용할 수 있겠으나, 어쨌든 관련 로직을 이해하고 코딩을 직접..

[angular1] 라디오 선택에 따라 입력 창의 텍스트를 변경하는 예제

Angular1에서 라디오 선택에 따라 입력 창의 텍스트를 변경하는 간단한 예제를 들어 설명 드리겠습니다.아래는 프로토콜 종류 라디오를 선택함에 따라, 연결할 포트 정보를 변경하는 예제입니다. Angular1 라디오 예제 SSL TLS None 위 예제의 주요 부분에 대한 설명은 다음과 같습니다.Angular1 애플리케이션과 컨트롤러를 정의합니다. : "ng-app", "ng-controller"protocol_type 변수로 사용자가 선택한 프로토콜을 입력 받습니다.protocol_port 변수로 입력 창의 프로토콜 포트 번호를 변경합니다.updateInputText() 함수는 선택한 프로토콜에 따라 protocol_port를 갱신합니다.HTML에서 라디오와 입력 창을..

[javascript] CanvasRenderingContext2D.arc() 함수에 대하여

개요 CanvasRenderingContext2D.arc() 함수에 대하여 알아 보겠습니다. 기본 사용법 CanvasRenderingContext2D.arc() 함수는 다음과 같이 2가지 형태로 이용할 수 있습니다. arc(x, y, radius, startAngle, endAngle) arc(x, y, radius, startAngle, endAngle, counterclockwise) 각 파라미터가 의미하는 것은 다음 그림과 같습니다. x : 수평측 좌표 y : 수직평측 좌표 radius : 호의 반지름 startAngle : 호의 시작 각도 (라디안 값) endAngle : 호의 끝 각도 (라디안 값) counterclockwise : 반시계 방향으로 그릴지에 대한 여부 90도 호 그리기 다음은 간..

[javascript] drawImage()로 이미지 회전하여 출력하기

개요 CanvasRenderingContext2D.drawImage() 함수에 대하여 알아 보겠습니다. 기본 사용법 CanvasRenderingContext2D.drawImage() 함수는 다음과 같이 3가지 형태로 이용할 수 있습니다. drawImage(image, dx, dy) drawImage(image, dx, dy, dWidth, dHeight) drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 각 파라미터가 의미하는 것은 다음 그림과 같습니다. 이미지 회전하여 출력하기 이미지를 회전하여 출력하기 위해서는 좌표계를 회전하는 rotate(), translate() 및 save(), restore() 함수도 알고 있어야 합니다. ..

728x90