js 공부 2024.05.10

Posted May 10, 2024

js 로고 img

By Jiwoon

29 min read

배열

파이썬 복사

얕은 복사 참조

깊은 복사 참조

더하기나 연산자로 객체를 하나 만들어낼 수 있음.
파이썬의 remove는 값을 찾아서 삭제하고 pop(1)은 인덱스 1의 값을 삭제함

  
list1 = [1, 2, 3, 4]

print(id(list1))
print(id(list1[2]))
print(id(list[1]))

del list1[1]

print(id(list1))
print(id(list1[1]))

2129136026944 : list1
2129135206704 : list1[2]
2129145214336  : list1[1]

2129136026944 : list1
2129135206704 : list1[1]

삭제한곳의 주소 값이 달라짐!

이런걸 링크드 리스트라고 함 그리고 파이썬은 링크드 리스트 구조로 되어있다는걸 저런걸로 간접적으로 확인가능.

배열은 메모리상에 순차적으로 기록(데이터 900만개 다 땡겨야함). 링크드리스트는 (900만개 다 안땡겨도 됨) 배열을 쌩으로 쓰지 않고 해쉬랩, 포인터로 만들어진 자료구조로 많이 씀.

배열의 요소 읽기

파이썬이랑 비슷함 슬라이스하면 리스트 전까지.

인데스 1부터 1개를 삭제하고 0을 집어넣겠다. 그리고 리스트를 집어넣음 수도 있음

자바처럼 -1 로 리스트 마지막을 음수로 못가져옴 js도 파이썬만 가능

배열의 요소 추가

배열 요소 삭제

null값이 들어감 1,3,4,5 가 아니라 1, null, 3, 4, 5

완전히 삭제하려면 ?
JavaScript에서 배열의 특정 요소를 완전히 제거하고 싶다면, 배열에서 그 요소를 완전히 삭제하고 배열을 재조정하는 방법을 사용해야 한다. JavaScript의 delete 연산자를 사용하면 요소는 undefined로 설정되지만 배열의 길이는 변경되지 않는다. 이는 배열에서 빈 슬롯이 생기는 결과를 초래함. 요소를 완전히 제거하고 배열을 압축하기 위해서는 다음 방법들을 사용할 수 있음:

splice() 메소드:
- splice() 메소드는 배열에서 요소를 제거하고, 필요한 경우 요소를 추가할 수 있게 해 줌.
- 예를 들어, 배열에서 인덱스 1의 요소를 제거하고자 한다면, arr.splice(1, 1)를 사용할 수 있다. 여기서 첫 번째 인자는 변경을 시작할 인덱스를 나타내고, 두 번째 인자는 제거할 요소 수를 나타냄.
필터링을 통한 재구성:
- 배열에서 특정 조건을 만족하지 않는 요소만을 걸러내어 새로운 배열을 만들 수도 있다.
- 예를 들어, 특정 값을 제거하려면 arr = arr.filter(item => item !== valueToRemove);를 사용할 수 있다. 이 방법은 주어진 조건에 맞지 않는 모든 요소를 제거.

예시 코드

  
let arr = [1, 2, 3, 4, 5];

// 인덱스 1의 요소를 제거
arr.splice(1, 1);
console.log(arr); // 출력: [1, 3, 4, 5]

// 값 4를 제거
arr = arr.filter(item => item !== 4);
console.log(arr); // 출력: [1, 3, 5]

이러한 방법을 사용하면 JavaScript 배열에서 요소를 완전히 제거하고 배열의 길이를 조정할 수 있다.

array 메서드

수정 메서드

이 메서드들은 배열을 직접 수정.

push(): 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.
pop(): 배열의 마지막 요소를 제거하고, 그 요소를 반환한다.
shift(): 배열의 첫 번째 요소를 제거하고, 그 요소를 반환한다.
unshift(): 배열의 시작 부분에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.
splice(): 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
reverse(): 배열의 요소 순서를 반전시킵니다.
sort(): 배열의 요소를 적절하게 정렬한다.

접근 메서드

이 메서드들은 배열을 수정하지 않고 특정 데이터에 접근.

concat(): 두 개 이상의 배열을 연결하여 새 배열을 반환한다.
slice(): 배열의 일부분을 얕게 복사하여 새 배열 객체로 반환한다.
join(): 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.
indexOf(): 지정된 요소를 배열에서 찾고 그 위치를 반환한다.
lastIndexOf(): 지정된 요소를 배열의 끝에서부터 찾고 그 위치를 반환한다.

반복 메서드

배열의 각 요소에 대해 함수를 실행.

forEach(): 배열의 각 요소에 대해 제공된 함수를 실행.
map(): 배열의 모든 요소에 대해 함수를 호출한 결과를 모아 새 배열을 반환함.
filter(): 테스트 함수를 통과하는 모든 요소를 모아 새 배열을 반환함.
reduce(): 배열의 각 요소에 대해 리듀서 함수를 실행하고 하나의 결과값을 반환함.
reduceRight(): reduce()와 유사하지만 요소를 오른쪽에서 왼쪽으로 처리.
every(): 배열의 모든 요소가 테스트 함수를 통과하는지 확인.
some(): 배열의 어떤 요소라도 테스트 함수를 통과하는지 확인.

탐색 메서드

ES6 이후 추가된 메서드로, 조건에 맞는 요소를 찾는다.

find(): 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환. 없다면 undefined를 반환함.
findIndex(): 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환. 없다면 1을 반환.

타입 변환 메서드

배열을 다른 형태로 변환할 때 사용.

toString(): 배열을 문자열로 변환하여 반환.
toLocaleString(): 배열의 요소를 각 요소의 toLocaleString 메서드를 사용하여 문자열로 변환.

toString 도 참조만 하나?

JavaScript의 toString() 메서드는 배열을 문자열로 변환할 때 원본 배열에 영향을 미치지 않는다. 즉, 원본 배열을 참조만 하고 실제 데이터는 변경하지 않음. toString() 메서드는 배열의 요소들을 쉼표(,)로 구분된 단일 문자열로 변환하여 반환. 이 과정에서 원본 배열은 그대로 유지되며, 변환된 문자열이 새로 생성되어 결과로 제공됨.

예를 들어:

  
let fruits = ['Apple', 'Banana', 'Cherry'];
let result = fruits.toString();
console.log(result); // 출력: "Apple,Banana,Cherry"
console.log(fruits); // 출력: ['Apple', 'Banana', 'Cherry']

위의 예시에서 볼 수 있듯이, fruits 배열은 toString() 메서드를 호출한 후에도 변경되지 않고 그대로 유지. 결과적으로 toString() 메서드는 배열의 정보를 읽기만 하고, 원본 데이터에는 어떠한 변경도 가하지 않는다. 이는 배열을 문자열로 간단히 변환할 때 유용하게 사용될 수 있다.

둘이 다른 메모리에 저장되나?

JavaScript에서 toString() 메서드를 사용하여 배열을 문자열로 변환하면, 원본 배열과는 별개의 메모리 위치에 새로운 문자열이 저장. 이 문자열은 원래 배열의 데이터를 표현한 것이지만, 별도의 메모리 공간을 차지하는 독립적인 객체.

메모리 할당의 작동 방식

원본 배열: 원본 배열은 메모리에 저장된 요소들의 집합이다. 각 요소는 배열의 인덱스에 따라 연속적이거나 특정 방식으로 저장될 수 있음.
변환된 문자열: toString() 메서드가 호출될 때, 배열의 요소들이 새로운 문자열로 변환되며, 이 문자열은 새로운 메모리 공간에 저장된다. 이 과정에서 원본 배열의 요소들은 그대로 유지되며, 새로운 문자열만이 추가로 메모리를 차지하게 됨.

예시

  
let numbers = [1, 2, 3];
let numbersString = numbers.toString();

console.log(numbers);        // 출력: [1, 2, 3]
console.log(numbersString);  // 출력: "1,2,3"

이 예시에서 numbers 배열과 numbersString 문자열은 서로 다른 메모리 위치에 저장. numbersString은 원본 배열 numbers의 내용을 기반으로 생성되었지만, 독립적인 메모리 공간에 존재하는 별개의 데이터이다. 이는 JavaScript의 데이터 관리 방식에서 일반적으로 보는 현상으로, 객체와 기본 데이터 타입이 메모리에 저장되는 방식의 차이점을 반영함.

따라서 toString()은 배열을 안전하게 문자열로 변환할 수 있는 방법을 제공하며, 원본 데이터에 영향을 미치지 않는다. 이는 데이터의 불변성을 유지하면서 다양한 형태로 데이터를 사용할 필요가 있을 때 유용하게 활용될 수 있다.

배열 (리스트)과 링크드 리스트의 차이점

자료구조의 구조:
- 배열 (리스트): 파이썬의 배열은 동적 배열로 구현된 list 타입을 말함. 배열은 메모리상에서 연속적인 위치에 요소들이 저장된다. 이로 인해 인덱스를 통한 접근이 매우 빠르며, O(1) 시간에 특정 요소에 접근할 수 있다.
- 링크드 리스트: 링크드 리스트는 각 요소가 다음 요소의 참조(주소)를 가지고 있는 비연속적인 메모리 위치에 요소들이 저장되는 방식. 이러한 구조 때문에 특정 인덱스의 요소에 접근하기 위해서는 처음부터 해당 위치까지 순차적으로 탐색해야 하므로 O(n) 시간이 걸린다.
메모리 할당:
- 배열 (리스트): 배열은 초기에 정해진 크기의 메모리를 할당받고, 이 크기를 초과하는 경우 새로운 메모리를 할당받아 기존의 요소들을 복사함. 이 과정은 시간이 많이 소요될 수 있다 (O(n) 시간).
- 링크드 리스트: 링크드 리스트는 각 요소가 필요할 때마다 메모리를 할당받음. 따라서 초기 메모리 할당에 대한 비용이 낮지만, 포인터를 사용해 다음 요소를 가리키므로 추가적인 메모리 사용이 발생한다.
삽입과 삭제의 효율성:
- 배열 (리스트): 배열의 중간에 요소를 삽입하거나 삭제할 경우, 해당 요소 이후의 모든 요소를 이동시켜야 하므로 O(n) 시간이 소요된다. 하지만 끝에 요소를 추가하거나 삭제하는 작업은 평균적으로 O(1) 시간이 걸린다.
- 링크드 리스트: 링크드 리스트는 특정 위치의 노드를 찾는 데 O(n) 시간이 걸리지만, 노드를 추가하거나 삭제하는 것은 해당 노드의 포인터만 조정하면 되므로 O(1) 시간에 처리할 수 있음.
메모리 사용 효율:
- 배열 (리스트): 배열은 사용하지 않는 메모리를 미리 할당할 수 있으며, 이로 인해 메모리를 낭비할 수 있다. 하지만 요소에 대한 접근 속도가 빠름.
- 링크드 리스트: 링크드 리스트는 필요한 만큼만 메모리를 사용하지만, 각 요소가 포인터 정보도 저장해야 하므로 추가적인 메모리가 필요하다.
용도 및 적합한 상황:
- 배열 (리스트): 빠른 인덱스 접근이 필요하거나 요소의 개수가 자주 변경되지 않는 경우에 적합.
- 링크드 리스트: 빈번한 데이터의 삽입과 삭제가 필요하고, 메모리 할당의 유연성이 중요한 경우에 적합.

예시 코드

배열 (리스트) 사용 예시:

  
  my_list = [1, 2, 3, 4]
  my_list.append(5)  # 끝에 요소 추가
  my_list.insert(2, 2.5)  # 중간에 요소 삽입
    

링크드 리스트 사용 예시 (파이썬의 collections.deque 또는 직접 구현을 통해 활용 가능):

  
  pythonCopy code
  from collections import deque
    
  my_linked_list = deque([1, 2, 3, 4])
  my_linked_list.append(5)  # 끝에 요소 추가
  my_linked_list.appendleft(0)  # 앞에 요소 추가
    

콜백 함수

콜백: 특정 조건에 그 함수를 실행해줄게 그때 실행할 함수가 콜백함수

함수() 이렇게 말고 함수자체를 넘겨주고 버튼을 클릭시 실행됨

콜백 함수(callback function)는 JavaScript를 비롯한 많은 프로그래밍 언어에서 중요한 개념. 콜백 함수는 다른 함수에 인수로 전달되는 함수로, 일반적으로 어떤 작업이 완료된 후 실행되도록 예약된다. 이 개념은 비동기 프로그래밍, 이벤트 처리, 타이머 설정 등 다양한 상황에서 활용됨.

콜백 함수의 특징

비동기 처리: JavaScript의 많은 API가 비동기적으로 작동하는데, 이때 콜백 함수를 사용하여 비동기 작업이 완료된 후에 특정 코드가 실행되도록 할 수 있다. 예를 들어, 서버로부터 데이터를 받아온 후 데이터를 처리하는 함수를 콜백으로 사용할 수 있다.
이벤트 리스너: 사용자의 입력이나 시스템 이벤트가 발생했을 때 실행할 함수를 지정하는 데 콜백 함수를 사용함. 예를 들어, 버튼 클릭 이벤트에 반응하여 실행할 함수를 등록할 수 있다.
고차 함수와의 결합: 콜백 함수는 고차 함수(higher-order function)의 인자로 사용되어, 로직의 일부를 외부에서 주입할 수 있게 해준다. 이를 통해 함수의 범용성과 재사용성을 높일 수 있다.

콜백 함수 사용 예시

비동기 API 호출:

  
 function fetchData(callback) {
   setTimeout(() => {
     callback('Data loaded');
   }, 1000);
 }
    
 fetchData((data) => {
   console.log(data);  // 출력: Data loaded
 });
    

위 예에서 fetchData 함수는 비동기적으로 데이터를 “로드”하고, 로드가 완료된 후 주어진 콜백 함수를 실행.

이벤트 처리:

  
 document.getElementById('myButton').addEventListener('click', function() {
   alert('Button clicked!');
 });
    

여기서 콜백 함수는 사용자가 버튼을 클릭했을 때 호출.

배열 메서드에서의 콜백:

  
 const numbers = [1, 2, 3, 4];
 const doubled = numbers.map(number => number * 2);
 console.log(doubled);  // 출력: [2, 4, 6, 8]
    

map 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 결과를 새 배열로 반환.

콜백 지옥

콜백 함수는 강력하지만, 여러 비동기 작업을 연속적으로 처리할 때는 코드의 복잡성이 증가하는 문제가 발생할 수 있다. 이를 “콜백 지옥”(callback hell)이라고 부르며, 이 문제를 해결하기 위해 프로미스(Promises)나 async/await과 같은 현대적인 비동기 패턴이 사용.

콜백 함수는 JavaScript의 핵심 개념 중 하나로, 함수형 프로그래밍의 일부분으로도 볼 수 있다. 이를 통해 유연하고 강력한 코드 작성이 가능하며, 비동기 프로그래밍을 효과적으로 관리할 수 있다.

forEach

이것도 콜백함수

그냥 console.log하면 어레이가 나오는데 각각의 아이템을 받아와서 item을 호출함

화살표함수

  
var a = (a, b) => a + b;
a(1, 2)
> 3

web api

webapi링크

웹 api로 아두이노 활용가능

webapi speech api링크

웹에서 기본 제공하는 api로 다양한거 가능함
하나씩 코드 읽는 연습하기.

마이크 없이 TTS를 사용하는 방법

가상 오디오 장치 사용: 마이크 대신 PC에서 재생되는 소리를 입력으로 사용하려면, 가상 오디오 케이블이나 가상 오디오 장치를 사용할 수 있다. 예를 들어, “VB-Cable”이나 “Virtual Audio Cable” 같은 프로그램을 사용하면, PC에서 재생되는 소리를 마이크 입력처럼 다룰 수 있다.
시스템 사운드 루프백: 대부분의 운영 체제에서는 시스템 오디오 출력을 루프백(loopback) 모드로 설정할 수 있습니다. 이를 통해 모든 시스템 소리를 마이크 입력처럼 사용할 수 있다. 예를 들어, Windows에서는 “Stereo Mix” 옵션을 활성화하여 시스템 오디오를 녹음할 수 있다.
프로그래밍 방식 접근: 직접 프로그래밍을 하려면, 오디오 처리 라이브러리를 사용하여 시스템의 오디오 출력을 캡처한 후, 이 데이터를 TTS API로 전송할 수 있다. Python에서는 pyaudio와 같은 라이브러리를 사용하여 이 작업을 수행할 수 있다.
웹 기반 접근: 웹 애플리케이션에서는 브라우저 API를 사용하여 시스템 오디오를 캡처할 수 있다. 예를 들어, getUserMedia API는 오디오와 비디오 스트림을 캡처할 수 있으며, MediaRecorder API를 사용하여 이 스트림을 녹음할 수 있다.
Web API와의 연동: 캡처한 오디오 데이터를 TTS Web API에 전송하려면, 해당 API의 요구 사항에 맞춰 데이터를 포맷팅하고 HTTP 요청을 보내야 함. 예를 들어, Google Cloud Text-to-Speech API는 오디오 데이터를 Base64 인코딩하여 JSON 형태로 전송할 수 있다.

구체적인 예시: Python을 사용한 TTS

Python에서 pyaudio와 requests 라이브러리를 사용하여 시스템 오디오를 캡처하고, Google Cloud TTS API로 전송하는 간단한 예제를 :

  
import pyaudio
import wave
import requests
import base64
import json

# 오디오 설정
FORMAT = pyaudio.paInt16
CHANNELS = 2
RATE = 44100
CHUNK = 1024
RECORD_SECONDS = 5
WAVE_OUTPUT_FILENAME = "output.wav"

audio = pyaudio.PyAudio()

# 스트림 시작
stream = audio.open(format=FORMAT, channels=CHANNELS,
                    rate=RATE, input=True,
                    frames_per_buffer=CHUNK)

print("녹음 시작")

frames = []

# 지정된 시간 동안 오디오 녹음
for i in range(0, int(RATE / CHUNK * RECORD_SECONDS)):
    data = stream.read(CHUNK)
    frames.append(data)

print("녹음 완료")

# 스트림 정지
stream.stop_stream()
stream.close()
audio.terminate()

# 파일로 저장
waveFile = wave.open(WAVE_OUTPUT_FILENAME, 'wb')
waveFile.setnchannels(CHANNELS)
waveFile.setsampwidth(audio.get_sample_size(FORMAT))
waveFile.setframerate(RATE)
waveFile.writeframes(b''.join(frames))
waveFile.close()

# Google Cloud TTS API로 보낼 요청 생성
def synthesize_text(text):
    url = "https://texttospeech.googleapis.com/v1/text:synthesize"
    headers = {"Authorization": "Bearer YOUR_ACCESS_TOKEN"}

    data = {
        "input": {"text": text},
        "voice": {"languageCode": "en-US", "name": "en-US-Wavenet-F"},
        "audioConfig": {"audioEncoding": "LINEAR16"}
    }

    response = requests.post(url, headers=headers, json=data)
    if response.status_code == 200:
        audio_content = base64.b64decode(response.json()['audioContent'])
        with open('output_tts.wav', 'wb') as audio_file:
            audio_file.write(audio_content)
        print("TTS 오디오 생성 완료")
    else:
        print("오류 발생:", response.text)

# 텍스트를 음성으로 변환
synthesize_text("Hello, this is a test.")