자바스크립트 - createElement, createTextNode 이용하여 버튼 만들기

자바스크립트를 에서 createElement, createTextNode를 이용하여 버튼을 만들어 보겠습니다. 먼저 두 가지 함수에 대해서 먼저 알아보겠습니다. createElement createElement는 지정한 태그 네임을 입력하면 해당 태그의 element를 반환합니다. 이렇게 사용할 수 있습니다. const btn = document.createElement('button'); createTextNode createTextNode는 텍스트 노드를 반환합니다. const btnText = document.createTextNode('button'); 이제 createElement로 만들어준 버튼에 appendChild를 이용하여 텍스트 노드를 넣어줍니다. btn.appendChild( btnT..

• format_list_bulleted Develop/JavaScript
• · 2023. 1. 29.
• textsms

자바스크립트 - 타이머 함수 setTimeout과 clearTimeout

자바스크립트에서 많이 사용하는 타이머 함수 setTimeout입니다. setTimeout setTimeout은 일정 시간이 지난 뒤에 함수를 실행시키는 함수입니다. 두 개 파라미터를 받습니다. 첫 번째는 실행시킬 함수입니다. 두 번째는 시간입니다. ms 단위라서 1000이 1초입니다. 아래 예제는 1초 뒤에 실행되는 setTimeout 함수입니다. setTimeout(function() { console.log('setTimeout') }, 1000) clearTimeout clearTimeout을 이용하여 실행을 중단할 수 있습니다. const timer = setTimeout(function() { alert('2초 뒤 실행') }, 2000) clearTimeout(timer); 자바스크립트를 사용..

• format_list_bulleted Develop/JavaScript
• · 2023. 1. 29.
• textsms

자바스크립트 - setInterval 이용하여 시계 만들기

자바스크립트 타이머 함수 setInterval과 clearInterval을 이용하여 현재 시간이 계속 나오는 시계를 만들어 보도록 하겠습니다. setInterval setInterval은 일정 시간 간격으로 함수를 계속 실행시키는 함수입니다. 두 개 파라미터를 받고 첫 번째는 실행시킬 함수 두 번째는 시간입니다. 시간의 경우에 ms 단위라서 1초의 경우 1000ms입니다. 아래와 같이 실행시키고 싶은 함수를 첫 번째 인자에 작성하고 반복적으로 실행시킬 시간을 두 번째 인자에 작성합니다. setInterval(function() { // to do something }, 1000) clearInterval clearInterval은 setInterval로 실행시킨 반복을 중단할 때 쓰는 함수입니다. set..

• format_list_bulleted Develop/JavaScript
• · 2023. 1. 28.
• textsms

크롬 event.path 지원 중단으로 composedPath() 사용

2023년 1월 10일에 크롬이 109 버전으로 업데이트되었습니다. event.path는 이벤트가 발생한 요소에서 최상의 요소까지 배열을 반환합니다. [button#btn1, body, html, document, Window] 그러나 크롬 109 버전부터 event에 path가 더 이상 지원을 하지 않고 되었습니다. 기존에 event.path를 사용하였으면 composedPath()로 변경하셔야 합니다. See the Pen Untitled by powerku (@powerku) on CodePen. https://chromestatus.com/feature/5726124632965120 Chrome Platform Status chromestatus.com https://developer.mozill..

• format_list_bulleted Develop/JavaScript
• · 2023. 1. 26.
• textsms

사회 초년생때 차를 사야하는 이유

연봉별 차량이 이슈가 된 적이 있었다. 연봉 얼마 이하는 뚜벅이로 다녀야 한다… 자기 연봉에 맞는 차들을 피라미드 형식으로 구분해 놨다. 나는 직장생활 2년 차 정도에 500만 원짜리 중고차를 구입하였다. 그전까지는 대중교통이 이렇게 잘되어있는데라고 생각해서 굳이 차의 필요성을 느끼지 못하였다. 사회 초년생 때 차를 사야 하는 이유에 대해서 적어보려고 한다. 1. 픽업 서비스를 제공할 수 있다. 픽업서비스는 최고의 의전이다. 타지에서 부모님이나 친구가 왔을 때 역에 마중 나가고 데리러 가고 다시 데려다주는 서비스를 할 수 있게 된다. 직장동료, 친구들과 퇴근, 만남 이후 역까지 데려다주고 조금 더 호의를 베풀면 집까지 데려다줄 수 있다. 같이 차를 타는 시간에 모임에서는 하지 못했던 비하인드 이이기도 나..

• format_list_bulleted 일상/이야기
• · 2023. 1. 23.
• textsms

30대 남자가 블로그를 시작해야 하는 이유

30대 남자에게 블로그 시작을 추천하는 이유에 대해서 적어보려고 합니다. 누구나 블로그나 유튜브하는 것을 추천하는데 특히나 30대 남자들에게 추천한다. 진입장벽도 낮고 가벼운 마음으로 시도해 보기가 좋다. 1. 맨스플레인을 줄일 수 있다. 중년 남성들은 특히 자신이 알고 있는 지식을 남에게 알려주려고 하는 게 심하다. 그 분야 전문가도 아니고 정확하게 알고 있지 않아도 얉은 지식에 대해서 남에게 전달해주려고 한다. 직장동료, 가족, 후배 등등에게 맨스플레인을 시전해서 관심도 없는 상대에게 고통을 주게 된다. 상대방을 위해서 정보를 전달해주려는 마음은 이해는 하지만 당하면 상당히 고통스럽다. 그 맨스플레인을 포스팅에 시도하면 좋다. 자신이 알고 있는 내용을 말이 아닌 글로 적게 되면, 내가 정말 알고 있었..

• format_list_bulleted 일상/블로그
• · 2023. 1. 22.
• textsms

자바스크립트 reduce 함수를 이용하여 배열 합계 구하기

자바스크립트에 reduce 함수가 있습니다. 자바스크립트 레퍼런스 문서에 reduce에 대해서 설명을 너무 어렵게 해놔서 무슨 말이지 하나도 모르겠네요. 좀 간단하계 합계를 구하는 함수를 만들어보면서 설명드리겠습니다. var arr = [1, 2, 3, 4, 5]; var sum1 = arr.reduce((a, b) => a + b)); // 15 reduce는 배열 함수입니다. 배열에서 사용할 수 있는 함수입니다. (a, b) => a + b) 이렇게 들어가 있는 부분이 reduce의 파라미터 입니다. reduce가 실행 될때, 해당 배열만큼 해당 callback이 타게 됩니다. a의 경우에는 이전 callback의 return 값입니다. b는 현재 배열의 값이 구요. 그렇게 되면서 이전 합계의 값을 ..

• format_list_bulleted Develop/JavaScript
• · 2023. 1. 20.
• textsms

나트랑 해산물 맛집 - BABA CIU

작년에 냐짱 다녀왔는데, 냐짱 시내 근처에 있는 해산물 맛집을 소개해드리려고 합니다. BABA CIU라는 가게입니다. 가성비 맛집이라고 이야기를 들어서 냐짱을 놀러 갔을 때 방문했습니다. 시내랑 살짝 떨어져 있긴 한데, 약 10분 정도 걸어서 갔었습니다. 검은색 간판에 BABA CIU라고 적혀있었습니다. 여유 있게 식사할 수 있었습니다. 영어를 할 수 있는 직원은 없어서, 다른 분이 오셔서 메뉴를 설명해 주시고 주문을 했습니다. 영어 메뉴판은 없고 베트남어 메뉴판이어서 다른 메뉴는 시킬 수가 없었습니다. 가운데에 있는 SET 메뉴를 시켰습니다. 설명해 주신 다른 분에게 어떤 차이가 있는 설명을 해주셨는데, 기억이 나지를 않네요 489만 동이면, 약 2만 5천 원 정도의 가격입니다. 이런 비주얼로 나옵니다..

• format_list_bulleted 일상/맛집
• · 2023. 1. 19.
• textsms

CSS 자주 사용하는 선택자 모음

자주 사용하는 CSS 선택자에 대해서 소개드리겠습니다. css를 작성하다 보면 어디에 스타일 주어야 할지 정해야 하는데요. 선택자를 이용하여 스타일을 적용할 요소를 정할 수 있습니다. 전체 선택자 모든 요소에 다 적용이 됩니다. * 를 이용해서 사용합니다. * { color: red; } 유형 선택자 특정 태그에 적용이 됩니다 div, span 태그 등을 이용합니다. 해당 태그에는 모두 적용이 됩니다. div { width: 200px; } span { display: inline-block; } ID 선택자 요소의 ID에 적용이 됩니다. ID 앞에 #을 적어서 사용합니다. CSS를 사용하는데 ID 선택자는 꼭 필요한 경우가 아니면 사용하지 않는 것이 좋습니다. ID를 이용하게 되면 다른 요소에는 적용이..

• format_list_bulleted Develop/CSS
• · 2023. 1. 19.
• textsms

월급쟁이는 부자가 될 수 없다.

직장인들에게 연말연초에 연봉협상을 하게 된다. 한 해 동안 회사의 성과가 높으면 연봉 인상률이 높아지고 회사가 어렵거나 성과가 저조하다면 동결 또는 연봉 인상률이 낮을 수밖에 없다. 성과가 높아서 연봉이 많이 인상이 되면 부자가 될 수 있을까? 월급쟁이가 버는 돈은 ( 시급 x 시간 )이다. 이 두 가지 변수 중 하나는 크게 올릴 수 있어야 부자가 될 수 있다. 시간은 제한이 있다. 하루 24시간 특히 일을 할 수 있는 시간은 더욱 제한되어 있다. 52시간 퇴근하고 부업을 해도 12시간을 넘기기 힘들다. 연봉 인상률이 아무리 높아도 20%를 넘지 못한다. 일반 직장인들은 연봉이 높지 않아서 인상이 돼도 크게 오르지 않는다. 내 연봉이 2배가 될 때까지 10년 이상의 시간이 걸리게 된다. 운동선수, 연예인..

• format_list_bulleted 일상/재테크
• · 2023. 1. 18.
• textsms