티스토리

DevStory
검색하기

블로그 홈

DevStory

developer-talk.tistory.com/m

평범한 IT기업에 다니는 직장인이 공부한 자료를 공유하는 블로그입니다. 문의사항: wotjd2386@gmail.com

구독자
94
방명록 방문하기
공지 블로그를 이전할 예정입니다. 모두보기

주요 글 목록

  • 티스토리를 접은지 8개월이 지났습니다. 2023년 01월 24(화) [티스토리]티스토리를 떠납니다.를 포스팅하고 8개월이 지났습니다. 제 근황보다 블로그 방문자 수는 유지가 되는지? 수익은 감소했는지?에 대해 궁금하신 점이 많을 것 같은데요. 방문자 수는 평일 기준으로 하루 6,000 ~ 8,000명 방문하고 있고 구글 애드센스 수익은 월 20~30만원씩 들어오고 있습니다. 티스토리를 8개월만에 로그인했는데, 방문자 수와 구글 애드센스 수익이 유지되는게 놀라울 따름입니다. 요새 ChatGPT가 각광받고 있어서 블로그 방문자 수가 감소할 줄 알았거든요. 이제, 제 근황을 이야기하고자 합니다. 연구원에서 주임연구원으로 승진함과 동시에 많은 업무를 맡게 되었고 책임져야하는 일도 많아졌습니다. 프로젝트를 완벽하게 성공해야한다는 책임감, 후임들에게 올.. 공감수 10 댓글수 4 2023. 9. 22.
  • [티스토리]티스토리를 떠납니다. 블로그를 시작한 이유 회사 급여만으로는 경제적 자유를 누릴 수 없기에 2021년부터 다양한 부업을 알아봤습니다. 유튜브, 블로그, 스마트 스토어등 다양한 부업 리스트를 나열하고 '지금 당장 내가 할 수 있는 것은 무엇일까?', '꾸준히 할 수 있는 것은 무엇일까?'에 대해 고민하다가 2021년 4월 티스토리를 시작했습니다. 물론 개발 블로그가 다른 주제에 비해 돈이 안된다는 사실은 알고 있었지만, 다른 주제로 글을 작성할 자신이 없었습니다. '내가 잘못된 정보를 알려주는 게 아닐까?', '내가 이 분야에 아는 것도 없는데 아는 것처럼 글을 써도 문제없을까?'라는 두려움에 직종과 관련 있는 개발을 주제로 블로그를 운영하고 추후 다른 주제에 대해서도 블로그를 운영하기로 다짐했습니다. 개발 블로그가 돈이 안 .. 공감수 37 댓글수 1 2023. 1. 24.
  • [React]Element 크기 조절을 감지하는 방법 개요 일반적으로 웹 페이지를 제작할 때, Element의 크기를 사용하는 기기(PC, 태블릿, 모바일)에 따라 설정하고 크기를 조절할 수 없도록 개발하지만 반대로 사용자가 컴포넌트의 크기를 조절할 수 있도록 개발하는 경우도 존재한다. 컴포넌트의 크기를 변경할 수 있는 경우 크기가 변경되었는지 감지해야 하는 상황이 존재한다. 예를 들어, 특정 컴포넌트가 DOM에 마운트(mount) 되었는데 textarea의 크기를 변경하는 경우 특정 컴포넌트를 언마운트(unmount) 해야 한다고 가정하자. 이러한 경우 textarea의 크기가 변경되면 특정 state의 값을 변경해서 특정 컴포넌트를 언마운트하는 코드를 작성해야 한다. 하지만, textarea에는 resize라는 이벤트가 존재하지 않기에 textarea의.. 공감수 2 댓글수 0 2023. 1. 9.
  • CodeSandbox와 Github 연동 본 포스팅은 CodeSandbox와 Github 연동하는 방법을 소개합니다. CodeSandbox 버전에 따라 스크린샷이 일치하지 않을 수 있습니다. 개요 CodeSandbox는 웹 브라우저에서 코드를 작성할 수 있는 온라인 컴파일러다. CodeSandbox는 FrontEnd 개발자들이 사용하는 다양한 라이브러리를 제공하며 React, Next, Node와 같은 라이브러리를 로컬 PC에 설치하지 않고 웹 브라우저에서 사용할 수 있다. 그리고 CodeSandbox에서 생성한 프로젝트를 폴더별로 관리할 수 있으며 사용자가 폴더를 추가하거나 제거할 수 있다는 장점이 있다. 로컬 PC에서 React 프로젝트를 생성할 때마다 create-react-app 명령어를 입력하고 dependencies를 설정하는 과정이.. 공감수 2 댓글수 0 2022. 12. 26.
  • [티스토리]누적 방문수 100만 달성 티스토리 누적 방문수 100만 달성 2020년 5월 티스토리를 개설했지만 글 쓰는 방법도 몰랐고 블로그 운영 방법도 몰라서 11개월 방치하다가 2021년 4월부터 본격적으로 티스토리를 운영했습니다. 직업이 개발자라서 개발을 주제로 글을 작성했으며 2021년 4월을 기준으로 1년 9개월이 지난 지금(2022년 12월 19일) 누적 방문수 100만을 달성하였습니다. 2022년 목표가 티스토리 누적 방문수 백만이었는데, 다행히 이번 연도가 지나기 전에 목표를 달성하였으며 제 블로그를 방문해주신 많은 분들에게 감사의 인사를 드립니다. 이번 포스팅은 누적 방문수 100만을 달성하면서 겪었던 시행착오와 후기를 작성합니다. 블로그를 시작한 이유 2020년부터 욜로족(돈을 소비하는 사람)보다 파이어족(돈을 모으는 사람.. 공감수 6 댓글수 1 2022. 12. 21.
  • [티스토리]코드블럭 highlight 적용방법 티스토리의 코드블럭 대부분의 개발자들은 티스토리, Velog, GitHub 또는 워드프레스로 개인 사이트를 구축하여 개발 자료를 공유한다. 카카오 계정만 있으면 바로 운영할 수 있는 티스토리의 점유율이 제일 높지 않을까(?)라고 생각하는데 티스토리의 문제점은 기본으로 제공하는 코드블럭의 디자인이 매우 밋밋하다는 것이다. 아래는 티스토리의 기본 스킨인 오디세이에서 코드블럭을 사용했을 때 화면이다. 한눈에 봐도 디자인이 별로다. 기본 코드블럭의 디자인이 별로라서 능력 있는 개발자들은 기본 코드블럭의 디자인을 커스텀해서 사용하고 있다. 아래 스크린샷은 가장 많이 사용하고 있는 carbon이라는 커스텀 코드블럭이다. 서농님의 블로그에서 확인할 수 있다. 다음은 개발자가 직접 커스텀한 것으로 추측되는 코드블럭이다.. 공감수 1 댓글수 1 2022. 12. 21.
  • 개발자가 알아야 할 글쓰기 기본 - 문장을 작성하는 방법 개요 지난 포스팅에서는 개발자가 글을 못 쓰는 이유와 개발자의 글쓰기 세 가지 특징(정확성, 간결성, 가독성)에 대해 설명하였다. 이번 포스팅은 개발자가 글을 작성하기 전에 알아야 하는 기본에 대해 정리한다. 문장을 구조화하는 방법 토익을 처음 입문하면 '영어 5 형식 문장'에 대해 배우게 된다. 기본적으로 모든 문장은 주어, 동사가 존재하며 문장의 의미를 좀 더 자세하게 표현하기 위해 보어, 목적어, 수식어가 사용되기도 한다. 이러한 문장 구조는 한글도 마찬가지다. 한글에서도 문장을 표현하기 위해 기본적으로 주어와 동사를 사용하며 경우에 따라 보어, 목적어, 수식어가 사용되기도 한다. 신기한 점은 문장의 구조는 바뀔 수 있다는 것이고 어떻게 바뀌느냐에 따라 글을 쓰는 속도 그리고 글을 해석하는 속도가 .. 공감수 5 댓글수 0 2022. 12. 18.
  • 개발자가 글을 못 쓰는 이유 개요 개발이라는 주제로 1년 6개월 동안 블로그를 운영하면서 779개의 포스팅을 발행했다. 포스팅에는 도움이 되었다고 댓글을 작성해주신 분들도 있었지만, 반대로 무슨 말인지 이해가 안 된다는 댓글을 작성해주신 분들도 많았다. 아이러니하게도 글 작성자인 나도 과거에 작성한 포스팅을 보면 무슨 내용인지 이해되지 않은 경우가 많았다. 몇 가지 문제점을 살펴보자면 다음과 같다. 방문 유입을 늘리고자 글 퀄리티를 크게 신경 쓰지 않음 줄 간격, 폰트 등 CSS 문제로 가독성이 떨어짐 글로 설명하지 않아도 되는 내용을 글로 설명하여 가독성이 떨어짐 강의할 수 있는 능력이 부족한데, 강의하듯이 글을 작성함 첫 번째 문제점은 블로그 방문 유입을 늘리려면 많은 글을 포스팅하는 것이 좋으므로 퀄리티 있는 글을 작성하기 위.. 공감수 5 댓글수 2 2022. 12. 17.
  • [JS]data 애트리뷰트(Attribute) 사용 방법 개요 HTML에서 애트리뷰트(Attribute)는 스타일 제어 또는 고유한 정보를 할당하거나 JavaScript에서 HTML 요소를 접근하기 위해 사용된다. 일반적으로 가장 잘 알려진 애트리뷰트는 id 및 class 애트리뷰트이며, 이 외에도 name, tab, role, tabindex, target, rel 등 다양한 애트리뷰트가 존재한다. 개발자는 위에서 언급한 애트리뷰트가 아닌 커스텀 애트리뷰트를 사용할 수 있는데, 아래 예제처럼 말도 안 되는 이름으로 애트리뷰트를 설정하는 것이 가능하고 JavaScript에서 커스텀 애트리뷰트를 접근하는 것도 가능하다. 버튼 하지만 대부분의 개발자들은 커스텀 애트리뷰트를 사용하는 것을 꺼려한다. 커스텀 애트리뷰트를 작성한 본인은 해당 애트리뷰트를 사용한 이유를 .. 공감수 0 댓글수 0 2022. 12. 15.
  • [JS]이스케이프를 문자열로 처리하는 String.raw() 메서드 해당 포스팅은 String.raw() 메서드의 필요성과 사용 방법을 설명합니다. 개요 JavaScript에서 문자열을 설정하는 방법은 크게 두 가지로 분류된다. 첫 번째 방법은 작은따옴표(') 또는 큰 따옴표(")를 사용하는 것이고 두 번째 방법은 백틱(`)을 사용하는 것이다. // 작은 따옴표(') 또는 큰 따옴표(")를 사용하여 문자열 할당 const str1 = 'Hello'; const str2 = "Hello"; // 백틱(`)을 사용하여 문자열 할당 const str3 = `Hello`; 백틱을 사용하여 문자열을 할당하는 것을 템플릿 리터럴(Template literals)이라고 말하는데 줄 바꿈을 처리하기 위해 이스케이프를 작성하지 않아도 된다는 장점이 있다. const str1 = "Hi,.. 공감수 0 댓글수 0 2022. 12. 13.
  • [JS]커스텀 이벤트 생성하기(CustomEvent 및 dispatchEvent) 해당 포스팅은 JavaScript에서 커스텀 이벤트를 생성할 수 있는 방법을 설명합니다. 개요 대부분의 개발자는 JavaScript에서 "click" 또는 "change" 이벤트를 많이 사용할 것이다. 아이디(id)와 패스워드(password)를 서버로 전송하기 위해 로그인 버튼을 클릭해야 하며, 네이버와 다음 또는 구글과 같은 웹 사이트의 검색 창에서 키워드를 변경할 때마다 자동 완성이 표시되어야 하기 때문이다. 하지만 경우에 따라 JavaScript에서 제공하는 기본 이벤트가 개발 요구 사항을 충족하지 않을 수 있다. 이러한 경우 개발자는 커스텀 이벤트를 생성하여 원하는 작업을 수행하도록 할 수 있다. 커스텀 이벤트 생성 방법 JavaScript에서 커스텀 이벤트를 생성하는 두 가지 방법이 존재한다... 공감수 1 댓글수 0 2022. 12. 11.
  • [JS]이벤트 위임(Event Delegation)이란? 이벤트 위임(Event Delegation) JavaScript의 대부분 이벤트는 이벤트 흐름(Event Flow)의 이벤트 캡처링, 이벤트 버블링 단계를 거칩니다. 일반적으로 addEventListener() 메서드의 세 번째 매개변수로 true를 전달하지 않은 이상 이벤트 캡처링 단계는 수행되지 않고 이벤트 버블링 단계를 거치는데, 이벤트 버블링은 타겟에서 이벤트가 발생하면 타겟에서 위로 이벤트를 전파하는 것을 말합니다. 아래 예제에서 태그에서 click 이벤트가 발생하면, button → span → div로 이벤트가 전파됩니다. 버튼 const divNode = document.getElementById("div-content"); const spanNode = document.getElement.. 공감수 1 댓글수 0 2022. 12. 11.
  • [JS]이미지가 로딩되었는지 체크하는 방법 이미지가 로딩되었는지 체크하는 방법 JavaScript에서 이미지를 가져와서 웹 페이지에 보여주는 방법은 간단합니다. 태그의 src 애트리뷰트에 이미지가 위치하는 url을 설정하면 됩니다. 예를 들어, 다음 메인 사이트의 로고 사진을 가져와서 보여주고 싶다고 가정합시다. 순서 1. 다음 메인 사이트로 이동한 다음 크롬 개발자 도구를 실행합니다. 순서 2. 요소 탭을 실행한 다음 좌측 상단의 아이콘을 클릭합니다. 순서 3. 로고 사진을 클릭합니다. 순서 4. 현재 소스를 복사한 다음 src 애트리뷰트에 설정합니다. JavaScript에서 이미지를 불러오는 방법은 간단하지만, 용량이 큰 이미지를 로드하는 경우 많은 시간이 걸릴 수 있으며 이미지를 DOM에 추가하는 과정에서 에러가 발생할 수 있습니다. 따라서.. 공감수 2 댓글수 0 2022. 12. 11.
  • [JS]이벤트 핸들러와 이벤트 리스너 이벤트 핸들러와 이벤트 리스너 JavaScript에서 이벤트는 사용자와 웹 페이지간의 상호작용입니다. 예를 들어 티스토리에서 좋아요 버튼을 클릭하거나 네이버 검색 창에서 엔터 키를 누르는 행위를 이벤트가 동작했다고 말합니다. JavaScript에서 이벤트가 발생했을 때, 개발자가 구현한 기능을 수행하도록 함수를 연결하는 것을 이벤트 핸들러 또는 이벤트 리스너라고 말합니다. 이벤트 핸들러와 이벤트 리스너는 비슷하면서도 다른 개념이며 이번 포스팅은 JavaScript에서 이벤트와 함수를 연결하는 방법 그리고 이벤트 핸들러와 이벤트 리스너의 차이점을 설명합니다. 이벤트 핸들러 이벤트 핸들러는 쉽게 설명하자면 addEventListener() 메서드를 사용하지 않고 이벤트와 함수를 연결하는 것입니다. 버튼에서 .. 공감수 1 댓글수 0 2022. 12. 10.
  • [JS]이벤트 흐름(Event Flow) 이해하기 이벤트 흐름(Event Flow) 이해하기 JavaScript에서 이벤트라는 개념은 간단하면서 복잡합니다. 특정 이벤트(클릭, 값 변경, 마우스 커서 이동 등)가 발생했을 때, 동작하는 이벤트 핸들러 함수를 구현하는 것은 간단하지만 이벤트가 발생하고 처리되는 과정은 생각보다 복잡하기 때문입니다. 이번 포스팅은 JavaScript에서 이벤트가 무엇이고 어떻게 동작하는지 설명합니다. 이벤트(Event) 이벤트는 웹 페이지를 사용하는 사용자에 의해 일어나는 사건입니다. 이벤트의 대표적인 예시로 버튼 클릭, 엔터 키 입력, 파일 드래그 앤 드롭이 존재합니다. 사용자가 로그인 화면에서 id와 password를 입력 후 엔터키를 입력하거나 로그인 버튼을 눌렀을 때, id와 password를 처리하는 기능은 개발자가.. 공감수 1 댓글수 0 2022. 12. 10.
  • [JS]insertAdjacentHTML 메서드로 HTML 요소 추가하기 insertAdjacentHTML 메서드로 HTML 요소 추가하기 JavaScript에서 HTML 요소를 추가할 수 있는 방법으로 innerHTML 프로퍼티가 존재합니다. 하지만 innerHTML은 생각보다 빠르게 동작하지 않으며 많은 위험 요소를 가지고 있습니다. 이번 포스팅은 innerHTML의 위험성과 JavaScript에서 HTML 요소를 추가할 수 있는 또 다른 방법인 insertAdjacentHTML() 메서드를 설명합니다. innerHTML의 위험성 HTML 요소를 가져온 다음 innertHTML 프로퍼티의 값을 변경하면 HTML 요소의 텍스트를 변경하거나 하위 노드를 추가할 수 있습니다. 아래는 id가 "list"인 요소를 가져온 다음 innerHTML 프로퍼티를 사용하여 두 개의 요소를 .. 공감수 0 댓글수 0 2022. 12. 10.
  • [JavaScript]두 객체를 합치는 방법 두 객체를 합치는 방법 이번 포스팅은 JavaScript에서 두 객체를 합치기 위해 알아야 할 모든 내용을 설명합니다. Object.assign() Object.assign() 메서드를 사용하여 두 개 이상의 객체를 합칠 수 있습니다. Object.assign() 메서드는 객체의 열거 가능한 프로퍼티를 복사 후 새로운 객체에 붙여 넣습니다. Object.assign(target, source1, source2, ..., sourceN); 매개변수 target: 두 개 이상의 객체가 합쳐진 객체입니다. source1, source2, ..., sourceN: 합쳐지는 객체들입니다. 반환 결과 합쳐진 객체를 반환합니다. const A = { name: 'John', age: 20, job: 'develope.. 공감수 0 댓글수 0 2022. 12. 9.
  • [JavaScript]아스키코드 및 유니코드 변환 방법 아스키코드 및 유니코드 변환 방법 아스키코드와 유니코드는 다른 개념이지만 처음 128개(0~127)의 코드는 동일합니다. 이번 포스팅은 JavaScript에서 아스키코드 및 유니코드로 변환하는 방법을 소개합니다. charCodeAt() - 문자를 코드로 변환 문자를 아스키코드로 변환하려면 charCodeAt() 메서드를 사용합니다. charCodeAt() 메서드는 문자열에서 호출할 수 있으며 특정 위치의 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환합니다. str.charCodeAt(index); 매개변수 index: 문자열의 특정 위치(인덱스)이며 생략하는 경우 0을 기본값으로 사용합니다. 반환 결과 주어진 위치(인덱스)의 UTF-16 코드를 반환하며 0부터 65535 사이의 정수가.. 공감수 1 댓글수 0 2022. 12. 9.
  • [Google]개발자가 구글링하는 방법 개발자가 구글링하는 방법 인터넷에는 수많은 정보가 존재하지만 내가 원하는 정보를 찾는 것은 쉽지 않습니다. 개발자는 하루의 절반을 Google에서 원하는 정보(API 문서, 에러 해결, 프레임워크 등)를 찾기 위해 노력합니다. 다행스럽게도 Google은 검색 결과에 대한 정확한 결과를 제공하기 위해 다양한 기능을 제공합니다. 이번 포스팅은 개발자가 필수적으로 알아야 하는 구글링 방법을 소개합니다. 특정 키워드 및 문장 포함 특정 키워드 및 문장이 포함된 검색 결과를 얻고 싶다면 따옴표(")를 사용합니다. 따옴표를 사용하면 Google은 해당 키워드와 가장 적합한 정보를 제공합니다. 예를 들어, "how to split string in javascript"를 검색하면 키워드와 관련된 검색 결과를 제공합니.. 공감수 0 댓글수 0 2022. 12. 8.
  • [JavaScript]style 프로퍼티 설정 및 가져오기 style 프로퍼티 설정 및 가져오기 이번 포스팅은 JavaScript에서 HTML 요소에 적용된 style 애트리뷰트를 설정 및 가져오는 방법을 소개합니다. 특정 css 프로퍼티 가져오기 태그는 세 가지 css 프로퍼티인 font-size, color, background-color를 가지고 있습니다. style 애트리뷰트의 css 프로퍼티의 이름은 하이픈(-)이 포함되어 있습니다. 따라서, JavaScript에서 css 프로퍼티를 가져오려면 대괄호 표기법을 사용하거나 JavaScript에서 지원하는 프로퍼티를 사용합니다. const inputNode = document.getElementById("input-text"); // JavaScript에서 지원하는 프로퍼티 console.log(inputN.. 공감수 0 댓글수 0 2022. 12. 8.
  • [JavaScript]현재 페이지 새로고침하는 방법 현재 페이지 새로고침하는 방법 이번 포스팅은 JavaScript에서 현재 페이지를 새로고침할 수 있는 두 가지 방법을 소개합니다. location.reload() 첫 번째 방법으로 location 객체에서 제공하는 reload() 메서드를 사용하는 것입니다. location은 전역 객체인 window의 프로퍼티이므로 아래 두 가지 방법으로 reload() 메서드를 호출할 수 있습니다. location.reload(); window.location.reload(); 매개변수 존재하지 않습니다. 반환 결과 존재하지 않습니다. history.go() 두 번째 방법으로 history 객체에서 제공하는 go() 메서드를 사용하는 것입니다. history는 전역 객체인 window의 프로퍼티이므로 아래 두 가지 방.. 공감수 0 댓글수 0 2022. 12. 8.
  • [JavaScript]location 객체 사용 방법 location 객체 사용 방법 location 객체란 현재 활성화된 웹 페이지의 URL 정보를 포함하는 window 객체의 프로퍼티입니다. location 객체는 전역 객체이면서 window 객체의 프로퍼티이므로 window.location 또는 location으로 호출할 수 있습니다. location 객체의 프로퍼티 현재 접속한 웹 페이지의 URL이 아래와 같습니다. https://codesandbox.io/s/js-example-forked-8shrxm?file=/src/index.js 아래 스크린샷은 위 URL 정보를 가지는 location 객체의 프로퍼티입니다. ※ username, password 프로퍼티는 더 이상 사용되지 않는 프로퍼티이므로 설명하지 않습니다. href 전체 URL이 포함된.. 공감수 0 댓글수 0 2022. 12. 7.
  • [JavaScript]style 애트리뷰트(Attribute) 제거하는 방법 style 애트리뷰트(Attribute) 제거하는 방법 이번 포스팅은 JavaScript에서 style 애트리뷰트를 제거할 수 있는 몇 가지 방법을 소개합니다. removeProperty() - 특정 프로퍼티 제거 HTML 요소의 style 애트리뷰트(Attribute)는 세미콜론(;)을 사용하여 여러 값을 설정할 수 있습니다. 아래 HTML 마크업 문서의 태그는 세 가지 css 프로퍼티인 font-size, color, background-color를 가지고 있습니다. JavaScript에서 특정 css 프로퍼티만 제거하고 싶은 경우 style 프로퍼티의 removeProperty() 메서드를 사용합니다. const result = selectedNode.style.removeProperty(css);.. 공감수 1 댓글수 0 2022. 12. 7.
  • [JavaScript]HTML 애트리뷰트(Attribute)가 존재하는지 확인하는 방법 HTML 애트리뷰트(Attribute)가 존재하는지 확인하는 방법 이번 포스팅은 JavaScript에서 HTML 요소에 애트리뷰트가 존재하는지 확인하는 방법을 소개합니다. hasAttribute() - 특정 애트리뷰트가 존재하는지 선택한 요소에서 특정 애트리뷰트가 존재하는지 확인하려면 hasAttribute() 메서드를 사용합니다. const isAttribute = selectedNode.hasAttribute(name); 매개변수 name: 특정 애트리뷰트의 이름을 문자열로 전달합니다. 반환 결과 매개변수로 전달된 특정 애트리뷰트가 존재하면 true를 반환하고 그렇지 않으면 false를 반환합니다. 아래는 id가 "input-text"인 HTML 요소를 선택한 다음 hasAttribute() 메서드로.. 공감수 0 댓글수 0 2022. 12. 7.
  • [JavaScript]HTML 애트리뷰트(Attribute) 제거하는 방법 HTML 애트리뷰트(Attribute) 제거하는 방법 이번 포스팅은 JavaScript에서 HTML 애트리뷰트(Attribute)를 제거하는 몇 가지 방법을 소개합니다. removeAttribute() - 애트리뷰트 이름을 전달 가장 일반적인 방법으로 선택한 요소에서 removeAttribute() 메서드를 호출하여 특정 애트리뷰트를 제거할 수 있습니다. selectedNode.removeAttribute(name); 매개변수 name: 애트리뷰트의 이름입니다. 반환 결과 삭제 여부와 관계없이 undefined를 반환합니다. 아래는 id가 "input-text"인 HTML 요소의 name 애트리뷰트를 removeAttribute() 메서드로 제거하는 예제입니다. const inputNode = docum.. 공감수 0 댓글수 0 2022. 12. 7.
  • [JavaScript]HTML 애트리뷰트(Attribute) 설정하는 방법 HTML 애트리뷰트(Attribute) 설정하는 방법 이번 포스팅은 JavaScript에서 HTML 애트리뷰트(Attribute)를 설정하는 몇 가지 방법을 소개합니다. setAttribute() - 이름과 매핑되는 값을 설정 가장 일반적인 방법인 setAttribute() 메서드를 사용하여 선택한 요소의 애트리뷰트를 설정할 수 있습니다. selectedNode.setAttribute(name, value); setAttribute() 메서드는 두 개의 매개변수를 가집니다. 첫 번째 매개변수는 애트리뷰트의 이름이며 대문자를 입력하면 자동으로 소문자로 변환됩니다. 두 번째 매개변수는 애트리뷰트의 이름과 매핑되는 값이며 문자열 타입으로 변환됩니다. setAttribute() 메서드는 undefined를 반환.. 공감수 0 댓글수 0 2022. 12. 7.
  • [JavaScript]HTML 애트리뷰트(Attribute) 가져오는 방법 HTML 애트리뷰트(Attribute) 가져오는 방법 이번 포스팅은 JavaScript에서 HTML 애트리뷰트(Attribute)를 가져오는 몇 가지 방법을 소개합니다. getAttribute() - 애트리뷰트 이름으로 값 가져오기 특정 HTML 요소를 선택한 다음 getAttribute() 메서드를 호출하여 HTML 애트리뷰트의 값을 가져올 수 있습니다. 아래는 세 개의 애트리뷰트를 가지는 태그입니다. const inputNode = document.getElementById("input-text"); console.log(inputNode.getAttribute("id")); // input-text console.log(inputNode.getAttribute("name")); // content .. 공감수 0 댓글수 0 2022. 12. 7.
  • [JavaScript]DOM 프로퍼티와 HTML 애트리뷰트의 차이점 DOM 프로퍼티와 HTML 애트리뷰트의 차이점 DOM의 프로퍼티(Property)와 HTML의 애트리뷰트(Attribute)는 한글로 번역하면 "속성"이라는 뜻이므로 이 둘을 동일한 의미로 해석할 수 있습니다. 하지만, DOM 프로퍼티와 HTML 애트리뷰트는 엄연히 다른 개념이며 이번 포스팅은 이 둘의 차이점을 설명합니다. 애트리뷰트(Attribute) 특징 1. 애트리뷰트는 HTML에 의해 정의됩니다. 요소는 값이 "content"인 id 애트리뷰트, 값이 "content-name"인 name 애트리뷰트, 값이 "custom"인 custom 애트리뷰트를 가집니다. 특징 2. 애트리뷰트의 타입은 문자열(string)입니다. 위 예제에서 사용된 요소의 id 애트리뷰트의 타입을 typeof 연산자로 확인하면.. 공감수 0 댓글수 0 2022. 12. 6.
  • [JavaScript]대화 상자 - alert, prompt, confirm JavaScript의 대화 상자 이번 포스팅은 JavaScript에서 제공하는 세 가지 대화 상자인 alert(), prompt(), confirm() 메서드 사용 방법을 설명합니다. alert() alert() 메서드는 웹 브라우저에서 경고 창을 사용자에게 표시하며, "확인" 버튼 또는 "ESC" 키를 누를 때까지 스크립트 실행이 일시 중지됩니다. alert() 메서드는 전역 함수이므로 window 객체를 통해 호출하거나 직접 호출할 수 있습니다. // window 객체를 통해 호출하는 경우 window.alert('경고 창입니다.'); // 직접 호출하는 경우 alert('경고 창입니다.'); 아래는 간단한 HTML 마크업 문서이며 "alert()" 버튼을 클릭하면 경고 창이 표시됩니다. alert(.. 공감수 0 댓글수 0 2022. 12. 6.
  • [JavaScript]노드를 복제하는 방법 노드를 복제하는 방법 이번 포스팅은 노드를 복제하기 위해 사용되는 cloneNode() 메서드 사용 방법을 설명합니다. cloneNode() 메서드 선택한 노드에서 cloneNode() 메서드를 호출하면, 복제된 노드를 반환합니다. const newNode = originalNode.cloneNode(deep); originalNode는 선택한 노드를 의미하며, cloneNode() 메서드는 불리언 타입의 매개변수를 가집니다. 매개변수의 값이 true인 경우 선택한 노드와 자식 노드가 복제되며, false인 경우 선택한 노드만 복제됩니다. 매개변수를 생략하면 false가 기본 값이 됩니다. 얕은 복제와 깊은 복제 아래는 간단한 HTML 마크업 문서입니다. JavaScript Svelte Angular 얕.. 공감수 0 댓글수 0 2022. 12. 6.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.