화살표 함수(Arrow Function) 사용법 및 주의할 점
·
Programming/JavaScript & TypeScript
JavaScript의 화살표 함수(Arrow Function)는 ES6에서 도입된 간결하고 편리한 함수 정의 방식입니다. 화살표 함수는 기존의 함수 표현식보다 문법이 간단하고, this 바인딩이 정적으로 결정되는 등 여러 장점을 가지고 있습니다. 이번 글에서는 화살표 함수의 사용법과 주의할 점에 대해 알아보겠습니다.1. 화살표 함수 기본 사용법화살표 함수는 function 키워드 대신 => 기호를 사용하여 함수를 정의합니다. 다음은 기본적인 화살표 함수의 문법입니다.// 기본 함수 표현식const add = function(a, b) { return a + b;};// 화살표 함수 표현식const add = (a, b) => { return a + b;};// 더 간단한 표현 (중괄호와 return ..
JavaScript 스프레드 연산자 사용법
·
Programming/JavaScript & TypeScript
JavaScript의 스프레드 연산자는 배열과 객체를 다룰 때 매우 유용한 기능입니다. 스프레드 연산자를 사용하면 배열이나 객체의 요소를 간편하게 분해하거나 결합할 수 있습니다. 여기에서는 스프레드 연산자의 다양한 사용법을 자세히 알아보겠습니다.1. 배열에서의 스프레드 연산자배열 복사하기배열을 복사할 때 스프레드 연산자를 사용하면 원본 배열을 변경하지 않고 새로운 배열을 생성할 수 있습니다.const originalArray = [1, 2, 3];const copiedArray = [...originalArray];console.log(copiedArray); // [1, 2, 3]배열 병합하기여러 배열을 하나의 배열로 병합할 때도 스프레드 연산자를 사용할 수 있습니다.const array1 = [1, ..
타입스크립트란?
·
Programming/JavaScript & TypeScript
타입스크립트(TypeScript)는 자바스크립트를 기반으로 하는 오픈 소스 프로그래밍 언어로서, 마이크로소프트에서 개발한 언어입니다. 자바스크립트의 기능을 그대로 사용하면서, 정적 타입 검사와 클래스 기반 객체지향 프로그래밍 등을 지원합니다. 타입스크립트의 장점으로는 다음과 같은 것들이 있습니다. 정적 타입 검사: 타입스크립트는 코드를 실행하기 전에 정적으로 타입을 검사하여 오류를 사전에 방지할 수 있습니다. 객체지향 프로그래밍: 타입스크립트는 클래스 기반 객체지향 프로그래밍을 지원합니다. ES6/ES7 문법 지원: 타입스크립트는 최신 ECMAScript 표준인 ES6/ES7 문법을 지원합니다. 코드 가독성: 타입스크립트는 코드를 보다 명확하고 가독성 있게 작성할 수 있도록 도와줍니다. 대규모 프로젝트 ..
웹소켓과 타입스크립트 예제 코드
·
Programming/JavaScript & TypeScript
웹소켓(WebSocket)은 클라이언트와 서버간의 양방향 통신을 가능하게 하는 프로토콜입니다. 이전까지는 HTTP를 사용하여 클라이언트와 서버 간의 단방향 통신만 가능했지만, 웹소켓을 사용하면 클라이언트와 서버가 양방향으로 데이터를 주고받을 수 있습니다. 웹소켓은 HTTP와는 별도의 포트(기본값은 80)를 사용합니다. 클라이언트와 서버가 연결되면, 계속해서 연결을 유지하면서 데이터를 전송할 수 있습니다. 이를 통해, 실시간으로 데이터를 주고받아야 하는 채팅 애플리케이션, 게임, 주식 거래 등에 사용할 수 있습니다. 웹소켓은 HTML5에서 처음 등장했으며, 다음과 같은 특징을 가지고 있습니다. 양방향 통신: 클라이언트와 서버가 양방향으로 데이터를 주고받을 수 있습니다. 실시간 통신: 데이터가 실시간으로 전..
[jQuery] 라디오버튼, 콤보박스에서 자주쓰는 jQuery
·
Programming/JavaScript & TypeScript
jQuery에서 id값의 값을 가져오기 위해서 일반적으로 자주쓰는 값을 정리해보았습니다. 1. 라디오버튼 라디오 버튼의 경우 여러개의 항목중에 특정 항목을 선택한 값을 가져오는 방법입니다. 예 아니오 위와 같이 name의 값을 어떠한 값이 선택됐는지는 아래처럼 하시면 값의 value를 확인할 수 있습니다. $("input[name='select']:checked").val() 만약 위에서 예를 선택하셨다면 value의 값은 1이 나올거고, 아니오를 선택하셨으면 value의 값은 2가 나옵니다. 2. 콤보박스 콤보박스는 여러 경우가 있을 수 있습니다. 콤보박스를 선택한 이름을 가져오거나 해당 콤보박스의 value값을 가져오는 방법이 있습니다. 과일(전체) 사과 바나나 포도 위와 같은 콤보박스를 만들었다면 ..