profile
studying frontend

콜백함수 안의 코드 순서

위와 같은 코드가 있다고 가정하자.버튼이 클릭됐을때 웹 APIs에서 이벤트가 발생하면 이 콜백을 Task Queue에 넣어준다.콜백 안에서 작성한 코드는 어떤 순서로 작성하던 상관이 없다. 왜냐하면 이 콜백이 Call stack에 들어가는 순간 이벤트 루프는 이것이 다

2021년 1월 27일
·
0개의 댓글

requestAnimationFrame()

requestAnimationFrame: 이벤트가 실행될때는 코드를 변경하지 않고 나중에 브라우저가 화면을 업데이트 할 때 등록한 변경사항을 적용한다.Call Stack 안에서 코드 블럭이 실행되고 난 후 바로 setTimeout()의 콜백함수를 실행하고 싶을 때 이렇

2021년 1월 27일
·
0개의 댓글

class에서 this바인딩

class를 사용하고 class안의 함수를 다른 콜백으로 전달할 때에는 그 안에 포함돼 있는 class의 정보가 사라진다. 이렇게 되면 함수만 전달되고 class는 전달되지 않을 수가 있다.this와 함수를 묶을 수 있는 바인딩을 사용할 수 있다.예를 들어 this.o

2021년 1월 26일
·
0개의 댓글

Events

target 클릭시 브라우저는 capturing을 거치게 된다. 부모부터 해당 target 까지 내려간다.target의 EventHandler를 호출하고 bubbling을 거치면서 부모요소들의 EventHandler까지 다 호출해버린다.capturing단계에서 우리가

2021년 1월 20일
·
0개의 댓글
post-thumbnail

event.key

keypress 이벤트가 발생할때 어떤키가 눌리는지 알기 위해 디버그 창을 이용해 확인했다.그 후 코드 작성.

2021년 1월 20일
·
0개의 댓글

overflow-y

box에 item들이 y축으로 추가되면서 box밖으로 넘치는 상황이 있는데이럴 때 overflow-y: auto를 하면 box안에서 scroll된다.

2021년 1월 20일
·
0개의 댓글

DOM에 대해서

DOM이란? 브라우저를 이해할 수 있는 자신들만의 오브젝트로 변환하게 되는 것 ex) HTML의 ``가 javascript의 node라는 오브젝트로 변환됨. node라는 오브젝트는 EventTarget이라는 오브젝트를 상속한다. 즉 모든 node는 이벤트가 발생할 수

2021년 1월 20일
·
0개의 댓글

브라우저 좌표

요소의 사이즈나 위치에 관련된 정보를 얻어낼 수 있다.top, left, bottom, right, width, height 등 ( 이때 bottom, right는 css와는 다르게 위에서는 얼만큼 왼쪽에서는 얼만큼 떨어져있는지를 나타냄 )브라우저 window창에서 x

2021년 1월 18일
·
0개의 댓글

window size

모니터 사이즈브라우저 전체의 사이즈브라우저 페이지 + 스크롤 바문서 자체를 의미함 (스크롤 바 제외 영역)

2021년 1월 18일
·
0개의 댓글

window

window는 global object이다.따라서 console.log(this) = console.log(window)

2021년 1월 18일
·
0개의 댓글

reflow

리플로우는 문서 내 요소의 위치와 도형을 다시 계산하기 위한 웹브라우저 프로세스의 이름으로, 문서의 일부 또는 전체를 다시 렌더링하는 데 사용된다.리플로우는 브라우저에서 사용자를 차단하는 작업이므로, 개발자가 리플로우 시간을 향상하는 방법을 이해하고 다양한 문서 속성(

2021년 1월 1일
·
0개의 댓글

getBoundingClientRect()

getBoundingClientRect() 메서드는 요소의 크기와 viewport에 대한 요소의 위치에 대한 정보를 제공하는 DOMRect개체를 반환한다.

2021년 1월 1일
·
0개의 댓글

intersectionObserver

브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공한다.다수의 이미지가 중심이 되는 페이지에서 화면상의 모든 이미지를 한 번에 불러오면 불필요한 네트워크 비용이

2021년 1월 1일
·
0개의 댓글

깃헙꾸미기

깃헙 마크다운 확인 참고사이트https://dillinger.io/깃헙에 넣을 배찌 참고사이트https://shields.io/아이콘 참고 사이트https://simpleicons.org/깃헙 프로필 꾸미기 참고사이트https://g

2020년 12월 24일
·
0개의 댓글

위치 값 안 먹을때

박스 요소에 top: 20px과 같은 css를 먹이고 싶은데 적용되지 않는 경우가 종종 있다.그럴땐 현재 박스에 position: \*을 지정해 주어야만 위치 값이 먹는다.이런 실수는 안 하도록 하자.

2020년 12월 22일
·
0개의 댓글

box를 가운데 위치시키기

정렬할 박스의 속성을 부모 기준으로 absolute로 지정한다.left:0, right:0을 사용한다.양쪽(left,right) 방향의 margin을 auto로 지정한다.top:0, bottom:0을 사용한다.상하 방향의 margin을 auto로 지정한다.

2020년 12월 22일
·
0개의 댓글
post-thumbnail

grid 연습

그냥 연습...

2020년 12월 22일
·
0개의 댓글

SASS와 SCSS

css는 원시적인 문법이기에 고도화된 작업에서는 불편한 경우도 있다. css preproceccor(전처리기) 전처리기를 컴파일하는 작업이 필요하다 전처리기는 css문법과 굉장히 유사하지만 표준 css보다 많은 기능을 사용해 편리하게 작성이 가능하다. 웹에서는 동작하지

2020년 12월 22일
·
0개의 댓글
post-thumbnail

perspective를 통한 3D 연습

HTML CSS

2020년 12월 21일
·
0개의 댓글
post-thumbnail

hover시 박스의 색상과 글자 변경

< 평상시 >< hover시 >

2020년 12월 21일
·
0개의 댓글