개발
자바스크립트 배열 forEach, filter, map 설명
자바스크립트 배열에서는 내장 메소드를 사용하여 복잡한 반복 작업을 편리하게 처리할 수 있습니다. 이번 포스팅에서는 대표적인 메소드인 forEach, filter, map의 특징과 사용 방법에 대해 알아보도록 하겠습니다. forEach: 배열 요소를 하나씩 돌며 작업을 수행하며 리턴 값은 없음 filter: 조건에 맞는 요소만 필터링하여 새로운 배열로 리턴 map: 배열 요소를 하나씩 돌며 작업을 수행하고 새로운 배열로 리턴 forEach forEach는 각 배열 요소를 하나씩 돌며 작업을 수행할 때 사용합니다. 별도의 리턴 값은 없습니다. 다음과 같이 각 배열 요소를 console.log()로 찍어볼 수 있습니다. const fruits = ["banana", "apple", "orange"]; func..
[바닐라 자바스크립트] ① 투두 리스트 앱
바닐라 자바스크립트로 투두 리스트 앱을 만들어 봤다. 이벤트 리스너, form, input태그에 대해 복습해볼 수 있었다. DOM을 통한 HTML 핸들링에 대해 전반적으로 살펴볼 수 있었다. 닉네임과 투두 리스트는 localStorage에 저장하고 불러오는 방식으로 구현했다. 총 4시간 정도 걸렸다. 아래는 압축 영상. 별 거 없지만 그냥 한 번 찍어봤다. 😆
자바스크립트 배열 요소 랜덤 선택하기
자바스크립트 배열에 담긴 요소를 랜덤으로 선택하려면 어떻게 해야 할까요? 다양한 방법이 있지만 가장 많이 사용되는 방법은 다음과 같습니다. 배열 요소 랜덤 선택하기 아래와 같이 날씨의 정보를 담은 배열이 있다고 해보겠습니다. 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..
타입스크립트 (2) 기본 사용 방법
1. 타입 선언 타입스크립트는 변수 뒤에 타입을 명시할 수 있습니다. let foo: string = 'hello'; 타입과 다른 값이 할당되면 컴파일 시점에 에러가 발생합니다. let bar: number = true; //error 함수의 경우에는 다음과 같이 매개변수와 반환값의 타입을 지정할 수 있습니다. // 함수 선언식 function plus(x: number, y: number): number { return x + y; } // 함수 표현식 const plus = (x: number, y:number): number => x + y; 타입스크립트는 자바스크립트의 타입을 모두 사용할 수 있으며 다음과 같은 추가 타입을 제공합니다. 타입 설명 array 배열 tuple 배열에 고정된 아이템 수..
타입스크립트 (1) 타입스크립트란?
타입스크립트란? 타입스크립트는 마이크로소프트에서 관리하는 오픈 소스 프로그래밍 언어로 자바스크립트의 슈퍼셋(superset)입니다. 슈퍼셋은 상위 집합이라는 의미로 자바스크립트의 모든 기능을 지원하는 동시에 추가 기능을 제공한다는 의미입니다. 타입스크립트가 출시된 이유는 무엇이며 바닐라 자바스크립트에 비해 어떤 장점이 있을까요? 타입스크립트를 사용하는 이유 타입스크립트를 사용하는 가장 큰 이유 중 하나는 타입(type)을 사용하여 런타임 이전에 오류를 발견하기 위해서입니다. 아래 예시를 살펴볼까요? 아래와 같은 자바스크립트 코드의 의도는 숫자를 전달받는 것이겠지만 실제로는 어떤 타입의 인수를 받고 리턴해야 하는지 정확하게 정해져 있지 않습니다. 따라서 문자와 숫자를 더하는 이상한 연산도 오류가 없이 진행..
효과적인 개발 공부 방법 (초보 개발자)
시간은 중요하다. 누구도 시간을 살 수 없다. 돈보다 중요한 것은 시간임을 잊지 말 것. 자신을 잘 알아야 한다. 자신이 어디로 나아가려는지 분명히 안다면 모든 것을 배우느라 시간을 낭비하지 않아도 된다. 초보자인 경우에는 파이썬이나 자바스크립트 중 하나를 선택해 시작하자. 한 언어를 마스터하라. 좋아하는 언어를 제대로 배우자. 모범 사례를 읽고, 커뮤니티에 참여하고, 컨퍼런스에 가자. 데이터구조, 알고리즘과 같은 미리미리 공부해두자. 그러나 너무 빨리 배울 필요는 없다. 배포까지 할 줄 아는 수준이 될 때 배우기 시작하자. SQL을 배워두자. 결국에 필요하다. 코드 에디터 사용 방법(단축키 등)과 커스터마이징 하는 방법을 공부하자. 겸손한 마음으로 꾸준히 계속해서 학습하자.
[WebRTC] 7. 라이브 스트리밍 구현 (3) Sender / 카메라 및 오디오 전환하기
스트림이 진행되는 동안 카메라나 오디오를 전환하려면 어떻게 해야 할까요? 이 때는 1) 상대방의 연결을 확인하고, 2) 사용하는 기기를 확인한다음, 3) sender를 통해 스티리밍 track을 변경해줄 수 있습니다. Sender 찾기 먼저, getSenders()를 사용하면 webRTC 연결에서 sender 정보를 받아올 수 있습니다. 이 정보를 업데이트하면 기기 전환을 구현할 수 있습니다. async function handleCameraName() { await getMedia(cameras.value, undefined); if (myPeerConnection) { console.log(myPeerConnection.getSenders()); } } async function handleAudio..
