본문 바로가기

UIUX Full-Stack Developer

[0717] 공부

# t-story 또 나갔어 ,,, 다 없어졌어 ... 주륵

# 너무 바빠.. 생활코딩 js랑 클론 코딩은 내일부터 ,,, ㅜ.ㅜ

더보기

[PLAN]

- 못해도 한 개라도 하자
1. JAVASCRIPT 복습 (完)

2. FIGMA 작업 (完)

3. 생활 코딩 JAVASCRIPT 
https://opentutorials.org/course/3085/18778

4. 노마드코더 JS 클론 코딩

https://nomadcoders.co/javascript-for-beginners/lectures/2866

* JAVASCRIPT

HTML 요소를 선택하고 조작하기 위해 ID와 클래스를 사용합니다. ID와 클래스의 주요 차이점은 '유일성'과 '재사용성'입니다.

ID: HTML 문서 내의 특정 요소를 고유하게 식별하기 위해 사용됩니다. 즉, 각 ID는 페이지 내에서 한 번만 사용될 수 있습니다. JavaScript에서는 document.getElementById()를 사용하여 ID를 가진 요소에 접근할 수 있습니다.
예를 들어, HTML에는 다음과 같이 ID를 할당할 수 있습니다:

html
<div id="uniqueID">...</div>
그런 다음 JavaScript에서는 다음과 같이 이 요소를 선택할 수 있습니다:

javascript
let element = document.getElementById("uniqueID");
Class: 클래스는 재사용 가능한 스타일을 만들거나, JavaScript를 사용하여 특정 그룹의 요소를 선택할 때 사용됩니다. 한 요소에 여러 클래스를 할당할 수 있으며, 하나의 클래스를 여러 요소에 할당할 수 있습니다.
예를 들어, HTML에는 다음과 같이 클래스를 할당할 수 있습니다:

html
<div class="myClass">...</div>
<div class="myClass">...</div>
그런 다음 JavaScript에서는 다음과 같이 이 요소들을 선택할 수 있습니다:

javascript
let elements = document.getElementsByClassName("myClass");
이 경우 elements는 myClass 클래스를 가진 모든 요소의 컬렉션입니다.

요약하자면, ID는 문서 내에서 고유해야 하며 한 번만 사용될 수 있습니다. 반면에 클래스는 여러 요소에 재사용할 수 있으며, 한 요소에 여러 클래스를 할당할 수 있습니다.

 

JavaScript에는 변수를 선언하는 방법으로 var, let, const가 있습니다. 그 중 let과 const의 차이에 대해 설명하겠습니다.

let은 블록 범위(block scope) 지역 변수를 선언하는 데 사용됩니다. let으로 선언된 변수는 해당 블록, 그 블록의 하위 블록에서만 접근할 수 있습니다. 또한 let으로 선언된 변수는 재할당이 가능합니다.


예:

javascript
let x = 10;
if (true) {
  let x = 20;  // 다른 범위의 x
  console.log(x);  // 20 출력
}
console.log(x);  // 10 출력 (기존 x 값 유지)
x = 30;  // let으로 선언된 변수는 재할당 가능
console.log(x);  // 30 출력
const는 블록 범위의 상수를 선언하는 데 사용됩니다. const로 선언된 변수는 재할당할 수 없습니다. 이는 변수가 아닌 그 값에 상수성을 부여하는 것을 의미합니다.


예:

javascript
const y = 10;
// y = 20;  // 에러: const로 선언된 변수는 재할당 불가능
console.log(y);  // 10 출력
주의할 점은 JavaScript의 const가 다른 언어의 const와 약간 다르다는 것입니다. JavaScript의 const는 객체를 가리키는 참조 자체는 변경할 수 없지만, 그 객체의 내용은 변경할 수 있습니다.

예:

javascript
const obj = {a: 1};
// obj = {b: 2};  // 에러: const로 선언된 변수는 재할당 불가능
obj.a = 2;  // 하지만 객체의 속성 값은 변경 가능
console.log(obj.a);  // 2 출력