# script

Node: SCRIPT DEPRECATION WARNING 해결
서론 평소에 Node를 설치할 때 아래 명령어를 입력했다. 그런데 이런게 떴다. 링크타고 가서 확인해보자. 본론 1. 왜 deprecation 됐나요? 요약: 특정 버전에 대한 설치 프로그램을 패키지 하지 않음. 더 좋은 방법 찾음. 이렇게 하셈 2. 그래서 어떻게 설치하는데? 2-1) node source gpg key 설치 2-2) repository 생성 첫 줄에 원하는 버전을 넣는다. (저는 20버전으로 하겠습니다.) 2-3) Update하고 Ins
XSS 공격 구문 조사
IFRAME : HTML Inline Frame 요소이며 inline frame의 약자이다. 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로 iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있다. // 문법 (여기서 #은 오류 발생을 피하기 위함) onmouseover : 마우스 커서가 해당 요소 위에 위치할 때 일어나는 이벤트 alert(document.cookie) : 브라우저의 쿠키 정보가 팝업창으로 뜨게 됨 onmousedown : 사용자가 마우스 커서를 눌렀을 때 실행되는 이벤트 -> 클릭하면 팝업창이 뜨게 만듬 style=display:block -> displ

[Go] Go 언어를 이용해서 스크립트 파일 만들기
이전 시간에 docker를 통해서 테스트를 실행하는 로직 자체는 만들었는데 프로그램 한번 눌렀을때 진행이 되는것이 편할거 같아서 script 파일을 하나 만들기로 했습니다. 그래서 어떻게 할까 고민중에 golang을 공부도 할겸 리눅스까지도 크로스컴파일이 되어야 하기 때문에 golang으로 간단한 스크립트 문을 만들기로 했습니다. 간단하게 스크립트 문이기 때문에 window에서 cmd를 통해서 파일을 실행시키는 로직 자체를 만들어 주기로 했습니다. 순서는 이러합니다. docker 와 docker-compose 의 정상적인 설치 확인 없는 경우 : docker 와 docker-compose를 설치하라는 알림 있는 경우 : 다음 로직 진행

[HTML] script, script async, script defer
🌈 학습을 위해 Must-Know-About-Frontend에서 가져온 내용을 수정, 추가하여 작성한 글입니다. 기존 내용과 대부분 유사하며 Summary 부분은 추가하였습니다. Summary | | ` | | ` | | :--------: | :--------: | :--------: | :--------: | | 카테고리 | ` 태그와 속성 | 태그와 속성 | ` 태그와 속성 | | 다운로드 시 HTML 파싱 중단 | O | X | X | | 실행 시 HTML 파싱 중단 | O | O | HTML 파싱이 완료된 상태 | | 실행 시점 | 스크립트 다운로드 직후 |

[자바스크립트]어라..? 스크립트가 위에 배치해도 요소를 받아오긴하네?
💡 Agenda - 스크립트가 위에 배치해도 요소를 받아오긴하네?의 문제 랄까? 일반적으로는 script 태그는 왜 아래에 작성해야 할까요....? 이러한 질문이 일반적이긴 함 > ## 📌 " html 문서 앞에 script 태그 내에 js코드를 작성했고, 문서가 로드 되기 전에 script의 element를 가져오지 못한 상태에서 console.log로 디버그하여 개발자도구에 확인해보았을때는 왜 element(li 태그)를 반환했는지 원인이 궁금하다. " - ⭐ 참고: 일반적으로 script를 body태그 내부의 html 마크업 아래에 적는 것이 일반적임 콘솔창 확인해보자 ! 그런데 ! 왜🤔? 🖥 접근방식 1. getElementsBy

[Docker] GitHub Action을 이용한 Amazon EC2 Spring 프로젝트 자동 배포
Amazon EC2 Linux환경에서 진행했다. >### EC2 Docker 설치 시작하기 전에 yum 패키지를 모두 최신 버전으로 업데이트 해주었다. yum을 이용해서 docker를 설치했다. Docker 버전 확인 Docker 시작 <br

VS code-html/css/javascript
alert 경고창 띄우기 alert창 연산가능 - 연산 순서도 지켜서 계싼 script javascript 사용 본문 var 모든 자료형 var로 통일 javascript 출력 document.write() : html요소 없이 출력 innerHTML : HTML요소 안에 출력 console.log() : 브라우저의 콘솔 탭에 출력(value 확인) html요소 없이 출력 ()안의 것을 화면에 출력 ""과 '' 끊어서 구분 밖이든 안이든 구분 입력한 순서대로 대입 -> java때처럼 a는 100으로 설정됨 줄 내리기 문자열과 숫자 구분 java때처럼 ""안은 문자/벗어난건 숫자 대입연산자 증감연산자 본문 형변환 암시적 형변환 자바스크립트 컴파일러에 의해 자동 형변환 일어남 명시적 형변환 1.String() 이용해서 숫자로

script 실행시점 (async/defer)
동적인 웹 어플리케이션을 만들기 위해서는 JavaScript 파일을 불러오는 것이 필수적입니다. 하지만 복잡한 비즈니스 로직이 포함된 JavaScript 파일이라면 그 용량이 매우 클 것입니다. 따라서 스크립트 파일을 비동기 방식으로 불러오는 방식을 통해 로드 시간을 줄일 수 있습니다. 이를 가능하게 만들어주는 ``태그의 속성 async와 defer 에 대해 알아보고, 두 속성 사이의 차이에 대해 정리해보고자 합니다. >* DOM을 따라 반드시 순서대로 실행되어야 한다면 `` >* DOM이나 다른 스크립트에 의존성이 없고, 실행 순서가 중요하지 않은 경우라면 `` >* DOM이나 다른 스크립트에 의존성이 있고, 실행 순서가 중요한 경우라면 `` 스크립트를 비동기 방식으로 불러와야 하는 이유 
TIL - 404 에러 | HTML의 Script 태그
문제 - 404 Error 1) 문제 버튼을 클릭해서 다른 페이지로 넘어가는 순간 ! Not Found, 404 에러가 발생했다. 2) 시도 침착하게 html 코드를 다시 읽어보았다. 서버쪽에서 잘못 건든 건 없어서 html 에서 값을 잘못주었을 것 같은데 ? 라는 생각이었다. 그리고 아니나 다를까 .. thymeleaf에 익숙하지 않아서 코드를 잘못 적었다. 3) 해결 이렇게 작성해주면, 해당 태그를 클릭했을 때, 원하는 api로 넘어갈 수 있다..! 4) 배운 점 thymeleaf를 사용해서 api를 왔다갔다 해야 하는 경우들이 더 있는데, 그 때 api를 제대로 적어서 사용할 수 있을 것 같다 ! 문제2 - 로그인 오류 1) 문제 와 작은따옴표(')로 구분이 가능하지만, depth가 3이라면 이렇게 구분할 수도 없다. 구글링한 결과 script 태그를 따로 작성하고, getElementById로 불러오는 등의 방법이 있었지만 아직 javascript 붙이지 않고 실습 중이었기에 패스했다 그래서 변수에 스트링을 저장하기로 한다. html의 script태그 내에 넣어줘야 하는 값을 변수로 지정해야 하는데, 어떤 언어로 변수를 선언해야 할까? 답은 jinja2로 선언하면 된다. 이 방식으로 선언해줬다. Flask로 실습을 진행하고 있는데 Flask, html, jinja2 문법을 헷갈리지 않게 조심해야 한다..!
script, script async, script defer가 무엇인가요?
script, script async, script defer ` 태그는 HTML 문서에서 JavaScript 코드를 로드하고 실행하는 데 사용됩니다. 태그에는 세 가지 주요 속성이 있습니다: async, defer`, 그리고 속성 없음. ``: `` 태그에 속성이 없는 경우, 브라우저는 스크립트를 로드하고 파싱하는 동안 HTML 문서의 파싱을 중단합니다. 스크립트는 로드되는 순서대로 실행되며, 다른 리소스의 로드를 차단합니다. 스크립트의 실행이 완료되기 전까지 HTML 파싱이 중단되기 때문에, 스크립트가 크거나 다운로드 속도가 느릴 경우 페이지 로딩이 지연될 수 있습니다. ``: async 속성을 사용하면 스크립트가 비동기적으로 로드되고 실행됩니다. HTML 파싱은 스크립트 로드와 동시에 계속되며, 스크립트 로드가 완료되면 즉시 실행됩니다. 다른 리소

MariaDB 점검 스크립트!
DBA의 입장에서는 자주자주 점검을 해서 장애를 예방하거나 사소한 용량부족사태(?)라도 막는게 중요하다. 왜냐하면 장애나면 자다가도 나가서 조치를 해야할 수도 있기 때문이다. 내 소중한 취침시간 지켜... 서론이 길었네.. 여튼 일일점검 스크립트 만든 것을 공유하려합니다. 시스템 담당자에게 Linux 명령어 도움을 조금아닌 많이 받아 작성하였습니다! startcheck.sh : dailycheck을 돌리는 shell파일 매일매일 돌리는 스크립트를 저는 startcheck.sh를 통하여 dailycheck.sh를 돌렸습니다. 나누지 말고 1개로 하는게 편하지않냐라는 질문이 있을 수도 있는데, DB 크기 조회하는 sql파일을 따로 돌려야 하기 때문에 script도 지저분해질거 같아서 따로 분리하였습니다. daily_check : 명령어 전부!(저는 Maxscale환경으로 적겠습니다) wc -l : 명령어에 해당되는 개수 출력 ->

HTML/CSS 필수 지식
HTML ⭐ DOCTYPE Document Type의 약어 태그가 아니기 때문에 로 닫아주지 않아도 됨 DOCTYPE을 선언할 경우 이를 Standards Mode(표준 모드)라 하고 선언 하지 않는 경우 Quirks Mode (비표준 모드, 호환 모드)라고 함 호환모드의 경우 각 브라우저마다 문서를 나타내는 방식이 다르므로 크로스 브라우징 이슈가 심각 ⭐ 시맨틱 태그 HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공 -- header, nac, section 등 ⭐ script vs script async vs script defer 웹 브라우저는 html을 렌더링하는 과정에서 js ()를 만나면 동기적으로 처리 즉, HTML 렌더링 하는 것을 멈추고 js 파일을 모두 로드한 후에 다시 렌더링을 진행 -- 크기가 큰 script를 head에서 불러올 경우 렌더 블로킹이 발생
HTML <head>
html에는 크게 head와 body가 있다. head태그의 요소에는 다음과 같은 요소들이 포함되어야 함 title style base link meta script noscript head태그는 body태그와 다르게 페이지에 표시되지 않음 대신 페이지에 대한 metadata를 포함 html5에서는 head요소를 생략할 수 있도록 변경됨 meta meta태그는 해당 문서에 대한 정보(메타데이터)를 정의할 때 사용 meta태그 요소는 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용됨 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용 charset 속성 meta 태그의 charset 속성은 해당 HTML 문서의 문자 인코딩 방식을 명시 lang 속성을 사용하면 meta 요소

TTS (Text to Speak) 활용
22년 8월 즈음에 의료기기 재고관리 시스템 구축 관련하여 문의가 온 사항으로 Salesforce에서 TTS를 사용할 수 있는지 기술 검증이 필요했었다. 구글에서 검색한 몇 몇 Reference를 토대로 예제를 만들어 보았다. TTS (Text to Speak) 란? >TTS (Text to Speech)는 오디오 표현을 위해 텍스트 단위를 음성 단위로 변경해야하는 자연스러운 언어 모델링 프로세스이며,텍스트 음성 변환은 디지털 텍스트에서 오디오 출력을 렌더링하여 읽을 수 없거나 다른 종류의 용도로 사용하는 사람들을 돕기위한 기술 위에 설명과 같이 TTS는 Text to Speech의 약자로 말 그대로 텍스트를 음성으로 읽어주는 기능 이라고 생각하면 편하다. 의료기기 재고관리 시스템에서는 재고조사를 진행할 때, 스캐너로 해당 제품의 바코드를 찍을 경우, 정보를 Server Client에서 조회하여, 유효기간이 3개월 미만으로 남은 경우, 음성으로 알려주는 기능으로 사
[모듈 공유] 타워 게임 - 회복(Heal) 파트 만들기
1. ServerScriptService에 Script 추가 2. Script 이름 HealBlockScript로 변경 3. HealBlockScript에 아래 코드 붙여넣기 4. Heal 파트 만들기 Block-Heal: 체력을 회복시킬 캐릭터가 닿는 것을 확인할 블록 Amount: 캐릭터의 체력을 회복시킬 수 있는 회복량을 의미하는 NumberValue. 속성 창의 Value를 숫자로 지정하여 회복량을 지정할 수 있음. CoolTime: 캐릭터가
[모듈 공유] 타워 게임 - Moving 파트 만들기
1. ServerScriptService에 Script 추가 2. Script 이름 MovingBlockScript로 변경 3. MovingBlockScript에 아래 코드 붙여넣기 4. 움직이는 Moving 파트 만들기 Block-Moving: 직접적으로 움직이게될 파트. 이 파트 위에 올려져있는 모든 Anchor 되어있지 않은 파트는 Block-Moving 파트가 움직일 때 같이 움직일 수 있음 (예: 캐릭터가 Block-Moving 파트 위에 있으면 캐릭터가 운반됨)
[모듈 공유] 타워 게임 - Damage 파트 만들기
1. ServerScriptService에 Script 추가 2. Script 이름 BlockDamageScript로 변경 3. BlockDamageScript에 아래 코드 붙여넣기 4. 데미지 파트 만들기 파트 3개 생성  1번 type 생략 (기본값) script 태그에서 type을 생략할 경우 2번으로 재번역하여 반영됨. 구글 확인 결과, 보통 생략하지않고 2번으로 정의함. 2번 text/javascript 가장 범용적으로

JAVA Script 간단개념
JavaScript 문법 알아보자 자료형(Data Type) > 프로그래밍언어에서 데이터를 다루기 위해 미리 정해놓은 데이터의 유형 > 변수를 선언 하지 않고 -> 대입되는 시점(동적 타이핑방식) JavaScript에서 배열을 사용한 예제 + 인덱스를 통해 배열에 접근한 예제