Language/JavaScript
-
배열 fill 메소드, 문자열 repeat 메소드Language/JavaScript 2023. 3. 15. 03:05
프로그래머스 문제를 풀다가 새로 알게 된 메소드가 있어 정리한다. [프로그래머스] 핸드폰 번호 가리기 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. - 제한 조건 : phone_number는 길이 4 이상, 20이하인 문자열입니다. function solution(phoneNumber) { const preNumber = phoneNumber.slice(-4) const postStar = [...phoneNumber.slice(0,phoneNumber.length - 4)].m..
-
반복문(while, do-while)Language/JavaScript 2023. 3. 15. 02:00
for문과 while문의 차이 for문, while문은 서로 변환이 가능하기 때문에 반복문을 작성할 때 어느 쪽을 선택해도 좋지만, for문은 반복 횟수를 알고 있을 때 주로 사용하고 while문은 조건에 따라 반복할 때 주로 사용한다. - for문 : 반복횟수가 정해진 경우, 배열과 함께 주로 많이 사용 - while문 : 무한 루프나 특정 조건에 만족할 때까지 반복해야하는 경우, 주로 파일을 읽고 쓰기에 많이 사용 - do-while문 : 조건에 따라 반복을 계속할지 결정할 때 사용하는 while과 동일하지만 중괄호 블럭을 무조건 한 번 실행 하고 조건을 검사하여 반복을 결정. - continue문 : for문, while문, do-while문에서 사용하며 for문에서 continue를 만나게 되면 ..
-
정렬 메소드 sort와 localeCompareLanguage/JavaScript 2023. 3. 6. 15:30
프로그래머스 문제를 풀다가 학습한 내용이다. Q. 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. 배열안에 있는 문자열을 특정 조건으로 정렬하는 문제였다. 배열 내장 메소드 sort를 사용하면 된다. arr.sort([compareFunction]) sort 메소드는 인자로 정렬 순서를 정의하는 함수를 콜백함수로 받는데, 콜백함수의 반환 값이 양수이면 오름차순, 음수이면 내림차순, 0이면 정렬하지 않는다. 그런데 중요한 것은 비교함수의 리턴 값이 조건부가..
-
[자바스크립트] Map과 SetLanguage/JavaScript 2023. 1. 17. 17:57
Map map 객체는 키가 있는 데이터를 저장한다는 점에서 객체와 유사하지만, 맵은 key에 다양한 자료형을 허용한다는 점에서 차이가 있다. 1. 주요 메서드 new Map() – 맵을 만든다. 인수는 이터러블을 받고, 인수를 받지 않으면 빈 map 객체가 생성된다. map.set(key, value) – key를 이용해 value를 저장합니다. map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다. map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다. map.delete(key) – key에 해당하는 값을 삭제합니다. map.clear() – 맵 안의 모든 요소를 제거합니다. map.size – ..
-
[Javascript] 클래스의 정적(static)메소드와 프로퍼티, 상속Language/JavaScript 2023. 1. 3. 23:09
정적 메소드와 정적 프로퍼티 ES6 클래스에서 static 키워드는 클래스의 정적(static)메소드를 정의한다. 정적 메소드는 클래스의 인스턴스가 아닌 클래스의 이름으로 호출한다. 따라서 클래스의 인스턴스를 생성하지 않아도 호출할 수 있다. class Foo { constructor(prop) { this.prop = prop; } static staticMethod() { /* 정적 메소드 내부에서 this는 클래스의 인스턴스가 아닌 클래스 자신을 가리킨다. */ return 'staticMethod'; } prototypeMethod() { return this.prop; } } // 정적 메소드는 클래스 이름으로 호출한다. console.log(Foo.staticMethod()); const fo..
-
[Javascript] 클래스의 동작원리와 클래스 상속(오버라이딩)Language/JavaScript 2023. 1. 3. 22:52
📌 출처 : https://ko.javascript.info/class 클래스 클래스 동작원리 함수는 기능을 포장하는 기술이라면, 클래스는 변수와 함수 중 연관있는 것들을 선별해 포장하는 기술이다. 클래스를 활용하면 객체단위로 코드를 그룹화하고 재사용이 용이하다. class User { constructor(name) { this.name = name } sayHi() { console.log(this.name) } } console.log(typeof User) // function class User { … } 문법 구조의 동작 원리는 다음과 같다. User라는 이름을 가진 함수를 만든다. 함수 본문은 생성자 메서드 constructor에서 가져온다. 생성자 메서드가 없으면 본문이 비워진 채로 함수가..
-
[Javascript] 프로토타입과 프로토타입 상속Language/JavaScript 2023. 1. 3. 15:22
📌 출처 : https://ko.javascript.info/ 프로토타입 상속 [[Prototype]] 정의 자바스크립트의 객체는 [[Prototype]]이라는 숨김 프로퍼티를 갖는다. 이 값은 null이거나 다른 객체에 대한 참조가 되는데, 다른 객채를 참조하는 경우 그 참조 대상을 프로토타입이라 부른다. 동작방식 const animal = { eats: true } const rabbit = { jumps:true } console.log(rabbit.eats) // undefined Object.setPrototypeOf(rabbit, animal) //rabbit.__proto__ = animal; console.log(rabbit.eats) // true 프로퍼티가 정의된 객체 두 개의 예시를 ..
-
Sync Audio with Text Using JavascriptLanguage/JavaScript 2022. 12. 26. 20:35
Logic 1. [back] 영상 관련 대본을 vtt 파일 포맷으로 저장 webVTT - 웹 비디오 텍스트 트랙 형식 (WebVTT) VTT 파일 만드는 법 - Caption Studio 2. [back] vtt파일을 JSON 형태로 바꾸어 front로 전송 vtt-to-json 패키지 활용 - vtt-json 예시) var vttToJson = require("vtt-to-json") let vtt = `00:01.684 --> 00:02.785 웅이형, 잠깐만요! wait!` vttToJson(vtt) .then((result) => { console.log(result) }); // return [{start: 1684, end: 2785, part: "웅이형, 잠깐만요!"}, {start: 168..
-
Binary / Base64 / Blob / ArrayBuffer / FileLanguage/JavaScript 2022. 12. 22. 23:20
1. Binary Binary란 이진 데이터를 의미하며 1과 0만을 사용하여 2개의 수를 나타내는 진법을 뜻하는, 컴퓨터를 다루는데 있어 가장 근본이 되는 체계라고 한다. 2. Base64 컴퓨터는 모든 데이터를 0과 1로 저장한다. 그렇다면 컴퓨터 안에 저장된 바이너리 데이터를 꺼내 쓸 수 있을까? 메모리에 저장된 바이너리 데이터를 변수에 적재해놓고, 필요하면 변수를 호출해 바이너리 데이터를 다룬다. 그렇다면 숫자, 스트링이 아닌 이미지 비디오 같은 멀티미디어 파일들은? 이때 Base64 인코딩을 활용하는데, Bas64는 0과 1로 이루어진 바이너리 데이터를 인코딩하여 텍스트 형식으로 변환하는 것을 말한다. 변수에 이미지 url(웹 url이든 로컬의 file path든)을 저장하는 건 링크라는 징검다리..
-
배열에서 최대값, 최소값 구하기Language/JavaScript 2022. 10. 29. 22:42
Q. find_longest_word 함수를 만들어 주세요. 주어진 리스트안에 있는 단어중 가장 긴 단어를 찾을수 있도록 함수를 완성해주세요. console.log(find_longest_word(["PHP", "Exercises", "Backend"])) // --> "Exercises" 이 문제는 풀이 접근을 잘 못했던 문제다. 1. 단어의 길이 수를 구한다. 2. 가장 긴 단어의 길이 수를 뽑는다. 3. 그 단어를 반환한다. 이 로직을 구현하기 위해 코드를 작성하고자 했으나, 가장 긴 단어의 길이를 구하는 로직이 복잡하게 느껴졌다. 배열에 있는 모든 요소의 길이를 구하고, 그 길이를 전부 개별로 비교할 수 있는 로직. 그래서, 첫 요소와 나머지 요소를 모두 비교하고 첫 요소보다 길이가 긴 요소만 필..