🔴들어가기 앞서..
본 글은 js에 대한 cs지식에 관한 작성글로 수정하여 점차 지식 내용을 늘려나갈 예정이다. cs지식들을 간단하게 정리하였으며, 추가적으로 공부가 필요한 부분은 세부적으로 들어가 글을 따로 작성해 링크를 첨부할 예정이다.
1.언제 document.write()를 사용해야 할까?
자바스크립트에서 document.write()를 사용하면 화면에 직접 데이터를 출력할 수 있지만 기능적으로 문제가 되지는 않지만 주의해야 할 필요가 있다. 웹 페이지의 모든 내용이 로딩된 후에 document.write()메소드가 실행되면 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력하게 된다. 또한 문서가 덮어써질 가능성도 있다. 따라서 데이터 값 확인이나 디버그 등의 테스트 이외의 용도로 사용할 때는 주의해서 사용해야 한다.
2.반응형 디자인은 적응형 디자인의 차이점
웹사이트를 볼 때 보기 위한 기기로 모바일, pc, 태블릿 등등 많은 환경에서 사용자가 이용이 가능하다. 저마다 다른 환경에서 어느정도 유동적으로 컨텐츠 크기 조절 및 배치를 디자인하는 것이 반응형 웹 디자인이라고 할 수 있다.
flex, grid, %,vw,vh, 등을 사용하여 유동적인 레이아웃을 구성하여 반응형 웹 디자인을 할 수 있다. 모든 디바이스에서 하나의 템플릿이 적용되어 해상도에 맞는 화면이 렌더링 되지만 로딩 속도가 느려진다.
적응형 웹 디자인은 모바일, 태블릿, pc 등등 각각의 디바이스 별로 독립적인 템플릿을 만들고 각각의 디바이스에 맞는 페이지를 별도 제작 후 랜딩되는 웹이다. 한마디로 각각 디바이스의 링크가 독립적인 형태를 지닌다는 것이다. 예를 들어 pc에서 네이버는 naver.com이지만 mobile에서는 m.naver.com으로 렌더링 된다. 감지된 디바이스에 맞는 필요한 콘텐츠만 다운받고 렌더링하여 로딩속도가 반응형보다는 빠르다.
3.이벤트 버블링이란?
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. 간단히 얘기하자면 브라우저가 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식이다.
반대로 이벤트 캡쳐링은 상위 컴포넌트에서 하위 컴포넌트로 이벤트를 전파시키는 것을 의미한다.
4.이벤트 위임(Event Delegation)
이벤트 위임은 상위 요소에서 하위 요소의 이벤트를 제어하는 방식입니다. 한마디로 이벤트 캡쳐링을 활용하는 것이다. 이벤트 위임을 사용하면 상위요소 이벤트하나만으로 하위요소 이벤트들을 제어할 수 있다. 예시와 해결 방안은 따로 링크를 게시하겠다..
이벤트 위임 예시 및 해결 방안
5. Function 에서 화살표함수와 일반함수
일반적으로 쓰이는 일반함수에서 es6이 업데이트 되면서 화살표함수가 새로 추가 되었다. 화살표함수는 기존의 일반 함수 방식에서 간소화하는 함수라고 말 할 수 있다.
const func1 = function(매개변수){ //기본적인 일반 함수 } const func2 = (매개변수) => { } //화살표를 이용한 화살표 함수
📃
1. this
일반 함수와 달리 화살표 함수 본문에 사용되는 this에 대한 바인딩이 없다.
2. arguments
일반 함수에서는 arguments객체가 사용 가능하지만, 화살표 함수에서는 사용할 수 없습니다.
3. 생성자 함수(new)
일반 함수에서는 사용가능하지만 화살표함수는 사용 못한다.
6. undefined와 null
일반적으로 undefined와 null을 착각하기 쉽다. 값이 아예 없는거라고 생각 할 수도 있을것이다. 그러므로 확실히 넘겨 집고 가야한다.
👉 undefined
undefined는 값이 undefined로 유일하다. 기본적으로 변수를 선언해 놓고 선언 이후에 값을 할당하지 않으면 undefined가 반환된다. 즉 초기화되지 않은 변수라고 볼 수 있다.
let a;
console.log(a); //undefined
console.log(typeof(a)); // undefinedundefined는 개발자가 의도적으로 사용하기 위한 값이 아닌 자바스크립트 자체에서 지정하는 것이며 의도적으로 undefined를 할당하면 시스템에서 오류가 날 수 있다.
👉 null
null은 값이 없다는 의미로 선언되지 않은 것과는 의미가 다르다. 의도적으로 개발자가 null값을 선언하여 프로그래밍을 할 수 있다.
let a = null;
console.log(a) //null
console.log(typeof (a)); //object (null이 값이 없는것뿐이지 선언되지 않은 것이 아니기 때문이다)