js-study

브라우저에는 아래와 같은 그림으로 나타난다.event.target은 this는 위의 두 값을 다르므로 while문을 진행하며 target.tagName은 strong이므로 if문을 실행하지않고 target은 부모노드인 이것으로 바뀐다. 다시 while문을 진행하여 if

return false (js에서 addEventListener, 이벤트리스너 프로퍼티에서도 적용)event.preventDefault()기본적 의미로 따지기1\. Default => 기본 2\. Default 행동 => ex) a태그로 웹페이지 로드, submit 버

이벤트 객체는 다음과 같이 생성한다.let event = new Event(type, options);options – 두 개의 선택 프로퍼티가 있는 객체가 옵니다.bubbles: true/false – true인 경우 이벤트가 버블링 됩니다.cancelable: tr

mousedown : 왼쪽 버튼을 누를때mouseup : 버튼을 누르고 있다가 뗄 때(모든버튼해당)mouseover(~위에) : 마우스 커서가 요소 바깥에 있다가 요소 안(요소 위에)으로 움직일 때mouseout : 커서가 반대로 요소 안에 있다가 밖으로 나갈 때mou

mouseover / mouseoutevent.target / event.relatedTarget짧게 정리하면 onmouseover 버튼 클릭시 해당 div(1,2,3층 전부포함) 하나에서 다른 div로 이동 할 경우 이동에 대한 alert이 발생한다. onmouseo

url 구조<스키마>://<호스트>:<포트>/<경로>?<질의>스키마 : 사용할 프로토콜을 말하며, 리소스에 어떻게 요청, 접근할 것인지를 명시호스트와 포트 : 하나의 Host( 컴퓨터 )에는 여러 개의 Process( 프로그램 )이 각각의 S

HTML의 태그를 절대 위치에 배치할 수 있다. 절대 위치는 left, top, bottom, right 프로퍼티 값으로 정하며, 이 값들은 부모 태그 안에서의 상대 좌표이다. ball.style.position = 'absolute';로 객체인 ball을 자유롭게 이

기본적으로 브라우저에는 drag와 관련한 드래그 앤 드롭을 지원이 지원하는 곳이 있다. 이를 내가 원하는 코드와 충돌하지않게 하기 위해서는 이러한 내용을 추가해주어야 한다.다양한 터치 장치들이 증가하면서 필요성이 요구된 내용들ex) 멀티터치pointerId – 이벤트

event.key : 현재 키보드에서 존재하는 알파벳과 숫자 값event.code : 키보드의 위치에 따라 달라지는 코드1\. 문자 키 => "Key": "KeyA", "KeyB"등 (NOT keyA)2\. 숫자 키 => "Digit": "Digit0", "Dig

스크롤document.body.clientHeightwindow.innerHeightwindow.outerHeight페이지의 스크롤링에 반응끝없는 페이지중요도: 5끝없는 페이지를 만드십시오. 방문자가 끝까지 스크롤하면 현재 날짜-시간이 텍스트에 자동으로 추가되어 방문자

숫자들 중앙에 일정크기로 배치일정 스크롤이후의 위치에서 고정 버튼 보이게 만들기왼쪽에 고정된 위치에 버튼 보이게 하기클릭시 맨위로 보내기margin:0 auto로 중앙배치를 시키고 width를 설정하여 그 크기 안에서 숫자가 출력되게 만든다.스크롤 시 window.i

이번주제는 내가 추천한 주제로 생활코딩에서의 흥미로웠던 python을 js에서 활용할수있는 것이 흥미로워 추천해보았다. Danfo.js는 구조화 된 데이터를 조작하고 처리하기위한 직관적이고 사용하기 쉬운 고성능 데이터 구조를 제공하는 오픈 소스 JavaScript 라이

value context메모리 주소는 관계없이 메모지 주소안의 값이 같으면 같다고 인식Identifier context같은 메모리 주소일 경우 같다고 인식ex)a와 b는 가르키는 메모리 주소도 다르다. 하지만 같은 값을 가지고 있다. substitution (확장된

업캐스팅 : 자식 클래스가 부모 클래스 타입으로 캐스팅되는 것 ( 서브 클래스가 슈퍼 클래스로 취급)다운캐스팅 : 부모 클래스가 자식 클래스의 타입으로 캐스팅되는 것 ( 자신의 고유한 특성을 잃은 서브 클래스의 객체를 다시 복구 시켜주는 것)s(자식클래스)가 p(부모클

라이브러리는 제어의 역전을 X프레임워크는 제어의 역전을 Ostate는 setState로만 수정이 가능하고 state가 변경되면 setState함수 안의 render를 실행한다.Vanilla Javascript로 컴포넌트 만들기

Model + View + Controller● Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다. (간단히 데이터 모임)● View : 사용자에서 보여지는 UI 부분입니다.● Controller : 사용자의 입력(Action)을 받고 처

== : 비교할 수 있는 형태로 변환 시킨다 (타입이 다를경우 강제형변환)ex) 254 == '254' //true=== : 형변환을 하지 않고 연산한다.ex) 254 === '254' //falsetype에서는 "number" , "boolean" , "string"

ViewModelbinderscannerclient해당 Binder에서 필요한 기능을 추가하거나 처리하는 기능을 수행한다. (제어역전)간단히는 우리는 필요한 viewmodel만 수정함으로써 해당 style, events, properties와 관련한 내용들이 알아서 추

Strategy Pattern >전략을 쉽게 바꿀 수 있도록 해주는 디자인 패턴 function 사용 Class 사용 >전략을 설정하는 부분 따로, 실행하는 부분 따로라서, 전략을 설정해두면 실행하기 전에 자유롭게 전략을 바꿀 수 있다. Dependency In

덩어리 진 것을 분리하는 과정변화에 기민하면서도 효율적으로 대응하는 다양한 개발 방법론개발해 나가면서 필요한 것들을 피드백을 바탕으로 주도적으로 개발일정기간 협력과 피드백의 반복권한이 있으면 책임이 있고 책임이 있으면 권한이 있어야한다.viewModel이 heavy한

순수한 view모델과 관련된 내용만 존재subject와 관련된 기능만 모음위의 3개 모두 ViewModelValue를 의존한다.(선이 많이 몰린 대상은 수정하기 어려운 객체이다)A->B일경우 A는 B를 알지만 B는 A를 모른다.visit메소드 위임, scan 추상메소드

optional : else를 사용하지않음 (반드시 일어나지는 않음)mandatory : else를 사용함 (반드시 일어나는 일이 존재)이를 수정해준다. Processornext 함수를 추가한다. next를 이용해서 연결짓는다.

this의 일반함수와 화살표함수EventListener객체의 메소드에서 thisuse strict에서의 this화살표함수는 안에잇는 this가 변하지않는다. 즉, this를 계속 유지하고싶다면 화살표함수를 써야한다.이벤트핸들러에서 조차 this는 일반함수로 쓰게되면 코

Normal Flow >각각의 요소들이 배치되는 순서 ex) block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것 IFC BFC >BFC : 요소를 세로로 배치하는 컨텍스트 (block 관련) IFC : 요소를 가로로 배치하는

float는 BFC나 IFC가 아닌 Line box 형식으로 그려진다.normal flow는 BFC IFC Relative로 그려진다.float가 있는 형태를 만날경우 기존까지의 BFC 형태를 파기하고 새로운 BFC를 생성float는 inline요소에 guard로 작동

BFC 위에 BFC가 존재하는 형태이며 해당 영역의 크기만큼 이때 float는 INLINE-GUARD 원칙에 의해 ABCDEFG 전부가 해당 영역에서 불가능하므로 7번 바로위에 위치하게된다.새로운 BFC를 만들어 내어 FLOAT 영역을 제외한 부분으로 만들어내고 ov

padding : 콘텐츠를 직접 둘러싸고 있는 내부 여백 (내부여서 색깔도 내부에 영향을 받음)border : 패딩 외부의 외곽선이나 직선이나 점선 혹은 이미지로 입힐 수 있음margin : 박스의 맨 바깥 영역contents box : width를 contents 크

geometry 계산이 다 끝나서 fixed 넘버 체계로 바뀌어 있을때의 체계 (계산한 결과)NULLroot , HTML, BODYPOSITON:FIXEDOUT OF DOM TREERECURSIVE SEARCH PARENT.POSITION:FIXED = NULLPARE

JavaScript에서 CSS를 조작할 수 있는 API 집합TypeselectorTextstyleconsole.log(rule.type,rule.selectorText,rule.style)type => 1 selectorText => ".test"style => 관련내

vendor prefix 해결 => 웹브라우저 마다 prefix를 붙여야 그나마 다른 방식의 지원을 막을 수 있는 것 같다. css 동적 조정웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(pr

실행이되면 Style클래스에 의해 다시 생성한 this.\_style에서 set 메소드를 진행하여 처리한다. (set에서 return this를 하는 이유는 set을 병렬로 연결하기 때문)

sheet 클래스 전체코드

차세대에서 사용하는 CSSOMhoudini에서 css 엔진과 간련 기능을 빠르게 표준화하는 것이 목표로 현재 여러 API들을 진행둘다 height가 100px로 적용이 된다. 현재 구글 브라우저에서는 attributeStyleMap을 사용중이다.js 애니메이션 프레임워

Geometry - reflowFragment - repaintPost process - 픽셀, 색깔 blur 등의 수많은 변형 가능계산을 해서 바로 bitmap에 쓰는 것이 아닌 메모리에서 조작한 이후에 그림 그린다.CPU -> geometry, fragmentGPU

라디안 : 호의 길이가 반지름과 같게 되는 만큼의 각디그리 : 일상에서 사용하는 각도180 degree = (π \* radian)radian = 57.295....부채꼴 도형에서 반지름, 중심각, 호의 길이 3가지 중에 2가지만 알면 다른 한가지는 바로 쉽게 구할

CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점 해결

HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공기존에 Dom구조에 밀접하게 연결되어 있으면 html코드나 css 코드를 함부로 고치기 어렵게 된다. header>div>p 형태의 Dom 구조를 가진 css는 고치기 어려운 예시이다. 이를 벗

W3C validate 를 통과하기 위한 스펙으로 data-를 통해 진행한다.결과 : hika k123해당 data-member-id는 dataset.memberId로 바뀌게 처리된다. index.htmlapp.scssapp.css

display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정1) outside : 요소의 외부 디스플레이 유형 설정2) inside : 요소의 내부 디스플레이 유형