Front-End/JavaScript,TypeScript11 [JavaScript] 비동기 처리 및 Promise 객체 배경프론트엔드 개발할 때 서버와 통신하는 과정에서 굉장히 중요한 이론이 비동기 처리 관련 이론이다. 일반적으로 코드는 동기 처리가 이루어지지만 상황에 따라 비동기 처리가 필요한 경우가 있는데, 주로 서버와 통신을 통해 데이터를 가져오는 방법이다. 동기 처리 vs. 비동기 처리동기 처리는 일반적인 코드 수행 순서와 동일하게 먼저 요청이 들어온 순서로 진행하며 해당 작업이 완료되기 전까지 다음 작업을 진행하지 않고 기다리게 된다.반면에 비동기 처리는 수행 요청을 동일한 순서로 진행되지만 해당 작업이 완료되지 않더라도 다음 작업을 진행한다. 실행 요청이 들어가는 순서는 동일하지만 다음 작업을 실행하기 전에 코드가 대기를 하느냐 하지 않느냐의 차이를 갖고 있다.// 동기 처리console.log( "A" );c.. 2025. 9. 10. [JavaScript] 객체의 활용 ( feat. 리터럴, 스프레드 연산자 ) 배경우리가 Java에서 DTO, Entity 등을 사용하는 것처럼 JavaScript에서도 객체를 굉장히 자주 사용한다. 또한, 데이터를 다루기 위해 객체를 다루는 것은 너무나도 필요하고 당연한 일이다.이에 JavaScript에서 객체를 다루는데 사용할 수 있는 다양한 기능들을 알아보고자 한다. Template Literals 활용내장된 다양한 기능들을 의미한다. 객체를 다룰 때 여러 기능들을 함께 활용하는데 유용한 것들을 알아보고자 한다. 객체 생성시 매개변수 매핑 생략// 기존의 일반적인 방식function createPerson( name, age ){ const person = { name: name, age: age }; return person;}// 객체 리터럴.. 2025. 9. 10. [JavaScript] Rest Parameter 활용 배경ECMAScript 명세의 발전에 따라 JavaScript에서 사용할 수 있는 특수한 기능 중 하나이다. JavaScript의 장점이자 우리가 코딩할 때 편하게 사용할 수 있는 편의 기능이 굉장히 많다. ECMAScriptECMAScript라는 말을 이번에 처음 듣게 되었다. 무슨 라이브러리나 새로운 언어인가 싶었는데 그건 아니었고 Script언어의 명세였다. JavaScript 이야기를 하다가 ECMAScript 이야기가 나온 이유는 ECMAScript 명세에 따라 만들어진 언어가 JavaScript이며, 이 ECMAScript 명세에 앞으로 이야기할 특이하고도 편리한 기능들이 적용되어 JavaScript에서도 이런 기능들을 사용할 수 있어졌기 때문이다. Rest Parameter모든 메서드는 ar.. 2025. 9. 10. [JavaScript] Event 다루기 개요프론트엔드에서 제일 중요한 것중 하나가 이벤트를 다루는 것이라고 생각한다.사용자의 요청을 받는 수단으로써 이벤트를 원하는대로 다룰 수 있는 것이 프론트엔드에서 제일 중요한 능력 중 하나라고 생각한다. 이벤트 종류이벤트 종류에는 굉장히 많이 있다. 그 중에서 대표적인 것들 몇 가지만 나열해보고자 한다.1. 마우스 이벤트마우스 이벤트에는 아래와 같은 이벤트들이 대표적이다.- click: 마우스 단일 클릭- Dbclick: 마우스 더블 클릭- contextmenu: 마우스 우클릭- mouseover: 특정 요소에 마우스 커서가 올라갔을 때- mousemove: 마우스 커서를 움직일 때- mouseout: 마우스 커서가 특정 요소 밖으로 벗어났을 때- mousedown: 마우스를 눌렀을 때 ( = 홀드할 때.. 2025. 9. 9. [JavaScript] Math를 사용한 난수 생성 개요생각보다 서비스를 개발하며 특정 범위 내의 난수를 생성하는 경우가 많다.누구나 다 아는 random() 함수를 사용할 것이며 이 random() 함수에 대해 자세한 사용법을 알아보았다. Math.random()Math 내장 객체의 static 함수인 random() 함수는 0~1 범위 내의 무작위 실수를 반환해준다.개발자도 알 수 없는 임의의 난수를 생성할 수 있는 몇 안되는 방법 중 하나이다.하지만 이 값을 받아보면 소수 몇 자리까지 나오는지 세기도 힘든 길이의 소수가 나온다.우리는 이런 소수가 필요한 것이 아닐 가능성이 높다.따라서, 이 값을 잘 가공해 우리가 원하는 범위의 난수를 반환하게 만들어 볼 것이다. Math.round() / Math.floor() 활용round()는 반올림 메서드 fl.. 2025. 9. 8. [JavaScript] Date 객체를 통한 날짜, 시간 다루기 개요서비스를 개발하다 보면 당연하게도 시간과 날짜를 다루는 일이 굉장히 많다.특히 백엔드를 개발하는 경우 DB에 저장할 때 created_at, updated_at, deleted_at 등 시간과 날짜를 다루는 경우를 많이 볼 수 있다.JavaScript에서 Date 객체의 특징을 알아보고 사용하는 방법을 알아보고자 한다. Date 객체 생성JavaScript의 내장 객체로 Date가 있기 때문에 많이 해줄 것 없이 Date 객체를 생성할 수 있다.심지어 내가 특정 날짜를 지정해서 Date 객체를 생성할 수도 있다.// 현재 시간 조회const now = new Date();// 연, (월-1), 일, 시 , 분 초// 2020년 3월 1일 12시 40분 22초const birth = new Date( .. 2025. 9. 8. 이전 1 2 다음