React - useRef() DOM 요소에 접근할 수 있는 Hook

useRef() useRef는 React Hook API 중의 하나입니다. DOM 요소에 접근하거나, 상태값을 저장할 때 사용하는 API입니다. 내부 current 변수에 저장하게 됩니다. document.getElementById와 비슷한 역할을 하게 됩니다. 1. DOM 요소 가져오기 function Search() { const inputEl = React.useRef(null); function changeHandler() { console.log(inputEl); } return ( Search ) } React.useRef를 선언하고, 아래에 element 태그에 ref에 useRef()를 선언한 변수를 넣어줍니다. input의 change 이벤트와 button의 이벤트에서 동일하게 input..

• format_list_bulleted Develop/React
• · 2023. 2. 5.
• textsms

자바스크립트 - 문자열과 배열 안에 글자 확인하는 함수 includes

자바스크립트 String, Array에서 사용할 수 있는 includes 함수에 대해서 설명드리겠습니다. 간단히 includes 함수 사용법에 대해서 알아보겠습니다. String에서도 사용할 수 있고 Array에서도 사용할 수 있습니다. const array = [1, 2, 3]; console.log(array.includes(2)); // true console.log(array.includes(4)); // false const string = 'Hello Javascript'; console.log(string.includes('Hello')); // true console.log(string.includes('Hi')); // false 첫 번째는 array 함수에서는 2가 있는지 여부를 확인하..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 2.
• textsms

자바스크립트 - 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

자바스크립트 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

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

자바스크립트 - 팩토리 패턴 사용하기

자바스크립트에서 팩토리패턴 사용하는 방법에 대해서 설명해드리려고 해요 팩토리 패턴은 디자인 패턴 중에 하나입니다. 디자인패턴이란? 옛날부터 개발자들이 포로그램을 만들 때, 생겼던 문제점들을 해결하기 위해 만들어낸 전형적인 패턴입니다. 그중 팩토리 패턴은 생성 패턴 중 하나입니다. 팩토리 패턴이란? 부모 클래스에서 자식 객체를 생성하는데, 그 객체의 유형을 다양하게 할 수 있는 패턴입니다. 이렇게 이야기하면 잘 이해가 안 가시죠? 실제 소스로 한번 볼까요? 예시 1 class Superman { name; constructor() { this.name = "Superman"; } } class Batman { name; constructor() { this.name = "Batman"; } } class ..

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

CSS - border-style 테두리 스타일 주기

CSS 테두리 스타일 주는 방법에 대해서 알아보겠습니다. border-style 속성이 있는데 테두리에 스타일을 적용할 수 있습니다. 4가지 속성을 소개 시켜드리겠습니다. solid : 일반적인 기본 선입니다. dotted : 점선입니다. dased : 직사각형 선입니다. double : 두줄 선입니다. 아래 처럼 적용할 수도 있습니다. .border { border-style: solid; } 아래와 같이 css border 속성 두 번째에 스타일 적용할 수 있습니다. border 속성은 [두께, 스타일, 색상]입니다. .border { border: 1px solid black; } 아래 border-style을 적용한 예시입니다. See the Pen Untitled by Young Jun Koo ..

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