ETC/CS

attribute와 property의 차이점은? attribute는 HTML 요소의 추가적인 정보를 전달하고, 이름=“값” 이렇게 쌍으로 온다. 예를 들어 를 보면 div 태그가 class 라는 값이 ‘my-class’인 attribute를 가지고 있다. property는 attribute에 대한 HTML DOM tree 안에서의 표현이다. 따라서 다음 예시에서 attribute는 값이 ‘my-class’이며 이름이 ‘className’인 property를 가진다. Our DIV node |- nodename = "DIV" |- className = "my-class" |- style |- . . . |- . . . attribute는 HTML 텍스트 문서에, property는 HTML DOM tree에..

화살표 함수와 일반 함수의 차이점은? 화살표 함수는 일반 함수보다 함수를 간단히 표현할 수 있는 ES6 문법이다. 그런데 일반 함수는 this가 동적으로 바인딩되는 반면, 화살표 함수는 this에 대한 바인딩이 없다. 또한 화살표 함수는 프로토타입 프로퍼티를 갖고 있지 않아 생성자나 메서드로 사용할 수 없다. 그리고 일반 함수에서는 코드가 실행될 때 암묵적으로 arguments 객체가 전달되어 사용 가능하지만, 화살표 함수에서는 arguments 객체가 전달되지 않는다. 객체 프로토타입으로 메서드를 선언할 때 화살표 함수는 부적합하다. 생활코딩, JavaScript : this (2/5) : 메소드와 this 드림코딩, 자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론..

props와 state란? (필수) props와 state는 일반 JavaScript 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있다. 그러나 props는 함수의 매개변수처럼 컴포넌트에 전달되는 반면, state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다. 한편 setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링된다. setState()를 사용해 state 값을 업데이트하면 자동으로 리렌더링되지만, setState()의 비동기적 특징을 주의해서 사용해야 한다. setState()가 있을 경우, React는 다른 state 변경까지 한꺼번에 통합해 React 자신이 판단하기에 가장 적절한 시기에 DOM을 ..

JavaScript ES6-11 최신 문법 공부하기 Shorthand property names Destructuring assignment Spread syntax (...) Default parameters Conditional (ternary) operator Template literals Optional chaining (?.) Nullish coalescing operator (??) 드림코딩, 자바스크립트 최신 문법 (ES6, ES11) | 모르면 후회 하는 최신 문법과 사용법 정리 🐶 DOM과 virtual DOM이란? (어려움) DOM(Document Object Model)은 HTML 및 XML 문서의 프로그래밍 인터페이스를 말한다. HTML은 브라우저에서 실행될 수 있게 DOM tre..

CSS Flexbox란? CSS Flexbox란 기존 콘텐츠를 수직/수평 배치할 때, float나 inline-block으로 마크업할 때의 불편함을 쉽게 해결할 수 있게 추가된 기능이다. 다양한 디바이스 환경에서 언제나 같은 레이아웃을 유지시켜 반응형 웹사이트 제작에 유용하게 쓰인다. Flex는 콘텐츠를 감싸는 상위 부모 요소인 flex container와 각각의 콘텐츠들인 자식 요소 flex Item으로 구성되어 있다. CSS Flexbox를 적용하는 방법은 부모 요소인 container에 display:flex를 선언하면 된다. flex container에는 전체적인 정렬과 관련된 속성인 display, flex-direction, align-items, flex-wrap 등을 정의하고, 자식 요소인..

브라우저의 동작 순서는? (어려움) 사용자가 브라우저를 통해 웹 사이트에 접속하면 브라우저는 DNS를 통해 웹 서버의 IP 주소를 파악한다. 브라우저는 이렇게 파악한 IP 주소에 있는 서버와 3 Way Handshake를 완료하고 서버에 데이터를 요청하는 HTTP Request를 한다. 그리고 서버로부터 데이터를 받는데, 이를 HTTP Response라고 한다. 서버로부터 받은 데이터에 HTML을 파싱해 DOM tree를 만들다가 중간에 스타일 태그가 나오면 CSS를 파싱해 CSSOM tree를 생성한다. 파싱 중간에 스크립트 태그가 나오면 JavaScript 엔진에 권한을 넘겨 JavaScript 코드를 파싱해 AST를 생성 후 실행한다. 그리고 DOM tree와 CSSOM tree를 합쳐 Render..

로컬 스토리지와 세션 스토리지 로컬 스토리지와 세션 스토리지는 HTML5에서 새로 추가된 저장소이다. 간단한 키(key)와 값(value)을 저장할 수 있다. 키-값 스토리지의 형태이다. 로컬 스토리지와 세션 스토리지의 차이점 로컬 스토리지와 세션 스토리지의 차이점은 데이터의 지속성이다. 로컬 스토리지의 데이터는 사용자가 임의로 지우지만 않으면 계속 브라우저에 남아 있다. 반면 세션 스토리지의 데이터는 브라우저 탭을 닫는 순간 삭제된다. 지속적으로 필요한 데이터(자동 로그인)는 로컬 스토리지에 저장하고, 일시적으로 필요한 정보(비로그인 장바구니)는 세션 스토리지에 저장하면 된다. 따라서 비밀번호 같은 개인 정보는 세션 스토리지에 저장하면 안 된다. 클라이언트에 저장하는 방식이므로 정보 유출 위험이 있기 ..

스네이크 표기법(Snake Case) 띄어쓰기를 언더바(_)로 표기한다. number_of_donuts = 34 fave_phrase = "Hello World" 케밥 표기법(Kebab Case) 띄어쓰기를 대시(-)로 표기한다. number-of-donuts = 34 fave-phrase = "Hello World" 카멜 표기법(Camel Case) 첫 번째 단어는 소문자로, 두 번째 단어부터 첫 글자를 대문자로 표기한다. numberOfDonuts = 34 favePhrase = "Hello World" 파스칼 표기법(Pascal Case) 첫 번째 단어부터 첫 글자를 대문자로 표기한다. NumberOfDonuts = 34 FavePhrase = "Hello World"