[1주차] 인프런 워밍업 클럽 스터디 FE 1기 발자국

강의 수강

1) 일주일 간 학습한 내용

이전에 접했던 개념이지만 다시 봐도 헷갈렸던 개념, 몰랐던 개념 위주로 정리해보았다.

const vs let vs var

const , let → 블록 레벨 스코프

function func(){
	if(true){
		let a = 0;
	}
	console.log(a) // reference error
}

var → 함수 레벨 스코프

function func(){
	if(true){
		var a = 0;
	}
	console.log(a) // a 출력
}

호이스팅
- 코드 실행 전 변수나 함수 선언을 맨 위로 끌어올려지는 것을 의미함.

// 1. var 변수 생성시 undefined로 선언 후, hello 할당

console.log(greeting); //undefined 출력
var greeting = 'hello';

// 2. let, const 변수 생성 시
// 호이스팅은 발생하지만 초기에 초기화되지 않고 값을 할당하기 전에 콘솔 로그가 발생함. 

// 발생 원인: TDZ(Temporal Dead Zone) 
// → 선언단계와 할당 단계 사이 변수를 사용할 수 없는 일시적 비활성 상태

console.log(greeting); // reference error
let greeting = 'hello';

최대한 let보다 const를 사용하되 let 사용시 scope를 좁게 만들어서 사용하자.

for vs forEach

for가 forEach 보다 성능이 좋음.
따라서 복잡한 코드인 경우에는 for가 좋지만 가독성 측면에서는 forEach가 좋을 수 있음.
for는 await과 함께 동작하지만 forEach는 await과 완벽하게 동작하지 않음.

DOM

DOM vs BOM
DOM(Document Object Model)
- DOM은 웹 브라우저가 HTML 페이지를 인식하게 해주는 트리구조로 된 객체 모델을 의미함.
- JavaScript와 html을 연결해주는 역할

BOM(Browser Object Model)
- JavaScript가 브라우저와 소통하는 역할
- window객체를 제어함.

DOM 동작방식
브라우저가 서버에서 페이지에 대한 응답을 받아 화면에 표시하는 단계
1. DOM 트리 생성
2. Render 트리 생성 - 브라우저가 DOM과 CSSOM(javascript가 css를 조작할 수 있는 api)을 결합하는 과정으로 화면에 표시되는 노드의 정보, 스타일 정보를 포함

3. Layout - 브라우저 요소의 크기와 위치 계산
4. Paint - 실제 화면에 렌더링

Document Object 이용

document.getElementsByTagName으로 불러온 노드를 배열로 변환하는 방법

let li = document.getElementsByTagName('li'); //collection으로 출력
li = Array.from(li);
console.log(li); // 배열로 출력

innerHTML
html까지 같이 보여줌.
innerText
사용자에게 보여지는 화면 그대로 보여줌.(실제 코드에서 공백이 여러개이지만 1개 공백으로 처리)
textContent
display:none과 같이 숨겨진 노드도 출력하고 텍스트 값 그대로 보여줌.
childNodes 또한 collection 이며 collection의 특징은 아래와 같음.
- collection을 순환할때 for…of, forEach() 사용가능하며 for…in 은 사용 불가능함.
- collection은 배열이 아니기 때문에 filter와 같은 배열 메서드 사용 불가함.

event

eventBubbling
- 이벤트가 발생했을 때 중첩된 상위 요소로 이벤트가 전달되는 현상
- e.stopPropagation()으로 해당 현상을 막을 수 있음.
eventCapturing
이벤트가 아래 요소로 전달되는 현상
preventDefault()

별도의 브라우저 행위(ex. submit 태그 실행 시 화면이 새로고침 되는 현상)를 막을 수 있음.

2) 학습 내용에 대한 회고

연휴 겸 여행을 가게 되어 ktx 열차 안에서 틈틈이 강의를 들었다. 덕분에 진도를 따라잡을 수 있었지만 꼼꼼하게 내용을 기록하지 못해 아쉬웠다. 또한, 과제를 더 완벽하게 해낼 시간이 부족했기 때문에 2주차는 스터디에 시간을 더 소비해야겠다는 생각이 들었다.

미션

1) 미션 해결 과정

문제 현상
가위 바위 보 앱을 구현하며 다시 시작 버튼을 누르고 가위 바위 보 버튼 중 하나를 클릭하면 게임 총 횟수가 2개씩 줄어드는 현상이 발생했다.
문제점
콘솔로 가위 바위 보 버튼 이벤트 타겟을 찍어보니 클릭은 한 번만 했지만 이벤트 타겟은 2개가 찍히는 문제가 있었다.
원인
처음엔 버튼을 감싸고 있는 부모태그까지 이벤트가 전달되는 '버블링 현상' 인줄 알고 e.stopPropagation() 을 적용해보았지만 해결이 되지 않았다. 구글링을 통해 익명함수로 이벤트 리스너를 사용하면 새로운 객체로 생성되어 중복이 발생한다는 점을 알게되었다.
해결방안
익명함수 대신 선언적 함수로 코드를 수정하니 클릭 이벤트가 한번만 발생했다.

2) 미션 해결에 대한 회고

음식 메뉴 앱
반응형 레이아웃을 적용해보려고 노력했지만 의도와 다르게 정렬이 흐트러졌다. 해당 과제를 통해 css 지식이 많이 부족하다고 느꼈고 추후에 css 개념을 공부해서 수정해야겠다는 생각이 들었다. 지금은 JavaScript 공부에 더 집중해야겠다.

2. 가위 바위 보 앱, 퀴즈 앱
가위 바위 보 앱을 구현하며 이벤트 중복 현상을 해결하기 위해 시간을 많이 소비했고 처음부터 설계를 제대로 못해서 스파게티 코드가 된 것 같다. 평소에 토이 프로젝트로 프론트엔드 개발 역량을 많이 쌓아야겠다.

3. 퀴즈 앱
이전 과제들의 부족한 점을 생각하며 init() 함수에 미리 구현해야할 함수명들을 적어놓고 시작했다. 하지만 중간에 버튼을 변경하는 부분에서 코드가 꼬이기 시작하더니 마찬가지로 코드가 복잡해졌다.

retry, next 버튼을 변경하는 부분에서 display: none으로 스타일링에 변화를 줘야할지 innerText로 버튼명을 변경해야할지 고민을 했던 것 같다. 정답 코드가 나오면 더 효율적인 코드가 무엇인지 체크해봐야겠다.