본문 바로가기

전체 글386

[javascript] 자바스크립트 공백 제거(trim, strip whitespace) 1. trim() javascript 문자열에서 공백을 제거하기 위해서는 trim() 메소드를 사용할 수 있습니다. 이는 javascript string의 시작 부분과 끝 부분의 공백을 지워줍니다. 다음은 trim() 메소드의 사용 예제입니다. const str = " Hello World! "; const trimStr = str.trim(); console.log(trimStr); // "Hello World!" trim() 메소드는 매개변수를 받지 않으며 오직 문자열 양 끝의 공백만을 지우는 기능을 합니다. 2. split(), join() trim() 메소드는 문자열 사이의 공백은 지우지 않는데 이와는 다르게 문자열 사이의 공백까지도 제거하고 싶다면 split() 메소드와 join() 메소드를 체.. 2022. 6. 14.
[javascript] 자바스크립트 fade-in 페이지 전환 효과 만들기 참고: https://www.digitalocean.com/community/tutorials/js-simple-page-fade-in 페이지 전환 효과는 애플리케이션 사용자의 사용자 경험에 심미적 효과를 줍니다. javascript는 dom(document object model)이 로드될 때를 감지해 css 클래스를 추가/제거 하여 화면 전환 fade-in 효과를 만들 수 있습니다. Step 1 - CSS opacity와 transition 사용하기 먼저 페이지가 열리는 시간과 fade-in되는 시간에 대한 css 규칙을 만들어야 합니다. 이 효과가 어떻게 보일지는 css의 opacity와 transition 속성에 의해 달라집니다. body 항목에 fade 클래스를 추가/제거 함으로 opacity가.. 2022. 6. 13.
[javascript] 자바스크립트 forEach 사용 방법 (루프돌기) 참고: https://www.programiz.com/javascript/forEach 이 튜토리얼에서는 javascript forEach() 메소드에 대해 설명합니다. forEach() 메소드는 배열의 요소를 반복하며 함수를 호출합니다. 이 루프 방법은 map 및 set에서도 사용할 수 있습니다. JavaScript forEach forEach() 메소드의 문법은 다음과 같습니다. array.forEach(function(currentValue, index, arr)); 위의 코드를 설명하면 function(currentValue, index, arr) - 배열의 각 항목에 대해 실행할 함수 currentValue - 배열의 값 index (선택 사항) - 현재 항목의 인덱스 arr (선택 사항) - .. 2022. 6. 13.
[javascript] 자바스크립트 Date 사용 방법 (현재 날짜 가져오기) 참고: https://www.freecodecamp.org/news/javascript-date-now-how-to-get-the-current-date-in-javascript/ 다양한 프로젝트에서 리소스 생성 날짜나 활동의 타임스탬프 같은 컴포넌트를 만들어야할 일이 있습니다. 날짜와 타임스탬프 형식을 맞추는건 사람을 지치게하는 작업일 수도 있습니다. 이 가이드에서는 이러한 다양한 javascript 날짜 형식을 다루는 방법을 설명하겠습니다. Javascript의 Date 객체 javascript는 Date라는 내장 객체를 가지고 있습니다. 이는 날짜와 시간을 저장하고 그걸 처리하는 메소드를 포함하고 있습니다. 다음 예제에서는 새로운 Date 객체를 생성하기 위해 new 키워드를 사용합니다. const.. 2022. 6. 9.
[javascript] 자바스크립트 로컬스토리지 사용 방법 참고: https://www.javascripttutorial.net/web-apis/javascript-localstorage/ 이 튜토리얼에서는 Storage 타입과 javascript localStorage를 사용하여 영구 데이터를 저장하는 방법에 대해 설명합니다. Storage 타입 Storage 타입은 key-value 쌍을 저장하도록 설계되었습니다. Storage 타입은 Object와 같은 추가 메소드를 가지고 있습니다. setItem(name, value) - name을 키로 값을 저장합니다. removeItem(name) - 이름에 해당하는 key-value 쌍을 제거합니다. getItem(name) - 주어진 이름에 대한 값을 가져옵니다. key(index) - 주어진 숫자 위치에 있는 .. 2022. 6. 3.
[javascript] 자바스크립트 이메일 검증 방법 (verify email with regexp) 참고: https://stackabuse.com/validate-email-addresses-with-regular-expressions-in-javascript/ 소개 웹 개발자에게 다양한 유형의 사용자 입력을 검증하는 것은 매우 중요합니다. 이는 클라이언트와 서버 사이에 전송되는 데이터의 시작점이 되기 때문에 모든 것이 올바른 발판 위에서 시작하도록 해야 합니다. 또한 사용자 입력은 악의적일 수 있기 때문에 보안도 고려해야합니다. 프론트 엔드에서 입력 유효성을 검사하여 문제를 최대한 피하는 것이 좋습니다. 이 글에서는 정규표현식(regular expression)을 사용하여 이메일 주소를 확인하는 방법을 살펴보겠습니다. Javascript의 정규 표현식 정규 표현식에 익숙하지 않거나 가물가물한 기억을.. 2022. 5. 30.
[javascript] 자바스크립트 parseInt 사용 방법 (문자열을 숫자로 변환) 참고: https://www.freecodecamp.org/news/parseint-in-javascript-js-string-to-int-example/ 이 튜토리얼에서는 javascript 함수 parseInt()에 대해 설명하겠습니다. 이 parseInt() 함수는 문자열을 파싱해서 숫자나 NaN(Not a Number)을 리턴합니다. 1. parseInt 작동 방식 parseInt() 함수를 사용하는 주요 목적은 문자열에서 숫자를 추출하기 위함입니다. 이 함수는 입력받은 문자열을 실제 숫자값으로 바꾸어 반환합니다. 구문은 다음과 같습니다. parseInt(string) 다음의 예를 살펴보겠습니다. const myNumber = '3'; console.log(2 + myNumber); // retu.. 2022. 5. 30.
[javascript] 자바스크립트 Number 타입 사용 방법 참고: https://www.javascripttutorial.net/javascript-number/ 이 튜토리얼에서는 javascript 숫자 유형과 이를 효과적으로 사용하는 방법에 대해 알아보겠습니다. Javascript의 Number 소개 javascript는 number 유형을 사용하여 정수와 부동소수점 값을 모두 나타냅니다. 기술적으로 javascript number 유형은 IEEE-754 형식을 사용합니다. ES2020에서는 2^53 - 1 보다 큰 수를 표현하기 위해 새로운 타입인 bigint를 기본 유형으로 도입했습니다. 다양한 유형의 숫자를 지원하기 위해 javascript는 다양한 숫자 리터럴 형식을 사용합니다. Integer Numbers 다음은 10진수 정수를 가지는 변수를 선언하.. 2022. 5. 27.
[javascript] 자바스크립트 console.log 사용 방법 (로그 찍기) 참고: https://www.geeksforgeeks.org/javascript-console-log-with-examples/ console.log()는 이미 정의된 모든 종류의 변수를 출력하거나 사용자에게 표시되어야 하는 메시지를 출력하는데 사용되는 javascript 함수 입니다. 문법: console.log(A); 매개변수: 배열, 객체 또는 모든 메시지가 될 수 있는 것들을 허용합니다. 반환값: 주어진 매개변수의 값을 반환합니다. 1. 숫자를 인수로 전달 숫자가 console.log() 함수에 전달되면 함수가 이를 표시합니다. 결과: 2. 문자열을 인수로 전달 문자열이 함수 console.log()에 전달되면 함수가 이를 표시합니다. 결과: 3. 문자를 인수로 전달 문자를 console.log(.. 2022. 5. 27.
[javascript] 자바스크립트 fetch api 사용 방법 참고: https://www.javascripttutorial.net/javascript-fetch-api/ 이 튜토리얼에서는 javascript의 fetch api를 사용하여 어떻게 비동기 HTTP 요청을 하는지 알아보겠습니다. fetch api는 웹브라우저에서 서버로 HTTP 요청을 하게 해주는 최신 인터페이스입니다. 만일 XMLHttpRequest(XHR) 객체를 사용하고 있다면 fetch api로 모든 작업을 대체할 수 있습니다. 추가적으로 fetch api는 서버에서 웹브라우저로 데이터를 전송할 때 유연한 기능을 제공하기 위해 Promise를 사용하기 때문에 더 간단하고 깔끔합니다. fetch() 메소드는 웹브라우저에서 URL 요청을 전송할 때 전역 스코프를 가지기 때문에 어디서든 사용이 가능합.. 2022. 5. 4.
[javascript] 자바스크립트 문자열에 0으로 자리수 채우는 방법 (padding) 참고: https://www.samanthaming.com/tidbits/97-string-padstart-padend/ 문자열에 자릿수를 맞춰 특정 문자를 채우기는 매우 쉽습니다. 메소드에 원하는 문자열과 길이를 매개변수로 전달하기만 하면 됩니다. 그러면 전달받은 길이를 만족할 때 까지 문자열이 채워집니다. padStart() 메소드를 사용하여 이를 시작 부분에 적용하고, padEnd() 메소드를 사용하여 문자열 끝 부분에 적용합니다. const padded = '15'; padded.padStart(4, '0'); // "0015" const string = 'hi'; string.padStart(3, 'c'); // "chi" string.padEnd(4, 'l'); // "hill" 문법 아래 코.. 2022. 5. 3.
[javascript] 자바스크립트 enter key 입력 방법 참고: https://codesource.io/how-to-trigger-enter-key-in-javascript/ 이 튜토리얼에서는 javascript에서 어떻게 엔터키를 입력 받을지 알아보겠습니다. form에서 input 값을 전송할 때 일반적으로 전송 버튼을 클릭해서 전송을 했습니다. 그런데 가끔은 키보드의 엔터키를 누름 으로서 form input을 전송하는 기능이 필요할 때가 있습니다. 이를 javascript로 구현하는건 쉽습니다. 다음 예제는 이러한 기능을 구현한 예제입니다. Press Enter for Trigger the Button Press the "Enter" key to trigger the button. Button 여기서는 단순하게 input 필드와 버튼을 넣었습니다. 또 사용.. 2022. 5. 2.
[javascript] 자바스크립트 querySelector 사용 방법 참고: https://www.javascripttutorial.net/javascript-dom/javascript-queryselector/이 튜토리얼에서는 CSS 선택자를 기반으로 element를 찾는 javascript의 querySelector()와 querySelectorAll()을 사용하는 방법을 설명합니다.JavaScript의 querySelector()및 querySelectorAll() 메소드 소개querySelector()는 Element 인터페이스의 메소드 입니다. querySelector() 메소드는 CSS 선택자에 매치되는 하나 이상의 element 중 첫 번째 항목을 반환해줍니다. 다음 코드는 querySelector() 메소드의 문법을 보여줍니다.let element = par.. 2022. 4. 29.
[javascript] 자바스크립트 array 사용 방법 참고: https://www.programiz.com/javascript/array 이 튜토리얼은 예제와 함께 javascript array를 배울 수 있도록 했습니다. array는 여러개의 값을 한번에 저장할 수 있는 객체입니다. 예를 들면 const words = ['hello', 'world', 'welcome']; 여기서 words가 array 입니다. 그리고 이 배열은 3개의 값을 저장하고있습니다. array 생성하기 array는 다음의 두가지 방법으로 생성할 수 있습니다. 1. array 리터럴 사용하기 배열을 생성하는 가장 쉬운 방법은 array 리터럴 '[]'을 사용하는 것 입니다. const array1 = ["eat", "sleep"]; 2. new 키워드 사용 배열은 javascrip.. 2022. 4. 27.
[javascript] 자바스크립트 classList 사용 방법 참고: https://www.javascripttutorial.net/javascript-dom/javascript-classlist/ 이 튜토리얼에서는 javascript classList 속성을 사용하여 element의 class를 사용하는 방법을 보입니다. classList는 element의 읽기전용 속성으로 css class의 현재 값을 반환합니다. const classes = element.classList; classList는 DOMTokenList 객체로 element의 class 속성을 보여줍니다. classList가 읽기전용이어도 다양한 메소드를 통해 class 목록을 조작할 수 있습니다. 이제 classList의 인터페이스를 통해 css class를 조작하는 예제를 보겠습니다. elem.. 2022. 4. 27.
[javascript] 자바스크립트 Promise 사용 방법 참고: https://www.geeksforgeeks.org/javascript-promises/ Promise 는 javascript에서 비동기 작업을 처리하는 데 사용됩니다. 기존 코드만으로는 콜백의 콜백을 만들어 점점 관리가 어려워지는 콜백 지옥을 해결하고 다수의 비동기 작업을 처리할 때 관리하기 쉽도록 만들어줍니다. Promise 이전에는 이벤트와 콜백 함수가 사용되었지만 기능이 제한적이고 다루기 힘들었습니다. 여러번 중첩된 콜백함수를 계속 사용하는 것은 점점 프로젝트를 관리하기 힘들게 하고 사용자가 동시에 여러개의 콜백을 처리하는 것도 쉬운일은 아닙니다. 이벤트 역시 비동기 작업 처리에 적합하지는 않습니다. Promise는 간편하게 비동기 작업을 처리하기 위한 이상적인 선택입니다. 이는 여러 비.. 2022. 4. 26.
[javascript] 자바스크립트 및 캔버스를 이용한 그림판 만들기 참고: https://dev.to/javascriptacademy/create-a-drawing-app-using-javascript-and-canvas-2an1 이 튜토리얼에서는 브라우저에서 간단히 그림을 그릴 수 있도록 하는 스크립트를 만들 것입니다. 이를 위해 기본 javascript와 canvas API를 사용할 것입니다. 이 튜토리얼을 마치고 나면 canvas API와 javascript의 이벤트 처리에 대한 대략적인 흐름을 알게 될 것입니다. HTML markup 전체 앱을 section으로 래핑하고 class 이름을 container로 해서 시작하겠습니다. 이는 툴바와 드로잉 보드를 정렬하는데 사용합니다. 이 안쪽에 툴바를 위치시킬 div를 넣고 javascript 작업을 수월하게 하기위해 .. 2022. 4. 26.
[javascript] 자바스크립트 createElement 사용방법 참고: https://www.javatpoint.com/javascript-create-element 이 글은 javascript를 통해 HTML element를 만드는 방법에 대해 설명합니다. 그리고 생성된 element를 document에 삽입하는 예제도 함께 소개합니다. HTML 코드는 element를 만드는 유일한 방법은 아닙니다. 간단하기 때문에 대부분 HTML document에서 바로 element를 생성하곤 했지만 javascript로도 element를 생성하는 것이 가능합니다. document.createElement()는 javascript를 통해 동적으로 특정한 이름의 HTML element를 생성하는데 사용됩니다. 이 메소드는 element의 이름을 매개변수로 받아서 해당 노드를 생성.. 2022. 4. 21.
[javascript] 자바스크립트 setInterval 사용방법 참고: https://www.javatpoint.com/javascript-setinterval-method javascript의 setInterval() 메소드는 지정된 시간 간격마다 지정된 기능을 반복하고자 할 때 사용합니다. 이는 특정 코드나 주어진 함수를 지정된 간격으로 호출합니다. 이 메소드는 윈도우가 닫히거나 clearInterval() 메소드가 호출될 때 까지 계속 실행되고 리턴값으로 0이 아닌 숫자인 타이머 id를 반환합니다. setTimeout() 메소드와는 달리 setInterval() 매소드는 함수를 여러번 호출하고 또한 window. 구문을 생략할 수 있습니다. setInterval() 메소드의 일반적인 사용방법은 다음과 같습니다. 문법 window.setInterval(functi.. 2022. 4. 21.
[javascript] 자바스크립트 setTimeout 사용방법 참고: https://www.freecodecamp.org/news/javascript-settimeout-how-to-set-a-timer-in-javascript-or-sleep-for-n-seconds/ 이 튜토리얼은 javascript 내장 메소드인 setTimeout()을 사용한 코드 예제를 보여주고 이 메소드가 작동하는 방식을 이해하는데 도움을 줄 것입니다. javascript에서 setTimeout()을 사용하는 방법 setTimeout() 메소드의 기능은 일정 시간이 지난 후 정해진 코드를 실행하게 합니다. 특정 시간에 javascript 코드를 실행하도록 타이머를 설정하는 것이라고 생각할 수 있습니다. 예를 들어 아래 코드는 2초가 지난 후 javascript 콘솔에 "Hello Worl.. 2022. 4. 20.

티스토리툴바