자바스크립트
[JavaScript] 조건부 삼항 연산자 사용 방법
조건부 삼항 연산자란 무엇이며 또 어떻게 사용할까요? 조건부 삼항 연산자는 자바스크립트에서 세 개의 피연산자를 사용할 수 있는 유일한 연산자로 보통 if 문을 간결하게 표현하기 위해 사용합니다. 조건부 삼항 연산자 예시 조건부 삼항 연산자는 어떻게 사용할까? 다음은 삼항 연산자를 사용한 함수의 예시입니다. 아래에서는 isWin이 true일 경우 10이 출력되고, false일 경우 0이 출력됩니다. function getScore(isWin) { return (isWin ? 10 : 0); } console.log(getScore(true)); // 10 console.log(getScore(false)); // 0 조건부 삼항 연산자 사용 방법 조건부 삼항 연산자는 condition ? exprIfTru..
[JavaScript] 비구조적 할당 사용 방법과 이유
비구조 할당(destructuring assignment)이란 배열 또는 객체의 속성을 변수에 연결하는 방식입니다. 비구조적 할당 문법은 어떻게 사용하며, 왜 사용하는 것일까요? 비구조적 할당 사용 방법 자바스크립트에서는 배열이나 객체를 사용하여 일련의 데이터를 간편하게 저장할 수 있죠. 비구조적 할당은 이와 유사한 문법을 사용합니다. 차이점은 왼쪽에 값이 오고 오른쪽에 기존의 배열 또는 객체 변수 이름이 온다는 것입니다. 아래의 예시 코드를 참고해보세요. const numbers = [1, 2, 3, 4, 5]; const [firstNumber, secondNumber, ...restNumbers] = numbers; console.log(firstNumber); // 1 console.log(sec..
자바스크립트 배열 요소 랜덤 선택하기
자바스크립트 배열에 담긴 요소를 랜덤으로 선택하려면 어떻게 해야 할까요? 다양한 방법이 있지만 가장 많이 사용되는 방법은 다음과 같습니다. 배열 요소 랜덤 선택하기 아래와 같이 날씨의 정보를 담은 배열이 있다고 해보겠습니다. const weather = ["Sunny", "Cloudy", "Rainy", "Windy"]; 각 요소를 랜덤으로 선택하려면 아래와 같이 Math() 메소드를 사용할 수 있습니다. Math.floor(Math.random() * weather.length); Math.random()은 0에서 1 사이의 소수를 랜덤하게 생성해주는 메소드죠. 여기에 배열의 길이를 곱해준 다음 Math.floor()를 통해 정수로 만들어줍니다. 이렇게 하면 랜덤한 배열 인덱스를 받을 수 있습니다. 최..
자바스크립트 디데이 계산하기
자바스크립트를 사용하여 현재 날짜를 받고, 이를 통해 디데이를 계산하는 방법에 대해 알아보도록 하겠습니다. 현재 날짜와 디데이 날짜 설정 디데이를 계산하려면 현재 날짜와 디데이 날짜를 알아야겠죠? 자바스크립트에서는 new Date()를 통해 현재 날짜와 시각을 받을 수 있습니다. 디데이 날짜는 올해의 크리스마스로 지정해보도록 하겠습니다. function christmasClock() { const today = new Date(); const year = today.getFullYear(); const christmas = new Date(`${year}-12-25`); 디데이 계산하기 이제 오늘 날짜와 디데이 날짜의 차이를 계산하고 이를 디데이 형식으로 표현할 수 있습니다. const untilChri..
타입스크립트 (1) 타입스크립트란?
타입스크립트란? 타입스크립트는 마이크로소프트에서 관리하는 오픈 소스 프로그래밍 언어로 자바스크립트의 슈퍼셋(superset)입니다. 슈퍼셋은 상위 집합이라는 의미로 자바스크립트의 모든 기능을 지원하는 동시에 추가 기능을 제공한다는 의미입니다. 타입스크립트가 출시된 이유는 무엇이며 바닐라 자바스크립트에 비해 어떤 장점이 있을까요? 타입스크립트를 사용하는 이유 타입스크립트를 사용하는 가장 큰 이유 중 하나는 타입(type)을 사용하여 런타임 이전에 오류를 발견하기 위해서입니다. 아래 예시를 살펴볼까요? 아래와 같은 자바스크립트 코드의 의도는 숫자를 전달받는 것이겠지만 실제로는 어떤 타입의 인수를 받고 리턴해야 하는지 정확하게 정해져 있지 않습니다. 따라서 문자와 숫자를 더하는 이상한 연산도 오류가 없이 진행..
[WebSocket/Socket IO] 채팅 서비스 구현 1. 프로젝트 설정
안녕하세요. 휘입니다. 이번 시리즈에서는 WebSocket과 Socket IO를 사용한 실시간 채팅 서비스를 구현하는 방법에 대해 살펴보려고 합니다. 1. 백엔드 설정하기 먼저, 프로젝트를 진행할 새로운 디렉토리를 생성하고 이동한 다음 터미널을 엽니다. (1) NodeJS 설치와 package.json 생성 Node.js를 설치합니다. 설치 완료 후 node -v를 통해 설치가 잘 됐는지 확인할 수 있습니다. 다음으로 package.json 파일을 생성해줍니다. npm init -y express를 설치해줍니다. npm i express (2) Babel 설치와 설정 자바스크립트 컴파일러 Babel을 설치해줍니다. npm i @babel/core @babel/cli @babel/node @babel/pr..
자바스크립트 클래스 설명
클래스는 객체를 생성하는 템플릿입니다. 클래스를 설명하면서 붕어빵 이야기를 많이 하죠. 붕어빵을 만들려면 붕어빵을 찍어내는 틀이 있어야 합니다. 이 틀을 바로 클래스라고 하며, 클래스를 통해 찍어낸 실제 붕어빵을 객체의 인스턴스라고 합니다. 클래스 정의하기 자바스크립트에서는 두 가지 방식 1) 클래스 선언식과 2) 클래스 표현식으로 클래스를 정의할 수 있습니다. 클래스 선언식 (Class declarations) 클래스 선언식은 클래스를 정의하는 방법 중 하나이며, class 키워드와 함께 클래스 이름을 지정합니다. 이때 이름의 첫 문자는 대문자로 적어주는 것이 컨벤션입니다. class Rectangle { constructor(height, width) { this.height = height; thi..
자바스크립트 Jest로 유닛 테스트하는 방법
자바스크립트 Jest 라이브러리를 사용하면 작성한 자바스크립트 코드가 예상대로 작동하는 지 테스트해볼 수 있습니다. Jest 테스트 라이브러리 설치 $ npm i --save-dev jest 라이브러리 설치 후 package.json의 script 부분에서 "test": "jest"를 다음과 같이 수정해줍니다. { "scripts": { "test": "jest" }, "devDependencies": { "jest": "^29.2.2" } } Jest 유닛 테스트 방법 다음과 같이 더하기 함수 sum이 있다고 해보겠습니다. // sum.js function sum(a, b) { return a + b; } module.exports = sum; 이를 테스트하라면 sum.test.js 파일을 새롭게 생성..
