ryxxn

HTML 삽입 미리보기할 수 없는 소스 1. Date 객체 생성 // 현재 날짜와 시간을 가지고 있는 Date 객체 생성 const currentDate = new Date(); // 특정 날짜와 시간을 가지고 있는 Date 객체 생성 const customDate = new Date('2023-07-31T12:30:00'); // 특정 날짜를 가지고 있는 Date 객체 생성 (월은 0부터 시작) const specificDate = new Date(2023, 6, 31); // 2023년 7월 31일 2. 날짜 정보 추출 const date = new Date('2023-07-31T12:30:00'); const year = date.getFullYear(); // 2023 const month = d..

HTML 삽입 미리보기할 수 없는 소스 배열 슬라이싱 배열에서 일부 요소를 추출하거나 새로운 배열을 생성할 때, slice() 메서드를 사용할 수 있다. // 원본 배열 const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi']; // 인덱스 1부터 3까지의 요소를 추출하여 새로운 배열 생성 const slicedFruits = fruits.slice(1, 4); console.log(slicedFruits); // ['banana', 'orange', 'grape'] // 원본 배열은 변경되지 않음 console.log(fruits); // ['apple', 'banana', 'orange', 'grape', 'kiwi'] slice() 메서드는 첫 ..

리액트와 타입스크립트를 같이 사용하고 싶다면 npx create-react-app my-app --template typescript 위와 같이 기존 프로젝트 생성 명령어 뒤에 --template typescript만 붙여주면 된다. 리액트 시작하는 법이 궁금하다면 아래 글을 참고하자. [React] 리액트 프로젝트 시작하기 drxxn.tistory.com

HTML 삽입 미리보기할 수 없는 소스 1. node.js 설치하기 node.js 환경에서 구동해야 하기 때문에 node.js가 설치되어 있지 않다면 설치해준다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 프로젝트 생성 프로젝트를 저장할 폴더로 이동 후 터미널에서 다음과 같이 명령어를 친다. npx create-react-app 프로젝트명 ※ 프로젝트명에 대문자는 들어갈 수 없다. 3. 프로젝트 실행 프로젝트 폴더로 이동 후 npm run start 또는 npm start 명령어를 통해 프로젝트를 실행한다. cd 프로젝트명 npm start 프로젝트를 실행하면 다음과 같이 페이지..

코드의 구조를 개선하고 유지보수성을 높이기 위해 디자인 패턴을 사용한다. 그래서 자바스크립트에서 사용하는 다양한 디자인 패턴에 대해 정리해보고자 한다. HTML 삽입미리보기할 수 없는 소스1. 모듈 패턴 (Module Pattern) 모듈 패턴은 전역 스코프의 오염을 방지하고 코드를 모듈화하는데 사용된다. 자바스크립트는 기본적으로 전역 스코프를 가지고 있으므로 모듈 패턴을 사용하여 변수와 함수를 캡슐화하고 함수명 충돌을 피할 수 있다. const MyModule = (function() { let privateVariable = 'I am private'; function privateFunction() { console.log('This is a private function'); } return { ..

HTML 삽입미리보기할 수 없는 소스1. indexOf(): 값의 위치 확인indexOf() 메소드는 배열 내에서 특정 값의 첫 번째 인덱스를 찾아준다. 만약 값이 배열 내에 존재하지 않을 경우 -1을 반환한다. const fruits = ['apple', 'banana', 'orange', 'grape']; const index = fruits.indexOf('banana'); console.log(index); // 1 const notFoundIndex = fruits.indexOf('watermelon'); console.log(notFoundIndex); // -12. includes(): 값의 존재 여부 확인includes() 메소드는 배열에 특정 값이 존재하는지 확인하는 데 사용한다. 값이 ..

HTML 삽입 미리보기할 수 없는 소스 1. filter() 메소드를 이용한 값 삭제 filter() 메소드를 사용하면 특정 값을 제외한 새로운 배열을 생성할 수 있다. 원하는 값을 삭제하고 싶다면 해당 값을 제외하도록 filter() 메소드를 활용할 수 있다. ※ filter() 메소드를 사용하면 원본 배열은 변경하지 않고 원하는 값을 삭제한 새로운 배열을 생성할 수 있다. const numbers = [1, 2, 3, 4, 5]; // 값이 3인 요소를 삭제하고 새로운 배열 생성 const filteredNumbers = numbers.filter((num) => num !== 3); console.log(filteredNumbers); // [1, 2, 4, 5] ※ object 배열에서도 사용할 ..

HTML 삽입 미리보기할 수 없는 소스 1. forEach forEach 메서드는 배열의 각 요소들을 순회하며 콜백 함수를 실행한다. arr.forEach(callback(element, index, array) { // 실행될 코드 }); 예시 const numbers = [1, 2, 3, 4]; numbers.forEach((number, index) => { console.log(`Index ${index}: ${number}`); }); // 결과: Index 0: 1, Index 1: 2, Index 2: 3, Index 3: 4 2. map map 메서드는 배열의 각 요소들을 순회하며 콜백 함수의 반환값으로 새로운 배열을 생성한다. const newArray = arr.map(callback(..

반복문은 자바스크립트에서 특정 작업을 반복적으로 수행할 때 사용되는 구문이다. 다양한 종류의 반복문이 있으며, 각각의 특징과 사용법을 알아보자. HTML 삽입 미리보기할 수 없는 소스 1. for 문 for문은 가장 일반적으로 사용되는 반복문으로, 지정된 조건이 참인 동안 코드 블록을 반복 실행한다. for (초기값; 조건; 증감식) { // 실행될 코드 } 예시 for (let i = 0; i < 5; i++) { console.log(i); } // 결과: 0 1 2 3 4 2. while 문 while문은 주어진 조건이 참인 동안 코드 블록을 반복 실행한다. while (조건) { // 실행될 코드 } 예시 let i = 0; while (i < 5) { console.log(i); i++; } /..