본문 바로가기

dev218

[javascript] 자바스크립트 체크박스 사용 방법 참고: https://www.tutorialspoint.com/How-to-check-whether-a-checkbox-is-checked-in-JavaScript 이 포스트에서는 JavaScript에서 체크박스가 체크되어 있는지 확인하는 방법을 알아보겠습니다. 체크박스는 선택상자 형태로 작동하는 HTML의 input 요소입니다. 특정 그룹의 radio 버튼에서는 사용자가 여러개의 버튼 중 하나의 값만 선택할 수 있는 반면 체크박스는 사용자가 여러개의 값을 선택하게 할 수 있습니다. 여러분은 체크박스를 많이 사용해 봤을 것 입니다. HTML 만으로 웹 페이지에 체크박스를 추가할 수 있지만 체크박스에 동작을 추가하려면 JavaScript를 사용해야 합니다. 코딩 여부에 따라 체크박스의 선택 여부에 따라 다.. 2023. 2. 13.
[javascript] 자바스크립트 클립보드 복사 (clipboard api) 참고: https://www.freecodecamp.org/news/copy-text-to-clipboard-javascript/ 웹 페이지나 응용프로그램을 작성할 때 복사 기능을 넣어야 할 때가 있습니다. 자바스크립트로 클립보드에 복사하는 기능은 사용자가 텍스트를 선택하고 단축키를 누르는 등의 행동을 안하고 단순 아이콘 클릭만으로도 할 수 있습니다. 이 기능은 activation code, 복구 키, 코드 스니펫 등을 복사해야 할 때 주로 사용합니다. 또한 화면에 경고 또는 모달 텍스트와 같은 기능을 추가하여 텍스트가 클립보드에 복사되었음을 사용자에게 알릴 수 있습니다. 예전에는 document.execCommand() 명령을 사용하여 이 기능을 만들었지만 현재 deprecate 되었습니다. 대신 클립.. 2023. 2. 7.
[javascript] 자바스크립트 경과시간 계산 (stopwatch) 참고: https://ralzohairi.medium.com/displaying-dynamic-elapsed-time-in-javascript-260fa0e95049 프론트엔드 개발자로서 경과된 시간을 동적으로 표시해야할 때가 있습니다. 예를 들어 통화 인터페이스에 경과 시간을 표시해야 하거나 웹 사이트에 스톱워치 기능을 개발해야하는 경우가 있습니다. 따라서 단순히 재사용 가능한 함수가 있다면 좋을 것 입니다. 이제부터 알아보겠습니다. 이 포스트에서는 자바스크립트를 사용하여 경과시간을 계산하고 표시하는 방법을 설명합니다. 여기서 설명하는 알고리즘과 논리는 자바스크립트가 아닌 다른 프로그래밍 언어에서도 동일하게 적용할 수 있습니다. 1. 경과 시간을 계산하는 함수 구현 첫 번째 만들 구문은 시작 시간과 종.. 2023. 2. 6.
[linux] 리눅스 재귀적으로 grep 명령어 사용 참고: https://stackabuse.com/how-to-grep-recursively-in-bash/ grep 명령어는 파일 또는 디렉토리의 특정 텍스트를 검색할 수 있는 강력한 도구입니다. 로그분석, 코드리뷰, 텍스트 검색이 필요한 작업 등에 널리 사용됩니다. bash에서 grep 명령어는 단일 파일에서 특정 텍스트를 검색할 수 있지만 디렉토리 및 하위 디렉토리에 있는 여러 파일에서 텍스트를 검색하려면 어떻게 해야할까요? 이런 상황에서 재귀적 grep을 사용합니다. grep 명령어의 재귀적 사용은 디렉토리 및 해당 하위 디렉토리의 모든 파일 내의 텍스트를 검색할 수 있게 해줍니다. 이는 다량의 파일이 있거나 특정 디렉토리 아래의 모든 파일에서 텍스트를 검색하려는 경우 특히 유용합니다. 재귀 gre.. 2023. 2. 6.
[javascript] 자바스크립트 fetch로 JSON post (then, async, await) 참고: https://ultimatecourses.com/blog/fetch-api-post-json 이 포스트에서는 fetch api를 사용하여 JSON 데이터를 서버로 post하는 방법을 알아보겠습니다. 이를 위해 먼저 form과 submit으로 이루어진 HTML 파일을 만들어 fetch로 백엔드 서버에 데이터를 post하도록 하겠습니다. 먼저 post할 데이터를 잡기위해 form에 name 속성을 줍니다. Submit form의 참조를 잡기위해 document.forms를 사용하여 name="fetch"인 항목을 찾습니다. const form = document.forms.fetch; const handleSubmit = (e) => { e.preventDefault(); }; form.addEve.. 2023. 2. 1.
[javascript] 자바스크립트 라디오 버튼 사용방법 참고: https://ultimatecourses.com/blog/check-radio-button 이 포스트에서는 radio input()을 확인하는 여러가지 방법을 알아보겠습니다. checked 속성만이 라디오 버튼 값을 확인하는 유일한 방법이 아닙니다. 특정 라디오 버튼을 확인하려면 어떻게 해야하는지 값을 기준으로 라디오 버튼을 확인하려면 어떻게 해야하는지 알아보겠습니다. 라디오 버튼 만들기 다음은 라디오 버튼의 값을 보이기 위해 사용할 코드입니다. 이는 checked 속성을 통해 HTML로 기본값을 설정하는 방법입니다. JavaScript를 사용하지 않고 순수 HTML만으로도 설정이 가능합니다. Mario Luigi Toad 이제 JavaScript로 form과 radio 제어 그룹에 대한 참조를.. 2023. 1. 30.
[javascript] 자바스크립트 우클릭 방지 참고: https://codinhood.com/nano/dom/disable-context-menu-right-click-javascript 브라우저의 전체 페이지에서 우클릭 방지 페이지에서 우클릭을 하면 브라우저는 contextmenu 이벤트를 발생시킵니다. 컨텍스트 메뉴에는 일반적으로 "페이지 소스 보기"나 "검사" 같은 기능이 들어있습니다. contextmenu 이벤트에 핸들러를 추가하고 event.preventDefault()를 사용하면 우클릭으로 컨텍스트 메뉴가 표시되지 않게 할 수 있습니다. 이 이벤트 리스너를 window 객체에 추가하여 전체 페이지에서 우클릭을 방지할 수 있습니다. window.addEventListener("contextmenu", e => e.preventDefault(.. 2023. 1. 4.
[javascript] 자바스크립트 문자열내의 문자열 찾기 (substring) 참고: https://ultimatecourses.com/blog/substring-in-string-javascript 이 포스트에서는 JavaScript를 사용해 문자열 내의 문자열(substring)을 찾는 방법을 알아보겠습니다. 문자열에서 substring 찾기 암호 단어 'bacon'이 있고 다른 문자열 내에 암호 단어가 포함되어있는지 확인해야하는 상황을 가정해보겠습니다. 여기서는 findme 변수에 체크하려는 긴 문자열을 넣어 확인해보겠습니다. const passcode = 'bacon'; const findme = `8sowl0xebaconxjwo98w`; 딱 코드를 보면 findme에 'bacon'이 포함되어 있는지 알 수가 있지만 자바스크립트로는 정답을 어떻게 알 수 있을까요? JavaS.. 2022. 12. 28.
[javascript] 자바스크립트 다크모드 확인 참고: https://ultimatecourses.com/blog/detecting-dark-mode-in-javascript 이 포스트에서는 JavaScript로 브라우저의 다크모드를 체크하고 변경사항을 확인하여 스타일을 업데이트 하는 방법을 알아보겠습니다. 이를 위해 먼저 window.matchMedia API를 알아봐야합니다. window.matchMedia API는 document가 특정 미디어 쿼리와 일치하는지 확인하기 위한 JavaScript 유틸리티입니다. 미디어 쿼리는 반응형 웹과 같은 것에 사용하는데 익숙하지만 다크모드의 도입으로 더 많은 것을 처리할 수 있게 되었습니다. 모든 브라우저가 window.matchMedia API를 지원하지 않기 때문에 이 API가 사용가능한지 확인해야합니다.. 2022. 12. 1.
[javascript] 자바스크립트 스프라이트 애니메이션 참고: https://dev.to/martyhimmel/animating-sprite-sheets-with-javascript-ag3 자바스크립트를 사용하여 HTML5 캔버스에 스프라이트 시트로 애니메이션을 만드는 방법을 알아보겠습니다. 기본 설정 먼저 canvas 요소를 만듭니다. canvas 요소에 가장자리를 표시하여 가용한 영역이 어디까지인지 확인합니다. canvas { border: 1px solid black; } 이제 스프라이트 시트(https://opengameart.org/content/green-cap-character-16x18)를 로드합니다. 스프라이트 시트(sprite sheet)는 여러개의 이미지를 하나의 파일에 모아놓은 것으로 주로 연속적인 동작의 컷을 나열하여 애니메이션 조작을.. 2022. 11. 29.
[javascript] CSS animation 속성 (애니메이션) 참고: https://blog.logrocket.com/guide-to-css-animation-for-javascript-developers/ 사람의 뇌가 움직임에 특화되어있다는 것은 익히 알려진 사실입니다. 인간은 정적인 요소에 초점을 맞추기보다는 요소가 어떻게 움직이는지에 더 많은 관심을 가집니다. CSS 애니메이션은 이러한 인간의 행동을 이용합니다. 웹사이트에 애니메이션이 추가되면 제품의 중요한 영역에 사용자의 관심을 끌게되어 지속적인 효과를 낳게되고 사용자 경험을 향상시킵니다. 이 포스트에서는 CSS 애니메이션의 이점, 다양한 CSS 애니메이션 속성, 그리고 자바스크립트 개발자들이 CSS 애니메이션을 사용하여 웹사이트를 보다 상호작용적이고 사용자 친화적으로 만들 수 있는 다양한 예를 알아보겠습니.. 2022. 11. 28.
[javascript] CSS transition 애니메이션 (타이밍 함수) 참고: https://zellwk.com/blog/css-transitions/ HTML 구성요소를 애니메이션화하는 가장 간단한 방법은 CSS transition을 사용하는 것 입니다. 이 포스트에서는 CSS transition이 어떻게 작동하는지, 또 이를 활용해 어떻게 애니메이션을 만드는지를 알아보겠습니다. transition은 CSS 속성이 일정한 기간동안 하나의 값에서 다른 값으로 변경될 때 발생합니다. 다음의 예와 같이 transition 속성을 사용하여 CSS transition을 생성할 수 있습니다: .selector { transition: property duration transition-timing-function delay; } transition 속성은 transition-prop.. 2022. 11. 25.
[javascript] 자바스크립트 버튼 눌림 효과 참고: https://www.geeksforgeeks.org/how-to-add-a-pressed-effect-on-button-click-in-css/ 이 포스트에서는 CSS를 사용하여 버튼을 눌렀을 때 효과를 추가하는 방법을 설명합니다. 이러한 효과는 모던 UI 디자인의 한 부분으로 많은 웹 사이트에서 사용하고 있습니다. 눌림 효과가 없는 일반적인 동작과는 다르게 버튼 눌림 효과를 통해 사용자는 HTML 요소와의 상호작용 경험을 느낄 수 있습니다. 이 효과를 만들기 위해 'active' 수도 클래스(pseudo class)를 사용할 것 입니다. 이 CSS 수도 클래스는 사용자가 버튼을 클릭하면 자동으로 HTML 요소에 추가가 됩니다. 버튼 눌림 효과 주기 1 버튼을 눌렀을 때(press down 했을.. 2022. 11. 24.
[javascript] 자바스크립트 삼항연산자 (ternary operator) 참고: https://dev.to/refine/how-to-use-javascript-ternary-operator-58ki 이 포스트는 JavaScript의 삼항연산자에 관련된 글입니다. 여기서 삼항연산자가 무엇인지, 어떻게 사용하는지, 언제 쓰는지 및 if/else, if/else if/else, switch 와는 어떻게 다른지를 설명할 것 입니다. 자바스크립트의 삼항연산자(ternary operator)는 무엇인가 JavaScript의 삼항연산자는 물음표(?)로 표시하는 연산자로, 이 연산자는 이전에 전달된 조건식을 판별하여 조건식의 결과에 따라 뒤에오는 코드 블록을 실행합니다. 이는 물음표 연산자 다음에 오는 두개의 실행가능한 코드 블록을 받는데 이들의 구분을 콜론(:)으로 합니다. 문법은 다음과.. 2022. 11. 17.
[javascript] 자바스크립트 특정 문자 모두 바꾸기 (replaceAll) 참고: https://dmitripavlutin.com/replace-all-string-occurrences-javascript/ 간단하게 JavaScript 문자열에서 특정 문자를 모두 바꾸는 방법은 없습니다. JavaScript 초기에 영감을 준 Java에서는 1995년 부터 replaceAll() 메소드를 지원했지만요! 이 포스트에서는 문자열을 분할한 후 결합하는 방법과 string.replace() 메소드에 정규식을 결합하는 방법을 통해 JavaScript의 모든 특정 문자를 치환하는 방법을 알아보겠습니다. 또한 JavaScript 문자열의 모든 문자를 바꿀 수 있는 새로운 replaceAll() 메소드를 알아보겠습니다. replaceAll() 메소드를 사용하는게 가장 편리한 방법이지만 es6를.. 2022. 10. 28.
[jquery] 자바스크립트 클래스 이름 지우기 jQuery removeClass() 메소드는 선택된 HTML 항목에서 하나 이상의 클래스 이름을 지우는데 사용합니다. 쉽게 생각하면 선택된 HTML 항목에 클래스 이름을 추가하는 addClass() 메소드의 정 반대입니다. removeClass() 메소드 문법 $(selector).removeClass(classname1 classname2 ...) classname1, classname2 등은 선택된 HTML 항목에서 지울 클래스 이름입니다. 매개변수로 하나 이상의 클래스 이름을 전달할 수 있는데 공백으로 분리된 문자열을 전달하면 됩니다. jQuery removeClass() 메소드 예제 아래 예제에서는 big, highlight, background 라는 이름의 클래스가 적용된 HTML 항목이 있고.. 2022. 10. 7.
[jquery] 자바스크립트 클래스 이름 확인하기 이 포스트에서는 jQuery hasClass() 메소드를 어떻게 쓰는지 알아보겠습니다. hasClass() 메소드는 특정한 HTML 항목에 특정한 클래스 이름이 할당되어있는지 확인합니다. hasClass() 메소드 문법 $(selector).hasClass(classname) 여기서 classname은 확인할 클래스 이름입니다. 이 메소드는 선택자로 선택된 HTML 항목이 classname을 가지고 있을 경우 true를 리턴합니다. jQuery hasClass() 메소드 예제 다음의 예제는 big 이라는 클래스 이름이 문장에 추가되어있고, 버튼 클릭 이벤트가 발생하면 hasClass() 메소드를 사용하여 화면에 표시된 문장 중 big 이라는 클래스 이름이 포함된 문장이 있는지 확인합니다. jQuery h.. 2022. 10. 7.
[jquery] 자바스크립트 클래스 이름 추가하기 jQuery의 addClass() 메소드는 선택된 HTML 항목에 클래스 이름을 추가하는데 사용합니다. 이는 웹 페이지에 있는 특정한 HTML 항목에 스타일을 추가하고 싶을 때 특히 유용합니다. 예를 들어 첫 번째 문장의 글자 크기와 색을 바꾸고 싶을 때 원하는 CSS 스타일을 특정한 클래스 이름으로 만든 다음 addClass() 메소드를 이용해 그 문장에 클래스 이름을 추가하면 방금 만든 스타일이 그 문장에 적용됩니다. jQuery addClass() 메소드 문법 $(selector).addClass(classname) 여기서 클래스 classname은 선택된 HTML 항목에 추가하고 싶은 클래스 이름입니다. 또한 두개 이상의 클래스 이름을 한번에 추가할 수 있는데 이는 다음과 같이 공백으로 구분된 클.. 2022. 10. 6.
[jquery] 자바스크립트 숨기기 보이기 이 포스트에서는 jQuery의 show, hide 효과에 대해 알아보겠습니다. jQuery를 사용하면 show(), hide() 메소드를 통해 HTML 항목을 보이게 또는 숨길 수 있습니다. jQuery hide() jQuery hide() 메소드는 선택한 HTML 항목을 숨깁니다. 다음은 제목을 누르면 제목이 숨겨지는 예제입니다. index.html에 다음 코드를 입력하고 실행합니다. jQuery hide() 예제 h2 태그의 제목을 누르면 숨겨집니다. 두 번째 h2 제목 index.html을 실행하면 다음과 같은 화면이 나타납니다. 먼저 위 쪽 제목을 눌러보면 위 쪽 제목이 사라집니다. 그 다음 아래 쪽에 있는 제목을 클릭하면 아래 쪽 제목도 숨겨집니다. 코드를 살펴보면 ${"h2").click()의.. 2022. 10. 5.
[jquery] 자바스크립트 버튼 클릭 jQuery 클릭 이벤트는 사용자가 HTML 항목을 클릭하면 발생합니다. 여기서 jQuery click() 메소드는 사용자가 클릭했을 때의 행동을 처리합니다. 예를 들어 $("p").click()은 웹 페이지에서 문단이 클릭되었을 때 클릭 이벤트를 발생시키도록 합니다. click() 메소드에 함수를 추가하여 클릭 이벤트가 발생했을 때 마다 특정 기능을 실행하도록 할 수도 있습니다. 이 포스트에서는 사용자의 클릭에 대응하는 jQuery click() 메소드에 대해 알아보겠습니다. jQuery click() 메소드 문법 $(selector).click(function() { // 코드 }); 먼저 클릭 메스드를 추가할 HTML 항목을 선택한 후 click() 메소드를 추가할 수 있습니다. click() 메소.. 2022. 10. 5.

티스토리툴바