728x90
728x90

 

 

 JS 언어의 특징

1. 객체 지향 프로그래밍 지원

객체를 생성하고 관리하는 데에 강점이 있음. 이를 통해 복잡한 기능을 구현할 수 있음

 

-절차지향 : 순서대로 실행되는 일련의 과정을 단계적으로 기술해 프로그램을 만듦

ㄴ첫 번째 일을 처리한 다음에 두 번째 일을 처리하고, 그 다음에 세 번째 일을 처리 

-객체지향 : 데이터와 함수를 객체라는 그룹으로 묶어서 처리 하는 법

ㄴ 각 객체는 상태와 행동을 가지고 있으며, 상태는 객체의 속성이라고도 함

 

 

 js에서 객체를 만들 때는

객체 : {중괄호} 사용 

속성 : 쉼표, 

ㄴ이름: 문자열 값: 다양한 데이터 타입을 사용할 수 있음

메소드 : 객체 내부의 함수 

*속성의 값으로 함수를  추가할 수 있음

https://insidepixce.tistory.com/75

 

javascript에서 객체를 생성하는 방법 8가지

1. 일반적인 객체 생성 방법 // 객체 생성자 함수를 사용하여 객체 생성 function Person(name, age) { this.name = name; this.age = age; } // 새로운 객체 생성 let person1 = new Person("gyodam", 21); console.log(person1); // 출

insidepixce.tistory.com

객체를 생성하는 법 8가지를 정리한 티스토리 첨부

확인해보면 도움이 될 것이다. 

-> 객체를 만들어 필요한 속성과 메소드를 추가하여 사용

 

2. 동적 타이핑 언어

동적 타이핑 언어란? 

자바스크립트가 아닌 다른 언어에서는 변수를 지정할때 타입을 지정해줘야 함

 

#타이핑이라는 단어가 조금 생소하게 느껴진다면 type + ing라고 생각하면 좋다. 

정적 타이핑 언어 : java

public class Example {
    public static void main(String[] args) {
        int myVariable = 10;
        System.out.println(myVariable); // 출력: 10

        myVariable = "Hello, World!"; // 오류: 타입 불일치
        System.out.println(myVariable);
    }
}

 

이를테면, C, C++, Java, C# 등이 정적 타이핑 언어에 해당한다. 

위의 예시 코드에서 'myvariable' 은 처음에는 정수 타입인 int로 선언 , 10이라는 값이 할당됨.

그러나 이후 문자열인 "Hello, World!"를 할당하려고 해 컴파일 오류가 발생함

java에서는 변수의 타입이 컴파일 시에 결정되기 때문에 한 번 타입이 지정되면 다름 타입의 값을 할당할 수 없음

 

장점 -> 컴파일 시에 타입 체크를 수행하여 오류를 사전에 방지

단점 -> 동적 타이핑 언어에 비해 유연성이 떨어짐

 

https://insidepixce.tistory.com/76

 

런타임이란? (런타임 시점)

런타임이란? 컴퓨터 프로그램이 실행되는 동안, 프로그램의 실행 환경과 관련된 모든 작업을 처리한다. 실행중에 발생하는 모든 활동과 동작을 포함한다 1. 메모리 관리 : 프로그램이 메모리를

insidepixce.tistory.com

 

*숫자열과 문자열을 동일한 변수에 저장할 수 있다

let myVariable = 10;
console.log(myVariable);

myVariable = "Hello, World!";
console.log(myVariable); // 출력: Hello, World!

첫번째 출력 : 10 두번째 출력 : Hello, World!

 

*동적 타이핑은 연산에 대해서도 적용된다 

let sum = 5 + 10;
console.log(sum)

sum = "5" + "10";
console.log(sum);

첫번째 출력 : 15 두번째 출력 : 510

따로 타입을 정해주지 않았는데도 적용되는 것을 볼 수 있다

*배열은 여러 타입의 요소를 포함 할 수 있다

let myArray = [1, "two", true];
console.log(myArray);

 출력: [1, "two", true]

 

*객체의 속성은 런타임 중에 추가하거나 수정할 수 있다

let myObject = { name: "gyodam", age: 21 };
console.log(myObject);
myObject.email = "insidepixce@gmail.com";
console.log(myObject);

출력1 : { name: 'gyodam' , age : 21}  출력 2 : { name: :"gyodam", age: 21, email: "insidepixce@gmail.com" }

 

3. 함수형 프로그래밍 지원

 

함수를 일급 객체로 취급하고 , 고차 함수를 지원함. 

-> 코드의 재사용성과 가독성을 높임

 

따로 포스팅을 하려 했으나, 2주차에 자세히 배울 예정이기에 이 포스트에 서술함.

 

특성

1. 변수에 할당 가능함

2. 함수의 매개변수로 전달할 수 잇음

3. 함수의 반환값으로 사용할 수 있음

4. 동적으로 프로퍼티를 할당하거나 메서드를 추가할 수 있음

 

즉, 일급 객체는 Javascript에서 다른 객체와 마찬가지로 취급됨. 

함수형 프로그래밍에서는 함수를 값으로 다루어 코드를 조합하는 기법을 사용함.

 

// 변수에 할당
const add = function(a, b) {
  return a + b;
};

// 함수의 매개변수로 전달
function calculate(operation, a, b) {
  return operation(a, b);
}

console.log(calculate(add, 5, 3)); // 출력: 8

// 함수의 반환값으로 사용
function createMultiplier(multiplier) {
  return function(num) {
    return num * multiplier;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // 출력: 10

// 동적으로 프로퍼티 할당 및 메서드 추가
const person = {};
person.sayHello = function() {
  console.log("Hello!");
};

person.sayHello(); // 출력: Hello!

 

고차함수란?

함수를 인자로 받거나 , 함수를 반환하는 함수 

// 함수를 매개변수로 받는 고차 함수
function operationOnNumbers(operation, a, b) {
  return operation(a, b);
}

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

console.log(operationOnNumbers(add, 5, 3)); // 출력: 8
console.log(operationOnNumbers(subtract, 5, 3)); // 출력: 2

// 함수를 반환하는 고차 함수
function createMultiplier(multiplier) {
  return function(num) {
    return num * multiplier;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // 출력: 10

 

 

4. 비동기 처리

 

작업을 순차적으로 기다리지 않고, 병렬로 처리할 수 있도록 하는 방식

 

 


항해 99 15기 node.js 1주차 강의 중 2강까지의 내용정리 

728x90
300x250
728x90
728x90

 javascript의 역사에 관하여 

1. 1995년 자바스크립트 탄생

넷스케이프 커뮤니케이션에서 제작

ㄴ livescript -> javascript(마케팅을 위하여 이렇게 진행)

ㄴ java와는 전혀 관련이 없음

#필자의 경우에도 주변에 javascript를 줄여 java라고 말하는 거 아니야?  라고 말하던 친구가 있었다

#인도를 인도네시아의 줄임말이라고 하는 거랑 같은 느낌

ㄴ브라우저에서 동작하는 스크립트 언어

 

2. 2005년 AJAX 등장

javascript 기반의 기술

당시의 웹사이트는 버튼을 하나 눌러서 작동하려면 전체 페이지를 새로고침해야 했으나 덕분에 해당 부분만 작동시키면 됨

UX- user experience : 사용자 정의

 

3. 2008년 V8 엔진 출시

-super fast(코드 실행 속도 상당부분 개선)

-컴파일러 , 메모리관리 시스템이 좋아짐

 

4. 2009년 node.js 등장, 서버 개발 활성화

브라우저를 깨고 나와서 어디에서든 사용할 수 있도록 만든것이 node js

frontend + backend+ db (mongodb) = fullstack

하나의 언어로 풀스택이 될 수 있는 언어

 

728x90
300x250
728x90
728x90

런타임이란?

컴퓨터 프로그램이 실행되는 동안, 프로그램의 실행 환경과 관련된 모든 작업을 처리한다. 

실행중에 발생하는 모든 활동과 동작을 포함한다

 

1. 메모리 관리 : 프로그램이 메모리를 할당하고 사용하는 방법을 관리한다. 

변수, 객체, 배열 등의 데이터 구조를 메모리에 할당하고 해제하는 작업을 포함함

 

2. 변수 및 객체의 생성 및 소멸 : 변수와 객체가 선언되거나 삭제되는 시점에서 해당 작업을 처리함

 

3. 예외 처리 : 런타임은 프로그램 실행 중에 발생하는 에외를 처리하고 적절한 조치를 취함

 

프로그램의 실행 흐름을 제어하고 오류를 처리하는데 도움이 됨

 

4. 동적 타이핑: 동적 타이핑 언어의 경우 변수의 타입을 보고 반환하는 작업을 수행

변수의 타입이 실행중에 결정되는 동적 타이핑 언어의 특성과 관련

 

5. 입출력 처리 : 파일 읽기/쓰기 , 네트워크 통신, 사용자 입력 처리 등의 작업을 수행

 

6. 스레드 관리: 멀티스레드 환경에서 스레드의 생성, 동기화, 스케쥴링 등을 관리 

이는 동시성과 병렬성을 지원하며 프로그램의 성능을 향상시키는데 중요

 

728x90
300x250
728x90
728x90

1. 일반적인 객체 생성 방법

// 객체 생성자 함수를 사용하여 객체 생성
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 새로운 객체 생성
let person1 = new Person("gyodam", 21);
console.log(person1); // 출력: Person { name: 'gyodam', age: 21 }

// 프로토타입을 사용한 메서드 추가
Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

person1.greet(); // 출력: Hello, my name is Gyodam

 

객체 생성자 함수를 사용하여 객체를 생성함.

객체 생성자 함수는 new 키워드와 함께 호출되고, 함수 내부에서 this 키워드를 사용하여 객체의 속성을 정의함

또한, Prototype 를 사용하여 객체의 메서드를 추가할 수 있음

 

2. 객체 리터럴을 사용하여 객체 생성

// 객체 리터럴을 사용하여 객체 생성
let person2 = {
  name: "seongbin",
  age: 25,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

console.log(person2); // 출력: { name: 'seongbin', age: 25, greet: [Function: greet] }
person2.greet(); // 출력: Hello, my name is seongbin

중괄호 {} 내의 속성과 해당 속성의 값을 정의

메서드도 속성으로 추가할 수 있음

이는 함수 표현식이나 어레이 함수 사용 가능

 

3. Object.create() 를 사용한 객체 생성 :

// 프로토타입을 기반으로 새로운 객체 생성
let personPrototype = {
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

let person = Object.create(personPrototype);
person.name = "gyodam";
person.age = 21;

console.log(person); // 출력: { name: 'gyodam', age: 21 }
person.greet(); // 출력: Hello, my name is gyodam

 

지정된 프로토타입 객체를 기반으로 새로운 객체를 생성

프로토타입 객체의 속성과 메서드를 상속받아 새로운 객체를 구성함

 

4. 클래스를 이용한 객체 생성

 

// 프로토타입을 기반으로 새로운 객체 생성
let personPrototype = {
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

let person = Object.create(personPrototype);
person.name = "gyodam";
person.age = 21;

console.log(person); // 출력: { name: 'gyodam', age: 21 }
person.greet(); // 출력: Hello, my name is gyodam

class 키워드를 사용하여 클래스를 정의하고, constructor 메서드를 사용하여 객체를 초기화한다. 

클래스 내의 정의단 다른 메서드들은 클래스의 프로토타입에 할당된다

 

위의 예시 코드에서는 Person 클래스를 정의하고 new 키워드를 사용하여 객체를 생성한다. 

클래스를 사용하여 객체를 생성하면 자동으로 생성자 함수와 프로토타입 객체가 만들어지며, 인스턴스화된 객체를 사용할 수 있다

이는 객체 생성에 유연성을 더한다

 

 

5. 팩토리 함수를 사용한 객체 생성

function createPerson(name, age) {
  return {
    name: name,
    age: age,
    greet: function() {
      console.log("Hello, my name is " + this.name);
    }
  };
}

let person = createPerson("gyodam", 21);
console.log(person); // 출력: { name: 'gyodam', age: 21 }
person.greet(); // 출력: Hello, my name is gyodam

팩토리 함수는 객체를 생성하여 변환하는 함수이다.

원하는 속성과 메서드를 가진 객체를 생성하고 반환한다

 

6. object.assign()을 사용한 객체 생성

let person = {
  name: "gyodam",
  age: 21
};

let extendedPerson = Object.assign({}, person, { city: "busan" });
console.log(extendedPerson);

 

출력: {name: 'gyodam', age :21 , city: 'busan')

Object.assign() 메서드를 사용하면 기존 객체를 확장하거나 병합하여 새로운 객체를 생성할 수 있다.

 

7. 프로토타입 상속을 사용한 객체 생성

let personPrototype = {
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

let person = Object.create(personPrototype, {
  name: { value: "gyodam" },
  age: { value: 21 }
});

console.log(person); // 출력: { name: 'gyodam', age: 21 }
person.greet(); // 출력: Hello, my name is gyodam

Object.create() 메서드를 사용하여 프로토타입 객체와 속성을 지정하여 객체를 생성하는 방식

 

8. ES6의 구조 분해 할당을 사용한 객체 생성

let name = "Gyodam";
let age = 21;

let person = { name, age };
console.log(person); // 출력: { name: 'gyodam', age: 21 }

변수로부터 속성 이름과 값이 추출되어 객체를 생성할 수 있음

 

이 외에도 정말 많은 방법이 있지만 여기까지 포스팅해보도록 하겠음

728x90
300x250
728x90
728x90

1.개인 레포에서 작업한 변경 내용을 로컬로 커밋한다

2. 원본 레포지토리로 이동하여 작업할 디렉토리로 변경한다

3. 원본 레포지토리에서 개인 레포지토리의 브랜치를 가져온다

git remote add 개인레포지토리명 개인레포지토리URL

*실수로 다른 레포지토리를 연결했을때

 

git remote remove 레포지토리명

 

remove 후 다시 추가해주면 된다

 

 

4. 개인 레포에 변경사항 push

git push 개인레포지토리Url 브랜치이름

 

5. pr (이때 원본 레포지토리에서 이미 branch가 있어야 한다)

gh pr create --base <베이스브랜치> --head <어이디(개인)>:<브랜치이름> --repo <아이디(원본)><레포이름>

 

제대로 pr이 갔는지 확인해보자 

 

제대로 Pr한 것을 확인할 수 있다

728x90
300x250
728x90
728x90

항해 99/ 1일차 과제 

내 기억으로 진행하다가 갑자기 명령어가 안 먹혔다. 

서치해서 찾아보고 오류 해결법까지 정리해보았다

 

 

1. 수정한 파일을 스테이징한 후 커밋한다

(이때 작업 디렉토리 안에 있어야 하며, 브랜치를 확인해준다)

 

2. 새로운 pr을 생성해준다

gh pr create

*로그인이 안되어있다면 로그인을 해야한다.

gh auth login

이렇게 로그인을 진행해준다

로그인을 진행해준 후 정상적으로 진행되었다면

이렇게 뜬다.

 

3. pr 목록 확인

gh pr list

/pull/7 이라고 나와서 넘버가 7인것은 알 수 있지만 다른 경우도 봐야 하기 때문에 확인해준다

 

4. pr 내용 확인

git pr view (number)

이렇게 내용을 확인할 수 있다

 

5. pr merge하기

git pr merge number

를 하면 Merge가 된다

number에는 7이 들어간다(내 기준)

 

 

 

#conflict 오류가 뜬다면 

 

 

충돌(conflict) 가 생겨서 병합이 안되는 경우이다

 

 

1. pull request의 브랜치로 전환한다

gh pr checkout 7

나는 이러한 결과를 얻었다.

일반적으로, Pull Request를 생성하면 해당 Pull Request는 원본 레포지토리의 별도 브랜치로 생성된다. 이 별도 브랜치에는 해당 Pull Request에 대한 변경사항이 포함되어 있다.

보통 병합 충돌에 많은 이유가 된다. 

Pr 브랜치로 전환하여 충돌을 해결하는 것이다

나는 정상적으로 설정되어 있어 다른 방법을 써보았다

 

2. 최신 변경사항을 가져온다

git fetch origin main

 

3. 가져온 최신 변경사항을 현재 브랜치에 병합한다

git merge origin/main

 

 

에러가 뜬다면 

충돌 해결 후 스테이징을 안 했던 것이다

스테이징 한 후 커밋 후 다시 병합해보면

잘 업데이트된걸 볼 수 있다

728x90
300x250
728x90
728x90

 

 

항해 99에서 배운 몽고디비 연결하기

내 야구시뮬레이터 프로젝트에도 괜찮을 것 같아서 써먹기로 했다

방금 전 게시물에서 썼던, 모든 선수들을 저장하는 코드를 조금 바꿔서 몽고디비에 저장할 수 있도록 햇다

 

중간에 db=client.baseball (db를 설정해주는 문장)을 적지 않아 막혔는데 항해 99에서 실습했던 파일을 찾아보니 이게 오류였구나... 했다 ^^ 허허

 

처음부터 끝까지 내가 적다 보니 코드스니펫 쓰던 시절이 그립다 ~~~~

 

from pymongo import MongoClient
import requests
from bs4 import BeautifulSoup

team_codes = ["sk", "wo", "lg", "ht","nc", "ss","hh","lt","kt","ob"]
client = MongoClient('mongodb+srv://sparta:test@sparta.rqx1qlk.mongodb.net/?retryWrites=true&w=majority')  

db = client.baseball

for team_code in team_codes:
    url = f"http://eng.koreabaseball.com/Stats/BattingByTeams.aspx?codeTeam={team_code}"

    response = requests.get(url)
    soup = BeautifulSoup(response.content, 'html.parser')

    table = soup.find_all('table')[0]

    data = []

    tr_tags = table.find_all('tr')
    for tr in tr_tags:

        td_tags = tr.find_all('td')

        row = {}
        for td in td_tags:

            title = td.get('title')
            if title:

                row[title] = td.text
            elif 'stats_player' in td.get('class', []):

                row['Player'] = td.text
        if row:
            data.append(row)
    collection = db[team_code]
    collection.insert_many(data)
728x90
300x250
728x90
728x90

나머지 사진들은 안 찍음!

 

 

각 팀별로 엑셀 파일 추출 성공!!!!!!!!

 i. 행에서 모든 'td' 태그를 찾는다

 ii. 해당 행의 데이터를 저장할 빈 딕셔너리를 만든다

 iii. 각 'td' 태그에 대해 다음을 수행하는 루프를 시작힌디:

     - 'td' 태그의 'title' 속성을 찾습니다. 이는 야구 통계의 종류를 나타낸다. 예: AVG, G, PA 등).

     - 만약 'title' 속성이 존재한다면, 이 값을 딕셔너리에 추가한다

     - 만약 'td' 태그가 선수의 이름을 나타낸다면 (즉, 'class' 속성이 'stats_player'라면), 이를 딕셔너리에 추가한다

 iv. 완성된 행 딕셔너리를 메인 데이터 리스트에 추가한다.

 

 

 


import requests
from bs4 import BeautifulSoup
import pandas as pd

team_codes = ["sk", "wo", "lg", "ht","nc", "ss","hh","lt","kt","ob"]
for team_code in team_codes:
    url = f"http://eng.koreabaseball.com/Stats/BattingByTeams.aspx?codeTeam={team_code}"
    response = requests.get(url)
    soup = BeautifulSoup(response.content, 'html.parser')

    table = soup.find_all('table')[0]
    data = []
    tr_tags = table.find_all('tr')
    for tr in tr_tags:
        td_tags = tr.find_all('td')
        row = {}
        for td in td_tags:
            title = td.get('title')
            if title:
                row[title] = td.text
            elif 'stats_player' in td.get('class', []):
                row['Player'] = td.text
        if row:
            data.append(row)


    df = pd.DataFrame(data)

    df.to_excel(f'scraped_batters_{team_code}.xlsx', index=False)

 


 

 

여담

 

팀 코드 찾느라 개발자 도구 둘러봤는데, 쓱이 아직 sk였고, 두산이 아직 Ob로 되어있었다 ㅋㅋㅋ

hh한화, ht 기아 , kt 케이티. nc 엔씨, lg 엘지, wo키움 lt 롯데 ss 삼성 

바뀐지 꽤나 된 팀도 있는데 안 바꾸고 뭐하냐 ㅡㅡ

물론 실제 창에서는 저렇게 안 뜸.

 

728x90
300x250

+ Recent posts