분류 전체보기

[JavaScript] 스코프, 스코프 체인 , 렉시컬 스코프

스코프 ( Scope ) 스코프란 유효 범위로, 정의되어 있는 변수를 사용할수 있는 영역을 의미한다. 자바스크립트에는 크게 2가지 타입의 스코프가 있는데 전역 ( Global ) 과 지역 ( Local ) 로 나뉜다. 전역 상태란 함수의 외부에서 선언된 변수로, Local 상태는 함수안에 선언된 변수로, 그 함수에 대해 지역 변수를 갖는다. 지역 변수는 지역 범위 ( Local Scope ) 를 갖는다. let a = 1; function foo() { let b = 2; function bar() { let c = 3; console.log(a + b + c); // 6 } bar(); } 위 코드에서 a, b, c 는 모두 변수이다. a, b, c 는 모두 foo() 함수 내부에서 선언되었기 때문에 ..

[JavaScript] 이벤트 버블링과 이벤트 캡처링, 이벤트 위임

이벤트 버블링 이벤트 버블링은 이벤트가 DOM 트리를 기준으로, 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 의미한다. 하위 요소에서 상위 요소로 거슬러 올라가는데 마치 거품같다고해서 이벤트 버블링 이라고 칭한다. div1 div2 div3 자바스크립트는 기본적으로 대부분의 이벤트에 버블링이 발생하기에 이 코드의 경우 three div 를 누르게 되면 three, two, one 순서로 이벤트가 실행되게 된다. 이벤트 캡처링 이벤트 캡처링은 실제로 잘 일어나지는 않지만, 부모 요소에서 자식 요소로 전달하는 것을 이벤트 캡처링이라고 한다. 위의 코드에서 이벤트 리스너의 세번째 인자에 capture 옵션을 true 로 선언하면 이벤트 캡처링이 발생한다. div1 div2 div3 이렇게 실행하면..

[JS] var, let, const 의 차이점 ( Feat. 호이스팅 )

정리 var, let, const 는 모두 변수 선언자로 let, const 는 ES6에서 추가 되었다. 차이점은 변수 재선언과 재할당, 스코프 가 있다 var let const 스코프 Function Scope Block Scope Block Scope 재할당 / 재선언 재할당, 재선언 가능 재할당 가능 불가능 각 선언자의 특징 var console.log(a); // undefined var a = 1; console.log(a); // 1 var a = 2; console.log(a); // 2 if (true) { var a = 3; } console.log(a); // 3​ 변수의 중복 선언이 가능하다. 그래서 변수 a 는 2로 그리고 3으로 재할당된다. 함수 스코프를 가진다. 그래서 함수를 벗..

[JS] Virtual DOM 과 Real Dom 의 차이점

DOM ( Document Object Model ) : HTML 문서를 객체로 표현한 것. Virtual DOM vs Real DOM 현재 DOM 은 SPA 프레임 워크들의 대세로 인해 Virtual DOM 을 많이 쓰는 추세고, 최근에 뜨는 Svelte 는 Real Dom 을 사용한다고 해서 한번 정리해보았다. Virtual DOM Virtual DOM 은 Vue, React 에서 주로 사용된다. 실제 DOM을 건드리지 않고 가상으로 또 하나의 DOM 을 만들어, 현재의 DOM 과 비교 후 차이점 있는 DOM 만 업데이트 하는 방식으로, 이로 인해 Virtual DOM 을 쓰는 언어들의 불변성이 중요하다. Real DOM Real DOM 은 옛날 HTML 에서 쓰이다가 현재 Svelte 라는 프레임워..

[CSS] FlexBox 란 무엇인가

웹에는 Layout 이라는 구성 요소가 존재한다. Layout 을 구성하는 가장 많이 쓰이는 요소인 Flex 와 Grid 가 가장 많이 사용되는데, 오늘 알아 볼것은 간단히 Flex라고 부르는 이 녀석은 사실 Flexible Box 의 줄임말로 유연한 느낌이 드는 이미지다. Flex 는 CSS3 에 나온 레이아웃 방식으로, 장점은 복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다.

[JS] Callback, Promise 그리고 Async/Await

비동기 처리를 동기 처리 하는 방법 동기와 비동기란? 동기적 처리와 비동기적 처리의 차이는 데이터의 요청과 결과가 동시적인지 아닌지에 대한 것이다. 동기적 처리는 서버에 요청을 하면, 얼마가 걸리던 기다려야한다. 예를 들어 치킨을 먹기 위해 치킨을 시켰는데 동기적 처리로 치킨을 시켰으면 치킨이 올때까지 아무것도 못하고 대기 해야한다는 뜻이다. 비동기적 처리는 그 동안 기다리면서 게임을 할 수도 있고, TV를 볼 수도 있고 아니면 둘 다 할 수도 있다는 것이다. 자바 스크립트는 싱글 스레드 언어기에 한번에 한가지 일만 가능하다. 그래서 이를 빨라 보이게 해결하려면 비동기적 처리가 필요한데 예를 들면 라면 끓일때 물을 끓이면서, 쪽파를 좀 썰어놓는다던가 하는 식으로 말이다. 콜백 함수 콜백함수는 특정 시점에..

[HTML] 시맨틱 마크업( Semantic Markup ) 이란 무엇인가

시맨틱 이란 의미론적인 이란 뜻 이고, 마크업이란 마크업 랭귀지로 표현하는 것을 의미한다. 즉 마크업의 의미를 잘 전달되게 작성하는 것을 의미한다. 시맨틱 마크업의 각 태그의 용도는 다음과 같다. 헤더와 푸터에 를 사용 메인 컨텐츠에 과 을 사용 독립 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 내비게이션은 사용 만약 누군가의 코드를 봤는데 헤더 콘텐츠에 id 값이 Footer 거나 Titles 등 시맨틱 하지 않은 코드를 작성한다면, 한눈에 이 코드를 파악하기 어려울 것이다. 그래서 시맨틱 마크업의 특징 중 하나는 다른 사람이 보기에 가독성이 높고, 다른 개발자가 코드를 작성하더라도 쉽게 의미가 파악되니까 유지, 보수에도 편리하다.

[CSS] CSS in JS 의 장단점

CSS in JS 는 스타일을 css 파일 대신 자바스크립트 파일로 하는 것으로, 대표적으로 Styled-Component 가 있다. CSS-in-JS의 장점 CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다 (모듈성) CSS-in-JS는 JavaSript 환경을 최대한 활용 할 수 있다 JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다 현재 사용중인 스타일만 DOM에 포함한다. CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다 CSS-in-JS의 단점 러닝 커브 새로운 의존성 별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다 인터랙션한 페이지일 경..

[CSS] display 속성에 대해

display 속성값의 종류 1. none display: none; 요소를 렌더링하지 않도록 설정합니다. visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않습니다. 2. block display: block; 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락입니다. 3. inline display: inline; block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해..

[CSS] Margin 과 Padding 의 차이점

Margin - Border 외부 크기 - Object 와 화면간의 여백 - 이 값을 조작하면 Object 가 주변 요소와 거리가 생긴다. Padding - Border 내부 크기 - Object 의 내부 여백 - 이 값을 조작하면 Object 의 내부 여백이 생겨 Border 가 뚱뚱해진다.