2024-09-23 강의 정리 2-4 ~ 2-7

Slit 특정 문자 나누기

특정 문자 나누기는 예를들어 이메일을 분리한다고 했을때 '계정 @ 주소' 로 이뤄져 있다고 볼 수 있는데 이것을 분해하는 것이다. 

let email = "marklee6825@gmail.com"

let exsplit = email.split('@')

>> ['marklee6825', 'gmail.com']

 

이렇게 적을 수 있다. split(' ')안의 단어? 를 기준으로 양쪽을 떼어낸다 라는 느낌이다. (그 기준은 포함이 안됨)

 

console.log(explit[0])

>> marklee6825

 

이런 식으로 리스트 숫자를 넣어서 불러오기도 가능하다.

 

 

 

 

한번 더 나누기

 여기서 한번 더 나눌수도 있는데, 이때는 위의 exsplit을 사용하여 나누면 된다.

let exsplit2 = exsplit[1].split('.')

>> ['gmail', 'com']

 

 google.com 을 .기준으로 나누면 주소 또한 분리를 시킬 수 있다. 이때도 리스트의 숫자를 불러오는 형식으로

따로 불러올 수 있다.

 

 

 

 

한번에 나누기

 만약 이런 두번의 나눔이 싫다면 한번에 나눌 수도 있는데.

console.log(email.split('@'))[1].split('.')[0])

>>gmail

 

 이렇게 한번에 뽑을 수도 있다.

 

 

 

 

Function 기능들 (함수)

 Function 함수는 바디에서 길게 작성할 필요없이 반복되는 코드가 필요하다면, 함수를 만들어서 불러오는 형식으로

코드를 좀더 간결하고 쉽게 만들어준다.

function sum(num1, num2) {
return num1+num2
}

console.log(sum(1,2))

>> 3

 

 이렇게 function 을 한번만 만들어두면 그 함수의 클래스를 불러와서 재사용 할 수 있다.

 

 

 

 

For 루프

 루프란 그 조건에 만족하기 까지 반복을 하는 문을 이야기한다. 기본적으로 피라미드 만들기 가 있다.

for (let num = 0; num < 100 ; num++) {
console.log(num)
}

>> 0~99

 

쉽게 풀자면 첫번째는 대상이다. 이 대상이 두번째의 목표에 달성하기 위해서 세번째 행동반복을 계속 한다 는 것이다.

대상은 숫자 0이고, 100이 되기 전까지 숫자를 더한다 로 해석할 수 있다.

 

 

 

For each 

 For each는 for과 유사하다고 볼 수 있는데, 이는 리스트나 딕셔너리 또는 리스트-딕셔너리에서 하나하나의 칸에 있는 

자료들에게 반복을 거는 것이라고 할 수 있다.

let fruits = ['사과', '배', '감', ' 참외']

fruits.forEach(element => {
console.log(element)
})

>> 사과
배
감
참외

 

이는 fruits 리스트에 있는 element 모든 요소들에게 {}사이의 반복을 거는 것으로 모든 요소가 나오기 전까지 반복하는 것이다. 이는 리스트처럼 나오지 않고 하나하나 각각의 값으로 나온다.

 

 

for each에 if함수를 넣어서 사용 할 수 있는다.

 

let ages = [10, 11, 13, 22, 25, 30]

ages.forEach(element => {
if(element > 20) {
console.log('adult')
} else {
console.log('student')
}
});

>> student
student
student
adult
adult
adult

 

 

 

 

Jquery

 Jquery는 자바스크립트의 라이브러리입니다. 제이쿼리를 이용하여 다양한 함수들을 사용 할 수 있습니다.

 

function checkResult() {
let word = '사과'
$('#q1').text(word)
}

>> '사과'

 

이 코드는 제이쿼리의 checkResult함수를 function으로 사용하는 것으로

여기서 $는 제이쿼리를 의미하며 그 뒤에 '#q1'은 텍스트 클래스의 아이디를 말한다.

이에 q1이라는 택스트 클래스의 값에 사과를 추가시키는 function인 것이다.

 

 

리스트-딕셔너리 (Jquery)

let a = [
{'name':'마크','age':26},
{'name':'승열','age':30}
]

$('#q2').text(a[1]['age'])

>> 30

 

여기서 리스트 - 딕셔너리는 그대로 가져가는데, 리스트의 1번 즉 이름이 승열인 값중 나이를 q2에 추가한다 라는 뜻이다.

만약에 대체를 하고 싶다면 $('#q2').empty() 를 사용하면된다.

 

 

 

 

GPT에서 코드 가져오기

GPT에서 코드를 가져오는것은 간단하다.

 

GPT에 JS로 시간을 알려달라는 코드를 알려달라고 한다면 분명

HTML과 JS(스크립트) 를 줄 것이다. 이때 둘다 적용을 하게 되면 작동을 하게 된다.

이때 코드를 잘 봐야하는데, 스크립트는 그냥 돌아가는 것이 아닌 id를 할당해서 돌아가는 것으로

그 시간을 표시하는 블락 클래스의 id에 잘 집어 넣어야 한다.

 

 

 

 

모든 요소에 적용시키기

 만약 리스트 - 딕셔너리 형태에서 이름과 나이만 아는경우에, 저는 ~이고 ~살 입니다. 라고 나타내야 한다고 가정해보자

이때, append를 사용하게 된다.

 

people.forEach(element => {
let name = element['name']
let age = element['age']

let temp_html = `<p> 저는 ${name}이고, ${age}살입니다.</p>`
$('#q1').append(temp_html)
})

 

이렇게 작성하게 되면 let people 에 이름과 나이가 있는 경우  name에 모든 이름요소를 넣고, age에는 모든 나이요소를 집어넣는다. 그리고 temp_html을 만들어서 `` (백틱)을 사용하여 표현할 방식을 설정한다. 이때 $()로 요소를 불러 와 준다.

 

이렇게 되면 만약 let people 안에 이름이 승열 이고 나이가 26인 데이터가 있으면,

>> 저는 승열이고, 26살입니다. 로 프린트가 되는 것이다.

 

즉 append는 모든 요소에 적용을 시키는 함수이다.

 

- 백틱이란 문자열 안에 변수를 쉽게 삽입 할 수 있는 문법이다.

 

 

 

const - var - let 차이

 

조금의 수업을 들으면서 const 와 var 그리고 let 을 사용하는것을 느꼈는데, 이들의 차이점에 대해서 알아보고 싶다.

 

요즘은 var을 사용 한다기 보다,  const와 let을 사용하는 추세임을 알게 되었다.

 

var

 

const

const는 기본적인 변수에 사용을 하면 좋고, 재선언이 불가능하며 재할당이 불가능하다. 즉 const name = '승열'로 했다면, 이 name 의 값은 승열로 고정이 되는 것이다.

 

let

const와는 다르게 let은 재할당이 가능하다. 그렇다면 갱신을 해줘야 하는 변수에서 사용하면 좋다 즉 let age = 26이라면 내년, 1살을 먹고 난 후에 27으로 변경이 가능하다는 소리이다.