유데미 취업부트캠프 - 프론트엔드&백엔드 : 8일차 TIL

오늘 드디어 길고 길었던 CSS 학습을 마치고, 

javascript에 대해 학습하였습니다! 🙂

 

---

 

 

 

어제 배운 Form 학습을 기반으로, 다음과 같은 페이지를 만들어보는 챌린지를 진행하였습니다.

 

🤔

 

 

오늘의 챌린지를 진행하면서 CSS에서 어려움을 겪었던 부분이다.

radio , checkbox의 흐트러진 정렬을 위해, flex box로 만들고, 수직정렬을 맞추면 되겠다고 생각했다.
또 다른 문제는, input요소가 label 앞이 아닌 뒤로 이동해버리는 문제였다..

 

💡

.inline-control {
  display: flex;
}

.inline-control input {
  width: auto;
}

.inline-control label {
  margin: 0;
  margin-left: 0.5rem;
}

 

앞서, input요소들은 모두 width를 100%로 지정해놓았기 때문에, radio와 checkbox가 한줄을 다 차지하려고 하고, 줄바꿈이 일어나 정렬이 흐트러져버린것이였다. 

 

→ input의 width:100%를 해제하기 위해, auto로 변경해줘야한다.

 

button → inline

label → inline

input → inline-block

 

아직도, 헷갈린다..😵‍💫

기억해두자!

 

 

---

 

 

자바스크립트는 브라우저에서 실행될 수 있는 언어로, HTML과 CSS를 통해서도 화면에 렌더링 할 수는 있지만, 

화면을 조작, 업데이트 등 동적으로 변경하기 위해선, javascript를 사용해야한다! 

 

❗️JavaScript의 convention

코드의 가독성, 일관성, 협업의 편의성을 증진하기 위해 사용되는 규칙과 관례로써, 

 

• 변수 및 함수명: 카멜 케이스 사용 (예: myVariable, calculateTotal()).
• 상수 (const): 대문자 스네이크 케이스 사용 (예: MAX_SIZE).
• 생성자 함수: 파스칼 케이스 사용 (예: MyConstructor)

 

✓ 변수 let, const   vs   var

자바스크립트를 배울 때, var 변수는 무조건 지양해야한다고 배운다.

이유를 정리해보았다.

 

let

• 변수 중복 불가능
• 블록 레벨 스코프
• 변수 Hoisting이 발생하지 않는 것처럼 동작
• window 전역객체의 프로퍼티X

const

• 변수 중복 불가능
• 블록 레벨 스코프
• 변수 Hoisting이 발생하지 않는 것처럼 동작
• window 전역객체의 프로퍼티X
• 선언&초기화를 동시에 작성해야 함 (재할당이 불가능하기 때문)
• 재할당 불가능

TypeError 발생

 

사진과 같이.. 재할당을 할 수가 없다. 

그럼 const를 사용할 수 없는거 아닌가? 라고 생각할 수 있겠지만!

프로퍼티 접근법으로 할당하면 객체의 값을 변경할 수 없다.

 

'재할당만 안되는구나' 라고 생각하면 좋다!

 

 

❗️var의 문제점

• 중복 선언이 허용
• 함수 레벨 스코프
• window 전역객체의 프로퍼티O
• 변수 Hositing 발생

이러한 이유들로, 자바스크립트를 배우면서 var를 사용하는 경우를 본적이 없다.

 

 

var을 사용하였을때, 마지막 console이 '지역'으로 출력되는 것을 확인 할 수 있다.

이유는 바로, var는 함수 단위 스코프이기 때문이다. 

if는 함수가 아닌 분기문이기 때문에, '지역'으로 global변수를 재할당 하면 전역 부분까지 오염되는 것이다.

 

✓ ⭐️ Hoisiting

계속 호이스팅에 대한 언급이 나오는데, 중요한 개념 중 하나다!

호이스팅(Hoisting)은 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 동작을 말합니다.

코드 실행 전에 JavaScript 엔진에 의해 처리되며, 코드가 실행되기 전에 변수와 함수가 메모리에 할당되고 초기화되는 특징을 가지고 있습니다.

 

변수 호이스팅

변수 선언은 호이스팅에 의해 선언 단계와 초기화 단계로 나누어지는데,

변수는 선언 단계에서 메모리에 공간을 할당받지만, 초기화 단계에서 실제 값이 할당됩니다.

 

var

console.log(myVar); // undefined
var myVar = 'I am hoisted';
console.log(myVar); // 출력: I am hoisted

 

myVar의 선언 전에, console을 출력하면 아직 선언도 안했으니까 Reference Error가 발생할 것 같지만?!

호이스팅에 의해 선언 단계에서 메모리에 할당되어 undefined가 출력되는 것을 확인할 수 있다.

 

let / const

let과 const도 호이스팅이 발생하지만, var와는 동작 방식이 약간 다르다!

변수가 호이스팅 되긴하지만, 초기화 전까지 일시적 사각지대(Temporal Dead Zone, TDZ)에 놓인다.

 

let,const는 선언은 되지만, 초기화 과정을 거치지 않기 때문에, 초기화 전에 변수에 접근하면 TDZ 상태가 되어 Reference Error가 발생한다!

 

console.log(myVar); // 오류: Cannot access 'myVar' before initialization
let myVar = 'I am declared with let';

 

→ var: 선언+초기화  ,   let/const : 선언 (by Hoisting)

 

 

함수 호이스팅

함수 선언도 호이스팅에 영향을 받는다.

함수 선언문은 전체가 호이스팅되지만, 함수 표현식은 변수만이 호이스팅된다.

 

 

함수 선언문

sayHello(); // 출력: Hello
function sayHello() {
  console.log('Hello');
}

함수 전체가 호이스팅 되어, 함수값이 출력될 수 있다.

 

 

함수 표현식 ⭐️

sayHi(); // 오류: sayHi is not a function
var sayHi = function() {
  console.log('Hi');
};

표현식은 변수(var sayHi)만이 hosting되기 때문에, TypeError가 발생한다!

 

 

✓ 변수 섀도잉(Variable Shadowing)

두 개 이상의 동일한 이름을 가진 변수가 서로 다른 스코프에서 선언될 때 발생하는 현상

내부 스코프에서 선언된 변수가 외부 스코프에서 선언된 변수를 참조한다. (내부→외부)

 

 

외부 변수는 수정이나 삭제 없이! 함수 안에서만 사용 가능한 동명의 변수를 생성하는 것이다.

코드를 이해하기 어렵게 만들 수 있으므로, 섀도잉은 최소한으로 사용하는 것이 좋다.

 

✓ 전역 변수 vs 지역 변수 

이 둘은 변수가 선언된 위치와 스코프(scope)에 따라 구분된다.

 

전역 변수 (Global Variable)

전역 변수는 어디에서든 접근 가능한 변수로, 전역 스코프(Global Scope)에서 선언되며, 보통 최상위에서 선언됩니다.

지역 변수 (Local Variable)

지역 변수는 특정 블록 또는 함수 내에서만 접근 가능한 변수로, 해당 변수가 선언된 블록 또는 함수의 스코프 내에서만 유효합니다.

 

 

전역은 어디서나 접근이 가능하기 때문에, 예를 들면 파일을 따로 생성하여 스코프를 분리했다고 생각했지만?! 전역으로 분리가 되지 않는 위험이 존재할 수 있기 때문에, 전역변수보단 지역변수를 사용하는 편이 좋다.