import numpy as np
array1 = np.array([2, 3, 5, 7, 11, 13, 17 ,19 , 23, 29, 31])

array1 요소가 4보다 크면 True

array1 > 4

array([False, False,  True,  True,  True,  True,  True,  True,  True,
        True,  True])

array1 요소가 2로 나누었을때 나머지가 0이면 True

array1 % 2 == 0

array([ True, False, False, False, False, False, False, False, False,
       False, False])

where

np.where

np.where 함수는 조건을 만족하는 요소의 인덱스를 반환합니다.

True값 인덱스 찾기

np.where(condition)

booleans = np.array([True, True, False, True, False, True])

np.where(booleans) #(array([0, 1, 3, 5]), )

array1 > 4

array([False, False,  True,  True,  True,  True,  True,  True,  True,  True,  True])

4보다 큰 값이 있는 인덱스만 가져오기

np.where(array1 > 4)

(array([ 2,  3,  4,  5,  6,  7,  8,  9, 10]),)

filter

파이썬에서 filter가 이미 내장 함수로 정의되어 있다는 의미는, 파이썬이 기본적으로 제공하는 표준 라이브러리에 filter라는 이름의 함수가 포함되어 있다는 것입니다. 이 내장 함수는 주어진 조건을 만족하는 요소들을 걸러내기 위해 사용됩니다.

파이썬 내장 함수 'filter'

filter(function, iterable)

파이썬 내장 함수 filter는 두 개의 인수를 받습니다:

• function: 각 요소에 대해 참(True) 또는 거짓(False)을 반환하는 함수.
• iterable: 리스트, 튜플, 문자열 등 반복 가능한 객체.

filter 함수는 반복 가능한 객체의 각 요소에 대해 주어진 함수를 적용하여 참을 반환하는 요소들만 걸러낸 새로운 반복자를 반환합니다.

# 짝수를 필터링하는 함수
def is_even(num):
    return num % 2 == 0

# 리스트에서 짝수만 필터링
numbers = [1, 2, 3, 4, 5, 6]
filtered_numbers = filter(is_even, numbers)

print(list(filtered_numbers))  # 출력: [2, 4, 6]

변수 이름으로 filter 사용하지 않기

파이썬 내장 함수의 이름을 변수 이름으로 사용하는 것은 권장되지 않습니다.

내장 함수 이름을 변수 이름으로 사용하면 그 함수에 접근할 수 없게 되며, 코드의 가독성을 떨어뜨릴 수 있습니다.

array1 = np.array([1, 2, 3, 4, 5, 6])

# array1의 요소 중 4보다 큰 요소의 인덱스를 찾음
filter_indices = np.where(array1 > 4)

print(filter_indices)  # 출력: (array([4, 5]),)

여기서 filter_indices는 array1의 요소 중 4보다 큰 값(즉, 5와 6)의 인덱스를 포함하는 배열을 반환합니다. np.where는 조건을 만족하는 인덱스를 반환하므로, 이를 활용하여 조건을 만족하는 요소를 선택할 수 있습니다.

import numpy as np

array1 = np.arange(10)
array2 = np.arange(10, 20)

array1 #array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
array2 #array([10, 11, 12, 13, 14, 15, 16, 17, 18, 19])

모든 값에 2곱하기

array1 * 2 #array([ 0,  2,  4,  6,  8, 10, 12, 14, 16, 18])

모든 값에 2나누기

array1 / 2 #array([0. , 0.5, 1. , 1.5, 2. , 2.5, 3. , 3.5, 4. , 4.5])

모든 값에 2 더하기

array1 + 2 #array([ 2,  3,  4,  5,  6,  7,  8,  9, 10, 11])

모든 값에 제곱하기

array1 ** 2 #array([ 0,  1,  4,  9, 16, 25, 36, 49, 64, 81])

변수에 지정해야 연산이 저장된다.

array1 = array1 * 2
array1 #array([ 0,  2,  4,  6,  8, 10, 12, 14, 16, 18])

array1 = np.arange(10)
array2 = np.arange(10, 20)

array1 + array2 #array([10, 12, 14, 16, 18, 20, 22, 24, 26, 28])

array1 * array2 #array([0, 11, 24, 39, 56, 75, 96, 119, 144, 171])

array1 / array2

import numpy as np

array1 = np.array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15])

array1[0] #0
array1[2] #2
array1[-1] #15
array1[-2] #14

1, 3, 4번 인덱스만 가져오기

array1[[1, 3, 4]] # 1번, 3번, 4번 인덱스만 가져옴

array2 생성

array2 = np.array([2, 1, 3])

array1을 array2로 인덱싱하기

array1[array2] # 2번, 1번 3번 인덱스만 가져옴

array1[2:7] # 2번, 7(7-1)번 인덱스 전까지 가져옴

array1[0:7] # 0부터 7(7-1)번 인덱스 전까지 가져옴

array1[:7] # 0부터 7 (7-1)번 인덱스까지 가져옴

array1[2:] #2번 인덱스부터 끝까지 가져옴

array1[2:11:2] # 2번 인덱스부터 10까지 2씩 증가하며 가져옴 2, 4, 6, 8, 10

Numpy

1. 목적 및 사용 용도

Numpy는 파이썬에서 데이터 처리를 위해 널리 사용되는 라이브러리

목적 : 주로 수치 연산과 과학적 계산을 위한 라이브러리

사용 용도 : 고성능 다차원 배열 객체인 'ndarray'를 사용하여 벡터화된 수치 연산을 수행. 주로 행렬연산, 선형대수, 통계, 수학적 함수 등에서 사용된다.

구조 : 넘파이 배열은 동일한 데이터 타입을 가지며, 다차원 배열을 효율적으로 처리할 수 있다.

2. 주요 데이터 구조

• ndarray: N차원 배열 객체로, 동종 데이터(모든 요소가 같은 데이터 타입)를 저장합니다. 고성능 수치 연산을 위한 다양한 함수와 메서드를 제공합니다.

3. 데이터 조작 및 기능

• 주로 수학적 연산에 중점을 둡니다. 배열 간의 연산, 선형 대수 연산, Fourier 변환 등 고성능 수치 연산을 지원합니다.
• 브로드캐스팅 기능을 통해 배열 간의 연산을 효율적으로 수행할 수 있습니다.

4. 성능

• 메모리 효율성과 연산 속도 면에서 매우 우수합니다. 대규모 수치 연산에 적합합니다.
• 벡터화된 연산을 통해 반복문을 최소화하고 빠른 계산을 수행합니다.

요약

• 넘파이는 주로 수치 연산 및 과학적 계산에 사용됩니다.
• 넘파이는 동일한 데이터 타입의 다차원 배열을 처리하는 데 강점

import numpy

- 파이썬 리스트를 통해 생성

numpy 모듈의 array 메소드에 파라미터로 파이썬 리스트를 넘겨주면 numpy array가 리턴됩니다.

1차원 array생성

array1 = numpy.array([2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31])
print(array1) # [ 2  3  5  7 11 13 17 19 23 29 31]

타입 확인

print(type(array1)) # <class 'numpy.ndarray'>

<class 'numpy.ndarray'>

요소 확인

print(array1.shape) # (11,) 11개의 요소가 있다.

2차원 array 생성

array2 = numpy.array([[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]])
print(array2)
print(array2.shape) # (3, 4) 행:3 열:4

[[ 1  2  3  4]
 [ 5  6  7  8]
 [ 9 10 11 12]]
(3, 4)

요소의 개수 출력

print(array1.size) # 11
print(array2.size) # 12

균일한 값으로 array생성

numpy.full(생성할 개수, 입력할 값)

array1 = numpy.full(6, 7)

print(array1) # [7 7 7 7 7 7]

모든 값이 0인 numpy array 생성

numpy.zeros(6, dtype=int)

array1 = numpy.full(6, 0)
array2 = numpy.zeros(6, dtype=int)

print(array1)
print()
print(array2)

[0 0 0 0 0 0]

[0 0 0 0 0 0]

모든 값이 1인 numpy array 생성

numpy.ones(6, dtype=int)

array1 = numpy.full(6, 1)
array2 = numpy.ones(6, dtype=int)

print(array1)
print()
print(array2)

[1 1 1 1 1 1]

[1 1 1 1 1 1]

랜덤한 값들로 생성

array1 = numpy.random.random(6)
array2 = numpy.random.random(6)

print(array1)
print()
print(array2)

[0.03324978 0.12104063 0.59124917 0.40598322 0.51654182 0.18895607]

[0.89759737 0.35333745 0.53036455 0.61011018 0.39151271 0.78917448]

연속된 값들이 담긴 numpy array생성

# 파라미터 1개
array1 = numpy.arange(6)
print(array1) # [0 1 2 3 4 5]


# 파라미터 2개
array1 = numpy.arange(2, 7)
print(array1) # [2 3 4 5 6]

# 파라미터 3개
# arange(n, m, s)를 하면 n부터 m-1까지의 값들 중 간격이 s인 값들이 담긴 numpy array가 리턴됩니다.
array1 = numpy.arange(3, 17, 3)
print(array1) #  [3  6  9 12 15]

모듈 별명 지어주기

as 뒤에 별명을 지어준다.

- 넘파이(Numpy)의 모듈 별명은 주로 np입니다. 이는 관습적으로 사용되는 별명

import numpy as np

array1 = np.full(6,0)
array2 = np.zeros(6)
array3 = np.full(6,6)
array4 = np.ones(9)
array5 = np.random.random(6)
array6 = np.random.random(10)

1. 나의 Repositories에서 삭제할 저장소 선택

2. Setting 클릭 후 General에서 맨 아래로 쭉 내려간다.

3. Danger Zone 에서 Delete this repository

4. 두 번의 버튼 클릭

5. 텍스트박스에  " " 안에 쓰여있는 문구를 그대로 복사 붙여넣기 하면된다.

6. Password 입력까지 완료하면 저장소 삭제가 된다.

1. 저장소를 들어간 후 Setting 선택

2. 왼쪽 메뉴에서 General 선택 후 Default branch

2-1) 보라색 버튼을 클릭시 브랜치 명을 변경할 수 있다.

master 브랜치를 main으로 이름 변경

2-2) 핑크색 버튼 클릭시 default branch를 변경할 수 있다.

I inderstand, update the default branch 버튼 클릭

default 브랜츠가 변경되었다.

저장소 Code를 확인해보면,  잘 수정되어있다.

commit을 하고 push까지 하였는데, github에 반영이 되지 않았을 때,

다시 push를 하면 이미 업데이트 되어있는 상태라고 한다 !

해결방법

새로운 커밋 메시지로 커밋 후 다시 push해주면 gihhub에 업데이트가 된다!

<textarea> 에서 첫 줄에 공백이 생길 때

• placeholder에 "답글을 작성해주세요..."를 입력했지만 첫 줄 공백때문에 뜨지 않았다.
• prettier가 자동으로 </textarea>를 내려주어 공백이 생겼다.

이렇게 </textarea>를 딱 붙여주면 놀랍게도 공백이 사라진다..😒

이 에러는 일반적으로 로컬 저장소의 변경 사항을 원격 저장소에 푸시하려고 할 때 발생합니다.

발생이유

1. 충돌(conflicts): 로컬 저장소와 원격 저장소의 변경 사항이 충돌할 때 발생합니다. 이 경우 충돌을 해결하고 다시 시도해야 합니다.
2. 권한 부족(permission issues): 원격 저장소에 푸시할 권한이 없는 경우 발생합니다. 이 경우 저장소 관리자에게 권한을 요청해야 합니다.
3. 원격 저장소가 최신 상태가 아닌 경우: 로컬 저장소와 원격 저장소의 버전이 일치하지 않을 때 발생합니다. 이 경우 원격 저장소를 업데이트하고 다시 시도해야 합니다.
4. 파일 크기 제한(file size limit): 일부 원격 저장소는 푸시되는 파일의 크기에 제한을 둘 수 있습니다. 파일 크기가 제한을 초과하는 경우 이 에러가 발생할 수 있습니다.
5. 인터넷 연결 문제: 푸시하는 동안 인터넷 연결이 끊어진 경우에도 이 에러가 발생할 수 있습니다.

해결방법

1. git pull

2. git commit - m " 메시지 "

3. git push 

pull을 받은 후 다시 커밋하고 푸쉬하면 된다!

요소 가져오기

1. 클래스 이름을 이용한 선택

<!-- 
    DOM(Document Object Model)

    HTML 태그들을 하나씩 객체화한 것.
    HTML 페이지의 내용과 모양을 제어하기 위해서 사용되는 객체이다.
    HTML 태그 당 DOM 객체가 하나씩 생성된다.
    HTML 태그의 포함관계에 따라서 부모, 자식, 형제자매 관계로 구성된다.
 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>클래스 이름 선택</title>
    </head>
    <body>
        <h1>클래스 이름을 이용한 선택</h1>
        <ul>
            <li class="odd item">첫 번째 아이템이에요!</li>
            <li class="even item">두 번째 아이템이에요!</li>
            <li class="odd item">세 번째 아이템이에요!</li>
            <li class="even item">네 번째 아이템이에요!</li>
            <li class="odd item">다섯 번째 아이템이에요!</li>
        </ul>
    </body>
    <script>
        HTMLCollection.prototype.forEach = Array.prototype.forEach;

        // odd 글자색을 빨간색으로 변경
        document.getElementsByClassName("odd").forEach((li) => {
            li.style.color = "red";
        });

        // even은 글자색을 녹색으로 변경

        document.getElementsByClassName("even").forEach((li) => {
            li.style.color = "green";
        });

        // 위 코드를 한 줄로 작성

        document.getElementsByClassName("item").forEach((li) => {
            li.className.includes("odd")
                ? (li.style.color = "red")
                : (li.style.color = "green");
        });

        document.getElementsByClassName("item").forEach((li) => {
            li.style.color = li.className.includes("odd") ? "red" : "green";
        });
    </script>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>클래스 이름 선택 실습</title>
    </head>
    <body>
        <ul>
            <li class="car ferrari">페라리</li>
            <li class="car">람보르기니</li>
            <li class="car">벤츠</li>
        </ul>
    </body>
    <script>
        // 자동차 중 ferrari만 빨간색 글자로 설정,
        // 나머지 자동차는 글자 크기를 20xp로 설정(DOM객체.style.fontSize)

        HTMLCollection.prototype.forEach = Array.prototype.forEach;

        document.getElementsByClassName;

        document.getElementsByClassName("car").forEach((car) => {
            if (car.className.includes("ferrari")) {
                car.style.color = "red";
                return;
            }
            car.style.fontSize = "20px";
        });

        // 자동차 중 ferrari만 빨간색 글자로 설정,
        // 나머지 자동차는 글자 크기를 20xp로 설정(DOM객체.style.fontSize)
    </script>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>클래스 이름 선택 실습</title>
    </head>
    <body>
        <ul>
            <li class="car ferrari">페라리</li>
            <li class="car">람보르기니</li>
            <li class="car">벤츠</li>
        </ul>
    </body>
    <script>
        // 자동차 중 ferrari만 빨간색 글자로 설정,
        // 나머지 자동차는 글자 크기를 20xp로 설정(DOM객체.style.fontSize)

        HTMLCollection.prototype.forEach = Array.prototype.forEach;

        document.getElementsByClassName;

        document.getElementsByClassName("car").forEach((car) => {
            if (car.className.includes("ferrari")) {
                car.style.color = "red";
                return;
            }
            car.style.fontSize = "20px";
        });

        // 자동차 중 ferrari만 빨간색 글자로 설정,
        // 나머지 자동차는 글자 크기를 20xp로 설정(DOM객체.style.fontSize)
    </script>
</html>

2. name 속성 선택

• name에 특수기호 '-'가 들어가면 [ ] 대괄호로 불러준다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>name 속성 선택</title>
    </head>
    <body>
        <form action="" name="join">
            <div>
                <input type="text" name="user-id" placeholder="아이디" />
            </div>
            <div>
                <input
                    type="password"
                    name="user-password"
                    placeholder="비밀번호"
                />
            </div>
            <div>
                <label> </label>
            </div>
        </form>
    </body>
    <script>
        // const [id] = document.getElementsByName("user-id");
        // const [password] = document.getElementsByName("user-password");
        if (!document.join["user-id"].value) {
            console.log("아이디 작성");
            // return;
        }

        console.log(document.join["user-id"]);

        // // 비밀번호 검사하기
        if (!document.join["user-password"].value) {
            console.log("비밀번호 작성");
        }
    </script>
</html>

3. 유효성 검사

• 아이디에 값이 없을때 "아이디"를 콘솔에 출력
• 비밀번호에 값이 없을 때 "패스워드" 출력
• 아이디 저장을 처음부터 체크되도록 설정

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>name 속성 선택 실습</title>
    </head>
    <body>
        <form action="" name="login">
            <input type="text" name="email" />
            <input type="password" name="password" />
            <div>
                <label>
                    <input type="checkbox" name="save-id" value="" /> 아이디
                    저장
                </label>
            </div>
        </form>
    </body>
    <script>
        // 이메일과 비밀번호를 유효성 검사진행
        if (!document.login.email.value) {
            console.log("아이디");
        }
        if (!document.login.password.value) {
            console.log("패스워드");
        }

        // 아이디 저장을 처음부터 체크되도록 설정

        document.login["save-id"].checked = true;
    </script>
</html>

4. innerText / innerHTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>아이디 속성 선택</title>
    </head>
    <body>
        <h1>아이디 속성 선택</h1>
        <div id="first">
            <strong> 첫 번째 DIV 입니다. </strong>
        </div>
        <div id="second">두 번째 DIV 입니다.</div>
        <textarea id="third">세 번째 DIV 입니다.</textarea>
        <button id="btn">완료</button>
    </body>
    <script>
        const first = document.getElementById("first");
        const second = document.getElementById("second");
        console.log(first.innerHTML);
        console.log(first.innerText);

        second.innerHTML = `<strong>${second.innerText}</strong>`;
        second.innerText = `<strong>${second.innerText}</strong>`;

        const third = document.getElementById("third");

        // value: 사용자가 새롭게 입력한 값을 포함해서 가져오기
        console.log(third.value);

        // innerHTML: 기존에 작성되었던 내용만 가져오기
        console.log(third.innerHTML);
    </script>
</html>

5. CSS 선택자로 선택

• 두 코드의 결과는 같음

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS 선택자로 선택</title>
    </head>
    <body>
        <h1>CSS 선택자로 선택</h1>
        <p>갖고 싶은 위시 리스트</p>
        <ul>
            <li>집</li>
            <li>맥북</li>
            <li>땅</li>
            <li>건물</li>
            <li>아이폰14</li>
            <li>아이폰12</li>
        </ul>
    </body>
    <script>
        // 내용에 아이폰이 들어간 태그의 스타일 중,
        // fontSize를 30px, color: pink로 변경
        const items = document.querySelectorAll("ul li");
        console.log(items);

        items.forEach((item) => {
            if (item.innerText.includes("아이폰")) {
                with (item.style) {
                    fontSize = "30px";
                    color = "pink";
                }
            }
        });   
        
        </script>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS 선택자로 선택</title>
    </head>
    <body>
        <h1>CSS 선택자로 선택</h1>
        <p>갖고 싶은 위시 리스트</p>
        <ul>
            <li>집</li>
            <li>맥북</li>
            <li>땅</li>
            <li>건물</li>
            <li>아이폰14</li>
            <li>아이폰12</li>
        </ul>
    </body>
    <script>
        // 내용에 아이폰이 들어간 태그의 스타일 중,
        // fontSize를 30px, color: pink로 변경
 
        const items = document.querySelectorAll("ul li");
        console.log(items);

        items.forEach((item) => {
            if (item.innerText.includes("아이폰")) {
                item.style.fontSize = "30px";
                item.style.color = "pink";
            }
        });

        items.forEach((item) => {
            if (item.innerText.includes("아이폰")) {
                with (item.style) {
                    fontSize = "30px";
                    color = "pink";
                }
            }
        });
        // 내용에 아이폰이 들어간 태그의 스타일 중,
        // fontSize를 30px, color: pink로 변경
    </script>
</html>

6. 객체를 동적으로 생성, 삽입, 삭제

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>객체를 동적으로 생성, 삽입, 삭제</title>
    </head>
    <body>
        <p>DOM 트리에 동적으로 객체를 삽입할 수 있다.</p>
        <p>
            createElement("태그명"), appendChild("태그객체"),
            removeChild("태그객체")
        </p>
        <p>위 3개의 메소드를 이용해서 새로운 객체를 생성, 삽입, 삭제한다.</p>
        <a id="create" href="">DIV 생성</a>
    </body>
    <script>
        const a = document.querySelector("#create");
        // 색은 규칙성이 없으므로 리스트에 담음
        const colors = new Array(
            "yellow",
            "red",
            "blue",
            "green",
            "skyblue",
            "orange",
            "pink"
        );

        globalThis.number = 0;
        a.onclick = (e) => {
            // a태그의 디폴트 이벤트를 막음 (이동을 막음)
            e.preventDefault();
            const i = Math.floor(Math.random() * colors.length);
            // 새롭게 생성한 div개체 (비어있는 div)
            const newDiv = document.createElement("div");

            //++을 앞에 쓰면1부터 뒤에쓰면 0부터
            newDiv.innerText = `새로 생성된 div${++number} 태그`;
            newDiv.style.backgroundColor = colors[i];
            newDiv.onclick = (e) => {
                // e.target: 이벤트 객체를 통해 이벤트를 발생시킨 객체를 가져올 수 있다.
                // 부모를 찾아가서 아이를 지움
                e.target.parentElement.removeChild(e.target);
            };

            // 바디에 newDiv생성
            document.body.appendChild(newDiv);
        };
    </script>
</html>