window.scrollY문서가 수직으로 얼마나 스크롤 되는지를 알려준다.Element.getBoundingClientRect()브라우저에 실제로 보여지는 width, height값을 알아내고자 할 때!만약 transition을 활용해 크기를 변환시킨 element
HINT! 각각의 카테고리와 프로젝트에 data-\* 를 넣어줘서 클릭할 때마다 class를 추가해 어떤 프로젝트를 노출시킬지 정해준다!지정된 셀렉터 그룹의 리스트를 받아온다! 내 프로젝트에서는 각각의 프로젝트 리스트를 받아오는 것!for문을 좀 더 간결하게 사용할 수
카테고리 버튼을 클릭 할 때 css 효과를 주고싶은데...JS클릭한 이후 클래스를 만들고 css를 입히는 것을 계획했으나, 추가한 클래스가 일정 시간 이후에 remove되지 않는다면 내가 원하는 애니메이션이 적용되지 않는 다는 것을 알 수 있었다.이럴 때 사용할 수 있
브라우저가 html파일을 다운받을 때, 위에서 부터 한 줄 한 줄 읽으면서 내려오게 된다. 이 때, script 부분을 만나면 javascript를 다운로드 받게 된되는 것.이렇게 한 줄, 한 줄 읽으면서 이해한 것(parsing하는 것)을 css와 결합하여 dom 요
여러번 재사용이 가능. one function = one thing ( 하나의 함수는 하나의 일만 하는게 좋다.)함수의 이름은 동사로! ex) addItems,createItem ...function is Object!! - 변수 할당 가능, param으로 사용 가능위
Class > 우리가 ppt를 만들 때, 사용하는 template이라고 생각하면 된다!! 한 번 만들어 놓으면 다양하게 활용이 가능. class = 붕어빵 틀! 팥을 넣으면 팥 붕어빵. 크림을 넣으면 크림 붕어빵 이러한 class에 데이터를 넣어 만든 팥 붕어빵,
javascript의 데이터 타입 중 하나!모든 javascript의 객체는 Object를 상속해 모든 속성과 메서드를 사용할 수 있다.문법Object의 'key'값을 어떻게 하면 변수값으로 넣을 수 있을까?!이 때 주의 할 점은 key값이 반드시 String 으로 들
javscript는 다른 언어와는 다르게 타입을 동적으로 정의되게 때문에 하나의 자료구조에 타입이 서로 다른 Object들을 담을 수 있다. 항상 같은 타입을 담으려고 하쟈 ㅎㅎ선언과 APIs 정리!배열 안 각각의 element에 대한 callback 함수를 실행할 수
Splice() vs Slice() splice로 짤라내면 배열까지 잘라버린다!! slice로 짤라내면 본 배열의 요소들은 유지 시키고 잘라온다!
브라우져에서 동작하는 웹 어플리케이션/웹 사이트(client)는 서버(server)와 어떻게 통신할까!?HTTP(HyperText Transfer Protocol)어떻게 하이퍼텍스트를 주고받을 수 있을까?에 대한 하나의 규약!여기서 하이퍼텍스트란 링크,이미지,문서 모두
javascript is syncronousHoisting된 이후 코드블럭이 순서대로 실행!var(변수선언), function declaration(함수 선언) 들이 가장 상단으로 올라가는 것!브라우저에 요청해 1초 뒤에 숫자 2를 출력해줘!! 라고 요청하고! 다시
JS에서 비동기를 편리하게 할 수 있도록 도와주는 objectpending -> promise가 생성되고, 우리가 지정한 operation이 실행중..fulfilled -> 실행 완료!rejected-> 실행 실패!원하는 데이터를 만들어내는 producer(promis
코드만 보면 동기적으로 실행되는 것 처럼 보이나(가독성 증대 효과!) 손쉽게 비동기 처리 가능 (promise/then) 의 단점(콜백지옥) 개선 가능!!!async만 앞에 붙여주면 그냥 promise가 return되어 버린다!!(완전 편함)코드의 간결성, 가독성 모두
모르면 손해!! 더욱 간편해진 최신 문법을 공부해뷰쟈!'구조분해 할당' 이라고 불린다. 배열이나 object내 값들을 정해진 변수에 할당하여 편하게 호출 가능하다!기존에는 이렇게 하나하나 변수에 나눠서 할당해 줘야하지만destructing assignment를 활용한다
브라우저는 어떻게 화면 내의 특정 이벤트를 감지할까?? 또 감지한 이벤트를 어떻게 다른 화면에 전파할까?? 이벤트 등록 > 웹 어플리케이션에서 사용자의 입력을 받기 위한 기능 우리는 를 사용하여 사용자의 입력에 따른 추가적인 동작들을 구현할 수 있다. click
DOM (Document Object Model) > DOM이란 웹페이지의 HTML을 계층화시켜 tree구조로 만든 객체 모델이다. Javascript는 이 모델로 웹 페이지에 접근, 수정할 수 있다.